/* Caso Fugaz · hoja de estilos
   Concepto: expediente policial. Papel azulado de archivo, tinta azul marino,
   cinta amarilla de pruebas como único acento. Columna única, cómoda en móvil. */

:root {
  --papel: #e7ebf0;
  --hoja: #f8fafc;
  --hoja-2: #eef1f5;
  --tinta: #13203a;
  --tinta-suave: #4b5873;
  --linea: #c8d0dc;
  --cinta: #f2c94c;
  --cinta-tinta: #2a2205;
  --bien: #1a7045;
  --bien-fondo: #dcefe4;
  --mal: #b8322a;
  --mal-fondo: #f6dedb;

  --f-titular: 'Anybody', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --f-texto: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-ficha: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --radio: 6px;
  --ancho: 46rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0c1322;
    --hoja: #141e33;
    --hoja-2: #1a2640;
    --tinta: #e6ebf3;
    --tinta-suave: #9ca8bd;
    --linea: #2b3856;
    --cinta: #f2c94c;
    --cinta-tinta: #2a2205;
    --bien: #5fd09a;
    --bien-fondo: #15392b;
    --mal: #ff8a7f;
    --mal-fondo: #43201f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #0c1322;
  --hoja: #141e33;
  --hoja-2: #1a2640;
  --tinta: #e6ebf3;
  --tinta-suave: #9ca8bd;
  --linea: #2b3856;
  --cinta: #f2c94c;
  --cinta-tinta: #2a2205;
  --bien: #5fd09a;
  --bien-fondo: #15392b;
  --mal: #ff8a7f;
  --mal-fondo: #43201f;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--cinta); outline-offset: 2px; }

.contenedor {
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 16px;
  padding-block: 0.75rem 4rem;
}

/* ---------- Cabecera ---------- */
/* Barra superior fija: siempre visible, con el logotipo (enlace a Inicio) y la racha */
:root { --alto-barra: 3.25rem; }
html { scroll-padding-top: calc(var(--alto-barra) + 0.75rem); }   /* lo que se enfoca o se desplaza no queda bajo la barra */
.barra {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.barra-interior {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0.5rem 16px;
  min-height: var(--alto-barra);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 64rem) { body.vista-caso .barra-interior { max-width: 70rem; } }
.marca { display: inline-flex; align-items: center; text-decoration: none; }
.marca img { display: block; height: 2.25rem; width: auto; }
@media (max-width: 30rem) {
  :root { --alto-barra: 2.9rem; }
  .barra-interior { padding-block: 0.4rem; }
  .marca img { height: 1.9rem; }
  .racha-mini { font-size: 0.74rem; }
}
.racha-mini {
  font-family: var(--f-ficha);
  font-size: 0.8rem;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

/* ---------- Portada ---------- */
.portada-titulo {
  font-family: var(--f-titular);
  font-weight: 900;
  font-stretch: 62%;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 9.4vw, 5rem);
  overflow-wrap: anywhere;
  line-height: 0.88;
  margin: 0.6rem 0 0.5rem;
  letter-spacing: -0.01em;
}
.portada-titulo span { display: block; }
.portada-titulo .subrayado {
  background: linear-gradient(transparent 58%, var(--cinta) 58%, var(--cinta) 92%, transparent 92%);
  width: fit-content;
}
.portada-lema {
  font-size: 1.05rem;
  max-width: 40ch;
  color: var(--tinta-suave);
  margin: 0 0 1.1rem;
}

.etiqueta {
  font-family: var(--f-ficha);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* Carpeta del caso de hoy */
.carpeta {
  position: relative;
  background: var(--hoja);
  border: 1px solid var(--linea);
  border-radius: 0 var(--radio) var(--radio) var(--radio);
  padding: 1.5rem 1.25rem 1.25rem;
  margin-top: 1.9rem;
  box-shadow: 0 1px 0 var(--linea), 0 12px 30px -18px rgba(19, 32, 58, 0.35);
}
.carpeta-pestana {
  position: absolute;
  left: -1px; top: -1.85rem;
  height: 1.9rem;
  padding: 0.35rem 1rem 0;
  background: var(--hoja);
  border: 1px solid var(--linea);
  border-bottom: 0;
  border-radius: var(--radio) var(--radio) 0 0;
  font-family: var(--f-ficha);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.carpeta h2 {
  font-family: var(--f-titular);
  font-weight: 800;
  font-stretch: 78%;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  line-height: 1.05;
  margin: 0.4rem 0 0.6rem;
  text-wrap: balance;
}
.ficha-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0 0 1.25rem;
  font-family: var(--f-ficha);
  font-size: 0.82rem;
  color: var(--tinta-suave);
}
.dificultad { display: inline-flex; align-items: center; gap: 0.4rem; }
.dificultad i {
  display: inline-block; width: 0.5rem; height: 0.9rem;
  border: 1.5px solid currentColor; border-radius: 1px;
}
.dificultad i.llena { background: currentColor; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radio);
  border: 2px solid var(--tinta);
  background: var(--tinta);
  color: var(--hoja);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(1px); }
.boton.secundario { background: transparent; color: var(--tinta); }
.boton.cinta { background: var(--cinta); border-color: var(--cinta); color: var(--cinta-tinta); }
.boton:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.boton.ancho { width: 100%; }

.estado {
  display: inline-block;
  font-family: var(--f-ficha);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  white-space: nowrap;
}
.estado.resuelto { background: var(--bien-fondo); color: var(--bien); }
.estado.fallado { background: var(--mal-fondo); color: var(--mal); }
.estado.jugando { background: var(--cinta); color: var(--cinta-tinta); }
.estado.nuevo { border: 1px solid var(--linea); color: var(--tinta-suave); }

/* Estadísticas */
.cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--tinta);
  border-bottom: 1px solid var(--linea);
  margin: 2.5rem 0;
}
.cifra { padding: 0.8rem 0.25rem; text-align: left; }
.cifra + .cifra { padding-left: 0.75rem; border-left: 1px solid var(--linea); }
.cifra b {
  display: block;
  font-family: var(--f-titular);
  font-weight: 800;
  font-stretch: 75%;
  font-size: 1.9rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cifra span { font-size: 0.78rem; color: var(--tinta-suave); }

.seccion-titulo {
  font-family: var(--f-titular);
  font-weight: 800;
  font-stretch: 75%;
  text-transform: uppercase;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  margin: 2.5rem 0 0.75rem;
}

.archivo { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linea); }
.archivo a {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid var(--linea);
  text-decoration: none;
}
.archivo a:hover { background: var(--hoja-2); }
.archivo .fecha { font-family: var(--f-ficha); font-size: 0.8rem; color: var(--tinta-suave); }
.archivo .titulo { font-weight: 600; line-height: 1.3; }
.archivo .dif { display: block; font-size: 0.8rem; color: var(--tinta-suave); font-weight: 400; }

