/* ==========================================================================
   Atlas Leyes de la Vida — Hoja de estilos principal
   Autor: Jeshua Romero Guadarrama
   Tokens de diseño, disposición general y componentes.
   ========================================================================== */

/* ----------------------- Tokens de diseño ----------------------- */
:root {
  --fuente: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulo: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --fuente-mono: "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;

  --fondo: #f5f6fb;
  --superficie: #ffffff;
  --superficie-2: #edeff7;
  --borde: #dce0ee;
  --tinta: #12152b;
  --tinta-suave: #4a506b;
  --tinta-tenue: #8189a3;

  --acento: #5b5fd8;
  --acento-2: #8b5cf6;
  --acento-tinta: #ffffff;
  --grad-acento: linear-gradient(135deg, #6366f1, #8b5cf6);

  --eco: #0891b2;
  --psi: #9333ea;
  --soc: #db2777;
  --ges: #d97706;
  --tec: #2563eb;
  --est: #059669;
  --med: #dc2626;
  --fis: #ea580c;
  --qui: #65a30d;
  --bio: #0d9488;
  --mat: #a21caf;
  --fil: #64748b;

  --ok: #16a34a;
  --error: #dc2626;

  --radio: 14px;
  --radio-s: 9px;
  --sombra: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 28px rgba(51, 65, 130, 0.1);
  --sombra-alta: 0 4px 14px rgba(15, 23, 42, 0.12), 0 20px 56px rgba(51, 65, 130, 0.2);
  --transicion: 170ms cubic-bezier(0.3, 0.6, 0.3, 1);
}

html[data-tema="oscuro"] {
  --fondo: #0d1020;
  --superficie: #161a2e;
  --superficie-2: #1f2440;
  --borde: #2d3352;
  --tinta: #e8eaf6;
  --tinta-suave: #a7aec9;
  --tinta-tenue: #6d7594;

  --acento: #818cf8;
  --acento-2: #a78bfa;
  --acento-tinta: #10122b;
  --grad-acento: linear-gradient(135deg, #818cf8, #a78bfa);

  --eco: #22d3ee;
  --psi: #c084fc;
  --soc: #f472b6;
  --ges: #fbbf24;
  --tec: #60a5fa;
  --est: #34d399;
  --med: #f87171;
  --fis: #fb923c;
  --qui: #a3e635;
  --bio: #2dd4bf;
  --mat: #e879f9;
  --fil: #94a3b8;

  --ok: #4ade80;
  --error: #f87171;

  --sombra: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 28px rgba(0, 0, 0, 0.38);
  --sombra-alta: 0 4px 14px rgba(0, 0, 0, 0.5), 0 20px 56px rgba(0, 0, 0, 0.55);
}

/* ----------------------- Base ----------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tinta);
  background:
    radial-gradient(1100px 500px at 85% -10%, color-mix(in srgb, var(--acento) 7%, transparent), transparent 60%),
    radial-gradient(900px 420px at -10% 0%, color-mix(in srgb, var(--eco) 5%, transparent), transparent 55%),
    var(--fondo);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 0.5em; }
h1, h2 { font-family: var(--fuente-titulo); letter-spacing: -0.015em; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--acento); }
button { font-family: inherit; font-size: inherit; cursor: pointer; }
svg { display: block; max-width: 100%; }
code { font-family: var(--fuente-mono); font-size: 0.9em; background: var(--superficie-2); padding: 1px 6px; border-radius: 5px; }
[hidden] { display: none !important; }

::selection { background: var(--acento); color: var(--acento-tinta); }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 999px; border: 3px solid var(--fondo); }
::-webkit-scrollbar-thumb:hover { background: var(--tinta-tenue); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ----------------------- Cabecera ----------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--superficie) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--borde);
  transition: transform 350ms cubic-bezier(0.3, 0.6, 0.3, 1);
}

/* Retirada durante la lectura: el menú lateral aparta la cabecera con una
   transformación y no con display, porque así la animación es suave y
   reversible al volver arriba. */
.cabecera.retirada { transform: translateY(-100%); }

.cabecera::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--eco), var(--psi), var(--soc), var(--ges), var(--tec), var(--est), var(--med), var(--fis), var(--qui), var(--bio), var(--mat), var(--fil));
  opacity: 0.75;
}

