/* Holmio — estilos
   Modo día («el expediente») por defecto; modo noche («el despacho») según el sistema
   o forzado con data-theme. Una sola columna centrada, pensada para móvil. */

:root {
  /* Modo día */
  --fondo: #efe6d2;
  --tarjeta: #f8f2e4;
  --carpeta: #dcc392;       /* cartulina manila del dossier */
  --carpeta-borde: #c2a56e;
  --postit: #f5e27a;
  --texto: #1a1d27;
  --suave: #6b6455;
  --linea: #d6c9ac;
  --acento: #a66d0c;        /* ámbar oscuro */
  --lacre: #b9412f;         /* intentos, sellos */
  --sobre-acento: #fff8ea;
  --lupa: #b9412f;

  --cand-fondo: #fffaf0;
  --cand-texto: #1a1d27;
  --cand-borde: #c4b48f;
  --off-fondo: #e4d9c0;
  --off-texto: #b6a988;
  --fallo-fondo: #b9412f;
  --fallo-texto: #fff8ea;
  --acierto-fondo: #5b9a73; /* verde salvia: más suave que el antiguo #2f6b4a */
  --acierto-texto: #f4fbf6;

  --sombra: 0 10px 30px -18px rgba(40, 30, 10, .45);
  --resalte: #efe2c4;
  --grano: url("../img/grano-dia.png"); /* grano de papel: ver herramientas/grano.py */
  --desgaste: url("../img/desgaste-dia.png"); /* tinta gastada en los rellenos sólidos */
  --velo: rgba(239, 230, 210, .7); /* velo translúcido: se intuye el juego debajo */

  --f-titulo: "Special Elite", "Courier New", monospace;
  --f-mano: "Caveat", "Segoe Script", cursive;
  --f-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-simbolo: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #141821;
    --tarjeta: #1c212d;
    --carpeta: #3a3226;
    --carpeta-borde: #52472f;
    --postit: #e0cc68; /* algo apagado: de noche no debe deslumbrar */
    --texto: #ece3cf;
    --suave: #9a937f;
    --linea: #2c3342;
    --acento: #e7ad45;
    --lacre: #e0664f;
    --sobre-acento: #141821;
    --lupa: #e7ad45;
    --cand-fondo: #283041;
    --cand-texto: #f3ead6;
    --cand-borde: #3d475c;
    --off-fondo: #181c25;
    --off-texto: #343b4b;
    --fallo-fondo: #e0664f;
    --fallo-texto: #141821;
    --acierto-fondo: #7cc59a;
    --acierto-texto: #10251a;
    --sombra: 0 10px 30px -18px rgba(0, 0, 0, .8);
    --resalte: #2b3346;
    --grano: url("../img/grano-noche.png");
    --desgaste: url("../img/desgaste-noche.png");
    --velo: rgba(6, 8, 12, .68);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fondo: #141821;
  --tarjeta: #1c212d;
  --carpeta: #3a3226;
  --carpeta-borde: #52472f;
  --postit: #e0cc68;
  --texto: #ece3cf;
  --suave: #9a937f;
  --linea: #2c3342;
  --acento: #e7ad45;
  --lacre: #e0664f;
  --sobre-acento: #141821;
  --lupa: #e7ad45;
  --cand-fondo: #283041;
  --cand-texto: #f3ead6;
  --cand-borde: #3d475c;
  --off-fondo: #181c25;
  --off-texto: #343b4b;
  --fallo-fondo: #e0664f;
  --fallo-texto: #141821;
  --acierto-fondo: #7cc59a;
  --acierto-texto: #10251a;
  --sombra: 0 10px 30px -18px rgba(0, 0, 0, .8);
  --resalte: #2b3346;
  --grano: url("../img/grano-noche.png");
  --desgaste: url("../img/desgaste-noche.png");
  --velo: rgba(6, 8, 12, .68);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--grano) 0 0 / 160px 160px, var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, p { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
[hidden] { display: none !important; }
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* La app ocupa exactamente la pantalla. La tabla se centra en el hueco que deja el
   informe; si el informe no cabe, hace scroll por dentro en vez de empujar la tabla. */
.app {
  max-width: 480px;
  height: 100%;
  height: 100dvh;
  margin: 0 auto;
  padding: 10px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- Pantalla de carga ----------
   Tapa el juego en la primera pintura y se desvanece cuando todo está listo:
   el logo cae como un tampón y una barra en lacre recorre la línea de abajo. */
.cargando {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 26px;
  background: var(--grano) 0 0 / 160px 160px, var(--fondo);
  transition: opacity .35s ease, visibility .35s;
}
.cargando.fuera { opacity: 0; visibility: hidden; }
.cargando-logo {
  display: block; height: 58px; aspect-ratio: 871 / 226; color: var(--texto);
  animation: estampar-logo .6s .1s cubic-bezier(.55, 0, .9, .45) both;
}
@keyframes estampar-logo {
  0% { opacity: 0; transform: scale(1.9) rotate(-6deg); }
  25% { opacity: 1; }
  60% { transform: scale(.94) rotate(-1deg); }
  80% { transform: scale(1.02) rotate(0); animation-timing-function: ease-out; }
  100% { transform: none; }
}
.cargando-barra {
  position: relative; overflow: hidden; width: 120px; height: 2px; border-radius: 2px;
  background: var(--linea);
}
.cargando-barra::after {
  content: ""; position: absolute; inset: 0; width: 40%; border-radius: 2px; background: var(--lacre);
  animation: barra-carga 1.1s ease-in-out infinite;
}
@keyframes barra-carga { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ---------- Cabecera ---------- */
.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; border-bottom: 1px solid var(--linea);
}
.marca { display: flex; align-items: center; gap: 6px; font-weight: 400; }
/* Logo largo «HOLMIO» (la primera O es la lupa), generado con herramientas/logo.py.
   Las letras toman el color del texto y la lupa va en lacre (ver el <symbol>). */
.logo-largo { display: block; height: 40px; aspect-ratio: 871 / 226; color: var(--texto); }
.icono-btn {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1.5px solid var(--linea); background: transparent;
  display: grid; place-items: center; font-weight: 700; color: var(--texto);
  transition: border-color .2s, box-shadow .2s, color .2s;
}
.btn-menu .ico-svg { width: 22px; height: 22px; stroke-width: 2; }

/* ---------- Menú lateral: una ficha de detective que entra por la derecha ----------
   Sigue el tema (papel de día, tinta de noche), con letra de máquina y el color de acento. */
.menu {
  inset: 0 0 0 auto; margin: 0; padding: 0;
  width: min(320px, 86vw); height: 100%; max-width: none; max-height: none;
  border: 0; border-left: 1px solid var(--linea);
  background: var(--grano) 0 0 / 160px 160px, var(--tarjeta); color: var(--texto);
  box-shadow: -20px 0 50px -20px rgba(0, 0, 0, .9);
}
.menu[open] { display: flex; flex-direction: column; animation: menu-entra .28s cubic-bezier(.2, .9, .3, 1); }
.menu.cerrando { transform: translateX(100%); transition: transform .22s ease-in; }
.menu::backdrop { background: rgba(6, 8, 12, .7); backdrop-filter: blur(2px); animation: fundido .2s ease-out; }
@keyframes menu-entra { from { transform: translateX(100%); } }

.menu-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 14px 14px 20px; border-bottom: 1px solid var(--linea);
}
.menu-marca {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-titulo); font-size: 20px; letter-spacing: .12em;
  --fondo: var(--tarjeta); /* el brillo de la lupa toma el color del panel */
}
.menu-marca .logo-largo { height: 34px; }
.menu-cerrar {
  width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent;
  display: grid; place-items: center; color: var(--suave);
}
.menu-cerrar:focus-visible { color: var(--texto); background: var(--resalte); outline: none; }
.menu-cerrar .ico-svg { width: 20px; height: 20px; stroke-width: 2; transition: transform .25s; }

