/*
 * Cimientos de la hoja de estilo.
 * Reúne las variables de color y de espacio de los dos temas, la barra de desplazamiento y la barra de progreso de lectura.
 * Se carga en primer lugar porque todo lo demás depende de sus variables.
 */

/* ---------- Tokens ---------- */
:root {
  /* Marca */
  --marca-500: #0e7490;
  --marca-600: #0b6178;
  --marca-700: #155e6e;
  --marca-400: #22a6bd;
  /* La marca como tinta de texto o de ícono. Se separa de --marca-500 porque en el tema
     oscuro el teal de marca pierde contraste y hay que sustituirlo por el paso claro.
     Medido: 5.36 a 1 sobre superficie y 4.53 a 1 sobre el fondo de la pestaña activa. */
  --marca-tinta: #0e7490;
  --marca-grad: linear-gradient(135deg, #0e7490 0%, #0891b2 55%, #0e7490 100%);

  /* Superficies (claro) */
  --fondo: #eef2f7;
  --fondo-2: #e6ecf3;
  --superficie: #ffffff;
  --superficie-2: #f7f9fc;
  --superficie-3: #eef3f8;

  /* Texto: 16.5, 7.6 y 5.05 a 1 de contraste sobre superficie. La tinta terciaria
     se midió también sobre superficie 2 (4.79) y superficie 3 (4.53), que son los
     otros fondos donde aparece como texto, para no bajar de 4.5 a 1 en ninguno. */
  --tinta: #14202e;
  --tinta-2: #43566a;
  --tinta-3: #5d7183;
  /* La tinta intensa coincide con la tinta en el tema claro y sube a blanco puro en el oscuro, para los rótulos que degradan hacia el color de marca. */
  --tinta-intensa: #14202e;

  /* Bordes y sombras */
  --borde: #dde5ee;
  --borde-2: #e9eef4;
  --anillo: rgba(14, 116, 144, 0.35);
  --sombra-sm: 0 1px 2px rgba(16, 40, 60, 0.06), 0 1px 3px rgba(16, 40, 60, 0.05);
  --sombra-md: 0 4px 14px rgba(16, 40, 60, 0.09), 0 2px 6px rgba(16, 40, 60, 0.05);
  --sombra-lg: 0 18px 45px rgba(16, 40, 60, 0.18), 0 8px 20px rgba(16, 40, 60, 0.10);
  --sombra-marca: 0 8px 24px rgba(14, 116, 144, 0.30);

  /* Estados. Cada tinta está medida sobre su fondo suave y sobre superficie,
     que son los dos fondos donde se usa como texto:
       exito   4.57 sobre suave, 5.02 sobre superficie
       alerta  4.51 sobre suave, 5.02 sobre superficie
       peligro 5.30 sobre suave, 6.47 sobre superficie
       info    6.41 sobre suave, 7.90 sobre superficie */
  --exito: #15803d;
  --exito-suave: #dcfce7;
  --alerta: #b45309;
  --alerta-suave: #fef3c7;
  --peligro: #b91c1c;
  --peligro-suave: #fee2e2;
  --info: #4338ca;
  --info-suave: #e0e7ff;
  /* Variante de la alerta pensada como tinta de texto, que se aclara en el tema oscuro porque el ámbar de base pierde contraste sobre las superficies oscuras. */
  --alerta-tinta: #b45309;
  /* Opacidad de la mezcla de las zonas de la escala de las calculadoras. Es un token
     para que el tema oscuro pueda subirla sin duplicar las reglas de las zonas. */
  --mezcla-zona: 55%;

  /* Modalidades (color por técnica) */
  --rx: #6d28d9;      --rx-suave: #ede9fe;
  --tc: #0369a1;      --tc-suave: #e0f2fe;
  --rm: #be185d;      --rm-suave: #fce7f3;
  --us: #047857;      --us-suave: #d1fae5;
  /* Tinta de la modalidad TC para texto e íconos, aclarada en el tema oscuro por la misma razón de contraste que la alerta. */
  --tc-tinta: #0369a1;

  /* Opacidad de cada mancha de la aurora. Son tokens para que el tema oscuro
     pueda atenuarlas sin duplicar las reglas de las manchas. */
  --aurora-1: 0.5;
  --aurora-2: 0.32;
  --aurora-3: 0.28;

  /* Geometría y movimiento */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --paso: cubic-bezier(0.16, 1, 0.3, 1);
  --max: 1180px;
}

/*
 * Tema oscuro.
 * Las tintas de estado no se heredan del tema claro sino que tienen su propio paso claro,
 * porque las tintas calculadas para fondo blanco caen a entre 1.97 y 2.77 a 1 sobre los
 * fondos suaves oscurecidos. Cada paso está medido con la luminancia relativa WCAG sobre
 * sus dos fondos:
 *
 *   exito   #6ee7b7   9.11 sobre suave, 11.17 sobre superficie
 *   alerta  #fcd34d   9.61 sobre suave, 11.81 sobre superficie
 *   peligro #fda4b8   8.67 sobre suave,  9.06 sobre superficie
 *   info    #a5b4fc   7.80 sobre suave,  8.54 sobre superficie
 *   marca   #22a6bd   5.88 sobre superficie, 4.91 sobre la pestaña activa
 *   tinta 3 #8496ad   5.63 sobre superficie, 4.67 sobre superficie 3
 *
 * El bloque aparece dos veces con los mismos valores: Una bajo la preferencia del sistema,
 * que rige cuando el documento no fija data-tema, y otra bajo data-tema="oscuro", que rige
 * cuando quien usa la aplicación lo eligió a mano. El :where mantiene la especificidad en
 * cero para que data-tema="claro" pueda ganar.
 */
@media (prefers-color-scheme: dark) {
  :root:where([data-tema="oscuro"]) {
    --fondo: #0b1220;
    --fondo-2: #0e1626;
    --superficie: #131c2e;
    --superficie-2: #18233a;
    --superficie-3: #1e2b45;

    --marca-tinta: #22a6bd;

    --tinta: #e8eef6;
    --tinta-2: #a7b6c9;
    --tinta-3: #8496ad;
    --tinta-intensa: #ffffff;
    --alerta-tinta: #e0a13d;
    --tc-tinta: #7cc7e8;

    --borde: #24334d;
    --borde-2: #1d2a40;
    --anillo: rgba(34, 166, 189, 0.45);
    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sombra-md: 0 6px 18px rgba(0, 0, 0, 0.45);
    --sombra-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
    --sombra-marca: 0 8px 26px rgba(8, 145, 178, 0.45);

    --exito: #6ee7b7;
    --exito-suave: #0d3320;
    --alerta: #fcd34d;
    --alerta-suave: #3a2a09;
    --peligro: #fda4b8;
    --peligro-suave: #3a1414;
    --info: #a5b4fc;
    --info-suave: #1e1f4a;
    --mezcla-zona: 75%;

    --rx-suave: #241a4a; --tc-suave: #0a2b42; --rm-suave: #3a1229; --us-suave: #0a3126;

    --aurora-1: 0.35;
    --aurora-2: 0.28;
    --aurora-3: 0.28;
  }
}

:root[data-tema="oscuro"] {
  --fondo: #0b1220;
  --fondo-2: #0e1626;
  --superficie: #131c2e;
  --superficie-2: #18233a;
  --superficie-3: #1e2b45;

  --marca-tinta: #22a6bd;

  --tinta: #e8eef6;
  --tinta-2: #a7b6c9;
  --tinta-3: #8496ad;
  --tinta-intensa: #ffffff;
  --alerta-tinta: #e0a13d;
  --tc-tinta: #7cc7e8;

  --borde: #24334d;
  --borde-2: #1d2a40;
  --anillo: rgba(34, 166, 189, 0.45);
  --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sombra-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --sombra-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
  --sombra-marca: 0 8px 26px rgba(8, 145, 178, 0.45);

  --exito: #6ee7b7;
  --exito-suave: #0d3320;
  --alerta: #fcd34d;
  --alerta-suave: #3a2a09;
  --peligro: #fda4b8;
  --peligro-suave: #3a1414;
  --info: #a5b4fc;
  --info-suave: #1e1f4a;
  --mezcla-zona: 75%;

  --rx-suave: #241a4a; --tc-suave: #0a2b42; --rm-suave: #3a1229; --us-suave: #0a3126;

  --aurora-1: 0.35;
  --aurora-2: 0.28;
  --aurora-3: 0.28;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(8, 145, 178, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(14, 116, 144, 0.08), transparent 55%),
    var(--fondo);
  background-attachment: fixed;
  color: var(--tinta);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.oculta { display: none !important; }

/* ---------- Texto solo para lectores de pantalla ----------
   Recorte accesible en lugar de display none, porque una región viva
   que nace sin pintar no se registra y pierde su primer anuncio. */
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

::selection { background: var(--marca-400); color: #fff; }

/* ---------- Foco visible ----------
   Solo aparece cuando se navega con teclado, gracias a :focus-visible,
   de modo que no molesta al usar el ratón. Sin esta regla, quien recorre
   la aplicación tabulando no sabe dónde está. */
:focus-visible {
  outline: 3px solid var(--marca-400);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.tarjeta:focus-visible, .tarjeta-texto:focus-visible, .tema-tarjeta:focus-visible { outline-offset: 2px; }

/* ---------- Saltar al contenido ----------
   Primer elemento enfocable de la página. Permite a quien usa teclado o
   lector de pantalla evitar la navegación en cada cambio de vista. */
.saltar-al-contenido {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 300;
  background: var(--marca-grad);
  color: #fff;
  padding: 0.7rem 1.4rem;
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--sombra-md);
  transition: transform 0.2s var(--paso);
}
.saltar-al-contenido:focus { transform: translate(-50%, 0); }

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--tinta-3); }

/* ---------- Barra de progreso de scroll ---------- */
.barra-progreso {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--marca-grad);
  z-index: 200;
  transition: width 0.1s linear;
}