.pasos { list-style: none; counter-reset: paso; padding: 0; margin: 0; display: grid; gap: 1rem; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.5rem; }
.pasos li::before {
  content: counter(paso);
  font-family: var(--f-titular);
  font-weight: 900;
  font-stretch: 70%;
  font-size: 1.7rem;
  line-height: 1;
}
.pasos b { display: block; }
.pasos p { margin: 0.1rem 0 0; color: var(--tinta-suave); }

.pie {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  font-size: 0.85rem;
  color: var(--tinta-suave);
}

/* ---------- Pantalla del caso ---------- */
.volver {
  font-family: var(--f-ficha);
  font-size: 0.82rem;
  text-decoration: none;
  color: var(--tinta-suave);
}
.caso-cabecera { margin: 1rem 0 1.75rem; }
.caso-cabecera h1 {
  font-family: var(--f-titular);
  font-weight: 850;
  font-stretch: 72%;
  font-size: clamp(2rem, 8vw, 3.1rem);
  line-height: 1;
  margin: 0.4rem 0 0.75rem;
  text-wrap: balance;
}
.historia p { margin: 0 0 1rem; max-width: 62ch; }

.clave {
  background: var(--cinta);
  color: var(--cinta-tinta);
  padding: 0.8rem 1rem;
  border-radius: 2px;
  font-weight: 600;
  margin: 1.5rem 0 0;
  transform: rotate(-0.6deg);
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.5);
}
.clave .etiqueta { color: var(--cinta-tinta); opacity: 0.75; display: block; }

.bloque { margin-top: 2.5rem; }
.bloque.primero { margin-top: 1.25rem; }
.bloque.primero .seccion-titulo:first-child { margin-top: 0; }

.sospechosos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
}
.ficha {
  background: var(--hoja);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1rem;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0.25rem 0.8rem;
  align-content: start;
}
.iniciales {
  grid-row: span 2;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--hoja);
  display: grid; place-items: center;
  font-family: var(--f-titular);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 1rem;
}
.ficha h3 { margin: 0; font-size: 1.05rem; line-height: 1.2; }
.ficha .rol { font-size: 0.85rem; color: var(--tinta-suave); }
.ficha p { grid-column: 1 / -1; margin: 0.5rem 0 0; font-size: 0.92rem; }
.declaracion {
  grid-column: 1 / -1;
  margin: 0.6rem 0 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--cinta);
  font-style: italic;
}

.pruebas { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.pruebas li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  background: var(--hoja);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 0.8rem 1rem;
}
.marcador {
  font-family: var(--f-ficha);
  font-weight: 600;
  font-size: 0.78rem;
  background: var(--cinta);
  color: var(--cinta-tinta);
  border-radius: 2px;
  text-align: center;
  padding: 0.15rem 0;
  margin-top: 0.2rem;
}

/* Cuaderno de deducción */
.ayuda { font-size: 0.9rem; color: var(--tinta-suave); margin: 0 0 0.75rem; }
.rejilla-envoltorio { overflow-x: auto; margin-bottom: 1rem; }
.rejilla {
  border-collapse: collapse;
  width: 100%;
  min-width: 20rem;
  background: var(--hoja);
  font-size: 0.85rem;
}
.rejilla caption {
  text-align: left;
  font-family: var(--f-ficha);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  padding-bottom: 0.35rem;
}
.rejilla th, .rejilla td { border: 1px solid var(--linea); }
.rejilla thead th {
  font-weight: 600;
  padding: 0.4rem 0.25rem;
  line-height: 1.15;
  font-size: 0.78rem;
  vertical-align: bottom;
}
.rejilla tbody th { text-align: left; padding: 0.4rem 0.6rem; font-weight: 600; white-space: nowrap; }
.rejilla td { padding: 0; text-align: center; }
.celda {
  width: 100%;
  min-height: 2.6rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--f-ficha);
  font-size: 1.05rem;
  font-weight: 600;
}
.celda[data-v="1"] { color: var(--mal); }
.celda[data-v="2"] { color: var(--bien); background: var(--bien-fondo); }
.celda:hover { background: var(--hoja-2); }

/* Pistas */
.pistas-lista { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.6rem; }
.pistas-lista li {
  border-left: 3px solid var(--cinta);
  background: var(--hoja);
  padding: 0.7rem 1rem;
  border-radius: 0 var(--radio) var(--radio) 0;
}

