/* ==========================================================================
   THERMO.Lab - identidad visual AGE Informática
   Fondo azul oscuro uniforme, tarjetas con borde y acentos cian,
   alto contraste, textos en español, usable en computador y tableta.
   ========================================================================== */

:root {
  --fondo: #0a1a2b;
  --fondo-2: #0e2540;
  --fondo-3: #123253;
  --superficie: #102a45;
  --borde: #1d4569;
  --cian: #2ad3e8;
  --cian-suave: rgba(42, 211, 232, 0.16);
  --cian-borde: rgba(42, 211, 232, 0.45);
  --texto: #e8f2fa;
  --texto-suave: #a8c2d8;
  --texto-tenue: #7e9cb5;
  --ok: #34d399;
  --alerta: #fbbf24;
  --error: #f87171;
  --sombra: 0 6px 18px rgba(0, 0, 0, 0.35);
  --radio: 10px;
  --ancho: 1180px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 .75rem; }
a { color: var(--cian); }

.oculto { display: none !important; }

/* ---------------------------------------------------------------- Pantallas */

.pantalla { min-height: 100vh; }
.pantalla-centrada {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
}

.tarjeta-acceso { width: 100%; max-width: 380px; }
.tarjeta-acceso label {
  display: block;
  margin: .9rem 0 .3rem;
  font-size: .85rem;
  color: var(--texto-suave);
}

.marca { color: var(--cian); margin-bottom: .25rem; }
.marca-sub { color: var(--texto-tenue); font-size: .9rem; margin-bottom: 1rem; }

/* ------------------------------------------------------------------- Barra */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1rem;
  background: var(--fondo-2);
  border-bottom: 1px solid var(--borde);
}

.barra-inicio {
  background: none;
  border: 1px solid var(--cian-borde);
  border-radius: var(--radio);
  color: var(--cian);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: .35rem .7rem;
}
.barra-inicio:hover { background: var(--cian-suave); }

.barra-titulo { flex: 1; margin: 0; font-size: 1.05rem; color: var(--texto-suave); font-weight: 500; }
.barra-derecha { display: flex; align-items: center; gap: .75rem; }
.barra-usuario { font-size: .85rem; color: var(--texto-suave); }
.barra-sesion { font-size: .8rem; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }
.barra-sesion.urgente { color: var(--alerta); font-weight: 600; }

.contenido {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

/* ------------------------------------------------------------------ Panel */

.panel-encabezado { margin-bottom: 1.25rem; }
.panel-saludo { color: var(--texto-tenue); margin: 0; }

.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}

.tarjeta-modulo {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--cian);
  border-radius: var(--radio);
  padding: 1rem;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.tarjeta-modulo:hover {
  transform: translateY(-2px);
  background: var(--fondo-3);
  border-color: var(--cian-borde);
  border-left-color: var(--cian);
}
a.tarjeta-modulo { display: block; text-decoration: none; }
a.boton { display: inline-block; text-decoration: none; }
.tarjeta-modulo h3 { color: var(--cian); margin-bottom: .25rem; }
.tarjeta-modulo p { color: var(--texto-tenue); font-size: .88rem; margin: 0; }
.tarjeta-modulo .insignia {
  display: inline-block;
  margin-top: .5rem;
  background: var(--cian-suave);
  border: 1px solid var(--cian-borde);
  border-radius: 999px;
  color: var(--cian);
  font-size: .75rem;
  padding: .1rem .55rem;
}

/* --------------------------------------------------------- Formularios */

input, select, textarea {
  width: 100%;
  padding: .55rem .7rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto);
  font: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--cian-borde);
  outline-offset: 1px;
  border-color: var(--cian);
}
textarea { min-height: 120px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; }

