/* Paleta clara institucional. El modo oscuro es el valor por defecto en :root.

   Aquí se redefinen los tokens semánticos (superficies, texto, bordes,
   estados). La escala de azules navales y el dorado de marca no se invierten:
   siguen siendo los mismos colores de identidad, solo cambia dónde se usan.
   Los nombres heredados (--abismo, --niebla, --cian...) se resuelven sobre
   estos tokens, así que basta con esta capa más los ajustes puntuales de los
   componentes que usan azul naval como fondo. */

html[data-tema="claro"] {
  color-scheme: light;

  --chart-azul-osc: #153A56;
  --chart-azul: #2F6F9F;
  --chart-destaque: #0F5B94;
  --chart-hallazgo: #0E7490;

  /* Superficies */
  --surface-primary: #ffffff;
  --surface-secondary: #f5f7fa;
  --surface-sunken: #eaeef4;
  --surface-raised: #f7f9fc;

  /* Texto */
  --text-primary: #17222f;
  --text-secondary: #55637a;
  --text-strong: #0d1826;

  /* Plata técnica: en claro son los grises de lectura, no de fondo. */
  --silver: #55637a;
  --silver-light: #24313f;
  --silver-dim: #6b7a8c;

  /* Bordes */
  --border-primary: #ccd5e2;
  --border-subtle: #dee4ec;
  --border-strong: #a7b4c6;

  /* Dorado institucional: se oscurece para poder leerse sobre blanco. */
  --institutional-gold: #8c6d2a;
  --institutional-gold-light: #74581c;
  --institutional-gold-soft: rgba(140, 109, 42, 0.1);
  --institutional-gold-line: rgba(140, 109, 42, 0.42);

  /* Estados */
  --state-info: #1c5992;
  --state-ok: #1b7a63;
  --state-warn: #8a6208;
  --state-danger: #a03725;

  /* Sombras suaves sobre fondo claro */
  --sombra-1: 0 1px 2px rgba(23, 34, 47, 0.08);
  --sombra-2: 0 6px 18px rgba(23, 34, 47, 0.1);
  --sombra-3: 0 18px 44px rgba(23, 34, 47, 0.14);

  /* Estructura */
  --abismo: #e8edf3;
  --lateral-fondo: #f2f5f9;
  --barra-fondo: rgba(255, 255, 255, 0.92);
  --banner-1: #f5f8fc;
  --banner-2: #e6ecf4;
}

/* --- Fondos generales -------------------------------------------------- */

