/* ════════════════════════════════════════════════════════════════════════
   Duck · SACS Consultores — SISTEMA DE DISEÑO CENTRALIZADO (fuente única)
   Tokens + componentes base. Light por defecto; dark vía html.dark o
   :root[data-theme="dark"]. NO definir colores sueltos por pantalla: usar var(--…).
   Guía de rediseño 2026-07-05.
   ════════════════════════════════════════════════════════════════════════ */

/* Fuente única de la plataforma: Manrope (debe ir ANTES de cualquier regla). */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* ── Marca — PRINCIPALES (deben predominar) ── */
  --blue-700:#21386D;      /* estructura: sidebar, headers, títulos */
  --orange-500:#ED7121;    /* acción / CTA / botón primario */
  --orange-600:#D65F13;    /* hover del CTA */
  --green-500:#69AF52;     /* estado activo del menú, éxito */
  --green-600:#579244;
  --orange-50:#FCEAD9;     /* tinte suave del naranja: fondos de ícono */
  /* ── Marca — secundarios de apoyo ── */
  --navy-900:#17142C;
  --navy-800:#121B2E;
  --cyan-500:#009EE2;      /* info / links secundarios / focus ring */
  --red-500:#E21A1C;       /* peligro / rechazado / vencido */

  /* ── Superficies y texto (LIGHT) ── */
  --bg:#F6F7FB;
  --surface:#FFFFFF;
  --surface-2:#F6F7FB;      /* zonas sutiles: headers de tabla, hovers */
  --surface-border:#E7EAF0;
  --text:#17142C;
  --muted:#5B6472;
  --sidebar-bg:#17142C;     /* sidebar oscuro también en light (contraste) */
  --sidebar-text:#C7CDD9;
  --sidebar-muted:#8A93A6;

  /* ── Estados (tinte al 12% + color pleno) ── */
  --ok:var(--green-500);       --ok-tint:rgba(105,175,82,.14);
  --warn:var(--orange-500);    --warn-tint:rgba(237,113,33,.14);
  --danger:var(--red-500);     --danger-tint:rgba(226,26,28,.12);
  --info:var(--cyan-500);      --info-tint:rgba(0,158,226,.12);
  --neutral-tint:rgba(33,56,109,.10);

  /* ── Tokens de componente ── */
  --radius:12px;
  --radius-sm:8px;
  --radius-pill:999px;
  --shadow-card:0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-pop:0 12px 32px rgba(23,20,44,.18);
  --ring:0 0 0 3px rgba(0,158,226,.30);   /* focus ring cyan */

  /* ── Layout ── */
  --sidebar-w:260px;
  --content-max:1280px;
  --pad-page:32px;
  --gap:24px;

  /* ── Tipografía ── */
  --font:'Manrope','Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  /* Jerarquía ÚNICA de tamaños (6 niveles, nada por debajo de 12px) */
  --fs-titulo-1:28px; --fw-titulo-1:700;   /* Título de página */
  --fs-titulo-2:20px; --fw-titulo-2:600;   /* Sección */
  --fs-titulo-3:16px; --fw-titulo-3:600;   /* Título de tarjeta */
  --fs-operacion:14px; --fw-operacion:400; /* Cuerpo y tablas (600 en énfasis) */
  --fs-observ:12px; --fw-observ:500;       /* Labels / metadatos (uppercase) */
  --fs-kpi:32px; --fw-kpi:700;             /* Cifras grandes */
  --lh-titulo:1.15; --lh-texto:1.5;
}

/* Manrope 100% en TODA la plataforma (incluye códigos/monoespaciado). El !important vence los
   `font:…Inter` hardcodeados inline y en el CSS del SPA. ÚNICA excepción: las FUENTES DE ICONO
   (Material Symbols) — si se les fuerza Manrope, muestran su ligadura de texto en vez del ícono. */
*:not([class*="material"]){font-family:var(--font) !important;}
body,button,input,select,textarea{font-family:var(--font) !important;}
/* Restaurar la fuente de los iconos Material Symbols (gana sobre cualquier override). */
.material-symbols-outlined,.material-symbols-rounded,.material-symbols-sharp{font-family:'Material Symbols Outlined' !important;}
.material-icons{font-family:'Material Icons' !important;}