.cabecera-contenido {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.18rem;
  text-decoration: none;
  color: var(--tinta);
  margin-right: auto;
}

.marca-icono {
  font-size: 1.45rem;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--grad-acento);
  box-shadow: var(--sombra);
}

.nav-principal { display: flex; gap: 4px; flex-wrap: wrap; }

.nav-principal a {
  padding: 8px 15px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--tinta-suave);
  font-weight: 600;
  font-size: 0.94rem;
  transition: background var(--transicion), color var(--transicion), transform var(--transicion);
}

.nav-principal a:hover { background: var(--superficie-2); color: var(--tinta); transform: translateY(-1px); }

.nav-principal a.activo {
  background: var(--grad-acento);
  color: var(--acento-tinta);
  box-shadow: var(--sombra);
}

.boton-tema {
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--tinta);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.boton-tema:hover { transform: rotate(20deg) scale(1.05); box-shadow: var(--sombra); }

/* ----------------------- Disposición general ----------------------- */
main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px 90px;
}

.vista { animation: aparecer 260ms cubic-bezier(0.2, 0.7, 0.3, 1); }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ----------------------- Portada ----------------------- */
.heroe {
  text-align: center;
  padding: 54px 16px 42px;
  position: relative;
}

.heroe h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  margin-bottom: 0.4em;
  background: linear-gradient(120deg, var(--tinta) 20%, var(--acento) 55%, var(--soc) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--tinta);
}

.heroe .subtitulo {
  font-size: 1.14rem;
  color: var(--tinta-suave);
  max-width: 740px;
  margin: 0 auto 30px;
}

.heroe-acciones {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.boton {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

.boton:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.boton:active { transform: translateY(0); }

.boton-primario { background: var(--grad-acento); color: var(--acento-tinta); box-shadow: var(--sombra); }

.boton-secundario {
  background: var(--superficie);
  color: var(--tinta);
  border-color: var(--borde);
}

.boton-secundario:hover { border-color: var(--acento); }

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 42px 0;
}

.cifra {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px 12px 16px;
  text-align: center;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.cifra:hover { transform: translateY(-3px); box-shadow: var(--sombra); }

.cifra strong {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 2.3rem;
  line-height: 1.1;
  background: var(--grad-acento);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--acento);
}

.cifra span { color: var(--tinta-tenue); font-size: 0.88rem; }

.seccion-titulo {
  font-family: var(--fuente-titulo);
  font-size: 1.45rem;
  margin: 44px 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.rejilla-categorias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 14px;
}

.tarjeta-categoria {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  text-decoration: none;
  color: var(--tinta);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

.tarjeta-categoria::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cat-color, var(--acento)), color-mix(in srgb, var(--cat-color, var(--acento)) 20%, transparent));
}

.tarjeta-categoria::after {
  content: "";
  position: absolute;
  top: -46px;
  right: -46px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cat-color, var(--acento)) 14%, transparent), transparent 70%);
  pointer-events: none;
}

.tarjeta-categoria:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-alta);
  border-color: color-mix(in srgb, var(--cat-color, var(--acento)) 55%, var(--borde));
}

.cat-cabecera { display: flex; align-items: center; gap: 12px; }

.cat-icono {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 1.45rem;
  border-radius: 13px;
  background: color-mix(in srgb, var(--cat-color, var(--acento)) 14%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--acento)) 35%, transparent);
  transition: transform var(--transicion);
}

.tarjeta-categoria:hover .cat-icono { transform: scale(1.12) rotate(-6deg); }

.cat-cabecera h3 { margin: 0; font-size: 1.06rem; line-height: 1.2; }

.cat-desc { margin: 0; color: var(--tinta-suave); font-size: 0.87rem; flex: 1; }

.cat-pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.cat-contador {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  color: var(--cat-color, var(--acento));
  background: color-mix(in srgb, var(--cat-color, var(--acento)) 12%, transparent);
}

.cat-flecha {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tinta-tenue);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--transicion), transform var(--transicion), color var(--transicion);
}

.tarjeta-categoria:hover .cat-flecha {
  opacity: 1;
  transform: none;
  color: var(--cat-color, var(--acento));
}

@media (hover: none) {
  .cat-flecha { opacity: 1; transform: none; }
}

