/* ============================================================================
   tema.css — modo claro y modo oscuro, con las reglas de Linear ✓
   Cargado por TODAS las pantallas. El cambio se hace con un interruptor en nav.js.

   Aprendido de la skill popular-web-designs (templates/linear.app.md):
     · el texto NO es blanco puro (#f7f8f8) ✓
     · los bordes NO son sólidos: blanco al 5–8% ✓
     · la elevación se logra con LUMINOSIDAD (cada nivel un poco más claro) ✓
     · el acento es el único color; el resto es gris ✓
   ============================================================================ */

:root {
  /* --- claros (lo que ya teníamos) --- */
  --fondo:        #eef1f5;
  --fondo2:       #e2e8f0;
  --tarjeta:      #ffffff;
  --tarjeta2:     #f7f9fb;
  --campo:        #f7f9fb;
  --texto:        #16202b;
  --texto2:       #41586f;
  --tenue:        #6b7c91;
  --borde:        #dbe3ec;
  --borde2:       #e3eaf2;
  --linea:        #eef1f5;
  --azul:         #0f4c81;
  --azul-fuerte:  #0b3d68;
  --azul-claro:   #eef3f8;
  --azul-borde:   #cfe0f2;
  --verde:        #2f8f57;
  --verde-fuerte: #277a4a;
  --verde-bg:     #e8f6ec;
  --verde-borde:  #a9dcc0;
  --rojo:         #b04a4a;
  --rojo-fuerte:  #8a3030;
  --rojo-bg:      #fdf1f1;
  --rojo-borde:   #e0a8a8;
  --ambar:        #8a6100;
  --ambar-bg:     #fdf6e8;
  --ambar-borde:  #f0d59a;
  --aviso-bg:     #f5f9fd;
  --aviso-borde:  #dde8f3;
  --sombra:       0 4px 14px rgba(20, 50, 80, .08);
  --sombra-fuerte:0 18px 50px rgba(0, 0, 0, .18);
  --deshabilitado:#e6e9ec;
  --deshabilitado-texto:#a2a9b0;
  --nav-fondo:    #0b3d68;
  --nav-texto:    #cfe2f5;
  --nav-activo:   #ffffff;
  --nav-activo-tx:#0f4c81;
  --guardar-fondo:#12324d;
  --guardar-texto:#ffffff;
  --guardar-aviso:#ffd479;
  --modificado:   #fffaf0;
  --modificado-borde:#f0a500;
}

/* modo oscuro: mismo sistema, luminosidad invertida (regla de Linear) */
[data-tema="oscuro"] {
  --fondo:        #08090a;
  --fondo2:       #191a1b;
  --tarjeta:      #0f1011;
  --tarjeta2:     #191a1b;
  --campo:        #191a1b;
  --texto:        #f7f8f8;
  --texto2:       #d0d6e0;
  --tenue:        #8a8f98;
  --borde:        #23252a;
  --borde2:       #23252a;
  --linea:        #191a1b;
  --azul:         #4a90d9;   /* el azul de la clínica, aclarado para fondo oscuro */
  --azul-fuerte:  #5ba3e8;
  --azul-claro:   #1a2733;
  --azul-borde:   #24384d;
  --verde:        #4fc07e;
  --verde-fuerte: #5ed08d;
  --verde-bg:     #10231a;
  --verde-borde:  #245038;
  --rojo:         #e08383;
  --rojo-fuerte:  #f0a0a0;
  --rojo-bg:      #2a1618;
  --rojo-borde:   #5a2e2e;
  --ambar:        #e8b95e;
  --ambar-bg:     #26200f;
  --ambar-borde:  #4d3e1a;
  --aviso-bg:     #14181d;
  --aviso-borde:  #232a33;
  --sombra:       0 4px 14px rgba(0, 0, 0, .35);
  --sombra-fuerte:0 18px 50px rgba(0, 0, 0, .6);
  --deshabilitado:#1b1d20;
  --deshabilitado-texto:#62666d;
  --nav-fondo:    #0f1011;
  --nav-texto:    #d0d6e0;
  --nav-activo:   #f7f8f8;
  --nav-activo-tx:#08090a;
  --guardar-fondo:#191a1b;
  --guardar-texto:#f7f8f8;
  --guardar-aviso:#e8b95e;
  --modificado:   #241f10;
  --modificado-borde:#e8b95e;
}