/* Acusación */
.acusacion {
  background: var(--hoja);
  border: 2px solid var(--tinta);
  border-radius: var(--radio);
  padding: 1.25rem;
}
.acusacion fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
.acusacion legend { font-weight: 700; margin-bottom: 0.5rem; padding: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border: 1.5px solid var(--linea);
  border-radius: 999px;
  cursor: pointer;
  background: var(--papel);
  font-weight: 500;
}
.opcion input:checked + span { background: var(--tinta); color: var(--hoja); border-color: var(--tinta); }
.opcion input:focus-visible + span { outline: 3px solid var(--cinta); outline-offset: 2px; }
.intentos { font-family: var(--f-ficha); font-size: 0.82rem; color: var(--tinta-suave); margin: 0.75rem 0 0; }
.aviso {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radio);
  background: var(--mal-fondo);
  color: var(--mal);
  font-weight: 600;
}

/* Resultado */
.resultado {
  background: var(--hoja);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.5rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.sello {
  display: inline-block;
  font-family: var(--f-titular);
  font-weight: 900;
  font-stretch: 65%;
  text-transform: uppercase;
  font-size: 2rem;
  line-height: 1;
  padding: 0.35rem 0.8rem;
  border: 3.5px solid currentColor;
  border-radius: 4px;
  transform: rotate(-4deg);
  margin: 0.25rem 0 1rem;
}
.sello.resuelto { color: var(--bien); }
.sello.fallado { color: var(--mal); }
@media (prefers-reduced-motion: no-preference) {
  .sello.animar { animation: estampar 0.45s cubic-bezier(.2, 1.4, .4, 1) both; }
  @keyframes estampar {
    from { transform: rotate(-4deg) scale(1.8); opacity: 0; }
    to { transform: rotate(-4deg) scale(1); opacity: 1; }
  }
}
.resultado-cifras { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-family: var(--f-ficha); font-size: 0.9rem; margin-bottom: 1.25rem; }
.resultado-cifras b { font-variant-numeric: tabular-nums; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.copiado { font-size: 0.85rem; color: var(--bien); margin: 0.5rem 0 0; }
.texto-compartir {
  width: 100%;
  margin-top: 0.75rem;
  font-family: var(--f-ficha);
  font-size: 0.85rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta);
  padding: 0.6rem;
}

.explicacion { padding-left: 1.4rem; margin: 0; display: grid; gap: 0.6rem; }
.explicacion li::marker { font-family: var(--f-ficha); font-weight: 600; }

.tabla-solucion { overflow-x: auto; margin-top: 1.25rem; }
.tabla-solucion table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.tabla-solucion th, .tabla-solucion td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--linea); }
.tabla-solucion thead th { font-family: var(--f-ficha); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 500; }
.tabla-solucion tr.culpable td, .tabla-solucion tr.culpable th { background: var(--cinta); color: var(--cinta-tinta); }

/* Huecos de publicidad: invisibles hasta que se activen los anuncios. */
.hueco-anuncio { margin: 2rem 0; min-height: 0; }
.hueco-anuncio.activo { min-height: 100px; }

.cargando, .error-carga { padding: 3rem 0; color: var(--tinta-suave); }

@media (max-width: 30rem) {
  body { font-size: 1rem; }
  .cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifra:nth-child(3) { border-left: 0; padding-left: 0.25rem; }
  .cifra:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .archivo a { grid-template-columns: minmax(0, 1fr) auto; }
  .archivo .fecha { grid-column: 1 / -1; margin-bottom: -0.5rem; }
}


/* ======================================================================
   Ampliaciones: pestañas del caso, cuaderno cómodo y formatos nuevos.
   Misma paleta y tipografías de siempre.
   ====================================================================== */

/* Pestañas (Expediente · Cuaderno · Acusación): van dentro de la página y se van al hacer scroll */
.pestanas { margin: 1.25rem 0 0.25rem; border: 2px solid var(--tinta); border-radius: var(--radio); background: var(--hoja); overflow: hidden; }
.pestanas-interior { display: flex; }
.pestanas button {
  flex: 1;
  min-height: 3rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--f-ficha);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border-bottom: 4px solid transparent;
}
.pestanas button + button { border-left: 1px solid var(--linea); }
.pestanas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--cinta); background: var(--hoja-2); }
.panel[hidden] { display: none; }
.boton.peq { min-height: 2.75rem; padding: 0.4rem 0.9rem; font-size: 0.9rem; }

/* Cuaderno */
.subtitulo { font-family: var(--f-ficha); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 1.5rem 0 0.5rem; color: var(--tinta-suave); }
.herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 1rem; }
.interruptor { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--tinta-suave); cursor: pointer; flex-basis: 100%; }
.interruptor input { width: 1.25rem; height: 1.25rem; accent-color: var(--tinta); flex: none; }
.rejilla tbody th { position: sticky; left: 0; background: var(--hoja); z-index: 1; }
.celda { min-height: 2.75rem; min-width: 2.75rem; touch-action: manipulation; }
.celda.auto { color: var(--tinta-suave); opacity: 0.75; }
.celda.conflicto { background: var(--mal-fondo); color: var(--mal); outline: 2px solid var(--mal); outline-offset: -2px; }
.celda.vf[data-v="1"] { background: var(--cinta); color: var(--cinta-tinta); }
.celda.vf[data-v="2"] { color: var(--tinta-suave); background: var(--hoja-2); text-decoration: line-through; }
.rejilla.cruzada thead th { vertical-align: bottom; }
.cifras-tabla tbody th { text-align: center; font-family: var(--f-ficha); }
.pruebas li { grid-template-columns: 2.4rem minmax(0, 1fr) auto; }
.usada {
  border: 1.5px solid var(--linea); background: transparent; border-radius: 999px;
  font-family: var(--f-ficha); font-size: 0.74rem; padding: 0.2rem 0.75rem; cursor: pointer; color: var(--tinta-suave);
  min-height: 2.75rem; align-self: start; white-space: nowrap;
}
.usada[aria-pressed="false"] { border-style: dashed; }
.usada[aria-pressed="true"] { background: var(--bien-fondo); border: 1.5px solid var(--bien); color: var(--bien); font-weight: 700; }
.pruebas li.pendiente { border-left: 4px solid var(--cinta); }
.pruebas li.tachada { border-left: 4px solid var(--bien); }
.pruebas li.tachada .texto-prueba { text-decoration: line-through; opacity: 0.6; }