/* Ley del día */
.tarjeta-dia {
  background:
    radial-gradient(420px 130px at 90% -10%, color-mix(in srgb, var(--cat-color, var(--acento)) 16%, transparent), transparent),
    var(--superficie);
  border-width: 1px;
  box-shadow: var(--sombra);
}

/* ----------------------- Catálogo ----------------------- */
.controles-catalogo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.buscador { flex: 1 1 280px; position: relative; }

.buscador input {
  width: 100%;
  padding: 13px 16px 13px 44px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--tinta);
  font-size: 1rem;
  outline: none;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}

.buscador input:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 15%, transparent);
}

.buscador::before {
  content: "🔍";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  opacity: 0.65;
}

.filtros { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--tinta-suave);
  font-weight: 600;
  font-size: 0.85rem;
  transition: all var(--transicion);
}

.chip:hover {
  border-color: var(--chip-color, var(--acento));
  color: var(--tinta);
  transform: translateY(-1px);
  box-shadow: var(--sombra);
}

.chip.activo {
  background: var(--chip-color, var(--acento));
  border-color: var(--chip-color, var(--acento));
  color: #fff;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--chip-color, var(--acento)) 40%, transparent);
}

html[data-tema="oscuro"] .chip.activo { color: #10122b; }

.chip-n {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.resumen-resultados { color: var(--tinta-tenue); font-size: 0.9rem; margin: 0 0 14px; }

.rejilla-leyes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.tarjeta-ley {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

.tarjeta-ley::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cat-color, var(--acento)), transparent 70%);
  opacity: 0.85;
}

.tarjeta-ley:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra);
  border-color: color-mix(in srgb, var(--cat-color, var(--acento)) 50%, var(--borde));
  background: linear-gradient(170deg, color-mix(in srgb, var(--cat-color, var(--acento)) 5%, var(--superficie)), var(--superficie) 40%);
}

.tarjeta-ley .etiquetas { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.insignia {
  display: inline-block;
  padding: 3.5px 11px;
  border-radius: 999px;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--cat-color, var(--acento));
}

html[data-tema="oscuro"] .insignia { color: #10122b; }

.insignia-interactivo {
  background: color-mix(in srgb, var(--cat-color, var(--acento)) 10%, transparent);
  color: var(--cat-color, var(--acento));
  border: 1px solid color-mix(in srgb, var(--cat-color, var(--acento)) 55%, transparent);
}

html[data-tema="oscuro"] .insignia-interactivo { color: var(--cat-color, var(--acento)); }

.tarjeta-ley h3 { font-size: 1.08rem; margin: 0; font-family: var(--fuente-titulo); }

.tarjeta-ley .enunciado {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.92rem;
  font-style: italic;
  flex: 1;
}

.tarjeta-ley .autoria { margin: 0; color: var(--tinta-tenue); font-size: 0.82rem; }

.sin-resultados { text-align: center; padding: 60px 20px; color: var(--tinta-tenue); }

/* ----------------------- Modal de detalle ----------------------- */
.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: color-mix(in srgb, #14100a 55%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: 20px;
  animation: aparecer 170ms ease;
}

.modal {
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  max-width: 720px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 30px;
  position: relative;
  border-top: 6px solid var(--cat-color, var(--acento));
  background-image: radial-gradient(500px 160px at 20% -5%, color-mix(in srgb, var(--cat-color, var(--acento)) 9%, transparent), transparent);
  animation: subir 240ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes subir {
  from { opacity: 0; transform: translateY(22px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.modal-cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--tinta);
  font-size: 1rem;
  display: grid;
  place-items: center;
  transition: transform var(--transicion), border-color var(--transicion);
}

.modal-cerrar:hover { transform: rotate(90deg); border-color: var(--cat-color, var(--acento)); }

.modal h2 { padding-right: 44px; }

.modal .meta { color: var(--tinta-tenue); font-size: 0.88rem; margin-bottom: 16px; }

.modal blockquote {
  margin: 0 0 18px;
  padding: 15px 19px;
  border-left: 4px solid var(--cat-color, var(--acento));
  background: color-mix(in srgb, var(--cat-color, var(--acento)) 7%, var(--superficie-2));
  border-radius: 0 var(--radio-s) var(--radio-s) 0;
  font-family: var(--fuente-titulo);
  font-style: italic;
  font-size: 1.08rem;
}

.modal h4 {
  margin: 20px 0 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cat-color, var(--tinta-tenue));
}

.relacionadas { display: flex; flex-wrap: wrap; gap: 8px; }

.relacionadas button {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--tinta);
  font-size: 0.85rem;
  transition: border-color var(--transicion), transform var(--transicion);
}

.relacionadas button:hover { border-color: var(--cat-color, var(--acento)); transform: translateY(-1px); }

.modal .accion-interactivo { margin-top: 22px; }

/* ----------------------- Interactivos ----------------------- */
.rejilla-interactivos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.tarjeta-interactivo {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.tarjeta-interactivo:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: color-mix(in srgb, var(--acento) 40%, var(--borde)); }

.tarjeta-interactivo .icono {
  font-size: 1.7rem;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--superficie-2);
}