.campo { margin-bottom: .85rem; }
.campo > label {
  display: block;
  margin-bottom: .3rem;
  font-size: .85rem;
  color: var(--texto-suave);
}
.campos-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .85rem;
}

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: .5rem;
  padding: .55rem 1rem;
  background: var(--fondo-3);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto);
  cursor: pointer;
  font: inherit;
  transition: background .12s ease, border-color .12s ease;
}
.boton:hover:not(:disabled) { background: var(--fondo-2); border-color: var(--cian-borde); }
.boton:disabled { opacity: .5; cursor: not-allowed; }

.boton-primario {
  width: 100%;
  background: var(--cian);
  border-color: var(--cian);
  color: #062032;
  font-weight: 600;
}
.boton-primario:hover:not(:disabled) { background: #4fe0f2; border-color: #4fe0f2; }
.boton-primario.auto { width: auto; }
.boton-plano { background: none; border-color: transparent; color: var(--texto-suave); }
.boton-plano:hover:not(:disabled) { color: var(--cian); background: var(--cian-suave); }
.boton-peligro { border-color: rgba(248, 113, 113, .5); color: var(--error); }
.boton-peligro:hover:not(:disabled) { background: rgba(248, 113, 113, .12); }
.boton-pequeno { padding: .3rem .6rem; font-size: .82rem; margin-top: 0; }

.barra-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.barra-acciones .boton { margin-top: 0; }
.crece { flex: 1; }

/* ------------------------------------------------------------- Secciones */

.seccion { margin-bottom: 1.75rem; }
.seccion-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--borde);
}
.seccion-titulo h3 { margin: 0; color: var(--cian); }

details.desplegable {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 1rem;
  padding: .5rem .9rem;
}
details.desplegable > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--texto-suave);
  padding: .35rem 0;
}
details.desplegable[open] > summary { color: var(--cian); }

/* ---------------------------------------------------------------- Métricas */

.rejilla-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .85rem;
  margin-bottom: 1.25rem;
}
.metrica {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: .85rem 1rem;
}
.metrica.destacada { border-color: var(--cian-borde); background: linear-gradient(160deg, var(--fondo-3), var(--superficie)); }
.metrica .etiqueta { display: block; font-size: .78rem; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: .04em; }
.metrica .valor { display: block; font-size: 1.85rem; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.metrica.destacada .valor { color: var(--cian); }
.metrica .unidad { font-size: .85rem; color: var(--texto-tenue); font-weight: 400; }
.metrica .nota { display: block; font-size: .78rem; color: var(--texto-tenue); }

/* ------------------------------------------------------------------ Tablas */

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
thead th {
  position: sticky;
  top: 0;
  background: var(--fondo-2);
  color: var(--texto-suave);
  font-weight: 600;
  text-align: left;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
}
tbody td { padding: .5rem .7rem; border-bottom: 1px solid rgba(29, 69, 105, .5); }
tbody tr:hover { background: rgba(18, 50, 83, .55); }
tbody tr:last-child td { border-bottom: none; }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Estados */

.estado {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .78rem;
  border: 1px solid;
}
.estado-ok      { color: var(--ok);     border-color: rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .12); }
.estado-alerta  { color: var(--alerta); border-color: rgba(251, 191, 36, .45);  background: rgba(251, 191, 36, .12); }
.estado-error   { color: var(--error);  border-color: rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .12); }
.estado-neutro  { color: var(--texto-tenue); border-color: var(--borde); background: var(--fondo-3); }

