/* =============================================================
   NóminasHub — Sistema de diseño
   Capa 1 PRIMITIVA → Capa 2 SEMÁNTICA → Capa 3 COMPONENTE

   POR QUÉ EXISTE ESTE ARCHIVO

   El CSS anterior ya tenía variables, pero de una sola capa: los
   nombres semánticos apuntaban directo a un hex. Eso hace imposible
   un segundo tema, porque no hay dónde cambiar el valor sin cambiar
   el significado.

   Aquí se separan las tres preguntas:

     1. ¿Qué colores existen?        → PRIMITIVA (no cambia nunca)
     2. ¿Para qué sirve cada uno?    → SEMÁNTICA (cambia por tema)
     3. ¿Qué usa este componente?    → COMPONENTE (cambia por diseño)

   REGLA QUE SOSTIENE TODO: un template NUNCA nombra un color. Nombra
   un propósito. `--state-danger`, no `#f85149`. Si un template vuelve
   a traer un hex o un `style=` con color, el tema claro se rompe justo
   ahí y nadie se entera hasta que alguien lo prende.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* =============================================================
   CAPA 1 · PRIMITIVA
   Valores crudos. No dependen del tema ni del componente.
   Nadie los usa directamente en un template.
   ============================================================= */

:root {

  /* ----- Neutrales -------------------------------------------
     Gris con temperatura fría, para que el acento índigo no se
     vea sucio encima. La escala va de papel a tinta.           */
  --gray-0:    #ffffff;
  --gray-25:   #fcfcfd;
  --gray-50:   #f8f9fc;
  --gray-100:  #f0f2f7;
  --gray-200:  #e3e7ef;
  --gray-300:  #cbd2e0;
  --gray-400:  #98a2b8;
  --gray-500:  #667085;
  --gray-600:  #4a5468;
  --gray-700:  #343d4f;
  --gray-800:  #212936;
  --gray-850:  #1a212c;
  --gray-900:  #141a23;
  --gray-950:  #0d1219;

  /* ----- Marca -----------------------------------------------
     Índigo, no el azul de GitHub. Se eligió índigo y no teal a
     propósito: el teal compite con el verde de «resuelto», y en
     una bandeja de excepciones el verde tiene que significar una
     sola cosa.                                                  */
  --brand-50:  #eef1ff;
  --brand-100: #e0e5ff;
  --brand-200: #c6cfff;
  --brand-300: #a3b0fd;
  --brand-400: #818cf8;
  --brand-500: #6366f1;
  --brand-600: #4f46e5;
  --brand-700: #4338ca;
  --brand-800: #3730a3;
  --brand-900: #292563;

  /* ----- Estados ---------------------------------------------
     Cada familia tiene un tono para fondo claro y otro para
     fondo oscuro. Un solo tono no alcanza: el que contrasta
     sobre papel desaparece sobre tinta.                        */

  /* Éxito · resuelto, conciliado, cerrado */
  --green-50:  #e8f8ee;
  --green-100: #ccf0da;
  --green-500: #16a34a;
  --green-600: #15803d;
  --green-400: #3fd77a;
  --green-300: #6ee7a0;

  /* Atención · pendiente, por revisar, en proceso */
  --amber-50:  #fef6e7;
  --amber-100: #fdeccc;
  --amber-500: #d97706;
  --amber-600: #b45309;
  --amber-400: #fbbf24;
  --amber-300: #fcd34d;

  /* Peligro · bloqueo, error, excepción abierta */
  --red-50:    #fdedec;
  --red-100:   #fbdcd9;
  --red-500:   #dc2626;
  --red-600:   #b91c1c;
  --red-400:   #f87171;
  --red-300:   #fca5a5;

  /* Informativo · dato neutro, en curso */
  --blue-50:   #e8f2fe;
  --blue-100:  #d0e4fd;
  --blue-500:  #2563eb;
  --blue-600:  #1d4ed8;
  --blue-400:  #60a5fa;
  --blue-300:  #93c5fd;

  /* Secundario · categorías, etiquetas sin carga de estado */
  --violet-50:  #f3eefe;
  --violet-100: #e7dcfd;
  --violet-500: #7c3aed;
  --violet-600: #6d28d9;
  --violet-400: #a78bfa;
  --violet-300: #c4b5fd;

  /* ----- Espaciado -------------------------------------------
     Base 4px. Un dashboard de nómina es denso por necesidad:
     el contador compara renglones, no contempla el diseño.     */
  --space-0:   0;
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:   12px;
  --space-6:   16px;
  --space-7:   20px;
  --space-8:   24px;
  --space-9:   32px;
  --space-10:  40px;
  --space-11:  48px;
  --space-12:  64px;

  /* ----- Tipografía ------------------------------------------ */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  --text-2xs:  0.6875rem;  /* 11px · etiquetas de tabla, metadatos */
  --text-xs:   0.75rem;    /* 12px · pies, ayudas */
  --text-sm:   0.8125rem;  /* 13px · celdas densas */
  --text-base: 0.875rem;   /* 14px · cuerpo. El default del sistema */
  --text-md:   1rem;       /* 16px · énfasis en cuerpo */
  --text-lg:   1.25rem;    /* 20px · título de tarjeta */
  --text-xl:   1.5rem;     /* 24px · título de página */
  --text-2xl:  1.875rem;   /* 30px · cifra de KPI */
  --text-3xl:  2.25rem;    /* 36px · cifra protagonista */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;

  /* ----- Forma ----------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ----- Movimiento ------------------------------------------
     Un dashboard que se usa ocho horas no debe animarse mucho.  */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;

  /* ----- Estructura ------------------------------------------ */
  --sidebar-width:  228px;
  /* Barra de módulos (Fase 1). Es token y no valor suelto porque tres
     reglas dependen de él: la propia barra, el desplazamiento del
     submenú y el margen del contenido. */
  --modulos-width:  92px;
  --topbar-height:  56px;
  --content-max:    1600px;
}