.menu-cuerpo { flex: 1; overflow-y: auto; padding: 10px 0; display: flex; flex-direction: column; }
.menu-seccion {
  padding: 10px 20px 6px; font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--acento);
}
.menu-cuerpo hr { margin: 10px 20px; border: 0; border-top: 1px dashed var(--linea); }
.menu-item {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 16px;
  width: 100%; padding: 13px 20px; border: 0; background: transparent; color: inherit; text-align: left;
  border-left: 3px solid transparent;
  transition: background-color .15s, border-color .15s;
}
.menu-item:focus-visible { background: var(--resalte); outline: none; }
.menu-item[aria-current="page"] { border-left-color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, transparent); }
.menu-ico { width: 28px; height: 28px; display: grid; place-items: center; color: var(--acento); transition: transform .2s; }
.menu-ico .ico-svg { width: 26px; height: 26px; stroke-width: 1.7; }
.menu-texto { display: grid; gap: 1px; min-width: 0; }
/* Título y subtítulo, siempre en una sola línea */
.menu-texto strong, .menu-texto small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-texto strong { font-family: var(--f-titulo); font-weight: 400; font-size: 17px; line-height: 1.2; }
.menu-texto small { font-size: 12.5px; color: var(--suave); }
.menu-item-suave { padding-block: 8px; }
.menu-item-suave .menu-ico { color: var(--suave); }
.menu-item-suave .menu-ico .ico-svg { width: 20px; height: 20px; }
.menu-item-suave strong { font-family: var(--f-texto); font-size: 14px; font-weight: 600; color: var(--suave); }

/* Interruptor del modo noche */
.interruptor {
  position: relative; width: 42px; height: 24px; border-radius: 12px;
  background: var(--linea); transition: background .2s;
}
.interruptor::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--fondo); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .2s cubic-bezier(.2, 1.2, .4, 1);
}
.menu-item[aria-checked="true"] .interruptor { background: var(--acento); }
.menu-item[aria-checked="true"] .interruptor::after { transform: translateX(18px); }

.menu-pie {
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  font-family: var(--f-titulo); font-size: 12px; color: var(--suave); border-top: 1px solid var(--linea);
}

/* ---------- Archivo de casos: calendario por meses ----------
   Cada día con caso es una casilla de elemento: el día como «número atómico», el
   símbolo del culpable (o «?») en el centro y las acusaciones usadas debajo. */
.app > .vista-archivo { flex: 1 1 auto; min-height: 0; }
.vista-archivo {
  overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 22px; align-content: start; padding: 0 0 28px;
}
/* Cabecera fija (título + leyenda) mientras se desplaza el calendario */
.archivo-cabecera {
  position: sticky; top: 0; z-index: 2; display: grid; gap: 8px;
  padding: 4px 0 12px; background: var(--grano) 0 0 / 160px 160px, var(--fondo);
  box-shadow: 0 10px 12px -12px rgba(0, 0, 0, .35);
}
.archivo-titulo, .archivo-leyenda { width: min(100% - 24px, 330px); margin-inline: auto; }
.archivo-titulo { font-family: var(--f-titulo); font-weight: 400; font-size: 25px; line-height: 1.15; }
.archivo-leyenda {
  list-style: none; padding: 0; margin-block: 0; display: flex; flex-wrap: wrap; gap: 4px 9px;
  font-size: 11px; color: var(--suave);
}
.archivo-leyenda li { display: inline-flex; align-items: center; gap: 4px; }
.archivo-leyenda i { width: 10px; height: 10px; border-radius: 3px; }
.archivo-leyenda .cerrado { background: var(--acierto-fondo); }
.archivo-leyenda .fugado { background: var(--fallo-fondo); }
.archivo-leyenda .en-curso { border: 1.5px dashed var(--acento); }
.archivo-leyenda .pendiente { background: var(--cand-fondo); box-shadow: inset 0 0 0 1.5px var(--cand-borde); }
.archivo-leyenda .hoy { outline: 2px solid var(--acento); outline-offset: 1px; background: var(--cand-fondo); }
#archivo-meses { display: grid; gap: 30px; }
/* El calendario no ocupa todo el ancho: deja aire a los lados, sobre todo a la derecha */
.archivo-mes { display: grid; gap: 10px; width: min(100% - 24px, 330px); margin-inline: auto; }
.archivo-mes h3 {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acento);
}
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.cal-dia-semana { text-align: center; font-size: 11px; font-weight: 600; color: var(--suave); padding-bottom: 2px; }
/* El día va siempre abajo a la derecha, haya caso o no (así no parece un número atómico) */
.cal-vacio {
  aspect-ratio: 1; display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 5px 3px 0;
  font-family: var(--f-simbolo); font-size: 9.5px; font-weight: 500; color: var(--off-texto);
}
.cal-caso {
  position: relative; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--f-simbolo); font-weight: 600; color: var(--cand-texto);
  background: var(--cand-fondo); box-shadow: inset 0 0 0 1.5px var(--cand-borde);
  transition: transform .15s, box-shadow .15s;
}
.cal-caso:active { transform: scale(.94); }
.cal-caso small { position: absolute; bottom: 3px; right: 5px; font-size: 9.5px; font-weight: 500; line-height: 1; opacity: .75; }
.cal-caso b { font-size: clamp(14px, 4.4vw, 19px); line-height: 1; }
.cal-caso.pendiente b { color: var(--suave); }
.cal-caso.en-curso { background: var(--tarjeta); box-shadow: none; border: 1.5px dashed var(--acento); color: var(--acento); }
.cal-caso.cerrado { background: var(--acierto-fondo); color: var(--acierto-texto); box-shadow: none; }
.cal-caso.fugado { background: var(--fallo-fondo); color: var(--fallo-texto); box-shadow: none; }
.cal-caso.hoy { outline: 2px solid var(--acento); outline-offset: 2px; animation: latido 1.8s ease-in-out infinite; }
.cal-caso:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Acerca de ---------- */
.acerca {
  width: min(400px, calc(100% - 28px)); max-height: calc(100dvh - 24px); overflow-y: auto;
  border: 1px solid var(--linea); border-radius: 14px; padding: 22px 22px 18px;
  background: var(--grano) 0 0 / 160px 160px, var(--tarjeta); color: var(--texto); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
}
.acerca:focus { outline: none; }
.acerca[open] { display: grid; gap: 12px; animation: aparecer .3s cubic-bezier(.2, 1.1, .4, 1); }
.acerca::backdrop { background: rgba(6, 8, 12, .9); backdrop-filter: blur(3px); animation: fundido .2s ease-out; }
.acerca h2 { font-family: var(--f-titulo); font-weight: 400; font-size: 23px; }
.acerca p { font-size: 14.5px; line-height: 1.45; }
.acerca .nota { font-size: 12.5px; color: var(--suave); }
/* Créditos: el logo va sobre su círculo blanco, para que se vea igual en los dos temas */
.credito {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 10px 0; border-block: 1px dashed var(--linea); color: var(--texto); text-decoration: none;
}
.credito img { display: block; width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 0 0 1px var(--linea); transition: transform .2s; }
.credito > span { display: grid; gap: 1px; line-height: 1.25; }
.credito small { font-size: 12.5px; color: var(--suave); }
.credito strong { font-family: var(--f-titulo); font-weight: 400; font-size: 17px; }
.credito-web { font-size: 13px; color: var(--acento); }
.acerca form { margin-top: 4px; display: flex; justify-content: center; }
.explica { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14.5px; line-height: 1.4; }
.explica li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.explica .ico { width: 26px; height: 26px; color: var(--acento); }
.explica strong { font-family: var(--f-titulo); font-weight: 400; font-size: 15.5px; }
.acerca-botones { flex-wrap: wrap; gap: 10px; }
.btn-peligro { --acento: var(--lacre); } /* el botón principal, en lacre */

.meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; font-size: 13px; color: var(--suave); }

