/* CajaClara — Design Tokens (v2+merged)
   Objetivo: contraste alto, premium tech, tema claro/oscuro coherente.
   Regla: marca (celeste/dorado) ≠ estados (ok/warn/error/info).

   Nota:
   - Este archivo es la “fuente de verdad” de variables CSS del sistema.
   - Incluye alias de módulos (home/dashboard → inicio, config/ajustes → sistema, inventario → stock)
     para evitar que se pierdan acentos si cambia el nombre del módulo en templates.
*/

:root{
  /* Geometría */
  --cc-radius: 16px;
  --cc-radius-sm: 12px;

  /* Marca */
  --cc-sky:    #66C6F2; /* celeste “luz” */
  --cc-sky-2:  #2FA8E0; /* celeste más firme */
  --cc-ice:    #EAF6FF; /* blanco frío */
  --cc-gold:   #F2B21B; /* joya (micro-acento) */

  /* Estados (NO marca) */
  --cc-success: #16A34A;
  --cc-warning: #D97706;
  --cc-danger:  #DC2626;
  --cc-info:    #2563EB;
}

/* =========================
   Tema CLARO (legible)
   ========================= */
html[data-bs-theme="light"]{
  --cc-bg:        #F4F7FB;
  --cc-surface:   #FFFFFF;
  --cc-surface-2: #EEF3F8;
  --cc-text:      #0B1220;
  --cc-text-rgb:  11,18,32;
  --cc-muted:     #42556B;
  --cc-muted-rgb: 66,85,107;
  --cc-border:    rgba(11,18,32,.16);

  --cc-brand:     var(--cc-sky-2);
  --cc-brand-rgb: 47,168,224;

  /* =========================
     Identidad por módulo (acentos)
     Nota: NO usar como fondos grandes.
     Reglas pedidas:
     - caja y ventas: verde
     - stock: amarillo
     - el resto: diferente entre sí
     ========================= */
  --mod-inicio:          #2563EB;  --mod-inicio-2:          #1D4ED8;

  --mod-caja:            #16A34A;  --mod-caja-2:            #15803D;
  --mod-ventas:          #16A34A;  --mod-ventas-2:          #15803D;

  --mod-productos:       #0284C7;  --mod-productos-2:       #0369A1;
  --mod-stock:           #F59E0B;  --mod-stock-2:           #D97706;

  --mod-compras:         #F97316;  --mod-compras-2:         #EA580C;
  --mod-clientes:        #0891B2;  --mod-clientes-2:        #0E7490;
  --mod-contabilidad:    #7C3AED;  --mod-contabilidad-2:    #6D28D9;
  --mod-sistema:         #64748B;  --mod-sistema-2:         #475569;
}

/* =========================
   Tema OSCURO (premium tech)
   ========================= */
html[data-bs-theme="dark"]{
  --cc-bg:        #070B14;
  --cc-surface:   #0B1220;
  --cc-surface-2: #0F1A2E;
  --cc-text:      #E7EEF8;
  --cc-text-rgb:  231,238,248;
  --cc-muted:     #9AA9BF;
  --cc-muted-rgb: 154,169,191;
  --cc-border:    rgba(154,169,191,.22);

  --cc-brand:     var(--cc-sky);
  --cc-brand-rgb: 102,198,242;

  /* Identidad por módulo (acentos) */
  --mod-inicio:          #60A5FA;  --mod-inicio-2:          #3B82F6;

  --mod-caja:            #22C55E;  --mod-caja-2:            #16A34A;
  --mod-ventas:          #22C55E;  --mod-ventas-2:          #16A34A;

  --mod-productos:       #5FD0F5;  --mod-productos-2:       #2BAFE2;
  --mod-stock:           #FBBF24;  --mod-stock-2:           #F59E0B;

  --mod-compras:         #FB923C;  --mod-compras-2:         #F97316;
  --mod-clientes:        #22D3EE;  --mod-clientes-2:        #06B6D4;
  --mod-contabilidad:    #A78BFA;  --mod-contabilidad-2:    #8B5CF6;
  --mod-sistema:         #94A3B8;  --mod-sistema-2:         #64748B;
}

/* =========================
   Puente → Bootstrap 5.3
   (definimos lo mínimo para consistencia)
   ========================= */