/* Avisos y ayudas */
.aviso-suave {
  margin: 0 0 1.25rem; padding: 0.7rem 1rem; border-radius: var(--radio);
  background: var(--hoja-2); border-left: 4px solid var(--cinta); font-size: 0.95rem;
}
.primera-vez {
  margin: 0 0 1.25rem; padding: 1rem 1.1rem; border-radius: var(--radio);
  background: var(--tinta); color: var(--hoja);
}
.primera-vez p { margin: 0.3rem 0 0.9rem; }
.primera-vez .boton { background: var(--cinta); border-color: var(--cinta); color: var(--cinta-tinta); }
.nota-formato { margin: 1.25rem 0 0; padding: 0.9rem 1rem; border: 1.5px dashed var(--tinta-suave); border-radius: var(--radio); background: var(--hoja); }
.nota-formato p { margin: 0.3rem 0 0.7rem; }
.guia {
  position: fixed; z-index: 30;
  left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px);
  max-width: calc(var(--ancho) - 24px); margin-inline: auto;
  padding: 0.85rem 2.6rem 0.8rem 1rem;
  background: var(--tinta); color: var(--hoja); border-radius: var(--radio);
  border: 2px solid var(--cinta);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.65);
  max-height: 45vh; overflow-y: auto;
}
.guia .etiqueta { color: var(--cinta); }
.guia p { margin: 0.25rem 0 0.7rem; font-size: 0.92rem; line-height: 1.45; }
.guia-cerrar {
  position: absolute; top: 0.25rem; right: 0.25rem; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: transparent; color: var(--hoja); font-size: 1.1rem; cursor: pointer;
}
.guia-cerrar:hover { background: rgba(255, 255, 255, 0.15); }
.guia .acciones { align-items: center; gap: 0.5rem 1rem; }
.guia-saltar { border: 0; background: transparent; color: var(--hoja); opacity: 0.75; text-decoration: underline; cursor: pointer; font-size: 0.82rem; padding: 0.4rem 0; }
.guia-reabrir {
  position: fixed; z-index: 30; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px);
  border: 2px solid var(--tinta); background: var(--cinta); color: var(--cinta-tinta);
  border-radius: 999px; padding: 0.55rem 1rem; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6);
}
.guia-resalta { outline: 3px solid var(--cinta) !important; outline-offset: 2px; animation: pulso 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .guia-resalta { animation: none; } }
@keyframes pulso { 50% { outline-color: transparent; } }

/* Enigma lógico (cajas) */
.cajas-fila { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 0.75rem; }
.caja-nota { background: var(--hoja); border: 1px solid var(--linea); border-top: 6px solid var(--c); border-radius: var(--radio); padding: 0.8rem 1rem; }
.caja-nota h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.caja-nota blockquote { margin: 0; font-style: italic; }
.chip-caja { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--hoja-2); border: 1.5px solid var(--c); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.notas-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.notas-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: baseline; background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.6rem 0.8rem; }
.hipotesis td.cuenta, .hipotesis tfoot th { font-family: var(--f-texto); font-size: 0.85rem; text-align: center; padding: 0.5rem 0.25rem; }
.hipotesis td.encaja { background: var(--bien-fondo); color: var(--bien); font-weight: 700; }
.hipotesis td.no-encaja { color: var(--mal); }

/* Código secreto */
.digitos { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.digitos label { display: grid; gap: 0.2rem; justify-items: center; }
.digitos select {
  font-family: var(--f-titular); font-weight: 800; font-size: 1.6rem; width: 4rem; height: 3.6rem;
  text-align: center; text-align-last: center; border: 2px solid var(--tinta); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta);
  /* Sin la flecha del sistema (que en el móvil se come parte de la cifra) y sin relleno que recorte el número */
  -webkit-appearance: none; appearance: none; padding: 0; line-height: 1.2; overflow: visible;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%), linear-gradient(135deg, var(--tinta) 50%, transparent 50%);
  background-position: calc(100% - 9px) 70%, calc(100% - 5px) 70%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.codigo-final { display: flex; gap: 0.5rem; margin: 1rem 0; }
.codigo-final span { display: grid; place-items: center; width: 3.2rem; height: 3.8rem; border: 2px solid var(--tinta); border-radius: var(--radio); font-family: var(--f-titular); font-weight: 800; font-size: 1.8rem; background: var(--cinta); color: var(--cinta-tinta); }