.app > * { flex: none; }
.app > .contenido { flex: 1; min-height: 0; }
.contenido { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Informe ---------- */
/* El dossier: carpeta de cartulina con pestaña y, dentro, el informe como una hoja
   mecanografiada sujeta con un clip. La carpeta no recorta para que el clip y la hoja de
   detrás puedan asomar; quien hace scroll si el texto no cabe es solo la hoja. */
.dossier { position: relative; flex: 0 1 auto; min-height: 110px; display: flex; flex-direction: column; }
#num-caso {
  position: relative; z-index: 1; margin-bottom: -1px; padding: 4px 14px 3px;
  background: var(--grano) 0 0 / 160px 160px, var(--carpeta);
  border: 1px solid var(--carpeta-borde); border-bottom: 0; border-radius: 8px 8px 0 0;
  font-family: var(--f-titulo); font-size: 14px; letter-spacing: .04em; color: var(--texto);
}
.carpeta {
  position: relative; flex: 0 1 auto; min-height: 84px; display: flex; padding: 8px 8px 9px;
  background: var(--grano) 0 0 / 160px 160px, var(--carpeta);
  border: 1px solid var(--carpeta-borde); border-radius: 0 10px 10px 10px;
  box-shadow: 0 3px 8px -5px rgba(0, 0, 0, .45);
}
/* Otra hoja del expediente, algo torcida, debajo del informe */
.carpeta::before {
  content: ""; position: absolute; inset: 10px 6px 6px 11px; border-radius: 2px;
  background: var(--tarjeta); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transform: rotate(.7deg);
}
/* En móviles estrechos «Archivo ·» no cabe junto al post-it */
@media (max-width: 360px) { .pestana-archivo { display: none; } }
/* La fecha: un post-it escrito a boli que el clip sujeta a la carpeta. Va en tinta azul en
   los dos temas, porque es un objeto: no cambia con la luz de la habitación */
#fecha-caso {
  position: absolute; z-index: 2; top: 6px; right: 10px;
  padding: 3px 26px 3px 9px; border-radius: 1px;
  background: linear-gradient(175deg, color-mix(in srgb, var(--postit) 88%, #fff), var(--postit) 55%);
  box-shadow: 1px 3px 5px -2px rgba(0, 0, 0, .5);
  transform: rotate(-2.2deg);
  font-family: var(--f-mano); font-size: 18px; font-weight: 600; line-height: 1.1; color: #22346e;
  white-space: nowrap;
}
.clip {
  position: absolute; z-index: 3; top: -24px; right: 18px; width: 14px; height: 35px;
  fill: none; stroke: var(--suave); stroke-width: 1.6; stroke-linecap: round;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
}
.informe {
  position: relative; flex: 1 1 auto; min-width: 0; min-height: 64px;
  background: var(--tarjeta); border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  padding: 8px 12px 10px; display: grid; gap: 5px; align-content: start;
  overflow-y: auto; overscroll-behavior: contain;
}
/* Tabla centrada en el hueco libre bajo el informe */
.tablero { flex: none; margin-block: auto; }
.etiqueta {
  margin: 0; padding: 0 22px 3px 0; border-bottom: 1px solid var(--linea); /* sin texto bajo el clip */
  font-family: var(--f-titulo); font-size: 12px; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--acento);
}
#informe-texto { font-family: var(--f-titulo); font-size: 13.5px; line-height: 1.4; }

/* ---------- Pistas de texto: amplían el informe ---------- */
#informe-extra { display: grid; gap: 6px; }
#informe-extra:empty { display: none; }
.informe-extra {
  display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start;
  padding-top: 6px; border-top: 1px dashed var(--linea);
  font-family: var(--f-titulo); font-size: 12.5px; line-height: 1.4;
  border-radius: 4px;
}
.informe-extra .ico { width: 15px; height: 15px; margin-top: 1px; color: var(--acento); }
.informe-extra.nueva { animation: destello 1.6s ease-out; }

/* Iconos de pista: trazo fino con el color del contenedor */
.ico-svg {
  display: block; width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
/* Casilla acusada con pista: el icono sustituye al símbolo */
.celda.con-pista { position: relative; cursor: pointer; }
.celda.con-pista .ico-svg { width: 74%; height: 74%; stroke-width: 2.6; }
/* Respuesta «no» en una pista de dirección: flecha atenuada y tachada */
.celda.negada .ico-svg { opacity: .55; }
.celda.negada::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 92%; height: 2px; border-radius: 1px; background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.celda.nueva { animation: aparecer-pista .6s cubic-bezier(.2, 1.6, .4, 1); z-index: 1; }
@keyframes aparecer-pista {
  0% { transform: scale(1); }
  40% { transform: scale(1.7); box-shadow: 0 0 0 3px var(--acento); }
  100% { transform: scale(1); }
}

/* ---------- Tabla ---------- */
.tablero { container-type: inline-size; }
.tabla {
  isolation: isolate; /* las capas de las casillas (p. ej., el salto de una pista) no salen de la tabla */
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  grid-template-rows: repeat(7, auto) 6px repeat(2, auto);
  gap: 2px;
}
.celda {
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 2px;
  font-family: var(--f-simbolo);
  font-size: clamp(7px, 2.35cqw, 13px);
  font-weight: 600;
  line-height: 1;
  background: var(--cand-fondo);
  color: var(--cand-texto);
  box-shadow: inset 0 0 0 1px var(--cand-borde);
  transition: background-color .35s, color .35s, box-shadow .35s, transform .15s;
}
.celda.off { background: var(--off-fondo); color: var(--off-texto); box-shadow: none; font-weight: 500; }
.celda.fallo { background: var(--fallo-fondo); color: var(--fallo-texto); box-shadow: none; }
.celda.acierto { background: var(--acierto-fondo); color: var(--acierto-texto); box-shadow: none; }
.celda.revelado { box-shadow: inset 0 0 0 2px var(--lacre); color: var(--texto); background: var(--cand-fondo); }

/* ---------- Estado ---------- */
/* ---------- Acusaciones (en el panel, sobre el campo de respuesta) ---------- */
.estado { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }

/* Seis fichas con forma de casilla de elemento: vacías, la actual con «?»,
   y las usadas con el símbolo del acusado (lacre) o del culpable (verde). */
.fichas { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.fichas li {
  position: relative; width: 34px; height: 34px; border-radius: 5px;
  display: grid; place-items: center;
  font-family: var(--f-simbolo); font-weight: 600; font-size: 13px; line-height: 1;
  border: 1.5px dashed var(--linea); color: var(--suave);
}
.fichas li::before {
  content: attr(data-n); position: absolute; top: 2px; left: 3px;
  font-size: 7.5px; font-weight: 500; opacity: .7;
}
.fichas li.usado { background: var(--fallo-fondo); color: var(--fallo-texto); border: 1.5px solid var(--fallo-fondo); }
.fichas li.bien { background: var(--acierto-fondo); color: var(--acierto-texto); border: 1.5px solid var(--acierto-fondo); }
.fichas li.ahora {
  border: 1.5px solid var(--acento); color: var(--acento); background: var(--tarjeta);
  animation: latido 1.8s ease-in-out infinite;
}
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 45%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 0%, transparent); }
}
.fichas li.nueva { animation: aparecer-pista .5s cubic-bezier(.2, 1.6, .4, 1); }

.sospechosos { display: grid; justify-items: end; line-height: 1.05; }
.sospechosos strong { font-family: var(--f-titulo); font-size: 23px; font-weight: 400; color: var(--texto); }
.sospechosos span { font-family: var(--f-titulo); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }

@media (max-width: 350px) {
  .fichas { gap: 4px; }
  .fichas li { width: 30px; height: 30px; font-size: 12px; }
}

/* ---------- Panel inferior ---------- */
.panel {
  position: sticky; bottom: 0; z-index: 10; /* el panel y su desplegable, siempre por encima de la tabla */
  margin: 0 -14px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  background: var(--grano) 0 0 / 160px 160px, var(--fondo);
  border-top: 1px solid var(--linea);
}

