/* =========================
   Secuvast Design System v1
   ========================= */

/* Tokens */
:root{
  --sd-radius-lg: 1.1rem;
  --sd-radius-md: .9rem;
  --sd-shadow-1: 0 22px 45px -30px rgba(15,23,42,.28);
  --sd-border: 1px solid rgba(15,23,42,.10);
  --sd-muted: #64748b;
  --sd-primary: #4f46e5;
  --sd-surface: #ffffff;
  --sd-surface-2: #f7f8fc;
}

body.theme-carbon{
  --sd-surface: rgba(15,23,42,.90);
  --sd-surface-2: rgba(15,23,42,.85);
  --sd-border: 1px solid rgba(148,163,184,.25);
  --sd-muted: rgba(226,232,240,.90);
}

/* Scope global suave (tarjetas, badges, tooltips "i") */
.sd-app .card{
  border: var(--sd-border);
  border-radius: 1rem;
  box-shadow: var(--sd-shadow-1);
}

.sd-app .badge.bg-light{
  background-color: rgba(15,23,42,.08) !important;
  color: #475569 !important;
}
body.theme-carbon .sd-app .badge.bg-light{
  background-color: rgba(148,163,184,.18) !important;
  color: rgba(226,232,240,.9) !important;
}

/* Icono “i” (tooltip) unificado */
.sd-app .form-hint-trigger{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.75rem;height:1.75rem;border-radius:999px;
  color:var(--sd-muted);
  transition: color .2s, background-color .2s;
}
.sd-app .form-hint-trigger:hover,.sd-app .form-hint-trigger:focus{
  color:var(--sd-primary);
  background-color:rgba(79,70,229,.08);
  outline:none;
}
.sd-app .form-hint-trigger .material-symbols-rounded{font-size:1.1rem}

/* Formularios BubbleB (inputs/ selects/ textareas) */
.sd-form .form-control,
.sd-form .form-select{
  border:none;
  border-radius: var(--sd-radius-lg);
  background: var(--sd-surface-2);
  padding:.9rem 1.05rem;
  box-shadow:
    10px 12px 26px -16px rgba(15,23,42,.12),
    -8px -8px 22px -18px rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(15,23,42,.06);
  transition: box-shadow .2s, transform .1s, background .2s;
}
.sd-form textarea.form-control{min-height:110px}

.sd-form .form-control:hover,
.sd-form .form-select:hover{
  box-shadow:
    12px 14px 30px -16px rgba(15,23,42,.12),
    -8px -8px 22px -18px rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(15,23,42,.08);
  transform: translateY(-1px);
}
.sd-form .form-control:focus,
.sd-form .form-select:focus{
  box-shadow:
    14px 16px 34px -14px rgba(15,23,42,.12),
    -8px -8px 22px -18px rgba(255,255,255,.85),
    0 0 0 4px rgba(79,70,229,.12),
    inset 0 0 0 1px rgba(79,70,229,.22);
  outline:none;
  background: var(--sd-surface);
}
.sd-form .form-control.is-invalid,
.sd-form .form-select.is-invalid{
  box-shadow:
    14px 16px 34px -14px rgba(220,53,69,.15),
    -8px -8px 22px -18px rgba(255,255,255,.85),
    0 0 0 4px rgba(220,53,69,.12),
    inset 0 0 0 1px rgba(220,53,69,.45);
}

/* Compacto para inputs de tabla/líneas (presupuestos, órdenes, etc.) */
.sd-compact .form-control,
.sd-compact .form-select{
  padding:.6rem .8rem;border-radius: var(--sd-radius-md);
  box-shadow:
    8px 10px 24px -18px rgba(15,23,42,.12),
    -6px -6px 18px -18px rgba(255,255,255,.85),
    inset 0 0 0 1px rgba(15,23,42,.06);
}

/* Modo oscuro ajustes finos */
body.theme-carbon .sd-form .form-control,
body.theme-carbon .sd-form .form-select{
  background: rgba(15,23,42,.90);
  color: rgba(226,232,240,.96);
  box-shadow:
    14px 16px 34px -14px rgba(2,6,23,.8),
    -10px -10px 24px -20px rgba(255,255,255,.05),
    inset 0 0 0 1px rgba(148,163,184,.18);
}
body.theme-carbon .sd-form .form-control:focus,
body.theme-carbon .sd-form .form-select:focus{
  box-shadow:
    16px 18px 40px -16px rgba(2,6,23,.9),
    -10px -10px 24px -20px rgba(255,255,255,.06),
    0 0 0 4px rgba(139,149,255,.18),
    inset 0 0 0 1px rgba(139,149,255,.4);
}

/* EXCEPCIONES (no tocar) */
.sd-form .ql-editor,
.sd-form .ql-container,
.sd-form .ql-toolbar{ all: revert; }
.sd-form .form-control[readonly],
.sd-form .form-control:disabled{ filter: none; opacity:.95 }
.sd-form .input-group .form-control{ border-radius:.5rem } /* no romper input-group */

/* Input + botón (p. ej. Copiar): el botón debe tener la misma altura que el control, no quedar arriba */
.sd-form .input-group{
  flex-wrap: nowrap;
  align-items: stretch;
}
.sd-form .input-group > .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}