html[data-tema="claro"] body {
  background-image:
    radial-gradient(120% 90% at 100% -10%, rgba(27, 54, 93, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(27, 54, 93, 0.05) 0%, transparent 30%);
}

/* La lámina de fondo es oscura: en claro se atenúa con un velo perla para
   que la tarjeta siga siendo lo más luminoso de la pantalla. */
html[data-tema="claro"] body.login {
  background-image:
    linear-gradient(180deg, rgba(232, 237, 243, 0.86) 0%, rgba(232, 237, 243, 0.74) 45%, rgba(232, 237, 243, 0.9) 100%),
    url("/static/img/bg.webp");
}
html[data-tema="claro"] .login-marco::before {
  background: radial-gradient(52% 62% at 50% 50%, rgba(244, 247, 250, 0.9), rgba(244, 247, 250, 0.5) 55%, transparent 78%);
}
html[data-tema="claro"] .login-fondo { opacity: 0.5; }
@media (max-width: 760px) {
  html[data-tema="claro"] body.login {
    background-image:
      linear-gradient(180deg, rgba(232, 237, 243, 0.94) 0%, rgba(232, 237, 243, 0.86) 45%, rgba(232, 237, 243, 0.96) 100%),
      url("/static/img/bg.webp");
  }
}
html[data-tema="claro"] .login-caja {
  background: rgba(255, 255, 255, 0.94);
}

html[data-tema="claro"] .lateral {
  background-image: none;
}

html[data-tema="claro"] .banda {
  background: var(--navy-900);
  color: #c3cede;
}

html[data-tema="claro"] .velo {
  background: rgba(13, 24, 38, 0.28);
}

html[data-tema="claro"] .banner {
  background: radial-gradient(120% 160% at 92% 0%, rgba(27, 54, 93, 0.12), transparent 58%),
              linear-gradient(160deg, var(--banner-1) 0%, var(--banner-2) 100%);
}
html[data-tema="claro"] .banner-cruce,
html[data-tema="claro"] .banner-stats,
html[data-tema="claro"] .banner-users,
html[data-tema="claro"] .banner-panel {
  background: radial-gradient(120% 160% at 92% 0%, rgba(27, 54, 93, 0.12), transparent 58%),
              radial-gradient(80% 140% at 8% 90%, rgba(140, 109, 42, 0.08), transparent 52%),
              linear-gradient(160deg, var(--banner-1) 0%, var(--banner-2) 100%);
}

html[data-tema="claro"] .login-caja {
  background: var(--surface-primary);
  border-color: var(--border-primary);
  box-shadow: var(--sombra-3);
}
html[data-tema="claro"] .login-manifiesto-titulo { color: var(--navy-900); }
html[data-tema="claro"] .login-manifiesto-cuerpo { color: #3d4a5c; }
html[data-tema="claro"] .login-manifiesto-cuerpo em { color: #8a6a28; }
html[data-tema="claro"] .login-marca { color: #8a6a28; }
html[data-tema="claro"] .login-logo-placa {
  background: #0a192f;
  border-color: rgba(47, 111, 159, 0.48);
}
html[data-tema="claro"] .login-lockup {
  filter: drop-shadow(0 6px 16px rgba(21, 58, 86, 0.12));
}
html[data-tema="claro"] .marca-lockup,
html[data-tema="claro"] .marca:hover .marca-lockup {
  filter: none;
}
html[data-tema="claro"] .marca:hover .marca-iso {
  filter: drop-shadow(0 0 10px rgba(47, 111, 159, 0.4));
}

html[data-tema="claro"] .login-error,
html[data-tema="claro"] .caja-error {
  background: rgba(160, 55, 37, 0.08);
  color: #8c3120;
}

/* --- Acción principal: el dorado sigue siendo el de marca -------------- */

html[data-tema="claro"] .btn {
  background: linear-gradient(180deg, #d4af37, #c5a059);
  border-color: #b8934a;
  color: var(--navy-950);
}
html[data-tema="claro"] .btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #dcbb4c, #cca962);
}
html[data-tema="claro"] .btn-plano {
  background: transparent;
  color: var(--navy-700);
}
html[data-tema="claro"] .btn-plano:hover:not(:disabled) {
  background: rgba(27, 54, 93, 0.08);
  color: var(--navy-700);
}
html[data-tema="claro"] .btn-azul,
html[data-tema="claro"] .btn.secundario { color: #ffffff; }
html[data-tema="claro"] .btn-peligro,
html[data-tema="claro"] .btn.peligro,
html[data-tema="claro"] .btn-mini.peligro { color: #92321f; }
html[data-tema="claro"] .btn-acento {
  color: var(--institutional-gold);
}
html[data-tema="claro"] .saltar {
  background: #c5a059;
  color: var(--navy-950);
}

/* --- Barra lateral: rail claro, azul naval solo como tinte ------------- */

html[data-tema="claro"] .grupo,
html[data-tema="claro"] .lateral-pie {
  color: var(--silver-dim);
}
html[data-tema="claro"] .hijos a,
html[data-tema="claro"] .lista-lateral button {
  color: var(--text-secondary);
}
html[data-tema="claro"] .item:hover,
html[data-tema="claro"] .hijos a:hover,
html[data-tema="claro"] .lista-lateral button:hover {
  background: rgba(27, 54, 93, 0.08);
  color: var(--navy-700);
}
html[data-tema="claro"] .item.activo {
  background: rgba(27, 54, 93, 0.12);
  color: var(--navy-700);
}
html[data-tema="claro"] .hijos a.activo {
  background: rgba(27, 54, 93, 0.12);
  color: var(--navy-700);
}
html[data-tema="claro"] .chip-usuario:hover {
  background: rgba(27, 54, 93, 0.08);
}

/* --- Tablas: encabezado azul naval, texto en blanco ------------------- */

html[data-tema="claro"] th { color: #ffffff; }
html[data-tema="claro"] tr:nth-child(even) td { background: rgba(27, 54, 93, 0.04); }
html[data-tema="claro"] tbody tr:hover td { background: rgba(27, 54, 93, 0.08); }
html[data-tema="claro"] .fila-clic.abierta td {
  background: rgba(27, 54, 93, 0.1);
  color: var(--text-primary);
}
html[data-tema="claro"] .fila-trabajo:hover,
html[data-tema="claro"] .caso:hover,
html[data-tema="claro"] .sab.on,
html[data-tema="claro"] .entregables a:hover {
  background: rgba(27, 54, 93, 0.08);
}
html[data-tema="claro"] .chip-lin {
  background: rgba(27, 54, 93, 0.06);
  color: var(--navy-700);
}
html[data-tema="claro"] .badge {
  background: rgba(27, 54, 93, 0.04);
}
html[data-tema="claro"] .drop {
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.04), rgba(27, 54, 93, 0.02));
}
html[data-tema="claro"] .drop:hover {
  background: linear-gradient(180deg, rgba(27, 54, 93, 0.07), rgba(27, 54, 93, 0.03));
}
html[data-tema="claro"] .rd-globo {
  background: var(--surface-primary);
  color: var(--text-primary);
}
html[data-tema="claro"] .rd-in { fill: var(--text-primary); }
html[data-tema="claro"] .rd-op { fill: var(--text-secondary); }

/* Piezas con fondo azul naval fijo: su texto se mantiene claro. */

html[data-tema="claro"] .cti-term-title { color: #d1d5db; }
html[data-tema="claro"] .cti-live { color: #d4af37; }
html[data-tema="claro"] .cti-live i { background: #c5a059; }
html[data-tema="claro"] .red-desplegable button:hover {
  background: rgba(27, 54, 93, 0.1);
  color: var(--navy-700);
}

html[data-tema="claro"] .tesela-oscura {
  filter: none;
}

html[data-tema="claro"] .sala {
  --sala-fondo: #e8edf3;
  --sala-card: #ffffff;
  --sala-azul: #1b365d;
  --sala-roja: #a03725;
  --sala-ambar: #8c6d2a;
  --sala-verde: #1b7a63;
  --sala-texto: #17222f;
  --sala-muted: #55637a;
  --sala-linea: #ccd5e2;
}

html[data-tema="claro"] .sala-cinta-acc select,
html[data-tema="claro"] .mapa-sala,
html[data-tema="claro"] .grafo-sala {
  background: var(--superficie);
  color: var(--tinta);
}

html[data-tema="claro"] .leaflet-container {
  background: var(--superficie);
}

html[data-tema="claro"] .kpi {
  border-top-color: #153A56;
}
html[data-tema="claro"] .kpi .n {
  color: #153A56;
}
html[data-tema="claro"] .rd-objetivo {
  fill: #f7f9fb;
}
html[data-tema="claro"] .rd-objetivo-op {
  fill: #dceaf5;
}