/* minmax(0, 1fr): sin esto, la columna crece hasta el ancho mínimo del campo de texto y desborda en móviles estrechos */
.acusar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.aviso { font-size: 13px; color: var(--lacre); min-height: 0; }
.aviso:empty { display: none; }
.fila-entrada { display: flex; align-items: center; gap: 10px; position: relative; }
/* Acusar: algo más bajo que el campo, más ancho y con el mazo de juez */
.fila-entrada .btn-acusar {
  flex: none; min-width: 0; min-height: 40px; height: 40px; padding: 0 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-acusar .ico-svg { width: 19px; height: 19px; stroke-width: 2.1; transition: transform .15s; transform-origin: 30% 80%; }
.btn-acusar:active .ico-svg { transform: rotate(-22deg); }
@media (max-width: 350px) { .fila-entrada .btn-acusar { padding: 0 12px; gap: 6px; } }

/* Desplegable de sugerencias: se abre hacia arriba, con la mejor coincidencia
   pegada al campo de texto. */
.desplegable {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 5;
  margin: 0; padding: 4px; list-style: none;
  display: flex; flex-direction: column-reverse;
  background: var(--tarjeta); border: 1.5px solid var(--linea); border-radius: 12px;
  box-shadow: 0 -12px 30px -16px rgba(0, 0, 0, .55);
}
.desplegable li {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  font-size: 16px; font-weight: 400; color: var(--suave);
}
.desplegable li b { font-weight: 700; color: var(--texto); }
.desplegable li .alias { font-size: 13px; }
.desplegable li .sym {
  margin-left: auto; font-family: var(--f-simbolo); font-size: 13px; font-weight: 600; color: var(--acento);
}
.desplegable li.activo { background: var(--resalte); }
.desplegable li.descartado { opacity: .5; }
.desplegable li.ya .nombre { text-decoration: line-through; }
.desplegable li.ya { opacity: .45; }
#entrada {
  flex: 1; min-width: 0;
  border: 1.5px solid var(--linea); border-radius: 10px;
  background: var(--tarjeta); padding: 11px 12px; font-size: 16px; /* 16px evita el zoom de iOS */
}
#entrada:focus { border-color: var(--acento); outline: none; }
/* Botón principal: relleno liso, filete interior y letra de máquina, de la familia del
   botón noir del tutorial */
.btn-principal {
  --filete: inset 0 0 0 3px var(--acento), inset 0 0 0 4px color-mix(in srgb, var(--sobre-acento) 55%, transparent);
  border: 0; border-radius: 10px; padding: 0 18px; min-height: 46px;
  background: var(--acento); color: var(--sobre-acento); box-shadow: var(--filete);
  font-family: var(--f-titulo); font-weight: 400; font-size: 16px; letter-spacing: .05em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .18s ease-out, box-shadow .18s ease-out;
}
/* Todos los botones llevan icono y miden lo que su contenido */
.btn-principal .ico-svg, .btn-secundario .ico-svg { flex: none; width: 18px; height: 18px; stroke-width: 2.1; }
.btn-principal:active { transform: translateY(1px); }

/* ---------- Elegir pista: pantalla completa, el juego se detiene ----------
   Sigue el tema: velo de papel de día, fondo casi negro de noche (--velo). */
.subida {
  width: 100%; max-width: 440px; max-height: 100dvh; margin: auto;
  border: 0; background: transparent; color: var(--texto);
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.subida:focus { outline: none; }
.subida[open] { display: flex; flex-direction: column; gap: 22px; animation: fundido .2s ease-out; }
.subida::backdrop { background: var(--grano) 0 0 / 160px 160px, var(--velo); backdrop-filter: blur(10px) saturate(.9); -webkit-backdrop-filter: blur(10px) saturate(.9); animation: fundido .2s ease-out; }
.subida.saliendo, .subida.saliendo::backdrop { opacity: 0; transition: opacity .25s; }

.subida-cabecera { display: grid; justify-items: center; gap: 6px; text-align: center; }
.ficha {
  position: relative; width: 76px; height: 76px; margin-bottom: 18px;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--tarjeta); color: var(--texto); border: 2px solid var(--linea);
  font-family: var(--f-simbolo); font-weight: 600; font-size: 30px;
}
.ficha small { position: absolute; top: 4px; left: 7px; font-size: 11px; font-weight: 500; }
.ficha .sello-mini {
  position: absolute; left: 50%; top: 88%; /* sobre el borde inferior, sin tapar el símbolo */
  font-size: 12px; letter-spacing: .14em; color: var(--lacre); background: var(--fondo);
  border: 2px solid var(--lacre); border-radius: 4px; padding: 2px 6px;
  transform: translate(-50%, -50%) rotate(-14deg);
  animation: estampar-mini .4s .15s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes estampar-mini {
  from { transform: translate(-50%, -50%) rotate(-24deg) scale(2); opacity: 0; }
  to { transform: translate(-50%, -50%) rotate(-14deg) scale(1); opacity: 1; }
}
#elegir-titulo { font-family: var(--f-titulo); font-weight: 400; font-size: 26px; line-height: 1.15; text-wrap: balance; }
/* «Elige una pista»: en ámbar, mayúsculas espaciadas y filetes a los lados */
#elegir-sub {
  display: flex; align-items: center; gap: 12px; margin-top: 4px;
  font-size: 15px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--acento);
}
#elegir-sub::before, #elegir-sub::after {
  content: ""; width: 28px; height: 1.5px; background: currentColor; opacity: .55;
}
#elegir-sub.sin-pistas { font-size: 13px; letter-spacing: .08em; text-transform: none; color: var(--suave); }
#elegir-sub.sin-pistas::before, #elegir-sub.sin-pistas::after { display: none; }