/* Cronología */
.tablero { display: grid; gap: 0.75rem; }
.pool { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem; border: 1.5px dashed var(--linea); border-radius: var(--radio); min-height: 3rem; }
.suceso, .hueco {
  font: inherit; text-align: left; cursor: pointer; border-radius: var(--radio);
  border: 1.5px solid var(--tinta); background: var(--hoja); color: var(--tinta); padding: 0.55rem 0.8rem; min-height: 2.75rem; line-height: 1.3;
}
.suceso.sel, .hueco.sel { background: var(--cinta); color: var(--cinta-tinta); border-color: var(--cinta-tinta); }
.linea-tiempo { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; border-left: 3px solid var(--tinta); margin-left: 0.4rem; }
.linea-tiempo li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); gap: 0.5rem; align-items: stretch; position: relative; padding-left: 0.6rem; }
.linea-tiempo li::before { content: ''; position: absolute; left: -0.62rem; top: 1.1rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--tinta); }
.linea-tiempo .hora { font-family: var(--f-ficha); font-weight: 600; align-self: center; }
.hueco { border-style: dashed; border-color: var(--linea); width: 100%; }
.hueco.lleno { border-style: solid; border-color: var(--tinta); }
.hueco .vacio { color: var(--tinta-suave); }
.declaraciones { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.declaraciones li { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.7rem 0.9rem; }
.declaraciones .rol { color: var(--tinta-suave); font-size: 0.85rem; }
.declaraciones blockquote { margin: 0.3rem 0 0; }
.tabla-solucion caption { text-align: left; padding-bottom: 0.4rem; }

/* ---------- Ronda de mejoras tras las primeras pruebas ---------- */

/* Pestañas numeradas */
.pestanas button { line-height: 1.15; padding-inline: 0.25rem; }
.nav-pestanas { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 2rem; flex-wrap: wrap; }
.nav-pestanas .boton { flex: 1 1 10rem; }
.nav-pestanas span:empty { flex: 1 1 0; }

/* Ventana de bienvenida */
.modal-capa { position: fixed; inset: 0; z-index: 50; background: rgba(8, 14, 28, 0.62); display: grid; place-items: center; padding: 16px; }
.modal { position: relative; background: var(--hoja); color: var(--tinta); border: 2px solid var(--tinta); border-radius: var(--radio); padding: 1.5rem 1.25rem 1.25rem; max-width: 26rem; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7); }
.modal h2 { font-family: var(--f-titular); font-weight: 850; font-stretch: 72%; text-transform: uppercase; font-size: 1.7rem; line-height: 1; margin: 0 2rem 0.7rem 0; }
.modal p { margin: 0 0 1.1rem; }
.modal-cerrar { position: absolute; top: 0.35rem; right: 0.35rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: transparent; font-size: 1.15rem; cursor: pointer; }
.modal-cerrar:hover { background: var(--hoja-2); }

/* Cómo avanzar y reglas del caso */
.ruta { margin: 1.25rem 0 0; font-size: 0.92rem; color: var(--tinta-suave); }
.reglas { margin: 1.25rem 0 0; padding: 0.9rem 1rem; background: var(--hoja); border: 1px solid var(--linea); border-left: 4px solid var(--tinta); border-radius: var(--radio); }
.reglas ul { margin: 0.4rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.volver-cuaderno { margin: 0 0 1rem; }
.resumen { margin-bottom: 1.5rem; }
.resumen .subtitulo { margin-top: 0; }
.resumen-tabla { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: var(--hoja); }
.resumen-tabla th, .resumen-tabla td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--linea); }
.resumen-tabla thead th { font-family: var(--f-ficha); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-suave); font-weight: 500; }
.resumen-tabla tr.culpable td, .resumen-tabla tr.culpable th { background: var(--bien-fondo); color: var(--bien); }
.tenue { color: var(--tinta-suave); }
.seguro { font-family: var(--f-titular); font-size: 1.3rem; }

/* Cruces plegados */
.cruces { margin-top: 1.5rem; border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.2rem 0.9rem 0.6rem; background: var(--hoja); }
.cruces summary { cursor: pointer; font-weight: 700; padding: 0.6rem 0; }

/* Cajas en una sola fila, en su orden */
.fila-cajas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem; }
.fila-cajas { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.caja-dibujo { position: relative; display: grid; justify-items: center; gap: 0.2rem; padding: 1.5rem 0.2rem 0.6rem; background: var(--hoja); border: 2px solid var(--tinta); border-bottom-width: 6px; border-radius: var(--radio); }
.caja-dibujo .tapa { position: absolute; left: -2px; right: -2px; top: -2px; height: 0.9rem; background: var(--c); border: 2px solid var(--tinta); border-radius: var(--radio) var(--radio) 0 0; }
.caja-dibujo .pos { font-family: var(--f-ficha); font-size: 0.72rem; color: var(--tinta-suave); }
.caja-dibujo b { font-size: 0.85rem; overflow-wrap: anywhere; text-align: center; }
@media (max-width: 24rem) { .caja-dibujo b { font-size: 0.74rem; } }
.eje { display: flex; justify-content: space-between; margin: 0.35rem 0 0.5rem; font-family: var(--f-ficha); font-size: 0.75rem; }

/* Cronología: instrucciones y contador */
.como { margin: 0 0 0.75rem; padding-left: 1.3rem; display: grid; gap: 0.3rem; font-size: 0.95rem; }
.contador { font-family: var(--f-ficha); font-size: 0.82rem; font-weight: 600; margin: 0 0 0.75rem; }
.lista-sucesos { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }

/* ---------- Botón y calendario de casos anteriores ---------- */
.boton-archivo {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem;
  margin: 1.25rem 0 0; padding: 0.9rem 1.1rem; text-decoration: none;
  background: var(--hoja); border: 2px solid var(--tinta); border-radius: var(--radio);
  box-shadow: 4px 4px 0 var(--tinta);
}
.boton-archivo:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tinta); }
.boton-archivo .icono { color: var(--tinta); }
.boton-archivo b { display: block; font-family: var(--f-titular); font-weight: 800; font-stretch: 78%; text-transform: uppercase; font-size: 1.2rem; line-height: 1.1; }
.boton-archivo small { display: block; color: var(--tinta-suave); font-size: 0.85rem; }