.tarjeta-interactivo h3 { margin: 0; font-size: 1.05rem; font-family: var(--fuente-titulo); }
.tarjeta-interactivo p { margin: 0; color: var(--tinta-suave); font-size: 0.9rem; flex: 1; }

.panel-interactivo {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 26px;
  margin-top: 8px;
  box-shadow: var(--sombra);
}

.panel-interactivo .volver {
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--tinta);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  margin-bottom: 16px;
  transition: transform var(--transicion), border-color var(--transicion);
}

.panel-interactivo .volver:hover { transform: translateX(-3px); border-color: var(--acento); }

.panel-interactivo h2 { font-size: 1.6rem; }

.panel-interactivo .descripcion { color: var(--tinta-suave); max-width: 760px; }

.zona-sim { margin-top: 18px; display: grid; gap: 16px; }

.fila-controles {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.fila-controles label { font-weight: 600; font-size: 0.92rem; }

.fila-controles input[type="range"] { accent-color: var(--acento); width: 220px; cursor: pointer; }

.fila-controles select,
.fila-controles input[type="text"] {
  padding: 9px 12px;
  border-radius: var(--radio-s);
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--tinta);
  font-size: 0.95rem;
}

.boton-sim {
  padding: 9px 19px;
  border-radius: 999px;
  border: none;
  background: var(--grad-acento);
  color: var(--acento-tinta);
  font-weight: 700;
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.boton-sim:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.boton-sim:active { transform: translateY(0); }
.boton-sim:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.boton-sim.secundario {
  background: var(--superficie-2);
  color: var(--tinta);
  border: 1px solid var(--borde);
  box-shadow: none;
}

.boton-sim.secundario:hover { border-color: var(--acento); }

.lienzo-sim {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  padding: 16px;
  overflow-x: auto;
}

.nota-sim { font-size: 0.88rem; color: var(--tinta-tenue); margin: 0; }

.marcador { font-size: 1.05rem; font-weight: 700; }
.marcador .ok { color: var(--ok); }
.marcador .mal { color: var(--error); }

/* Rejilla de la criba de Sturgeon */
.rejilla-criba {
  display: grid;
  grid-template-columns: repeat(10, minmax(26px, 42px));
  gap: 5px;
  justify-content: center;
}

.celda-criba {
  aspect-ratio: 1;
  border-radius: 7px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  font-size: 1.05rem;
  display: grid;
  place-items: center;
  transition: transform 120ms ease, border-color 120ms ease;
  padding: 0;
}

.celda-criba:not(.revelada):hover { transform: scale(1.14); border-color: var(--acento); }
.celda-criba.revelada { cursor: default; background: var(--superficie-2); }
.celda-criba.joya { background: color-mix(in srgb, var(--est) 24%, var(--superficie)); border-color: var(--est); }

/* Juego de Hick / Weber */
.zona-objetivos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  min-height: 120px;
  align-items: center;
}

.boton-color {
  width: 64px;
  height: 64px;
  border-radius: var(--radio-s);
  border: 2px solid rgba(0, 0, 0, 0.15);
  transition: transform 100ms ease;
}

.boton-color:hover { transform: scale(1.1); }

/* Lienzo de Fitts */
.campo-fitts {
  position: relative;
  height: 340px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  overflow: hidden;
  touch-action: manipulation;
}