.opciones { display: grid; gap: 12px; }
.opcion {
  display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 14px;
  text-align: left; padding: 14px 16px; min-height: 84px;
  border: 2px solid var(--linea); border-radius: 14px; background: var(--tarjeta);
  color: var(--texto); box-shadow: var(--sombra);
  /* backwards: tras la animación no fija transform, para que funcionen hover y .elegida */
  animation: aparecer .38s cubic-bezier(.2, 1.1, .4, 1) backwards;
  animation-delay: calc(.25s + var(--i, 0) * .09s);
  transition: transform .2s, border-color .2s, opacity .25s, box-shadow .2s;
}
.opcion:focus-visible { border-color: var(--acento); transform: translateY(-2px); outline: none; }
.opcion .ico {
  width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center;
  background: var(--resalte); color: var(--acento);
}
.opcion .ico .ico-svg { width: 30px; height: 30px; stroke-width: 1.7; }
.opcion strong { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 19px; line-height: 1.2; }
.opcion .preg { display: block; font-size: 13.5px; color: var(--suave); margin-top: 2px; }
/* Revelado de la respuesta dentro de la tarjeta elegida */
.opcion { position: relative; }
.opcion .preg { transition: opacity .16s, transform .16s; }
.opcion .preg.borrando { opacity: 0; transform: translateY(-4px); }
.opcion .preg.respuesta {
  font-family: var(--f-titulo); font-size: 15px; line-height: 1.35; color: var(--texto); margin-top: 4px;
}
.opcion .preg.escribiendo::after {
  content: ""; display: inline-block; width: .5em; height: 1em; margin-left: 1px;
  vertical-align: -2px; background: var(--acento); animation: cursor .7s steps(1) infinite;
}
@keyframes cursor { 50% { opacity: 0; } }
.opcion .ico { position: relative; }
.opcion .ico.negada .ico-svg { opacity: .4; transition: opacity .3s; }
.opcion .ico.negada::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 70%; height: 3px; border-radius: 2px;
  background: var(--lacre); transform: translate(-50%, -50%) rotate(-45deg);
  animation: tachar .3s .1s ease-out backwards;
}
@keyframes tachar { from { width: 0; } }
.veredicto {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--f-simbolo); font-weight: 600; font-size: 14px; letter-spacing: .14em;
  padding: 1px 8px; border: 2px solid currentColor; border-radius: 4px;
  transform: rotate(-8deg); animation: estampar-veredicto .35s cubic-bezier(.2, 1.4, .4, 1) both;
}
.veredicto.si { color: var(--acierto-fondo); }
.veredicto.no { color: var(--lacre); }
@keyframes estampar-veredicto {
  from { transform: rotate(-20deg) scale(2); opacity: 0; }
  to { transform: rotate(-8deg) scale(1); opacity: 1; }
}
.opcion.elegida { transform: scale(1.04); border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 35%, transparent); }
.opcion.apartada { opacity: 0; transform: scale(.94); }
.seguir { justify-self: center; }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(28px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes fundido { from { opacity: 0; } }

/* Celda recién acusada: se sacude antes de que se abra la elección */
.celda.recien { animation: sacudir .45s; }
@keyframes sacudir {
  0%, 100% { transform: none; }
  20% { transform: translateX(-2px) rotate(-6deg); }
  40% { transform: translateX(2px) rotate(5deg); }
  60% { transform: translateX(-2px) rotate(-3deg); }
  80% { transform: translateX(1px); }
}

/* Pista de texto recién recibida: destello */
@keyframes destello {
  0%, 35% { background: var(--resalte); }
  100% { background: transparent; }
}

/* Fin: barra del panel inferior (cuando se cierra la pantalla de resultado) */
/* Rejilla y no flex: los dos botones nunca se parten en dos filas */
.fin-barra { display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center; gap: 8px 12px; }
.fin-barra .proximo { grid-column: 1 / -1; }
.fin-barra .btn-principal { grid-column: 2; }
.fin-barra .btn-secundario { padding: 0 16px; }
.proximo { font-size: 13px; color: var(--suave); }
.cuenta-atras { font-family: var(--f-simbolo); font-weight: 600; color: var(--texto); }

/* Fin: pantalla de resultado a pantalla completa. Sigue el tema: de día, un velo
   de papel casi opaco con tinta oscura; de noche, el fondo casi negro de siempre. */
.resultado { color: var(--texto); }
.resultado::backdrop { background: var(--grano) 0 0 / 160px 160px, var(--velo); backdrop-filter: blur(10px) saturate(.9); -webkit-backdrop-filter: blur(10px) saturate(.9); }
.resultado[open] { align-items: center; justify-content: center; text-align: center; gap: 12px; }
.fin-cerrar {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 2;
  width: 42px; height: 42px; border: 0; border-radius: 10px; background: transparent;
  display: grid; place-items: center; color: var(--suave); animation: none !important;
}
.fin-cerrar:focus-visible { color: var(--texto); background: var(--resalte); outline: none; }
.fin-cerrar .ico-svg { width: 22px; height: 22px; stroke-width: 2; transition: transform .25s; }
.resultado > * { animation: aparecer .4s cubic-bezier(.2, 1.1, .4, 1) backwards; }
.resultado > :nth-child(3) { animation-delay: .35s; }
.resultado > :nth-child(4) { animation-delay: .42s; }
.resultado > :nth-child(5) { animation-delay: .5s; }
.resultado > :nth-child(6) { animation-delay: .58s; }
.resultado > :nth-child(7) { animation-delay: .64s; }
.resultado > :nth-child(8) { animation-delay: .7s; }
/* Fichas de las acusaciones usadas: entran una a una */
.resultado > .fichas-fin { animation: none; justify-content: center; margin: 2px 0 4px; }
.fichas-fin li { animation: aparecer-ficha .4s cubic-bezier(.2, 1.6, .4, 1) backwards; animation-delay: calc(.5s + var(--i, 0) * .1s); }
@keyframes aparecer-ficha { from { opacity: 0; transform: scale(.4); } }
.ficha-grande { width: 108px; height: 108px; font-size: 46px; margin-bottom: 30px; border-radius: 10px; }
.ficha-grande small { top: 6px; left: 9px; font-size: 13px; }
.ficha .sello-fin {
  position: absolute; left: 50%; top: 96%; white-space: nowrap;
  font-size: 16px; letter-spacing: .16em; padding: 4px 12px;
  border: 2.5px solid currentColor; border-radius: 6px; background: var(--fondo);
  transform: translate(-50%, -50%) rotate(-8deg);
  animation: estampar-fin .45s .2s cubic-bezier(.2, 1.4, .4, 1) both;
}
.resultado.ganada .sello-fin { color: var(--acierto-fondo); }
.resultado.perdida .sello-fin { color: var(--lacre); }
@keyframes estampar-fin {
  from { transform: translate(-50%, -50%) rotate(-20deg) scale(2.2); opacity: 0; }
  to { transform: translate(-50%, -50%) rotate(-8deg) scale(1); opacity: 1; }
}
#fin-titulo { font-family: var(--f-titulo); font-weight: 400; font-size: 28px; line-height: 1.15; }
.fin-sub { font-size: 15px; color: var(--suave); }
.fin-sub strong { color: var(--texto); }
.fin-dato {
  display: grid; grid-template-columns: 18px 1fr; gap: 8px; text-align: left;
  max-width: 36ch; margin: 4px 0 6px; padding: 10px 12px;
  border: 1px dashed var(--linea); border-radius: 10px; background: var(--tarjeta);
  font-family: var(--f-titulo); font-size: 13.5px; line-height: 1.4; color: var(--texto);
}
.fin-dato .ico { width: 16px; height: 16px; margin-top: 1px; color: var(--acento); }
.fin-botones { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fin-fila { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.btn-secundario {
  min-height: 44px; padding: 0 18px; border-radius: 10px; background: transparent;
  border: 1.5px solid var(--linea); color: var(--texto);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-titulo); font-weight: 400; font-size: 16px; letter-spacing: .05em;
  transition: border-color .2s, box-shadow .2s, color .2s;
}
.resultado .proximo { color: var(--suave); }
.resultado .cuenta-atras { color: var(--texto); }

/* ---------- Ayuda ---------- */
/* Un expediente sobre la mesa a oscuras: mismo fondo casi negro que el resto de pantallas */
.ayuda {
  width: min(420px, calc(100% - 28px)); max-height: calc(100dvh - 24px); overflow-x: hidden; overflow-y: auto;
  border: 1px solid var(--linea); border-radius: 14px;
  background: var(--grano) 0 0 / 160px 160px, var(--tarjeta); color: var(--texto); padding: 18px 36px 16px; /* margen lateral amplio: ahí viven las flechas */
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9);
}
.ayuda:focus { outline: none; }
.ayuda[open] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; animation: aparecer .35s cubic-bezier(.2, 1.1, .4, 1); }
.ayuda::backdrop { background: rgba(6, 8, 12, .9); backdrop-filter: blur(3px); animation: fundido .2s ease-out; }
.ayuda-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ayuda h2 { font-family: var(--f-titulo); font-weight: 400; font-size: 23px; line-height: 1.15; }
.diapos-saltar {
  display: inline-flex; align-items: center; gap: 3px;
  border: 0; background: transparent; color: var(--suave); font-size: 13.5px; font-weight: 600;
  padding: 6px 0 6px 6px; transition: color .2s;
}
.diapos-saltar .ico-svg { width: 16px; height: 16px; stroke-width: 2.4; transition: transform .2s; }
.diapos-saltar:focus-visible { color: var(--acento); }

/* Carrusel */
.diapos { overflow: hidden; touch-action: pan-y; margin: 0 -36px; }
.diapos-pista { display: flex; transition: transform .35s cubic-bezier(.2, .9, .3, 1); }
.diapos-pista.arrastrando { transition: none; }
.diapo { flex: 0 0 100%; padding: 0 36px; display: grid; gap: 8px; align-content: start; user-select: none; }
.diapo h3 { margin: 6px 0 0; font-family: var(--f-titulo); font-weight: 400; font-size: 21px; line-height: 1.15; }
.diapo p { font-size: 14px; line-height: 1.42; }
.diapo p strong { font-weight: 600; }
.diapo .nota { font-size: 12px; color: var(--suave); }

/* Flechas: solo el chevrón, discreto, en el margen del diálogo y a media altura */
.diapos-marco { position: relative; min-width: 0; } /* sin esto, la pista de diapositivas ensancha el diálogo */
.diapo-flecha {
  position: absolute; top: 50%; z-index: 3;
  width: 28px; height: 48px; padding: 0; border: 0; border-radius: 6px;
  display: grid; place-items: center;
  background: transparent; color: var(--suave); opacity: .75;
  transform: translateY(-50%);
  transition: opacity .25s, transform .25s, color .2s;
}
.diapo-flecha .ico-svg { width: 18px; height: 18px; stroke-width: 2.6; }
.diapo-flecha:focus-visible { color: var(--acento); opacity: 1; }
.diapo-anterior { left: -36px; }
.diapo-siguiente { right: -36px; }
.diapo-anterior:active { transform: translateY(-50%) translateX(-2px); }
.diapo-siguiente:active { transform: translateY(-50%) translateX(2px); }
.diapo-flecha.oculta { opacity: 0; pointer-events: none; }
/* Móviles estrechos: algo menos de margen para que quepa la tabla en miniatura */
@media (max-width: 370px) {
  .ayuda { padding-left: 28px; padding-right: 28px; }
  .diapos { margin: 0 -28px; }
  .diapo { padding: 0 28px; }
  .diapo-anterior { left: -28px; }
  .diapo-siguiente { right: -28px; }
  .diapo-flecha { width: 24px; }
}