/* ── DARK (responde a html.dark y a [data-theme="dark"]) ── */
html.dark, :root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1424;
  --surface:#17142C;
  --surface-2:#1C1836;
  --surface-border:rgba(255,255,255,.08);
  --text:#EAECEF;
  --muted:#9AA4B2;
  --sidebar-bg:#121B2E;
  --sidebar-text:#C7CDD9;
  --sidebar-muted:#8A93A6;
  /* Semánticos ~15% más claros para contraste AA sobre navy */
  --green-500:#7CC066; --ok:#7CC066; --ok-tint:rgba(124,192,102,.18);
  --orange-500:#F5883D; --warn:#F5883D; --warn-tint:rgba(245,136,61,.18);
  --red-500:#F04446;   --danger:#F04446; --danger-tint:rgba(240,68,70,.20);
  --cyan-500:#33B4E8;  --info:#33B4E8; --info-tint:rgba(51,180,232,.18);
  --neutral-tint:rgba(255,255,255,.08);
  --shadow-card:0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
}

/* ── Modo oscuro: fondo AZUL DEGRADADO (el mismo del login). Va en el body (fijo al viewport)
   y los contenedores de contenido se hacen transparentes para que se vea detrás de las tarjetas.
   Las tarjetas siguen opacas (--surface) → legibles sobre el degradado. ── */
html.dark body, :root[data-theme="dark"] body{
  background:
    radial-gradient(1400px 980px at 88% 92%, rgba(38,104,196,0.78) 0%, rgba(34,92,175,0.34) 45%, rgba(30,86,168,0) 78%),
    radial-gradient(760px 620px at 6% 8%, rgba(122,52,74,0.30) 0%, rgba(122,52,74,0) 55%),
    linear-gradient(155deg, #0a1020 0%, #0b1730 55%, #0a1526 100%) !important;
  background-attachment:fixed !important;
}
html.dark .layout, html.dark .main, html.dark #main, html.dark #content, html.dark #topbar,
:root[data-theme="dark"] .layout, :root[data-theme="dark"] .main,
:root[data-theme="dark"] #main, :root[data-theme="dark"] #content, :root[data-theme="dark"] #topbar{
  background:transparent !important;
}

/* ════════════════════════════ ESCALA TIPOGRÁFICA ════════════════════════ */
/* Clases utilitarias — no imponen la fuente global para no pelear con el SPA. */
.ds-h1{font:700 28px/1.2 var(--font);color:var(--text);margin:0;letter-spacing:-0.01em;}
.ds-h2{font:600 20px/1.3 var(--font);color:var(--text);margin:0;}
.ds-card-title{font:600 16px/1.4 var(--font);color:var(--text);margin:0;}
.ds-body{font:400 14px/1.55 var(--font);color:var(--text);}
.ds-label{font:500 12px/1.2 var(--font);letter-spacing:.02em;color:var(--muted);}
.ds-kpi{font:700 32px/1.1 var(--font);color:var(--text);font-variant-numeric:tabular-nums;}