/* por si el sistema del cliente ya está en oscuro: arranca oscuro solo ✓ */
@media (prefers-color-scheme: dark) {
  html:not([data-tema]) {
    --fondo:        #08090a;
    --fondo2:       #191a1b;
    --tarjeta:      #0f1011;
    --tarjeta2:     #191a1b;
    --campo:        #191a1b;
    --texto:        #f7f8f8;
    --texto2:       #d0d6e0;
    --tenue:        #8a8f98;
    --borde:        #23252a;
    --borde2:       #23252a;
    --linea:        #191a1b;
    --azul:         #4a90d9;
    --azul-fuerte:  #5ba3e8;
    --azul-claro:   #1a2733;
    --azul-borde:   #24384d;
    --verde:        #4fc07e;
    --verde-fuerte: #5ed08d;
    --verde-bg:     #10231a;
    --verde-borde:  #245038;
    --rojo:         #e08383;
    --rojo-fuerte:  #f0a0a0;
    --rojo-bg:      #2a1618;
    --rojo-borde:   #5a2e2e;
    --ambar:        #e8b95e;
    --ambar-bg:     #26200f;
    --ambar-borde:  #4d3e1a;
    --aviso-bg:     #14181d;
    --aviso-borde:  #232a33;
    --sombra:       0 4px 14px rgba(0, 0, 0, .35);
    --sombra-fuerte:0 18px 50px rgba(0, 0, 0, .6);
    --deshabilitado:#1b1d20;
    --deshabilitado-texto:#62666d;
    --nav-fondo:    #0f1011;
    --nav-texto:    #d0d6e0;
    --nav-activo:   #f7f8f8;
    --nav-activo-tx:#08090a;
    --guardar-fondo:#191a1b;
    --guardar-texto:#f7f8f8;
    --guardar-aviso:#e8b95e;
    --modificado:   #241f10;
    --modificado-borde:#e8b95e;
  }
}

/* ---------- el interruptor, arriba a la derecha en la barra ---------- */
#botonTema {
  margin-left: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: var(--nav-texto);
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
#botonTema:hover { background: rgba(255, 255, 255, .2); color: var(--nav-activo); }

/* ---------- el cambio no debe dar un salto brusco ---------- */
body, .card, .kpi, .opt, .box, input, select, table, th, td, header, .navpx, .savebar {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  body, .card, .kpi, .opt, .box, input, select, table, th, td, header, .navpx, .savebar { transition: none; }
}


/* ============================================================================
   La "chrome" (barra de arriba y barra de navegación) en modo oscuro.
   Problema real que reportó el usuario: "el contraste con ese azul de arriba es fuerte
   y se pierden los botones de navegación".
   Causa: la barra quedaba AZUL BRILLANTE (#4a90d9) y los botones son blanco translúcido,
   así que se lavaban ✗. En oscuro la barra va casi negra con un borde fino (regla de Linear),
   y los botones suben de contraste ✓.
   ============================================================================ */