/* Pie: los puntos y, en la última diapositiva, el botón noir en su lugar */
.diapos-pie { display: grid; place-items: center; min-height: 52px; }
.diapos-pie > * { grid-area: 1 / 1; transition: opacity .3s, transform .35s cubic-bezier(.2, 1.2, .4, 1); }
.diapos-pie.final .diapos-puntos { opacity: 0; transform: translateY(-6px); }
.diapos-abrir { opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none; }
.diapos-pie.final .diapos-abrir { opacity: 1; transform: none; pointer-events: auto; }

/* Botón noir: tinta, filete ámbar doble, letra de máquina y un barrido de luz de lámpara */
.btn-noir {
  position: relative; overflow: hidden; width: fit-content; margin-inline: auto; min-height: 52px; padding: 0 24px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(120% 140% at 50% 0%, #1f2431 0%, #0e1016 70%);
  color: #f3ead6; border: 1.5px solid #e7ad45; border-radius: 10px;
  font-family: var(--f-titulo); font-size: 19px; letter-spacing: .16em; text-transform: uppercase;
  box-shadow:
    inset 0 0 0 4px #0e1016, inset 0 0 0 5px rgba(231, 173, 69, .35),
    0 14px 30px -14px rgba(0, 0, 0, .9);
  text-shadow: 0 0 12px rgba(231, 173, 69, .35);
  transition: box-shadow .25s, transform .1s;
}
.btn-noir .ico-svg { width: 22px; height: 22px; color: #e7ad45; stroke-width: 2.2; }
.btn-noir::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(231, 173, 69, .3), transparent);
  transform: skewX(-20deg);
  animation: barrido 3.4s ease-in-out .8s infinite;
}
@keyframes barrido { 0% { left: -60%; } 55%, 100% { left: 130%; } }
.btn-noir:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 4px #0e1016, inset 0 0 0 5px rgba(231, 173, 69, .6),
    0 0 26px -2px rgba(231, 173, 69, .45);
}
.btn-noir:active { transform: translateY(1px); }

.diapos-puntos { display: flex; justify-content: center; gap: 8px; }
.diapos-puntos button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0;
  background: var(--linea); transition: width .25s, background .25s;
}
.diapos-puntos button[aria-current="true"] { width: 22px; border-radius: 4px; background: var(--acento); }

/* Escena: una miniatura animada del juego, con los colores del tema */
.escena {
  position: relative; height: 196px; overflow: hidden;
  border: 1px solid var(--linea); border-radius: 12px; background: var(--fondo);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.mini-tabla {
  display: grid; gap: 1.5px;
  grid-template-columns: repeat(18, 13px); grid-template-rows: repeat(7, 13px) 4px repeat(2, 13px);
}
.mini-celda {
  display: grid; place-items: center; border-radius: 1.5px;
  font-family: var(--f-simbolo); font-size: 5.6px; font-weight: 600; line-height: 1;
  background: var(--cand-fondo); color: var(--cand-texto); box-shadow: inset 0 0 0 .6px var(--cand-borde);
  transition: background-color .4s, color .4s, box-shadow .4s;
}
.mini-celda.off { background: var(--off-fondo); color: var(--off-texto); box-shadow: none; }
.mini-celda.fallo { background: var(--fallo-fondo); color: var(--fallo-texto); box-shadow: none; }
.mini-celda .ico-svg { width: 80%; height: 80%; stroke-width: 3; }
.mini-celda.salta { animation: aparecer-pista .5s cubic-bezier(.2, 1.6, .4, 1); }

.mini-informe {
  width: min(270px, calc(100% - 12px)); padding: 6px 9px; border-radius: 2px;
  background: var(--tarjeta); box-shadow: 0 0 0 3px var(--carpeta), 0 0 0 4px var(--carpeta-borde);
}
.mini-etiqueta { display: block; font-family: var(--f-titulo); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); }
.mini-informe p { font-family: var(--f-titulo); font-size: 9.5px; line-height: 1.35; min-height: 2.7em; }
.mini-lupa {
  position: absolute; width: 34px; height: 34px; color: var(--lupa);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
  animation: lupa-recorre 7s ease-in-out infinite;
}
.mini-lupa .ico-svg { stroke-width: 2.4; }
@keyframes lupa-recorre {
  0%, 100% { transform: translate(-90px, 10px); }
  25% { transform: translate(40px, 40px); }
  50% { transform: translate(100px, -5px); }
  75% { transform: translate(-20px, 55px); }
}

/* Escena 2: panel de acusación en miniatura */
.mini-panel { width: min(270px, calc(100% - 12px)); display: grid; gap: 10px; }
.mini-fichas { list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; }
.mini-fichas li {
  width: 26px; height: 26px; border-radius: 4px; display: grid; place-items: center;
  font-family: var(--f-simbolo); font-weight: 600; font-size: 10px;
  border: 1.2px dashed var(--linea); color: var(--suave);
}
.mini-fichas li.ahora { border: 1.2px solid var(--acento); color: var(--acento); background: var(--tarjeta); }
.mini-fichas li.usado { background: var(--fallo-fondo); color: var(--fallo-texto); border: 1.2px solid var(--fallo-fondo); }
.mini-fichas li.nueva { animation: aparecer-pista .5s cubic-bezier(.2, 1.6, .4, 1); }
.mini-entrada { position: relative; display: flex; gap: 6px; }
.mini-campo {
  flex: 1; height: 32px; border-radius: 7px; border: 1.2px solid var(--acento); background: var(--tarjeta);
  display: flex; align-items: center; padding: 0 9px; font-size: 12px;
}
.mini-campo::after { content: ""; width: 1px; height: 13px; margin-left: 1px; background: var(--texto); animation: cursor .8s steps(1) infinite; }
.mini-boton .ico-svg { width: 12px; height: 12px; stroke-width: 2.2; }
.mini-boton {
  display: flex; align-items: center; gap: 4px; padding: 0 10px; border-radius: 7px;
  background: var(--acento); color: var(--sobre-acento);
  box-shadow: inset 0 0 0 2px var(--acento), inset 0 0 0 2.6px color-mix(in srgb, var(--sobre-acento) 55%, transparent);
  font-family: var(--f-titulo); font-size: 12px; letter-spacing: .05em;
}
.mini-desplegable {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 5px); margin: 0; padding: 3px; list-style: none;
  background: var(--tarjeta); border: 1.2px solid var(--linea); border-radius: 8px;
  opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s;
}
.mini-desplegable.abierto { opacity: 1; transform: none; }
.mini-desplegable li { display: flex; padding: 5px 8px; border-radius: 5px; background: var(--resalte); font-size: 11.5px; color: var(--suave); }
.mini-desplegable b { color: var(--texto); }
.mini-desplegable i { margin-left: auto; font-style: normal; font-family: var(--f-simbolo); font-weight: 600; color: var(--acento); }

/* Escena 3: elección de pista en miniatura (fondo siempre oscuro, como en el juego) */
.escena-oscura { background: #0b0d12; border-color: #23283a; }
.mini-titulo { font-family: var(--f-titulo); font-size: 15px; color: #f3ead6; }
.mini-opciones { width: min(260px, calc(100% - 12px)); display: grid; gap: 6px; }
.mini-opcion {
  position: relative; display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px; border: 1.5px solid var(--linea);
  background: var(--tarjeta); color: var(--texto);
  opacity: 0; transform: translateY(12px);
  transition: opacity .3s, transform .3s, border-color .2s, box-shadow .2s;
}
.mini-opcion.entra { opacity: 1; transform: none; }
.mini-opcion.elegida { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 35%, transparent); transform: scale(1.03); }
.mini-opcion.apartada { opacity: 0; transform: scale(.95); }
.mini-ico { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--resalte); color: var(--acento); }
.mini-ico .ico-svg { width: 16px; height: 16px; stroke-width: 2; }
.mini-texto strong { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 12px; }
.mini-resp { display: block; font-family: var(--f-titulo); font-size: 10.5px; min-height: 0; }
.mini-opcion .veredicto { top: 5px; right: 8px; font-size: 9px; padding: 0 5px; border-width: 1.5px; }

/* Escena 6: el sello de Holmio (img/sello.svg) cae como un tampón sobre la mesa.
   Se pinta con una máscara: el SVG da la forma y el color sale de background. */