.titulo-pagina { font-family: var(--f-titular); font-weight: 900; font-stretch: 70%; text-transform: uppercase; font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 0.95; margin: 0.75rem 0 0.5rem; }
.cuenta-archivo { font-family: var(--f-ficha); font-size: 0.85rem; margin: 0 0 1rem; }
.leyenda { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0 0 1rem; font-size: 0.82rem; }
.leyenda span { display: inline-flex; align-items: center; gap: 0.4rem; }
.leyenda i { width: 1.1rem; height: 1.1rem; border-radius: 3px; aspect-ratio: 1; display: inline-block; }
.calendario { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.75rem; }
.mes-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.mes-nav h2 { margin: 0; font-family: var(--f-titular); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: 1.35rem; }
.mes-flecha { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; font-size: 1.6rem; text-decoration: none; border: 2px solid var(--tinta); border-radius: var(--radio); }
.mes-flecha.inactiva { opacity: 0.25; border-color: var(--linea); }
.rejilla-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cab-dia { text-align: center; font-family: var(--f-ficha); font-size: 0.72rem; color: var(--tinta-suave); padding-bottom: 0.2rem; }
.dia {
  position: relative; display: grid; grid-template-rows: 1fr auto; place-items: center; aspect-ratio: 1; min-height: 2.6rem;
  border-radius: 6px; text-decoration: none; border: 1.5px solid transparent; font-family: var(--f-ficha); line-height: 1;
  color: var(--tinta-suave);
}
.dia .num { font-size: 0.95rem; font-weight: 600; align-self: end; }
.dia .marca { font-size: 0.8rem; font-weight: 700; min-height: 0.9rem; align-self: start; }
.dia.fuera { opacity: 0.35; }
.dia.sinCaso, .dia.futuro { color: var(--tinta-suave); background: transparent; }
.dia.futuro { opacity: 0.45; }
a.dia { color: var(--tinta); cursor: pointer; }
a.dia:hover { filter: brightness(0.96); outline: 2px solid var(--tinta); }
.dia.resuelto { background: var(--bien-fondo); border-color: var(--bien); color: var(--bien); }
.dia.fallado { background: var(--mal-fondo); border-color: var(--mal); color: var(--mal); }
.dia.jugando { background: var(--cinta); border-color: var(--cinta-tinta); color: var(--cinta-tinta); }
.dia.nuevo { background: var(--hoja-2); border: 1.5px dashed var(--tinta); color: var(--tinta); }
.dia.hoy { box-shadow: 0 0 0 2px var(--hoja), 0 0 0 4px var(--tinta); }
.leyenda i.dia { aspect-ratio: auto; min-height: 0; }


/* ======================================================================
   Segunda ronda: cuaderno en dos columnas, resultados, archivo y accesibilidad
   ====================================================================== */

/* Foco visible dentro de contenedores que recortan (tablas, pestañas) */
.celda:focus-visible, .pestanas button:focus-visible, .usada:focus-visible { outline-offset: -3px; }

/* Cuaderno: pruebas y herramientas juntas. En escritorio, dos columnas con las pruebas siempre a la vista. */
.cuaderno-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.cuaderno-pruebas, .cuaderno-herramientas { min-width: 0; }
.cuaderno-pruebas .seccion-titulo, .cuaderno-herramientas .seccion-titulo { margin-top: 1.25rem; }
.cuaderno-pruebas .pruebas li { padding: 0.6rem 0.75rem; }
@media (min-width: 64rem) {
  body.vista-caso .contenedor { max-width: 70rem; }
  body.vista-caso #panel-expediente, body.vista-caso #panel-acusacion { max-width: var(--ancho); }
  .cuaderno-grid { grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr); gap: 2rem; align-items: start; }
  .cuaderno-pruebas { position: sticky; top: calc(var(--alto-barra) + 1rem); max-height: calc(100vh - var(--alto-barra) - 2rem); overflow-y: auto; padding-right: 0.25rem; }
  .cuaderno-pruebas .seccion-titulo, .cuaderno-herramientas .seccion-titulo { margin-top: 0.5rem; }
}

.pruebas li { grid-template-columns: 2.4rem minmax(0, 1fr); }
.cuerpo-prueba { display: grid; gap: 0.5rem; min-width: 0; }
.pruebas .usada { grid-column: 2; justify-self: start; min-height: 2.75rem; }
@media (max-width: 30rem) { .pruebas li { grid-template-columns: 2.2rem minmax(0, 1fr); } }

.declaraciones-cuaderno, .como-usar { margin: 1rem 0; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--hoja); padding: 0 0.9rem; }
.declaraciones-cuaderno summary, .como-usar summary { cursor: pointer; font-weight: 700; min-height: 2.75rem; display: flex; align-items: center; }
.declaraciones-cuaderno .declaraciones { padding-bottom: 0.6rem; }
.declaraciones-cuaderno .declaraciones li { border: 0; padding: 0.3rem 0; background: transparent; }
.como-usar p { margin: 0 0 0.8rem; font-size: 0.92rem; }
.reglas-puntos { margin-top: 1rem; font-size: 0.9rem; color: var(--tinta-suave); }
.reglas-puntos summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; font-weight: 600; }