.aviso {
  border-left: 4px solid;
  border-radius: 6px;
  font-size: .9rem;
  margin: .75rem 0;
  padding: .65rem .85rem;
}
.aviso-error   { border-color: var(--error);  background: rgba(248, 113, 113, .1); color: #ffd9d9; }
.aviso-alerta  { border-color: var(--alerta); background: rgba(251, 191, 36, .1);  color: #ffe9b8; }
.aviso-ok      { border-color: var(--ok);     background: rgba(52, 211, 153, .1);  color: #c8f6e4; }
.aviso-info    { border-color: var(--cian);   background: var(--cian-suave);       color: #cbeef6; }

.avisos {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 340px;
}
.avisos .aviso { box-shadow: var(--sombra); margin: 0; background-color: var(--fondo-2); }

.lista-reglas { margin: .5rem 0; padding-left: 1.1rem; color: var(--texto-tenue); font-size: .85rem; }
.vacio { color: var(--texto-tenue); font-style: italic; padding: 1rem 0; }

/* ------------------------------------------------------------ Entrenamiento */

.lector {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.5rem clamp(1rem, 5vw, 3rem);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.85;
  max-width: 44em;
  margin: 0 auto;
}
.lector p { margin: 0 0 1.1em; text-align: justify; hyphens: auto; }
.lector.oscuro-suave { background: #0d2238; }

.lector-linea-activa { background: var(--cian-suave); border-radius: 4px; }

.rsvp {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 600;
  letter-spacing: .01em;
}
.rsvp .foco { color: var(--cian); }

.cronometro {
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cian);
}

.pregunta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem;
  margin-bottom: .85rem;
}
.pregunta-enunciado { font-weight: 500; margin-bottom: .65rem; }
.opciones { display: grid; gap: .45rem; }
.opcion {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .7rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  cursor: pointer;
}
.opcion:hover { border-color: var(--cian-borde); }
.opcion input { margin: 0; }
.opcion.elegida { border-color: var(--cian); background: var(--cian-suave); }
.opcion.correcta { border-color: var(--ok); background: rgba(52, 211, 153, .12); }
.opcion.incorrecta { border-color: var(--error); background: rgba(248, 113, 113, .12); }

.pasos { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.paso {
  padding: .25rem .7rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: .8rem;
  color: var(--texto-tenue);
}
.paso.activo { border-color: var(--cian); color: var(--cian); background: var(--cian-suave); }
.paso.hecho { border-color: rgba(52, 211, 153, .5); color: var(--ok); }

.tarjeta-vocab {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.25rem;
  text-align: center;
}
.tarjeta-vocab .palabra { font-size: 2rem; font-weight: 700; color: var(--cian); }
.tarjeta-vocab .contexto { color: var(--texto-suave); font-size: .92rem; font-style: italic; }

/* ------------------------------------------------------------------ Gráfico */

.grafico { width: 100%; height: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.grafico .eje { stroke: var(--borde); stroke-width: 1; }
.grafico .rejilla { stroke: rgba(29, 69, 105, .6); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico .etiqueta-eje { fill: var(--texto-tenue); font-size: 10px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .82rem; color: var(--texto-suave); margin-top: .5rem; }
.leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.leyenda i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* --------------------------------------------------------------- Carga */

.capa-carga {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 26, 43, .6);
}
.girador {
  width: 42px;
  height: 42px;
  border: 3px solid var(--borde);
  border-top-color: var(--cian);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- Utilidades */

.fila { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.texto-tenue { color: var(--texto-tenue); }
.texto-suave { color: var(--texto-suave); }
.pequeno { font-size: .85rem; }
.centrado { text-align: center; }
.mt { margin-top: 1rem; }
.mb { margin-bottom: 1rem; }
.sin-margen { margin: 0; }
.etiqueta-evidencia {
  font-size: .72rem;
  padding: .05rem .4rem;
  border-radius: 4px;
  border: 1px solid;
}
.evidencia-A { color: var(--ok); border-color: rgba(52, 211, 153, .5); }
.evidencia-B { color: var(--alerta); border-color: rgba(251, 191, 36, .5); }

@media (max-width: 640px) {
  .barra { flex-wrap: wrap; }
  .barra-titulo { order: 3; width: 100%; }
  .contenido { padding: 1rem .75rem 2.5rem; }
  .metrica .valor { font-size: 1.5rem; }
}

@media print {
  .barra, .avisos, .capa-carga, .barra-acciones { display: none !important; }
  body { background: #fff; color: #000; }
}