.escena-final { overflow: hidden; }
.diapo-final > p:not(.nota) { font-family: var(--f-titulo); font-size: 16px; line-height: 1.4; }
.sello-holmio {
  width: 168px; height: 168px; background: #e0664f;
  -webkit-mask: url("../img/sello.svg") center / contain no-repeat;
  mask: url("../img/sello.svg") center / contain no-repeat;
  opacity: 0; transform: rotate(-24deg) scale(2.3);
}
/* Caída acelerada, aplastamiento al chocar y rebote mínimo hasta asentarse */
.sello-holmio.estampado { animation: estampar-sello .5s cubic-bezier(.55, 0, .9, .45) forwards; }
@keyframes estampar-sello {
  0% { opacity: 0; transform: rotate(-28deg) scale(2.8); }
  20% { opacity: 1; }
  58% { transform: rotate(-8deg) scale(.9); }
  72% { transform: rotate(-10deg) scale(1.05); animation-timing-function: ease-out; }
  86% { transform: rotate(-8.5deg) scale(.98); }
  100% { opacity: .95; transform: rotate(-9deg) scale(1); }
}
/* El golpe sacude la mesa: hundimiento fuerte y temblor que se apaga */
.escena-final.golpe { animation: golpe-mesa .55s cubic-bezier(.2, .8, .3, 1); }
@keyframes golpe-mesa {
  0% { transform: none; }
  12% { transform: translateY(6px) scale(.965); }
  28% { transform: translate(-4px, -3px) rotate(-.8deg); }
  44% { transform: translate(3px, 2px) rotate(.5deg); }
  60% { transform: translate(-2px, -1px); }
  78% { transform: translate(1px, 0); }
  100% { transform: none; }
}

/* Escena 5: bocadillo en miniatura */
.mini-bocadillo {
  position: absolute; transform: translate(-50%, calc(-100% - 7px)) scale(.9); opacity: 0;
  padding: 4px 8px; border-radius: 7px; background: var(--texto); color: var(--fondo);
  font-size: 10px; font-weight: 600; white-space: nowrap; transition: opacity .2s, transform .2s;
}
.mini-bocadillo::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px;
  background: inherit; transform: translateX(-50%) rotate(45deg);
}
.mini-bocadillo.visible { opacity: 1; transform: translate(-50%, calc(-100% - 7px)); }

/* Mano (táctil) o cursor (ratón) que señala los toques. El elemento es un punto
   (0×0) en el lugar del toque; la punta del dedo o de la flecha cae justo ahí. */
.dedo {
  position: absolute; width: 0; height: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity .2s, left .45s ease-in-out, top .45s ease-in-out;
}
.dedo.visible { opacity: 1; }
.dedo svg {
  position: absolute; overflow: visible;
  fill: #fffdf7; stroke: #1a1d27; stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
  transition: transform .15s;
}
.dedo .pliegue { fill: none; stroke-width: 1; opacity: .5; }
/* Punta del índice en (9, 2.5) de 24 → a 32 px: (12, 3.3) */
.dedo.mano svg { width: 32px; height: 32px; left: -12px; top: -3.3px; transform-origin: 12px 3.3px; }
/* Punta de la flecha en (4, 2.5) de 24 → a 26 px: (4.3, 2.7) */
.dedo.cursor svg { width: 26px; height: 26px; left: -4.3px; top: -2.7px; transform-origin: 4.3px 2.7px; fill: #1a1d27; stroke: #fffdf7; }
.dedo.toque svg { transform: scale(.88); }
/* Onda en el punto del toque */
.dedo-onda {
  position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--acento); background: color-mix(in srgb, var(--acento) 30%, transparent);
  opacity: 0;
}
.dedo.toque .dedo-onda { animation: onda .42s ease-out; }
@keyframes onda {
  from { opacity: .9; transform: scale(.3); }
  to { opacity: 0; transform: scale(1.5); }
}

/* ---------- Aviso flotante ---------- */
.toast {
  position: fixed; left: 50%; top: 16px; transform: translate(-50%, calc(-100% - 24px));
  background: var(--texto); color: var(--fondo); padding: 8px 16px; border-radius: 16px;
  width: max-content; max-width: min(420px, calc(100% - 32px)); text-align: center;
  font-size: 14px; font-weight: 600; transition: transform .25s; z-index: 10; pointer-events: none;
}
.toast.visible { transform: translate(-50%, 0); }

/* ---------- Bocadillo sobre la casilla pulsada ---------- */
.bocadillo {
  position: fixed; z-index: 20; pointer-events: none;
  width: max-content; max-width: min(260px, calc(100vw - 16px));
  padding: 7px 11px; border-radius: 10px;
  background: var(--texto); color: var(--fondo);
  font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .6);
}
.bocadillo::after {
  content: ""; position: absolute; left: var(--flecha, 50%); bottom: -5px;
  width: 11px; height: 11px; background: inherit; border-radius: 2px;
  transform: translateX(-50%) rotate(45deg);
}
.bocadillo.abajo::after { bottom: auto; top: -5px; }
.bocadillo.visible { animation: bocadillo .18s ease-out; }
@keyframes bocadillo { from { opacity: 0; transform: translateY(4px) scale(.96); } }

/* ---------- Desgaste de la tinta ----------
   Las casillas, fichas y casos con relleno llevan encima una loseta con saltaduras del color del papel.
   Va en el fondo del elemento, así que el texto no se toca. Encima, un degradado del
   color del relleno (--relleno) limpia el centro: la pieza se gasta por los bordes y
   lo que hay escrito se sigue leyendo. --dx y --dy mueven la loseta para que dos
   piezas vecinas no muestren el mismo trozo. */
.celda.fallo, .mini-celda.fallo, .fichas li.usado, .mini-fichas li.usado, .cal-caso.fugado { --relleno: var(--fallo-fondo); }
.celda.acierto, .fichas li.bien, .cal-caso.cerrado { --relleno: var(--acierto-fondo); }
.celda.fallo, .celda.acierto, .mini-celda.fallo,
.fichas li.usado, .fichas li.bien, .mini-fichas li.usado,
.cal-caso.cerrado, .cal-caso.fugado {
  background-image: radial-gradient(closest-side, var(--relleno) var(--limpio, 62%), transparent 100%), var(--desgaste);
  background-size: 100% 100%, 160px 160px;
  background-position: 0 0, var(--dx, 0) var(--dy, 0);
  background-origin: border-box;
}
.fichas li.usado, .fichas li.bien, .mini-fichas li.usado { border-color: transparent; } /* sin borde liso que tape el desgaste */
.celda.fallo, .celda.acierto, .mini-celda.fallo { --limpio: 72%; }
.archivo-leyenda .cerrado, .archivo-leyenda .fugado { background-image: var(--desgaste); background-size: 160px 160px; }
.archivo-leyenda .cerrado { background-position: -6px -0px; }
.archivo-leyenda .fugado { background-position: -63px -69px; }
.cal-caso.cerrado small, .cal-caso.fugado small, .fichas li.usado::before, .fichas li.bien::before { opacity: .95; text-shadow: 0 0 2px var(--relleno), 0 0 2px var(--relleno), 0 0 4px var(--relleno); }
:is(.celda, .fichas li, .cal-caso, .mini-celda, .mini-fichas li):nth-child(3n + 1) { --dx: -41px; }
:is(.celda, .fichas li, .cal-caso, .mini-celda, .mini-fichas li):nth-child(3n + 2) { --dx: -97px; }
:is(.celda, .fichas li, .cal-caso, .mini-celda, .mini-fichas li):nth-child(5n + 1) { --dy: -23px; }
:is(.celda, .fichas li, .cal-caso, .mini-celda, .mini-fichas li):nth-child(5n + 2) { --dy: -71px; }
:is(.celda, .fichas li, .cal-caso, .mini-celda, .mini-fichas li):nth-child(5n + 3) { --dy: -113px; }
:is(.celda, .fichas li, .cal-caso, .mini-celda, .mini-fichas li):nth-child(5n + 4) { --dy: -139px; }

/* Móviles estrechos (muchos Android miden 360 px): los botones en pareja deben caber
   en una sola fila. A partir de 375 px ya caben con su tamaño normal */
@media (max-width: 374px) {
  .fin-barra { column-gap: 8px; }
  .fin-barra .btn-principal, .fin-barra .btn-secundario,
  .fin-fila .btn-secundario, .acerca-botones button { padding: 0 10px; gap: 6px; font-size: 14.5px; }
  .btn-noir { padding: 0 8px; gap: 8px; font-size: 17px; }
}