/* =============================================================
   CAPA 2 · SEMÁNTICA — TEMA CLARO
   Aquí un color deja de ser un color y pasa a tener trabajo.
   ============================================================= */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Superficies, de atrás hacia adelante */
  --surface-base:     var(--gray-50);
  --surface-raised:   var(--gray-0);
  --surface-overlay:  var(--gray-0);
  --surface-sunken:   var(--gray-100);
  --surface-hover:    var(--gray-100);
  --surface-active:   var(--gray-200);
  --surface-input:    var(--gray-0);
  --surface-disabled: var(--gray-100);

  /* Bordes */
  --border-subtle:   var(--gray-200);
  --border-default:  var(--gray-300);
  --border-strong:   var(--gray-400);

  /* Texto */
  --content-primary:     var(--gray-900);
  --content-secondary:   var(--gray-600);
  --content-tertiary:    var(--gray-500);
  --content-placeholder: var(--gray-400);
  --content-on-accent:   var(--gray-0);
  --content-disabled:    var(--gray-400);

  /* Marca */
  --accent:          var(--brand-600);
  --accent-hover:    var(--brand-700);
  --accent-soft:     var(--brand-50);
  --accent-border:   var(--brand-200);
  --accent-content:  var(--brand-700);

  /* Relleno sólido de botón. Separado de `--accent` porque lleva
     texto blanco encima y por lo tanto tiene que cumplir contraste
     por sí mismo: 6.5:1 aquí. */
  --accent-solid:       var(--brand-600);
  --accent-solid-hover: var(--brand-700);

  /* Estados — cada uno con su trío: sólido, fondo suave y texto
     legible sobre ese fondo suave. */
  --state-success:          var(--green-500);
  --state-success-soft:     var(--green-50);
  --state-success-border:   var(--green-100);
  --state-success-content:  var(--green-600);

  --state-warning:          var(--amber-500);
  --state-warning-soft:     var(--amber-50);
  --state-warning-border:   var(--amber-100);
  --state-warning-content:  var(--amber-600);

  --state-danger:           var(--red-500);
  --state-danger-soft:      var(--red-50);
  --state-danger-border:    var(--red-100);
  --state-danger-content:   var(--red-600);

  --state-info:             var(--blue-500);
  --state-info-soft:        var(--blue-50);
  --state-info-border:      var(--blue-100);
  --state-info-content:     var(--blue-600);

  --state-neutral:          var(--violet-500);
  --state-neutral-soft:     var(--violet-50);
  --state-neutral-border:   var(--violet-100);
  --state-neutral-content:  var(--violet-600);

  /* Sombra: sobre papel, la sombra separa. */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .06);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, .1), 0 4px 6px -2px rgba(16, 24, 40, .05);
  --ring-focus: 0 0 0 3px var(--brand-100);
}

/* =============================================================
   CAPA 2 · SEMÁNTICA — TEMA OSCURO
   Mismos nombres, otros valores. Ningún template se entera.
   ============================================================= */