.diana {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--acento-2), var(--acento));
  border: none;
  transform: translate(-50%, -50%);
  box-shadow: var(--sombra);
}

.diana:hover { filter: brightness(1.1); }

/* Monedas de Gresham */
.fila-monedas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; }

.moneda {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  border: 2px solid;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
}

.moneda-buena { background: linear-gradient(145deg, #f2f2f7, #d5d5de); border-color: #9ca3af; color: #374151; }
.moneda-mala { background: linear-gradient(145deg, #e3bd94, #c79a6b); border-color: #92400e; color: #5b2d05; }

/* Tabla genérica */
.tabla-sim { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.tabla-sim th, .tabla-sim td { padding: 7px 10px; border-bottom: 1px solid var(--borde); text-align: left; }
.tabla-sim th { color: var(--tinta-tenue); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; }
.tabla-sim tbody tr { transition: background var(--transicion); }
.tabla-sim tbody tr:hover { background: color-mix(in srgb, var(--acento) 5%, transparent); }

textarea.entrada-texto {
  width: 100%;
  min-height: 110px;
  padding: 12px;
  border-radius: var(--radio-s);
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--tinta);
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
}

textarea.entrada-texto:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 14%, transparent); }

/* ----------------------- Estudio (quiz) ----------------------- */
.panel-estudio {
  max-width: 760px;
  margin: 0 auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 30px;
  box-shadow: var(--sombra);
}

.progreso-quiz {
  height: 8px;
  border-radius: 999px;
  background: var(--superficie-2);
  overflow: hidden;
  margin-bottom: 20px;
}

.progreso-quiz > div {
  height: 100%;
  background: var(--grad-acento);
  border-radius: 999px;
  transition: width 260ms ease;
}

.pregunta-quiz { font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; }

.contexto-quiz { color: var(--tinta-tenue); font-size: 0.85rem; margin-bottom: 18px; }

.opciones-quiz { display: grid; gap: 10px; }

.opcion-quiz {
  text-align: left;
  padding: 13px 17px;
  border-radius: var(--radio-s);
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--tinta);
  font-size: 0.98rem;
  transition: border-color var(--transicion), background var(--transicion), transform var(--transicion);
}

.opcion-quiz:hover:not(:disabled) {
  border-color: var(--acento);
  background: color-mix(in srgb, var(--acento) 6%, var(--superficie));
  transform: translateX(3px);
}

.opcion-quiz.correcta {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 14%, var(--superficie));
  font-weight: 700;
}

.opcion-quiz.incorrecta {
  border-color: var(--error);
  background: color-mix(in srgb, var(--error) 12%, var(--superficie));
}

.opcion-quiz:disabled { cursor: default; }

.retro-quiz {
  margin-top: 16px;
  padding: 14px 17px;
  border-radius: var(--radio-s);
  background: var(--superficie-2);
  border-left: 3px solid var(--acento);
  font-size: 0.95rem;
}

.retro-quiz strong.bien { color: var(--ok); }
.retro-quiz strong.mal { color: var(--error); }

.pie-quiz {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  gap: 12px;
  flex-wrap: wrap;
}

.resultado-final { text-align: center; padding: 20px 0; }

.resultado-final .nota {
  font-family: var(--fuente-titulo);
  font-size: 3.4rem;
  font-weight: 800;
  background: var(--grad-acento);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--acento);
  display: block;
}

/* ----------------------- Pie de página ----------------------- */
.pie {
  border-top: 1px solid var(--borde);
  padding: 30px 20px;
  text-align: center;
  color: var(--tinta-tenue);
  font-size: 0.9rem;
}

.pie a { color: var(--tinta-suave); }

/* ----------------------- Adaptable ----------------------- */
@media (max-width: 640px) {
  .cabecera-contenido { padding: 10px 12px; }
  .nav-principal a { padding: 7px 10px; font-size: 0.85rem; }
  main { padding: 20px 14px 60px; }
  .modal { padding: 22px; }
  .rejilla-criba { grid-template-columns: repeat(10, 1fr); }
  .campo-fitts { height: 280px; }
  .heroe { padding-top: 34px; }
}