/* ---------- Hover noir ----------
   Solo con ratón: en el móvil el hover se quedaría pegado tras pulsar.
   - Botones rellenos: se levantan un poco, como un sello antes de caer.
   - Casos y casillas: se acercan bajo la lupa, con el aro en lacre.
   - Botones de contorno y tarjetas: se encienden con la luz ámbar.
   - Menú y sugerencias: se marca la pestaña del expediente en lacre.
   - Cerrar, flechas y enlaces: tinta de lacre o ámbar. */
@media (hover: hover) {
  .btn-principal:hover { transform: translateY(-2px); box-shadow: var(--filete), 0 6px 10px -6px rgba(0, 0, 0, .5); }
  .btn-principal:hover:active { transform: translateY(1px); box-shadow: var(--filete); }
  .btn-acusar:hover .ico-svg { transform: rotate(-22deg); } /* levanta el mazo */
  .btn-noir:hover {
    box-shadow:
      inset 0 0 0 4px #0e1016, inset 0 0 0 5px rgba(231, 173, 69, .6),
      0 0 26px -2px rgba(231, 173, 69, .45);
  }

  .cal-caso:hover, .celda.con-pista:hover {
    position: relative; z-index: 2; transform: scale(1.1);
    box-shadow: 0 0 0 2px var(--lacre), 0 6px 14px -5px rgba(0, 0, 0, .55);
  }

  .btn-menu:hover, .btn-secundario:hover, .opcion:not(:disabled):hover {
    border-color: var(--acento);
    box-shadow: 0 0 18px -5px color-mix(in srgb, var(--acento) 75%, transparent);
  }
  .btn-menu:hover, .btn-secundario:hover { color: var(--acento); }
  .opcion:not(:disabled):hover { transform: translateY(-2px); }

  .menu-item:hover { background: var(--resalte); border-left-color: var(--lacre); }
  .menu-item:hover .menu-ico { transform: translateX(2px); }
  .desplegable li:hover { background: var(--resalte); }

  .menu-cerrar:hover, .fin-cerrar:hover { color: var(--lacre); background: var(--resalte); }
  .menu-cerrar:hover .ico-svg, .fin-cerrar:hover .ico-svg { transform: rotate(90deg); }
  .diapos-saltar:hover { color: var(--acento); }
  .diapos-saltar:hover .ico-svg { transform: translateX(2px); }
  .diapo-flecha:hover { color: var(--acento); opacity: 1; }
  .diapos-puntos button:not([aria-current="true"]):hover { background: var(--acento); }
  .credito:hover .credito-web { color: var(--lacre); }
  .credito:hover img { transform: rotate(-6deg); }
}

/* En pantallas táctiles no hay hover: la pieza se apaga un instante al pulsarla */
@media (hover: none) {
  .btn-principal:active, .btn-secundario:active, .btn-noir:active, .opcion:active,
  .cal-caso:active, .celda.con-pista:active, .icono-btn:active, .menu-item:active,
  .desplegable li:active { filter: brightness(.88); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-principal:hover { transform: none; }
  .cal-caso:hover, .celda.con-pista:hover { transform: none; }
  .bocadillo.visible { animation: none; }
  .menu.cerrando, .interruptor, .interruptor::after,
  .celda, .toast, .opcion, .diapos-pista, .mini-celda, .mini-opcion, .dedo,
  .sello-holmio.estampado { transition: none; opacity: .95; transform: rotate(-9deg); }
  .cargando-logo, .cargando-barra::after, .cal-caso.hoy, .menu[open], .menu::backdrop, .acerca[open], .acerca::backdrop,
  .btn-noir::after, .ayuda[open], .ayuda::backdrop, .mini-lupa, .escena-final.golpe, .sello-holmio.estampado, .dedo.toque .dedo-onda, .mini-celda.salta, .mini-fichas li.nueva, .mini-campo::after,
  .veredicto, .opcion .ico.negada::after, .opcion .preg.escribiendo::after,
  .ficha .sello-fin, .resultado > *, .ficha .sello-mini, .opcion, .subida[open], .subida::backdrop,
  .celda.recien, .celda.nueva, .informe-extra.nueva, .fichas li { animation: none !important; }
}

/* Móvil con el teclado abierto: solo el dossier y el campo. La tabla vuelve al terminar */
.app.escribiendo { height: var(--alto-visible, 100dvh); }
.app.escribiendo .tablero, .app.escribiendo .estado { display: none; }

/* Pantallas bajas sin teclado (móvil en horizontal, ventanas pequeñas): compactar */
@media (max-height: 560px) {
  @media (max-width: 959px) { .panel:has(#form-acusar:not([hidden])) .estado { display: none; } }
  .app:not(.escribiendo) .meta, .app:not(.escribiendo) .clip { display: none; }
  .app:not(.escribiendo) .dossier { min-height: 66px; }
  .app:not(.escribiendo) .carpeta { min-height: 66px; padding: 5px 6px 6px; border-radius: 10px; }
  .app:not(.escribiendo) .informe { padding: 6px 10px; min-height: 48px; }
  .app:not(.escribiendo) #informe-texto { font-size: 12.5px; }
}

/* ---------- Escritorio ----------
   El móvil es una columna. Aquí la app es una rejilla: cabecera arriba, a la izquierda el
   dossier con las fichas debajo, a la derecha la tabla, y abajo el campo centrado.
   .contenido y .panel desaparecen como cajas (display: contents) para que sus hijos se
   coloquen directamente en la rejilla. La tabla se limita también por la altura. */
@media (min-width: 960px) {
  .app {
    --ancho-dossier: 350px;
    --hueco: 40px;
    display: grid; max-width: 1800px; padding: 14px 32px 0; gap: 14px 0;
    grid-template-columns: minmax(0, 1fr) var(--ancho-dossier) minmax(0, calc((100dvh - 200px) * 1.9 + var(--hueco))) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "cabecera cabecera cabecera cabecera"
      ". dossier tablero ."
      ". estado tablero ."
      "entrada entrada entrada entrada";
  }
  .cabecera { grid-area: cabecera; }
  .logo-largo { height: 46px; }
  .contenido, .panel { display: contents; }

  .dossier { grid-area: dossier; max-height: calc(100dvh - 320px); margin-top: 8px; }
  #informe-texto { font-size: 15.5px; line-height: 1.45; }
  .informe-extra { font-size: 14px; }
  .etiqueta { font-size: 13px; }
  #num-caso { font-size: 15px; }
  #fecha-caso { font-size: 19px; }

  .tablero { grid-area: tablero; align-self: start; margin: 8px 0 0 var(--hueco); }
  .celda { font-size: clamp(10px, 1.75cqw, 20px); }

  .estado { grid-area: estado; align-self: start; flex-direction: column; align-items: stretch; gap: 10px; margin: 6px 0 0; }
  #fichas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  #fichas li { width: auto; height: auto; aspect-ratio: 1; font-size: 17px; }
  .sospechosos { display: flex; justify-content: center; align-items: baseline; gap: 8px; }

  .acusar, .fin-barra {
    grid-area: entrada; position: relative; z-index: 10; /* su desplegable, por encima de la tabla */
    padding: 12px 0 16px; border-top: 1px solid var(--linea);
  }
  .aviso:not(:empty) {
    position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 1;
    padding: 6px 12px; white-space: nowrap;
    background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 8px; box-shadow: var(--sombra);
  }
  .fila-entrada { width: 100%; max-width: 620px; margin-inline: auto; }
  .fin-barra { grid-template-columns: auto auto auto; justify-content: center; gap: 16px; }
  .fin-barra .proximo { grid-column: auto; }
  .fin-barra .btn-principal { grid-column: auto; }

  .vista-archivo { grid-column: 1 / -1; grid-row: 2 / -1; min-height: 0; }
  .archivo-cabecera { justify-items: center; }
  #archivo-meses { grid-template-columns: repeat(auto-fit, minmax(300px, 340px)); justify-content: center; gap: 30px 48px; }
  .archivo-mes { width: 100%; }
}
/* Portátiles pequeños y tablets en horizontal: más sitio para la tabla */
@media (min-width: 960px) and (max-width: 1200px) {
  .app { --ancho-dossier: 290px; --hueco: 24px; padding-inline: 20px; }
  #informe-texto { font-size: 14.5px; }
}