/* ============================================================
   CHECK Layer — tema.css
   Tema FIJO (ACT-032): una sola identidad, sin paletas seleccionables.

   Primario: #0891B2 (cyan) con escala monocromática.
   Secundario: grafito (#1F2937, familia slate).
   Degradados: sólo monocromáticos (misma familia de color).
   Regla de oro: los colores de marca SÓLO viven aquí; en HTML y en
   componentes.css/sitio.css siempre var(--cl-*), jamás hex.
   ============================================================ */

:root {
  /* ---------- Fondos y superficies ---------- */
  --cl-fondo:            #F6F8FB;   /* fondo general de la app   */
  --cl-superficie:       #FFFFFF;   /* cards, sidebar, topbar    */
  --cl-superficie-2:     #F1F5F9;   /* encabezados de tabla, inputs deshabilitados */
  --cl-borde:            #E5EAF1;   /* bordes de cards/tablas    */
  --cl-borde-fuerte:     #CBD5E1;

  /* ---------- Texto ---------- */
  --cl-tinta:            #0F172A;   /* títulos                   */
  --cl-cuerpo:           #475569;   /* texto de cuerpo           */
  --cl-muted:            #94A3B8;   /* metadatos, ayudas         */

  /* ---------- Primario (cyan #0891B2, escala monocromática) ---------- */
  --cl-primario:         #0891B2;
  --cl-primario-hover:   #0E7490;
  --cl-primario-tinte:   #D9F3FA;
  --cl-primario-texto:   #0E7490;

  /* ---------- Acento (misma familia cyan, más luminoso) ---------- */
  --cl-teal:             #06B6D4;
  --cl-teal-hover:       #0891B2;
  --cl-teal-tinte:       #E0F9FD;
  --cl-teal-texto:       #0891B2;

  /* ---------- Secundario (grafito, familia slate) ---------- */
  --cl-grafito:          #1F2937;
  --cl-grafito-hover:    #111827;
  --cl-grafito-tinte:    #EDF0F4;
  --cl-grafito-texto:    #1F2937;

  /* ---------- Semánticos ---------- */
  --cl-advertencia:      #D97706;
  --cl-advertencia-tinte:#FEF3C7;
  --cl-advertencia-texto:#92400E;
  --cl-peligro:          #DC2626;
  --cl-peligro-tinte:    #FEE2E2;
  --cl-peligro-texto:    #991B1B;
  --cl-info:             #0369A1;
  --cl-info-tinte:       #E0F2FE;
  --cl-info-texto:       #075985;

  /* ---------- Neutros de estado ---------- */
  --cl-gris-tinte:       #F1F5F9;
  --cl-gris-texto:       #475569;
  --cl-muted-fuerte:     #64748B;   /* etiquetas de KPI, descripciones (portal) */
  --cl-anillo:           rgba(8, 145, 178, .12); /* anillo de foco de inputs */
  --cl-borde-boton:      color-mix(in srgb, var(--cl-primario) 60%, var(--cl-borde)); /* borde de botones con fondo blanco */

  /* ---------- Sidebar del portal (ACT-033/035) ---------- */
  --cl-sidebar-fondo:    #0D4256;
  --cl-sidebar-texto:    #A9C9D6;
  --cl-sidebar-icono:    #7FB2C2;
  --cl-sidebar-seccion:  #6E97A8;
  --cl-sidebar-borde:    rgba(255, 255, 255, .09);
  --cl-sidebar-caja:     rgba(255, 255, 255, .05);
  --cl-sidebar-hover:    rgba(255, 255, 255, .07);

  /* ---------- Extras (tonos claros de la misma familia) ---------- */
  --cl-extra-1:          #22D3EE;
  --cl-extra-2:          #67E8F9;
  --cl-extra-3:          #A5F3FC;

  /* ---------- Firma visual (siempre monocromática) ---------- */
  --cl-grad-primario: linear-gradient(135deg, #0891B2 0%, #22D3EE 100%);
  --cl-grad-texto:    linear-gradient(90deg, #22D3EE 0%, #67E8F9 100%);
  --cl-grad-marca:    linear-gradient(155deg, #10394C 0%, #0B2A38 55%, #155E75 130%);
  --cl-glow:          0 10px 26px rgba(8, 145, 178, .32);

  /* ---------- Ícono #5 ---------- */
  --cl-icono-fondo:      #0891B2;
  --cl-icono-brazo:      #22D3EE;
  --cl-icono-brazo-largo:#FFFFFF;

  /* ---------- Sombras ---------- */
  --cl-sombra-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --cl-sombra-md: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .05);
  --cl-sombra-lg: 0 8px 30px rgba(15, 23, 42, .10);

  /* ---------- Tipografía ---------- */
  --cl-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cl-font-display: "Sora", "Inter", system-ui, sans-serif;

  /* ---------- Geometría ---------- */
  --cl-radio: .75rem;
  --cl-radio-sm: .5rem;
  --cl-sidebar-ancho: 248px;
  --cl-topbar-alto: 64px;
}

/* ============================================================
   Base
   ============================================================ */
body {
  font-family: var(--cl-font);
  background-color: var(--cl-fondo);
  color: var(--cl-cuerpo);
  font-size: 15px;
}

h1, h2, h3, h4, h5, h6,
.card-title { color: var(--cl-tinta); }

.text-muted { color: var(--cl-muted) !important; }

/* Números destacados y marca */
.cl-display { font-family: var(--cl-font-display); }

/* Foco visible accesible (AA) — sólo en elementos interactivos;
   los encabezados que Blazor enfoca al navegar no llevan anillo */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--cl-primario);
  outline-offset: 2px;
  border-radius: var(--cl-radio-sm);
}
h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus,
[tabindex="-1"]:focus { outline: none; }

/* Transición suave de color en superficies (sin movimiento) */
.card, .cl-sidebar, .cl-topbar, .table, .form-control,
.form-select, .dropdown-menu, .modal-content, .list-group-item,
.btn, .badge {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}