html[data-bs-theme="light"],
html[data-bs-theme="dark"]{
  /* Compat (Home v2 / layout v2) */
  --cc-surface-0: var(--cc-surface);
  --cc-surface-1: var(--cc-surface-2);
  --cc-border-1:  var(--cc-border);
  --cc-text-0:    var(--cc-text);
  --cc-text-2:    var(--cc-muted);

  /* Acento del módulo actual (fallback: inicio) */
  --cc-mod:   var(--mod-inicio);
  --cc-mod-2: var(--mod-inicio-2);

  /* Base */
  --bs-body-bg: var(--cc-bg);
  --bs-body-color: var(--cc-text);
  --bs-body-color-rgb: var(--cc-text-rgb);

  /* Textos secundarios */
  --bs-secondary-color: var(--cc-muted);
  --bs-secondary-color-rgb: var(--cc-muted-rgb);
  --bs-emphasis-color: var(--cc-text);
  --bs-emphasis-color-rgb: var(--cc-text-rgb);

  /* Superficies */
  --bs-tertiary-bg: var(--cc-surface-2);
  --bs-secondary-bg: var(--cc-surface-2);
  --bs-card-bg: var(--cc-surface);
  --bs-modal-bg: var(--cc-surface);
  --bs-dropdown-bg: var(--cc-surface);

  /* Bordes / radios */
  --bs-border-color: var(--cc-border);
  --bs-border-radius: var(--cc-radius);
  --bs-border-radius-sm: var(--cc-radius-sm);

  /* Marca */
  --bs-primary: var(--cc-brand);
  --bs-primary-rgb: var(--cc-brand-rgb);
  --bs-link-color: var(--cc-brand);

  /* Estados */
  --bs-success: var(--cc-success);
  --bs-warning: var(--cc-warning);
  --bs-danger:  var(--cc-danger);
  --bs-info:    var(--cc-info);

  /* Foco accesible (teclado) */
  --bs-focus-ring-color: rgba(var(--cc-brand-rgb), .42);
  --bs-focus-ring-width: 3px;
}

/* =========================
   Módulo actual → acento (cc-mod)
   Se controla con: <body data-module="...">
   ========================= */

/* Inicio / Home */
body[data-module="inicio"],
body[data-module="home"],
body[data-module="dashboard"]{
  --cc-mod: var(--mod-inicio);
  --cc-mod-2: var(--mod-inicio-2);
}

/* Caja / Ventas (verde) */
body[data-module="caja"]{
  --cc-mod: var(--mod-caja);
  --cc-mod-2: var(--mod-caja-2);
}
body[data-module="ventas"]{
  --cc-mod: var(--mod-ventas);
  --cc-mod-2: var(--mod-ventas-2);
}

/* Productos */
body[data-module="productos"]{
  --cc-mod: var(--mod-productos);
  --cc-mod-2: var(--mod-productos-2);
}

/* Stock / Inventario (amarillo) */
body[data-module="stock"],
body[data-module="inventario"]{
  --cc-mod: var(--mod-stock);
  --cc-mod-2: var(--mod-stock-2);
}

/* Clientes */
body[data-module="clientes"]{
  --cc-mod: var(--mod-clientes);
  --cc-mod-2: var(--mod-clientes-2);
}

/* Compras */
body[data-module="compras"]{
  --cc-mod: var(--mod-compras);
  --cc-mod-2: var(--mod-compras-2);
}

/* Contabilidad */
body[data-module="contabilidad"]{
  --cc-mod: var(--mod-contabilidad);
  --cc-mod-2: var(--mod-contabilidad-2);
}

/* Sistema / Config / Ajustes */
body[data-module="sistema"],
body[data-module="config"],
body[data-module="ajustes"]{
  --cc-mod: var(--mod-sistema);
  --cc-mod-2: var(--mod-sistema-2);
}

body{ font-variant-numeric: tabular-nums; }

/* Skip link (accesibilidad) */
.cc-skip{
  position:absolute; left:-999px; top:10px;
  background:#000; color:#fff;
  padding:.5rem .75rem; border-radius:12px; z-index:9999;
}
.cc-skip:focus{ left:12px; }

::selection{ background: rgba(var(--cc-brand-rgb), .22); }