/* =====================================================================
 * tema.css — Tokens semánticos de color (fuente única de verdad)
 * INA Repuestos / American Motors POS
 *
 * Objetivo: unificar el color del sistema en variables semánticas para
 * tener una única fuente de verdad (cambiar un color una vez, aplica en
 * todo el sistema). Los valores de :root son EXACTAMENTE los colores del
 * tema actual, de modo que migrar un hex a su token deja el resultado
 * idéntico.
 *
 * NOTA (2026-06-04): el modo oscuro quedó DESCARTADO. Se eliminó el
 * bloque [data-bs-theme="dark"] que existía aquí (era inerte). Los tokens
 * se conservan porque su valor es la tokenización del tema claro, no el
 * modo oscuro. La distinción "neutros / marca / estado" se mantiene solo
 * como documentación de intención semántica.
 *
 * Este archivo debe cargarse PRIMERO (antes que dashboard.css y demás),
 * para que todos los estilos puedan consumir los tokens.
 * ===================================================================== */

:root {
    /* ---------- Superficies (neutros) ---------- */
    --app-bg:       #f8f9fa;  /* fondo general de la app (body del dashboard) */
    --surface:      #ffffff;  /* tarjetas, paneles, modales, dropdowns */
    --surface-2:    #f8f9fa;  /* zonas sutiles: headers de tabla, hovers suaves */
    --surface-3:    #e9ecef;  /* hovers/zonas más marcadas */
    --surface-4:    #dee2e6;  /* cuarto paso: separadores gruesos, pistas de timeline.
                                 Mismo valor que --border, pero como SUPERFICIE. */
    --surface-brand:#eff6ff;  /* azul tenue de resalte: foco de filtro, badge sutil,
                                 fondo de favoritos. 8 usos en 4 archivos. */

    /* ---------- Texto (neutros) ---------- */
    --text:         #212529;  /* texto principal */
    --text-muted:   #6c757d;  /* texto secundario / labels */
    --text-soft:    #495057;  /* texto terciario */
    /* Texto sobre fondo oscuro (sidebar, cabeceras azules, badges de rango).
       Vale lo mismo que --surface pero NO es lo mismo: --surface es una
       superficie, esto es tinta. Se agrego el 2026-08-20 al reconectar las
       capas de alias: --sidebar-text, --text-white y --tp-rank-fg se usan
       SOLO en `color:`, y no existia ni un `color: var(--surface)` en todo
       el proyecto — mapearlos ahi habria inventado ese antipatron. */
    --text-inverse: #ffffff;

    /* ---------- Bordes (neutros) ---------- */
    --border:       #dee2e6;  /* borde estándar */
    --border-soft:  #e9ecef;  /* borde sutil / separadores */
    --border-strong:#ced4da;  /* borde por defecto de form-control (Bootstrap gray-400).
                                 10 usos en 4 archivos, todos en inputs. */
    --border-focus: #86b7fe;  /* anillo de foco de Bootstrap. categoria-crear.css ya
                                 avisaba en un comentario que le faltaba token. */

    /* ---------- Marca ----------
       Identidad corporativa INA = azul marino --brand-900 (decisión 2026-07-08:
       "el azul del sistema es el del sidebar"). --brand (#0d6efd) queda como
       azul interactivo (= Bootstrap primary: links, botones Swal, activos). */
    --brand:        #0d6efd;  /* azul interactivo (= Bootstrap primary) */
    --brand-hover:  #0b5ed7;
    --brand-active: #0a58ca;  /* tercer paso: :active de Bootstrap y ULTIMA parada del
                                 gradiente de cabecera, que se repite en 5 archivos con
                                 las otras dos ya tokenizadas. */
    --brand-600:    #3b82f6;  /* azul claro de tablas/filtros (más claro que 700) */
    --brand-700:    #2563eb;
    --brand-750:    #1d4ed8;  /* paso hover entre 700 y 800 (gradientes) */
    --brand-800:    #1e40af;  /* azul de gradientes de cabecera */
    --brand-900:    #1e3a8a;  /* AZUL CORPORATIVO INA (navbar, sidebar, login) */
    --brand-slate:  #2c3e50;  /* azul pizarra de títulos */
    --brand-red:    #ba020e;  /* rojo INA — medido del logo (assets/logo.png), 2026-07-08; antes #d2222d, que no coincidía */

    /* ---------- Estado ---------- */
    --state-success: #198754;
    --state-danger:  #dc3545;
    --state-warning: #ffc107;
    --state-info:    #0dcaf0;
    --state-credito: #fd7e14; /* naranja de créditos (semántico del dominio) */

    /* Pasos hover/oscuros de estado (pareja canónica Bootstrap 5) */
    --state-success-hover: #157347;
    --state-danger-hover:  #bb2d3b;

    /* Ámbar fuerte: para fondos/bordes donde --state-warning (#ffc107)
       resulta demasiado claro; mismo ámbar que usan los badges */
    --state-warning-strong:       #f59e0b;
    --state-warning-strong-hover: #d97706;
}