/* Cajas: notas vinculadas a la tabla */
.nota-enlace { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: baseline; width: 100%; text-align: left; cursor: pointer; background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0.6rem 0.8rem; min-height: 2.75rem; }
.nota-enlace[aria-pressed="true"] { border-color: var(--tinta); box-shadow: inset 4px 0 0 var(--cinta); }
.notas-lista li { padding: 0; border: 0; background: transparent; display: block; }
.notas-lista li:not(:has(button)) { display: grid; padding: 0.6rem 0.8rem; background: var(--hoja); border: 1px solid var(--linea); }
.hipotesis tr.destacada > * { box-shadow: inset 0 3px 0 var(--cinta), inset 0 -3px 0 var(--cinta); }
.hipotesis td.cuenta { padding: 0.35rem 0.1rem; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.hipotesis td.cuenta b { display: block; font-size: 0.72rem; }
.hipotesis td.cuenta small { display: block; font-size: 0.64rem; }
.hipotesis td.parcial { color: var(--tinta-suave); background: var(--hoja-2); }

/* Código: registro visual de intentos */
.intento-visual { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem; }
.fichas { display: inline-flex; gap: 0.25rem; }
.fichas b { display: grid; place-items: center; width: 1.8rem; height: 2.1rem; border: 1.5px solid var(--tinta); border-radius: 4px; background: var(--papel); font-family: var(--f-ficha); font-size: 1rem; }
.luces { display: inline-flex; gap: 0.35rem; }
.luz { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 0.3rem; border-radius: 999px; font-family: var(--f-ficha); font-size: 0.8rem; font-weight: 700; }
.luz.verde { background: var(--bien-fondo); color: var(--bien); border: 1.5px solid var(--bien); }
.luz.amarilla { background: var(--cinta); color: var(--cinta-tinta); border: 1.5px solid var(--cinta-tinta); }
.leyenda-luces { margin: 0 0 0.6rem; font-size: 0.82rem; color: var(--tinta-suave); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cifras-tabla { min-width: 17rem; }

/* Conflicto del cuaderno: color + símbolo */
.celda.conflicto::after { content: '!'; position: absolute; top: 2px; right: 4px; font-size: 0.7rem; }
.celda { position: relative; }

/* Resultado: desglose de puntos */
.desglose { width: 100%; max-width: 26rem; border-collapse: collapse; margin: 0 0 0.5rem; font-size: 0.95rem; }
.desglose caption { text-align: left; padding-bottom: 0.3rem; }
.desglose th, .desglose td { text-align: left; padding: 0.35rem 0; border-bottom: 1px solid var(--linea); font-weight: 400; }
.desglose td { text-align: right; font-family: var(--f-ficha); font-variant-numeric: tabular-nums; }
.desglose .nota-minimo { font-size: 0.82rem; color: var(--tinta-suave); }
.desglose tr.total th, .desglose tr.total td { font-weight: 700; border-bottom: 2px solid var(--tinta); font-size: 1.05rem; }
.racha-resultado { margin: 0.4rem 0 1.25rem; font-family: var(--f-ficha); font-size: 0.85rem; }

/* Archivo */
.pie-calendario { margin: 0.9rem 0 0; display: grid; gap: 0.2rem; text-align: center; }
.pie-calendario .logro { font-family: var(--f-titular); font-weight: 800; font-stretch: 78%; font-size: 1.25rem; }
.pie-calendario span { font-family: var(--f-ficha); font-size: 0.8rem; color: var(--tinta-suave); }
.archivo.compacto a { padding: 0.65rem 0.25rem; min-height: 2.75rem; }

/* Borrado de progreso */
.modal ul { margin: 0 0 0.8rem; padding-left: 1.2rem; display: grid; gap: 0.25rem; }
.modal .acciones { margin-top: 0.5rem; }
.boton.secundario.peligro { color: var(--mal); border-color: var(--mal); }
.boton.secundario.peligro:hover { background: var(--mal-fondo); }

/* Logotipo de dos líneas en la ventana de bienvenida */
.modal .logo-modal { display: block; height: 4.5rem; width: auto; margin: 0 0 0.9rem; }

/* ---------- Contacto (Inicio) ---------- */
.contacto { margin-top: 2.5rem; }
.contacto .seccion-titulo { margin-top: 0; }
.contacto-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.contacto-item {
  display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0.5rem 1rem;
  border: 2px solid var(--tinta); border-radius: var(--radio); background: var(--hoja); color: var(--tinta);
  text-decoration: none; font-weight: 600; line-height: 1.2;
}
a.contacto-item:hover { background: var(--hoja-2); transform: translateY(-1px); }
.contacto-item svg { flex: none; }
.contacto-item small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--tinta-suave); }
.contacto-item.no-disponible { border: 2px dashed var(--linea); background: transparent; color: var(--tinta-suave); }

/* ---------- Casos de bienvenida (archivo) ---------- */
.extras {
  margin-top: 2.5rem; padding: 0.25rem 1rem 1rem;
  border: 2px solid var(--tinta); border-radius: var(--radio); background: var(--hoja);
  box-shadow: 4px 4px 0 var(--cinta);
}
.extras .seccion-titulo { margin-top: 0.9rem; }
.extras .archivo { border-top: 1px solid var(--linea); }

/* Sello con texto largo («Bienvenida resuelta»): se parte en dos líneas y no se sale de la tarjeta */
.sello.largo { max-width: 100%; text-align: center; font-size: 1.7rem; line-height: 1.05; }
@media (max-width: 30rem) { .sello.largo { font-size: 1.45rem; margin-left: 0.4rem; } }