@media print {
  .cabecera, .pie, .boton-tema, .controles-catalogo { display: none; }
  body { background: #fff; color: #000; }
  .tarjeta-ley { break-inside: avoid; box-shadow: none; }
}

/* ----------------------- Menú lateral de secciones ----------------------- */
/* Botón flotante y panel que sustituyen a la cabecera cuando esta se retira
   durante la lectura. El botón vive en el borde izquierdo a media altura para
   no chocar con el botón de casa, que ocupa la esquina inferior derecha.
   La regla global de menos movimiento vuelve instantáneas estas transiciones,
   de modo que con esa preferencia no hay animación. */
.boton-menu-lateral {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translate(-110%, -50%);
  z-index: 110;
  min-width: 46px;
  min-height: 46px;
  border: 1px solid var(--borde);
  border-left: none;
  border-radius: 0 12px 12px 0;
  background: var(--superficie);
  color: var(--acento);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--sombra);
  visibility: hidden;
  transition: transform 300ms cubic-bezier(0.3, 0.6, 0.3, 1), visibility 300ms,
    background var(--transicion), color var(--transicion);
}

.boton-menu-lateral.visible { visibility: visible; transform: translate(0, -50%); }
.boton-menu-lateral:hover { background: var(--grad-acento); color: var(--acento-tinta); border-color: transparent; }
.boton-menu-lateral:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

.boton-menu-lateral .ico {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* El fondo atenuado recoge el clic fuera del panel, para que cerrar no active
   por accidente lo que quede debajo. */
.menu-lateral-fondo {
  position: fixed;
  inset: 0;
  z-index: 115;
  background: color-mix(in srgb, var(--tinta) 32%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms, visibility 300ms;
}

.menu-lateral-fondo.abierto { opacity: 1; visibility: visible; }

/* El ancho del panel se limita para que en escritorio nunca cubra todo el
   contenido, mientras que en pantallas estrechas puede tomar casi todo el ancho. */
.menu-lateral {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 120;
  width: min(320px, 86vw);
  background: var(--superficie);
  border-right: 1px solid var(--borde);
  box-shadow: var(--sombra-alta);
  padding: 16px 14px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform 300ms cubic-bezier(0.3, 0.6, 0.3, 1), visibility 300ms;
}

.menu-lateral.abierto { transform: none; visibility: visible; }

.menu-lateral-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px 10px;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 8px;
}

.menu-lateral-titulo {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tinta-tenue);
}

.menu-lateral-cerrar {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--tinta-suave);
  border-radius: var(--radio-s);
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--transicion), color var(--transicion);
}

.menu-lateral-cerrar:hover { border-color: var(--acento); color: var(--acento); }
.menu-lateral-cerrar:active { transform: scale(0.94); }

.menu-lateral-lista { display: flex; flex-direction: column; gap: 3px; }

/* Las opciones repiten el lenguaje visual de la navegación principal y
   garantizan un blanco táctil de al menos 44 píxeles de alto. */
.menu-lateral-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 13px;
  border: none;
  border-radius: var(--radio-s);
  background: transparent;
  color: var(--tinta-suave);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transicion), background var(--transicion);
}

.menu-lateral-item:hover { color: var(--tinta); background: var(--superficie-2); }
.menu-lateral-item.activa { color: var(--acento); background: color-mix(in srgb, var(--acento) 12%, transparent); }
.menu-lateral-item:active { background: color-mix(in srgb, var(--acento) 18%, transparent); }
.menu-lateral-item:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

/* ----------------------- Botón de casa ----------------------- */
/* Enlace flotante al sitio principal, presente tanto en la aplicación como en
   las páginas estáticas. Se ancla a la esquina inferior derecha respetando el
   área segura de los teléfonos con muesca. */
.boton-casa {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 120;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-acento);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18), 0 10px 30px rgba(51, 65, 130, 0.25);
  text-decoration: none;
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.boton-casa svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.boton-casa:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.24), 0 18px 44px rgba(51, 65, 130, 0.32); }
.boton-casa:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

@media (max-width: 600px) {
  .boton-casa {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: 48px;
    height: 48px;
  }
  .boton-casa svg { width: 23px; height: 23px; }
}

@media print {
  .boton-casa,
  .boton-menu-lateral,
  .menu-lateral,
  .menu-lateral-fondo { display: none; }
}