/* ============================================================
   bancaria-tokens.css — FUENTE ÚNICA DE VERDAD del diseño
   La Bancaria Seccional San Juan · Fuxia IT
   ------------------------------------------------------------
   Acá viven TODOS los colores, tipografías, sombras y medidas
   del portal. Si querés cambiar un color del sitio, se cambia
   ACÁ y en ningún otro lado.

   Se encola en functions.php antes que site-chrome.css, así que
   lo ven todas las páginas: públicas (Elementor) y privadas
   (dashboard, login).

   REGLA: ningún template debe volver a declarar un bloque :root.
   ============================================================ */

:root{

  /* ---------- Identidad albiceleste ---------- */
  --celeste-alb:    #6CACE4;   /* Celeste de bandera. Acentos, borde tricolor */
  --celeste-palido: #F2F8FD;   /* Fondo celeste muy suave */
  --azul-noche:     #0A1828;   /* Header, sidebar, fondos oscuros */
  --azul-principal: #0C6FB0;   /* Botones y enlaces principales */
  --azul-medio:     #0090D8;   /* Hover y focus */
  --azul-claro:     #D2EBF9;   /* Fondos suaves, badges */
  --azul-palido:    #EDF6FC;   /* Fondo alterno de secciones */

  /* ---------- Colores de estado y apoyo ---------- */
  --verde:         #009048;    /* Afiliado activo, confirmaciones */
  --verde-claro:   #E2F5EA;
  --verde-oscuro:  #00683A;
  --verde-accion:  #1A7A4A;    /* Botones de acción secundaria */
  --violeta:       #34349B;
  --violeta-claro: #E9E8F7;
  --amarillo:      #F59E0B;    /* Avisos, pendientes */
  --rojo-gremial:  #B8311D;    /* Paros, urgencias gremiales */
  --rojo-mundial:  #C0392B;    /* Contador de notificaciones */
  --crema:         #F7F5F2;

  /* ---------- Escala de grises ---------- */
  --gris-900: #111827;
  --gris-800: #1F2937;
  --gris-700: #374151;
  --gris-500: #6B7280;
  --gris-300: #D1D5DB;
  --gris-100: #F3F4F6;

  /* ---------- Tipografías ---------- */
  --font-display: 'Playfair Display',Georgia,serif;   /* Títulos */
  --font-body:    'Inter',system-ui,sans-serif;        /* Cuerpo */

  /* ---------- Roles semánticos ----------
     Estos NO son colores nuevos: apuntan a los de arriba.
     Usá estos en el CSS de los templates, no los hex sueltos. */
  --bg-page:     #F4F7FB;
  --bg-card:     #FFFFFF;
  --bg-side:     var(--azul-noche);
  --bg-alt:      var(--crema);
  --bg-alt-2:    var(--azul-palido);
  --text-main:   var(--gris-900);
  --text-soft:   var(--gris-700);
  --text-muted:  var(--gris-500);
  --border-soft: #DDE5EF;

  /* ---------- Sombras, bordes y medidas ---------- */
  --shadow-card:  0 2px 10px rgba(10,24,40,.07);
  --shadow-hover: 0 8px 24px rgba(10,24,40,.13);
  --radius:     12px;
  --transition: .22s ease;
  --container: 1180px;   /* Ancho máximo de contenido */
  --side-w:     264px;   /* Ancho del sidebar del dashboard */
  --head-h:      64px;   /* Alto del header fijo */
}