/* Hipótesis con muchas cajas: resultados en lista bajo la tabla cuando la pantalla es estrecha */
.resultados-hip { list-style: none; padding: 0; margin: 0.75rem 0 0; display: none; gap: 0.35rem; }
.resultados-hip li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0.7rem; background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio); font-size: 0.88rem; }
.resultados-hip li.encaja { background: var(--bien-fondo); color: var(--bien); border-color: var(--bien); font-weight: 600; }
.resultados-hip li.parcial { color: var(--tinta-suave); }
@media (max-width: 36rem) {
  .resultados-hip { display: grid; }
  .hipotesis { min-width: 0; }
  .hipotesis tfoot { display: none; }
  .hipotesis .chip-caja { font-size: 0.66rem; padding: 0.05rem 0.3rem; border-width: 1.5px; }
  .hipotesis tbody th { padding: 0.2rem 0.3rem; }
  .hipotesis thead th { padding: 0.35rem 0.1rem; }
}
@media (max-width: 24rem) {
  .hipotesis .chip-caja { font-size: 0.62rem; padding: 0.05rem 0.2rem; }
  .hipotesis tbody th { padding: 0.2rem 0.2rem; }
}

/* ---------- Racha más visible ---------- */
/* Pendiente (aún no has resuelto el caso de hoy): como siempre. Hecha: grande, amarilla y con llama. */
.racha-mini.hecha {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.85rem 0.3rem 0.65rem; border-radius: 999px;
  background: var(--cinta); color: var(--cinta-tinta);
  font-family: var(--f-ficha); font-size: 0.95rem; font-weight: 700;
  box-shadow: 0 2px 0 var(--cinta-tinta);
}
.racha-mini.hecha svg { flex: none; }
@media (max-width: 30rem) { .racha-mini.hecha { font-size: 0.82rem; padding: 0.25rem 0.7rem 0.25rem 0.5rem; } .racha-mini.hecha svg { width: 17px; height: 17px; } }
@media (prefers-reduced-motion: no-preference) {
  .racha-mini.celebra, .racha-celebracion.celebra { animation: rebote 0.7s cubic-bezier(.2, 1.6, .4, 1) both; }
  @keyframes rebote { 0% { transform: scale(0.6) rotate(-6deg); } 60% { transform: scale(1.25) rotate(3deg); } 100% { transform: scale(1) rotate(0); } }
}

.cifra.hecha { background: var(--cinta); color: var(--cinta-tinta); border-radius: 4px; }
.cifra.hecha b { font-size: 2.3rem; display: flex; align-items: center; gap: 0.25rem; }
.cifra.hecha b svg { width: 1.6rem; height: 1.6rem; }
.cifra.hecha span { color: var(--cinta-tinta); font-weight: 600; }

.racha-celebracion {
  display: flex; align-items: center; gap: 0.7rem; margin: 0.6rem 0 1.25rem; padding: 0.7rem 1rem;
  background: var(--cinta); color: var(--cinta-tinta); border-radius: var(--radio); width: fit-content; max-width: 100%;
  box-shadow: 0 3px 0 var(--cinta-tinta);
}
.racha-celebracion svg { width: 2.2rem; height: 2.2rem; flex: none; }
.racha-celebracion span { font-family: var(--f-titular); font-weight: 850; font-stretch: 75%; text-transform: uppercase; font-size: 1.5rem; line-height: 1; }
.racha-celebracion small { display: block; font-family: var(--f-texto); font-weight: 500; font-stretch: 100%; text-transform: none; font-size: 0.82rem; margin-top: 0.2rem; }

/* ---------- Aviso de los casos de bienvenida en Inicio ---------- */
.teaser-extras {
  margin: 1.25rem 0 0; padding: 0.9rem 1rem 1rem;
  border: 2px solid var(--tinta); border-radius: var(--radio); background: var(--hoja);
  box-shadow: 4px 4px 0 var(--cinta);
}
.teaser-extras h2 { margin: 0; font-family: var(--f-titular); font-weight: 800; font-stretch: 75%; text-transform: uppercase; font-size: 1.3rem; }
.teaser-extras p { margin: 0.3rem 0 0.8rem; font-size: 0.95rem; }
.estados-extras { list-style: none; padding: 0; margin: 0 0 0.7rem; display: flex; gap: 0.6rem; }
.estados-extras li { flex: 0 0 3.6rem; }
.estados-extras .dia { width: 3.6rem; min-height: 3.6rem; }
.teaser-extras .resumen-extras { margin: 0; font-family: var(--f-ficha); font-size: 0.82rem; }
.teaser-extras .resumen-extras a { font-weight: 600; }

/* ---------- Arrastrar sucesos ---------- */
.suceso, .hueco.lleno { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.suceso.arrastrando, .hueco.arrastrando { opacity: 0.35; }
.fantasma { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; margin: 0; max-width: min(20rem, 90vw); box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.5); transform-origin: top left; opacity: 0.95; background: var(--cinta); color: var(--cinta-tinta); border-color: var(--cinta-tinta); }
.hueco.destino, .pool.destino { outline: 3px solid var(--cinta-tinta); outline-offset: 2px; background: var(--cinta); }

/* ---------- Aviso de «sin caso hoy» ---------- */
.aviso-sin-caso { margin: 0 0 1.25rem; padding: 1rem 1.1rem; border-radius: var(--radio); background: var(--tinta); color: var(--hoja); border-left: 6px solid var(--cinta); }
.aviso-sin-caso b { display: block; font-family: var(--f-titular); font-weight: 850; font-stretch: 72%; text-transform: uppercase; font-size: 1.35rem; line-height: 1.1; }
.aviso-sin-caso p { margin: 0.35rem 0 0; }
.modal .acciones { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---------- Racha en la barra: siempre visible, en gris si no es la de hoy ---------- */
.racha-mini.pendiente, .racha-mini.ninguna { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--tinta-suave); }
.racha-mini.pendiente svg, .racha-mini.ninguna svg { width: 16px; height: 16px; opacity: 0.55; }