[data-theme="dark"] {
  color-scheme: dark;

  --surface-base:     var(--gray-950);
  --surface-raised:   var(--gray-900);
  --surface-overlay:  var(--gray-850);
  --surface-sunken:   var(--gray-950);
  --surface-hover:    var(--gray-800);
  --surface-active:   var(--gray-700);
  --surface-input:    var(--gray-950);
  --surface-disabled: var(--gray-850);

  --border-subtle:   var(--gray-850);
  --border-default:  var(--gray-800);
  --border-strong:   var(--gray-700);

  --content-primary:     var(--gray-100);
  --content-secondary:   var(--gray-400);
  --content-tertiary:    var(--gray-500);
  --content-placeholder: var(--gray-600);
  --content-on-accent:   var(--gray-0);
  --content-disabled:    var(--gray-600);

  --accent:          var(--brand-400);
  --accent-hover:    var(--brand-300);
  --accent-soft:     rgba(129, 140, 248, .14);
  --accent-border:   rgba(129, 140, 248, .32);
  --accent-content:  var(--brand-300);

  /* Aquí `--accent` NO sirve como relleno de botón: brand-400 con
     texto blanco da 3.1:1 y no pasa AA. El botón sólido se queda en
     un índigo medio, y al pasar el ratón se hunde en vez de aclarar
     — porque aclarar es justo lo que rompería el contraste. */
  --accent-solid:       var(--brand-500);
  --accent-solid-hover: var(--brand-600);

  /* Sobre fondo oscuro el tono sólido sube y el fondo suave se
     vuelve una transparencia: un pastel opaco encima de tinta se
     ve como suciedad, no como estado. */
  --state-success:          var(--green-400);
  --state-success-soft:     rgba(63, 215, 122, .13);
  --state-success-border:   rgba(63, 215, 122, .28);
  --state-success-content:  var(--green-300);

  --state-warning:          var(--amber-400);
  --state-warning-soft:     rgba(251, 191, 36, .13);
  --state-warning-border:   rgba(251, 191, 36, .28);
  --state-warning-content:  var(--amber-300);

  --state-danger:           var(--red-400);
  --state-danger-soft:      rgba(248, 113, 113, .13);
  --state-danger-border:    rgba(248, 113, 113, .30);
  --state-danger-content:   var(--red-300);

  --state-info:             var(--blue-400);
  --state-info-soft:        rgba(96, 165, 250, .13);
  --state-info-border:      rgba(96, 165, 250, .28);
  --state-info-content:     var(--blue-300);

  --state-neutral:          var(--violet-400);
  --state-neutral-soft:     rgba(167, 139, 250, .13);
  --state-neutral-border:   rgba(167, 139, 250, .28);
  --state-neutral-content:  var(--violet-300);

  /* Sobre tinta la sombra no separa: separa el borde. La sombra
     solo da profundidad a lo que flota. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, .55);
  --ring-focus: 0 0 0 3px rgba(129, 140, 248, .35);
}

/* Sin preferencia guardada, se respeta la del sistema operativo.
   Se aplica solo cuando nadie eligió: `[data-theme]` siempre gana. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;

    --surface-base:     var(--gray-950);
    --surface-raised:   var(--gray-900);
    --surface-overlay:  var(--gray-850);
    --surface-sunken:   var(--gray-950);
    --surface-hover:    var(--gray-800);
    --surface-active:   var(--gray-700);
    --surface-input:    var(--gray-950);
    --surface-disabled: var(--gray-850);

    --border-subtle:   var(--gray-850);
    --border-default:  var(--gray-800);
    --border-strong:   var(--gray-700);

    --content-primary:     var(--gray-100);
    --content-secondary:   var(--gray-400);
    --content-tertiary:    var(--gray-500);
    --content-placeholder: var(--gray-600);
    --content-disabled:    var(--gray-600);

    --accent:          var(--brand-400);
    --accent-hover:    var(--brand-300);
    --accent-soft:     rgba(129, 140, 248, .14);
    --accent-border:   rgba(129, 140, 248, .32);
    --accent-content:  var(--brand-300);
    --accent-solid:       var(--brand-500);
    --accent-solid-hover: var(--brand-600);

    --state-success:          var(--green-400);
    --state-success-soft:     rgba(63, 215, 122, .13);
    --state-success-border:   rgba(63, 215, 122, .28);
    --state-success-content:  var(--green-300);

    --state-warning:          var(--amber-400);
    --state-warning-soft:     rgba(251, 191, 36, .13);
    --state-warning-border:   rgba(251, 191, 36, .28);
    --state-warning-content:  var(--amber-300);

    --state-danger:           var(--red-400);
    --state-danger-soft:      rgba(248, 113, 113, .13);
    --state-danger-border:    rgba(248, 113, 113, .30);
    --state-danger-content:   var(--red-300);

    --state-info:             var(--blue-400);
    --state-info-soft:        rgba(96, 165, 250, .13);
    --state-info-border:      rgba(96, 165, 250, .28);
    --state-info-content:     var(--blue-300);

    --state-neutral:          var(--violet-400);
    --state-neutral-soft:     rgba(167, 139, 250, .13);
    --state-neutral-border:   rgba(167, 139, 250, .28);
    --state-neutral-content:  var(--violet-300);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, .55);
    --ring-focus: 0 0 0 3px rgba(129, 140, 248, .35);
  }
}

/* =============================================================
   CAPA 3 · COMPONENTE
   Lo que consume cada pieza. Cambiar el diseño de las tarjetas
   se hace aquí, sin tocar ni el tema ni los templates.
   ============================================================= */

:root {

  /* Barra lateral */
  --sidebar-bg:            var(--surface-raised);
  --sidebar-border:        var(--border-subtle);
  --sidebar-link:          var(--content-secondary);
  --sidebar-link-hover-bg: var(--surface-hover);
  --sidebar-link-active:   var(--accent-content);
  --sidebar-link-active-bg: var(--accent-soft);
  --sidebar-label:         var(--content-tertiary);

  /* Barra superior */
  --topbar-bg:     var(--surface-raised);
  --topbar-border: var(--border-subtle);

  /* Tarjeta */
  --card-bg:            var(--surface-raised);
  --card-border:        var(--border-subtle);
  --card-radius:        var(--radius-lg);
  --card-shadow:        var(--shadow-sm);
  --card-header-bg:     transparent;
  --card-padding:       var(--space-7);

  /* Tarjeta de indicador */
  --kpi-value-size:   var(--text-2xl);
  --kpi-value-weight: var(--weight-semibold);
  --kpi-label-size:   var(--text-xs);
  --kpi-label-color:  var(--content-secondary);
  --kpi-icon-size:    40px;

  /* Tabla */
  --table-header-bg:      var(--surface-sunken);
  --table-header-color:   var(--content-secondary);
  --table-header-size:    var(--text-2xs);
  --table-border:         var(--border-subtle);
  --table-row-hover:      var(--surface-hover);
  --table-cell-y:         var(--space-5);
  --table-cell-x:         var(--space-6);

  /* Etiqueta de estado */
  --badge-radius:  var(--radius-pill);
  --badge-size:    var(--text-2xs);
  --badge-weight:  var(--weight-medium);
  --badge-y:       var(--space-2);
  --badge-x:       var(--space-4);

  /* Campo de formulario */
  --field-bg:            var(--surface-input);
  --field-border:        var(--border-default);
  --field-border-focus:  var(--accent);
  --field-radius:        var(--radius-sm);
  --field-placeholder:   var(--content-placeholder);

  /* Botón */
  --btn-radius:  var(--radius-sm);
  --btn-weight:  var(--weight-medium);
  --btn-y:       var(--space-4);
  --btn-x:       var(--space-6);
}

/* =============================================================
   CAPA DE COMPATIBILIDAD — temporal, y con fecha de caducidad

   El CSS y los templates anteriores nombran los tokens viejos
   (`--bg-base`, `--accent-blue`, `--text-secondary`). Reapuntarlos
   aqui hizo que TODO lo que ya existia se volviera tematizable de
   inmediato, sin tocar un solo template: es lo que permitio migrar
   pantalla por pantalla en vez de en un solo golpe irreversible.

   ESTADO al 28-ago-2026: los 18 templates YA NO nombran ninguno de
   estos tokens. Quedan 128 referencias, todas dentro de
   `custom.css`.

   Por lo tanto este bloque ya no sostiene ningun template: sostiene
   `custom.css`. Para borrarlo hay que reapuntar esas 128
   referencias a los nombres nuevos —es mecanico, cada una tiene su
   equivalente aqui abajo— y verificar la interfaz en los dos temas
   despues. Mientras exista, `custom.css` sigue funcionando sin
   cambios.

   NO usar estos nombres en codigo nuevo.
   ============================================================= */

:root {
  --bg-base:      var(--surface-base);
  --bg-surface:   var(--surface-raised);
  --bg-elevated:  var(--surface-overlay);
  --bg-hover:     var(--surface-hover);
  --bg-input:     var(--surface-input);

  --border-muted:    var(--border-subtle);
  --border-emphasis: var(--border-strong);

  --text-primary:     var(--content-primary);
  --text-secondary:   var(--content-secondary);
  --text-tertiary:    var(--content-tertiary);
  --text-placeholder: var(--content-placeholder);

  --accent-blue:      var(--state-info);
  --accent-blue-bg:   var(--state-info-soft);
  --accent-green:     var(--state-success);
  --accent-green-bg:  var(--state-success-soft);
  --accent-red:       var(--state-danger);
  --accent-red-bg:    var(--state-danger-soft);
  --accent-amber:     var(--state-warning);
  --accent-amber-bg:  var(--state-warning-soft);
  --accent-purple:    var(--state-neutral);
  --accent-purple-bg: var(--state-neutral-soft);

  --transition: var(--duration-base) var(--ease);
}