/* --- modo claro: se queda el azul de la clínica, con los botones más firmes --- */
header nav a {
  background: rgba(255, 255, 255, .16);
  color: #eaf2fb;
}
header nav a:hover { background: rgba(255, 255, 255, .28); color: #fff; }
header nav a.on, header nav a.activo {
  background: var(--nav-activo);
  color: var(--nav-activo-tx);
  font-weight: 600;
}

/* --- modo oscuro: barra casi negra, sin azul brillante --- */
[data-tema="oscuro"] header {
  background: #0f1011;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
[data-tema="oscuro"] header h1 { color: #f7f8f8; }
[data-tema="oscuro"] header .sub { color: #8a8f98; }
[data-tema="oscuro"] header nav a {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  color: #d0d6e0;
}
[data-tema="oscuro"] header nav a:hover {
  background: rgba(255, 255, 255, .14);
  color: #f7f8f8;
}
[data-tema="oscuro"] header nav a.on, [data-tema="oscuro"] header nav a.activo {
  background: rgba(74, 144, 217, .18);
  border-color: rgba(74, 144, 217, .55);
  color: #9fcaf0;
  font-weight: 600;
}
[data-tema="oscuro"] .navpx {
  background: #08090a;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  box-shadow: none;
}
[data-tema="oscuro"] .navpx a {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  color: #d0d6e0;
  font-weight: 500;
}
[data-tema="oscuro"] .navpx a:hover { background: rgba(255, 255, 255, .14); color: #f7f8f8; }
[data-tema="oscuro"] .navpx a.principal {
  background: rgba(79, 192, 126, .18);
  border-color: rgba(79, 192, 126, .55);
  color: #86dfae;
}
[data-tema="oscuro"] .navpx .ruta { color: #8a8f98; }
[data-tema="oscuro"] #botonTema {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #d0d6e0;
}
[data-tema="oscuro"] #botonTema:hover { background: rgba(255, 255, 255, .16); color: #f7f8f8; }
[data-tema="oscuro"] .reloj, [data-tema="oscuro"] .live {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  color: #d0d6e0;
}
/* la barra verde de "Guardar cambios" también en oscuro */
[data-tema="oscuro"] .savebar {
  background: #191a1b;
  border-top: 1px solid rgba(255, 255, 255, .10);
  box-shadow: none;
  color: #f7f8f8;
}
[data-tema="oscuro"] .savebar .primary { background: #2f8f57; color: #fff; }
[data-tema="oscuro"] .savebar .ghostb { background: rgba(255, 255, 255, .10); color: #f7f8f8; }

/* lo último que quedaba flojo (lo señaló la revisión): el "Estás en:" y los sub-rótulos */
[data-tema="oscuro"] .navpx .ruta { color: #aab2bb; }
[data-tema="oscuro"] .navpx a, [data-tema="oscuro"] #botonTema { color: #dde3e9; }
[data-tema="oscuro"] .navpx a.principal { color: #93e6b8; }
[data-tema="oscuro"] header .sub, [data-tema="oscuro"] .ruta { color: #a3aab2; }


/* ============================================================================
   La barra en modo CLARO, escrita explícitamente.
   Antes el claro dependía de "que no hubiera atributo", y así el sistema operativo
   del cliente podía cambiarlo por debajo ✗. Ahora cada modo tiene su bloque ✓.
   ============================================================================ */
[data-tema="claro"] header {
  background: #0f4c81;                 /* el azul de la clínica, el de siempre ✓ */
  border-bottom: none;
}
[data-tema="claro"] header h1 { color: #ffffff; }
[data-tema="claro"] header .sub { color: rgba(255, 255, 255, .88); }
[data-tema="claro"] header nav a {
  background: rgba(255, 255, 255, .18);
  color: #f2f7fc;
}
[data-tema="claro"] header nav a:hover { background: rgba(255, 255, 255, .30); color: #fff; }
[data-tema="claro"] header nav a.on, [data-tema="claro"] header nav a.activo {
  background: #ffffff;
  color: #0f4c81;
  font-weight: 600;
}
[data-tema="claro"] .navpx {
  background: #0b3d68;
  border-bottom: none;
  box-shadow: 0 2px 8px rgba(10, 30, 50, .18);
}
[data-tema="claro"] .navpx a { background: rgba(255, 255, 255, .16); border: none; color: #eaf2fb; }
[data-tema="claro"] .navpx a:hover { background: rgba(255, 255, 255, .30); color: #fff; }
[data-tema="claro"] .navpx a.principal { background: #2f8f57; color: #fff; }
[data-tema="claro"] .navpx .ruta { color: #c3d7ec; }
[data-tema="claro"] #botonTema {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #eaf2fb;
}
[data-tema="claro"] #botonTema:hover { background: rgba(255, 255, 255, .30); color: #fff; }
[data-tema="claro"] .reloj, [data-tema="claro"] .live {
  background: rgba(255, 255, 255, .16);
  color: #eaf2fb;
}