/* ── Clases nombradas de la jerarquía (guía tipográfica). Úsalas en pantallas nuevas. ── */
h1.titulo-1,.titulo-1{font-size:var(--fs-titulo-1);font-weight:var(--fw-titulo-1);line-height:var(--lh-titulo);}
h2.titulo-2,.titulo-2{font-size:var(--fs-titulo-2);font-weight:var(--fw-titulo-2);line-height:var(--lh-titulo);}
h3.titulo-3,.titulo-3{font-size:var(--fs-titulo-3);font-weight:var(--fw-titulo-3);}
.operacion{font-size:var(--fs-operacion);font-weight:var(--fw-operacion);line-height:var(--lh-texto);}
.observacion{font-size:var(--fs-observ);font-weight:var(--fw-observ);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.kpi{font-size:var(--fs-kpi);font-weight:var(--fw-kpi);font-variant-numeric:tabular-nums;}

/* ── Corrección de disparidad en el Dashboard (usa clases fuera de escala) → snap a la escala ── */
.ds-title{font-size:var(--fs-titulo-1) !important;font-weight:var(--fw-titulo-1) !important;line-height:var(--lh-titulo) !important;}
.ds-sub{font-size:var(--fs-operacion) !important;line-height:var(--lh-texto) !important;}
.ds-section-title{font-size:var(--fs-titulo-2) !important;font-weight:var(--fw-titulo-2) !important;}
.ds-kpi-num{font-size:var(--fs-kpi) !important;font-weight:var(--fw-kpi) !important;line-height:1.15 !important;}
.ds-pill{font-size:var(--fs-observ) !important;}   /* venía en 11px (bajo el mínimo) */

/* ════════════════════════════ COMPONENTES BASE ══════════════════════════ */

/* Botones — 40px alto, radio único */
.ds-btn{font:600 14px/1 var(--font);height:40px;padding:0 18px;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;transition:background .15s,border-color .15s,transform .1s;
  text-decoration:none;white-space:nowrap;}
.ds-btn:active{transform:translateY(1px);}
.ds-btn-primary{background:var(--orange-500);color:#fff;}
.ds-btn-primary:hover{background:var(--orange-600);}
.ds-btn-secondary{background:var(--green-500);color:#fff;}
.ds-btn-secondary:hover{background:var(--green-600);}
.ds-btn-outline{background:var(--surface);color:var(--green-600);border-color:var(--green-500);}
.ds-btn-outline:hover{background:var(--ok-tint);}
.ds-btn-ghost{background:transparent;color:var(--muted);}
.ds-btn-ghost:hover{color:var(--text);background:var(--neutral-tint);}

/* Tarjetas / paneles */
.ds-card{background:var(--surface);border:1px solid var(--surface-border);
  border-radius:var(--radius);box-shadow:var(--shadow-card);padding:var(--gap);}

/* Inputs */
.ds-input{font:400 14px/1.4 var(--font);color:var(--text);height:40px;padding:0 12px;
  border:1px solid var(--surface-border);border-radius:var(--radius);background:var(--surface);
  width:100%;transition:border-color .15s,box-shadow .15s;}
.ds-input:focus{outline:none;border-color:var(--cyan-500);box-shadow:var(--ring);}
.ds-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--gap);}
.ds-field label{font:500 12px/1.2 var(--font);letter-spacing:.02em;text-transform:uppercase;color:var(--muted);}

/* Badges de estado — pill, tinte 12% + color pleno */
.ds-badge{font:600 12px/1 var(--font);padding:6px 12px;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;gap:6px;}
.ds-badge-warn{background:var(--warn-tint);color:var(--warn);}      /* pendiente */
.ds-badge-ok{background:var(--ok-tint);color:var(--ok);}           /* aprobado / activo */
.ds-badge-danger{background:var(--danger-tint);color:var(--danger);} /* rechazado / vencido */
.ds-badge-info{background:var(--info-tint);color:var(--info);}      /* info */
.ds-badge-neutral{background:var(--neutral-tint);color:var(--blue-700);}

/* Tablas */
.ds-table{width:100%;border-collapse:separate;border-spacing:0;font:400 14px/1.5 var(--font);color:var(--text);}
.ds-table th{font:600 12px/1 var(--font);text-transform:uppercase;letter-spacing:.02em;
  color:var(--muted);text-align:left;padding:0 14px;height:44px;background:var(--surface-2);
  border-bottom:1px solid var(--surface-border);}
.ds-table td{padding:0 14px;height:48px;border-bottom:1px solid var(--surface-border);vertical-align:middle;}
.ds-table tr:hover td{background:var(--neutral-tint);}
.ds-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}

/* Encabezado de página (h1 + ícono naranja inline + subtítulo) */
.ds-page-header{margin-bottom:var(--gap);}
.ds-page-header h1{font:700 28px/1.2 var(--font);color:var(--text);margin:0 0 4px;
  display:flex;align-items:center;gap:10px;letter-spacing:-0.01em;}
.ds-page-header h1 svg{width:26px;height:26px;color:var(--orange-500);flex-shrink:0;}
.ds-page-header .sub{font:400 14px/1.5 var(--font);color:var(--muted);}

/* Shell de contenido */
.ds-content{max-width:var(--content-max);margin:0 auto;padding:var(--pad-page);
  display:flex;flex-direction:column;gap:var(--gap);}
.ds-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}