/* identifAI-it: componentes. Estados siempre por atributos data-*. Composicion sin deslizar: ver 2.6 de la especificacion. */

/* ---------- Superficies comunes ---------- */
.tarjeta {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1.5dvh, var(--espacio-3));
  padding: clamp(10px, 2.5dvh, var(--espacio-5));
  color: var(--color-tinta);
  background: url("../img/ui/papel.svg") repeat top left / 240px 240px, var(--color-papel);
  border-radius: var(--radio-1);
  box-shadow: var(--sombra-papel);
}

.tarjeta h2 {
  color: var(--color-sello);
  padding-bottom: var(--espacio-2);
  border-bottom: 2px dashed var(--color-tinta-suave);
}

.centrado {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 3dvh, var(--espacio-5));
  text-align: center;
  font-family: var(--fuente-datos);
  font-size: var(--texto-grande);
}

.acciones {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  width: 100%;
}

/* Cinta de "no pasar": solo adorno, nunca sobre la imagen */
.cinta-peligro {
  flex: none;
  height: clamp(0.5rem, 2.2dvh, 1.1rem);
  background: repeating-linear-gradient(-45deg, var(--color-cinta) 0 0.9rem, var(--color-cinta-negro) 0.9rem 1.8rem);
  border-block: 2px solid var(--color-cinta-negro);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-3);
  min-height: clamp(2.75rem, 8dvh, 3.5rem);
  min-width: var(--tactil-min);
  padding: var(--espacio-2) var(--espacio-5);
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(1.125rem, 4dvh, 1.5rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Boton base = contorno ambar sobre fondo oscuro (ambar sobre #0a0f17: 9:1). Antes quedaba el gris del
     navegador con texto claro (1,1:1). Los primarios y de voto sobreescriben color, fondo y borde. */
  color: var(--color-ambar);
  background: transparent;
  border: 2px solid var(--color-ambar);
  border-radius: var(--radio-2);
  box-shadow: none;
  transition: transform var(--duracion-corta), box-shadow var(--duracion-corta), filter var(--duracion-corta), background-color var(--duracion-corta);
}

.boton-primario,
.boton-voto {
  border-color: var(--color-tinta);
  box-shadow: var(--sombra-boton);
}

.icono-compartir {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  background: url("../img/ui/compartir.svg") no-repeat center / contain;
}

@media (hover: hover) {
  .boton:not(.boton-primario):not(.boton-voto):hover {
    background: var(--color-ambar-suave);
  }
}

.boton:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

@media (hover: hover) {
  .boton:hover {
    filter: brightness(1.08);
  }
}

.boton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  transform: none;
  box-shadow: none;
}

.boton-primario {
  color: var(--color-tinta);
  background: var(--color-ambar);
}

.boton-secundario {
  color: var(--color-texto);
  background: transparent;
  border-color: var(--color-texto-suave);
  box-shadow: none;
}

.boton kbd {
  display: none;
  padding: 0.1rem 0.5rem;
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--color-tinta);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--color-tinta);
  border-radius: var(--radio-1);
}

@media (hover: hover) and (pointer: fine) {
  .boton kbd {
    display: inline-block;
  }
}

/* ---------- Selector de idioma (portada e instrucciones) ---------- */
.selector-idioma {
  flex: none;
  display: inline-flex;
  align-items: center;
  font-family: var(--fuente-titulos);
}

.selector-idioma button {
  min-width: var(--tactil-min);
  min-height: var(--tactil-min);
  padding: 0 var(--espacio-1);
  font-family: inherit;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.1em;
  color: var(--color-texto-suave);
  background: transparent;
  border: 0;
  border-radius: var(--radio-2);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* El idioma activo se distingue por color y por subrayado */
.selector-idioma button[aria-pressed="true"] {
  color: var(--color-ambar);
  text-decoration-color: currentColor;
}

@media (hover: hover) {
  .selector-idioma button[aria-pressed="false"]:hover {
    color: var(--color-texto);
  }
}

.selector-idioma-barra {
  color: var(--color-texto-suave);
}

/* ---------- Portada: dos expedientes ---------- */
.portada-cabecera {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
}

.portada-marca {
  grid-area: marca;
  min-width: 0;
}

.portada-cabecera h1 {
  font-size: clamp(1.75rem, min(9vw, 5.5dvh), 2.75rem);
  line-height: 1;
  color: var(--color-papel);
  text-shadow: 0 0 24px rgba(242, 169, 59, 0.35);
}

.portada-lema {
  font-size: clamp(0.875rem, 2.2dvh, 1rem);
  line-height: 1.3;
  color: var(--color-texto);
}

#portada-caso {
  grid-area: caso;
  justify-self: start;
  padding: 0 var(--espacio-2);
  font-family: var(--fuente-datos);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-tinta);
  background: var(--color-papel);
  border-radius: var(--radio-1);
  transform: rotate(-1.5deg);
}

#portada-tema,
#caso-tema {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--fuente-datos);
}

#portada-tema {
  grid-area: tema;
  font-size: 0.875rem;
  color: var(--color-ambar);
}

#portada-tema:not(:empty)::before {
  content: "\00b7\00a0";
}

/* Dia y tema: "Case #3" en una etiqueta de papel y el tema al lado (o el desplegable del modo prueba) */
#portada-dia {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--espacio-3);
  min-width: 0;
}

#portada-tema {
  flex: 1 1 0;
}

#selector-prueba-dia {
  flex: 1 1 10rem;
  min-width: 0;
  min-height: var(--tactil-min);
  padding: 0 var(--espacio-2);
  font: inherit;
  font-family: var(--fuente-datos);
  font-size: var(--texto-pequeno);
  color: var(--color-tinta);
  background: var(--color-papel);
  border: 2px solid var(--color-tinta);
  border-radius: var(--radio-1);
}

#selector-prueba-dia:focus-visible {
  outline-color: var(--color-foco);
}

#portada-elige {
  flex: none;
  font-family: var(--fuente-datos);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: var(--color-ambar);
}

.retos {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  max-width: 62rem;
  max-height: 40rem;
  margin-inline: auto;
  margin-block: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.4dvh, var(--espacio-5));
}

/* Tarjeta de reto: expediente de papel con pestana; toda ella es el boton */
.reto {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(3.5rem, 1fr) auto auto auto auto auto;
  grid-template-areas:
    "ilu"
    "exp"
    "nom"
    "desc"
    "est"
    "abrir";
  align-items: center;
  row-gap: clamp(2px, 0.7dvh, 6px);
  padding: clamp(10px, 2dvh, var(--espacio-4));
  font: inherit;
  text-align: left;
  color: var(--color-tinta);
  background: url("../img/ui/papel.svg") repeat top left / 240px 240px, var(--color-papel);
  border: 0;
  border-radius: 0 var(--radio-2) var(--radio-1) var(--radio-1);
  box-shadow: var(--sombra-papel);
  cursor: pointer;
  container-type: inline-size;
  transition: transform var(--duracion-corta), box-shadow var(--duracion-corta);
}

/* Pestana de la carpeta */
.reto::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 0;
  width: 38%;
  max-width: 7rem;
  height: 10px;
  background: var(--color-papel);
  border-radius: var(--radio-2) var(--radio-2) 0 0;
}

@media (hover: hover) {
  .reto:not(:disabled):hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-papel), 0 0 0 2px var(--color-ambar), 0 0 24px rgba(242, 169, 59, 0.35);
  }
}

.reto:not(:disabled):active {
  transform: translateY(1px);
}

.reto:focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 4px;
}

.reto:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

/* Ilustracion decorativa hecha solo con CSS. Se mide con unidades del contenedor (cqmin) para
   encoger sin romperse: es lo primero que cede cuando falta sitio (R8) */
.reto-ilustracion {
  grid-area: ilu;
  align-self: stretch;
  position: relative;
  min-height: 0;
  overflow: hidden;
  container-type: size;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(242, 169, 59, 0.3), transparent 75%), var(--color-fondo-2);
  border-radius: var(--radio-1);
  box-shadow: inset 0 0 0 2px var(--color-borde), inset 0 0 18px rgba(0, 0, 0, 0.6);
}

.polaroid {
  --dx: 0cqmin;
  --giro: 0deg;
  position: absolute;
  top: 50%;
  left: calc(50% + var(--dx));
  width: 56cqmin;
  aspect-ratio: 4 / 5;
  background: var(--color-papel-claro);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%) rotate(var(--giro));
}

.polaroid::before {
  content: "";
  position: absolute;
  inset: 8% 8% 24% 8%;
  background: var(--foto);
}

.polaroid:nth-child(1) {
  --dx: -20cqmin;
  --giro: -9deg;
  --foto: radial-gradient(circle at 72% 28%, #f2d08a 0 13%, transparent 14%), linear-gradient(#3f6288 0 62%, #24323a 62%);
}

.polaroid:nth-child(2) {
  --giro: 2deg;
  z-index: 2;
  --foto: linear-gradient(160deg, #1f3a3a, #6d8f6a);
}

.polaroid:nth-child(3) {
  --dx: 20cqmin;
  --giro: 10deg;
  --foto: radial-gradient(circle at 35% 45%, #c4572f 0 18%, transparent 19%), linear-gradient(#2a2440, #463a5e);
}

.ficha-muestra {
  --dx: -23cqmin;
  --giro: -5deg;
  --sello-giro: -9deg;
  position: absolute;
  top: 50%;
  left: calc(50% + var(--dx));
  width: 44cqmin;
  height: 60cqmin;
  background: var(--color-papel-claro);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%) rotate(var(--giro));
}

.ficha-muestra:nth-child(2) {
  --dx: 23cqmin;
  --giro: 6deg;
  --sello-giro: 7deg;
}

/* Lineas de texto de mentira */
.ficha-muestra::before {
  content: "";
  position: absolute;
  inset: 14% 12% auto 12%;
  height: 46%;
  background: repeating-linear-gradient(180deg, #7b715a 0 2px, transparent 2px 7px);
}

.ilustracion-sello {
  position: absolute;
  z-index: 3;
  padding: 0 0.35em;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(0.75rem, 15cqmin, 1.5rem);
  line-height: 1.25;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--color-sello);
  background: rgba(242, 233, 210, 0.94);
  border: 2px solid var(--color-sello);
  border-radius: var(--radio-1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  transform: rotate(-9deg);
}

.polaroid ~ .ilustracion-sello {
  left: auto;
  right: 4%;
  bottom: 10%;
}

.ficha-muestra .ilustracion-sello {
  right: 0;
  font-size: clamp(0.625rem, 10.5cqmin, 1.25rem);
  letter-spacing: 0.02em;
  padding: 0 0.2em;
  bottom: 6%;
  bottom: 9%;
  transform: rotate(var(--sello-giro));
}

.ficha-muestra:first-child .ilustracion-sello {
  color: var(--color-hecho);
  border-color: var(--color-hecho);
}

.reto-expediente {
  grid-area: exp;
  font-family: var(--fuente-datos);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  color: var(--color-sello);
}

.reto-nombre {
  grid-area: nom;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(1.5rem, min(11cqi, 7dvh), 3.25rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-tinta);
}

.reto-desc {
  grid-area: desc;
  font-family: var(--fuente-cuerpo);
  font-size: clamp(0.9375rem, 2dvh, 1.0625rem);
  line-height: 1.3;
  color: var(--color-tinta-suave);
}

.reto-estado {
  grid-area: est;
  justify-self: start;
  min-width: 0;
  padding: 0 var(--espacio-2);
  font-family: var(--fuente-datos);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-tinta);
  border: 1px dashed var(--color-tinta-suave);
  border-radius: var(--radio-1);
}

.reto-estado:empty {
  display: none;
}

/* "Open file ->": barra roja de sello en el pie de la tarjeta (decorativa; la tarjeta entera es el boton) */
.reto-abrir {
  grid-area: abrir;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.25rem;
  margin-top: clamp(2px, 0.6dvh, 6px);
  padding: 0 var(--espacio-3);
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-papel);
  background: var(--color-sello);
  border-radius: var(--radio-1);
  box-shadow: var(--sombra-boton);
}

.icono-flecha {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  background: url("../img/ui/flecha.svg") no-repeat center / contain;
}

/* Pie: aviso del dia a la izquierda y creditos a la derecha */
#portada-pie {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  min-height: var(--tactil-min);
}

#portada-aviso-dia {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--fuente-datos);
  font-size: 0.8125rem;
  line-height: 1.25;
  color: var(--color-texto-suave);
}

#portada-creditos {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tactil-min);
  min-height: var(--tactil-min);
  padding: 0 var(--espacio-3);
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-pequeno);
  color: var(--color-texto-suave);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Vertical estrecho y bajo, u horizontal bajo: la ilustracion pasa a un lado y la tarjeta se compacta (R8) */
@media (max-width: 599px) and (max-height: 760px), (orientation: landscape) and (max-height: 480px) {
  .reto {
    grid-template-columns: 6rem minmax(0, 1fr);
    grid-template-rows: repeat(5, auto);
    grid-template-areas:
      "ilu exp"
      "ilu nom"
      "ilu desc"
      "ilu est"
      "ilu abrir";
    align-content: center;
    column-gap: var(--espacio-3);
    padding: 10px 12px;
  }

  .reto-nombre {
    font-size: clamp(1.375rem, min(7vw, 5.5dvh), 2rem);
  }

  .reto-desc {
    font-size: 0.9375rem;
  }

  .reto-abrir {
    min-height: 2rem;
    font-size: 1rem;
  }
}

/* Horizontal bajo (640 x 360): sin el titulo "Choose your case file" a la vista */
@media (max-height: 420px) {
  #portada-elige {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Tarjetas lado a lado en cuanto caben (tambien en horizontal bajo, aunque sea estrecho) */
@media (min-width: 600px), (orientation: landscape) and (max-height: 480px) {
  .retos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    max-height: 27rem;
  }
}

/* Tarjetas anchas: el estado y "Open file" comparten fila */
@media (min-width: 900px) and (min-height: 560px) {
  .reto {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "ilu ilu"
      "exp exp"
      "nom nom"
      "desc desc"
      "est abrir";
    column-gap: var(--espacio-3);
  }

  .reto-abrir {
    margin-top: 0;
    padding: 0 var(--espacio-4);
  }
}

/* ---------- Instrucciones: carpeta de carton abierta con dos paginas de papel ---------- */
#pantalla-instrucciones:not([hidden]) {
  flex: 1 1 0;
  gap: clamp(4px, 1.2dvh, 10px);
  padding-block: clamp(6px, 1.5dvh, 14px);
  padding-inline: clamp(8px, 3vw, 20px);
  overflow: hidden;
}

.instrucciones-cabecera {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
}

.boton-volver {
  flex: 0 1 auto;
  min-width: 0;
  min-height: var(--tactil-min);
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: 0 var(--espacio-3) 0 var(--espacio-2);
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(0.8125rem, 3.6vw, 1rem);
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--color-ambar);
  background: transparent;
  border: 2px dashed var(--color-ambar);
  border-radius: var(--radio-2);
}

.boton-volver:active {
  transform: translateY(2px);
}

@media (hover: hover) {
  .boton-volver:hover {
    background: var(--color-ambar-suave);
  }
}

.boton-volver-flecha {
  flex: none;
  font-size: 1.25em;
  line-height: 1;
}

/* El logo solo cabe cuando hay ancho de sobra */
.instrucciones-logo {
  display: none;
  flex: none;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-papel);
  text-shadow: 0 0 24px rgba(242, 169, 59, 0.35);
}

@media (min-width: 480px) {
  .instrucciones-logo {
    display: block;
  }
}

/* Caja de la carpeta: la pestana de carton va encima de la carpeta, a la izquierda */
.carpeta-caja {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
}

.carpeta-pestana {
  position: relative;
  z-index: 1;
  flex: none;
  align-self: flex-start;
  max-width: 100%;
  margin: 0 0 -1px clamp(8px, 3vw, 28px);
  padding: 3px 12px 2px;
  font-family: var(--fuente-datos);
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-tinta);
  background: var(--color-carton);
  border-radius: var(--radio-2) var(--radio-2) 0 0;
}

.carpeta {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(min-content, 1fr);
  padding: clamp(5px, 1.2dvh, 12px) clamp(5px, 1.4vw, 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.035) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, var(--color-carton), var(--color-carton-oscuro));
  border-radius: 0 var(--radio-2) var(--radio-2) var(--radio-2);
  box-shadow: var(--sombra-papel);
}

.pagina {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1dvh, 10px);
  padding: clamp(6px, 1.4dvh, 14px) clamp(10px, 3.4vw, 24px);
  font-family: var(--fuente-datos);
  color: var(--color-tinta);
  background: url("../img/ui/papel.svg") repeat top left / 240px 240px, var(--color-papel);
}

/* Clip metalico de la pagina derecha: solo adorno, aparece en el diseno de dos paginas */
.carpeta-clip {
  display: none;
  position: absolute;
  top: -7px;
  right: clamp(24px, 6%, 64px);
  z-index: 2;
  width: 22px;
  height: 58px;
  background: url("../img/ui/clip.svg") no-repeat center / contain;
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.pagina :focus-visible {
  outline-color: var(--color-tinta);
}

/* En vertical es una sola hoja: la segunda pagina cuelga de la primera por una linea de puntos */
#instrucciones-briefing {
  border-radius: var(--radio-1) var(--radio-1) 0 0;
}

#instrucciones-accion {
  border-top: 2px dashed var(--color-tinta-suave);
  border-radius: 0 0 var(--radio-1) var(--radio-1);
}

#instrucciones-membrete {
  flex: none;
  padding-bottom: 3px;
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sello);
  border-bottom: 1px solid var(--color-tinta-suave);
}

#instrucciones-titulo {
  flex: none;
  font-size: clamp(2rem, min(11.5vw, 6.5dvh), 2.875rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
  color: var(--color-sello);
}

#instrucciones-frase {
  flex: none;
  font-size: 0.9375rem;
  line-height: 1.3;
}

/* Los pasos cuelgan de una linea discontinua; en la pagina ancha reparten el alto libre */
#instrucciones-pasos {
  counter-reset: paso;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.9dvh, 8px);
  padding-top: clamp(4px, 1dvh, 8px);
  font-size: clamp(0.8125rem, min(3.7vw, 2.1dvh), 0.9rem);
  line-height: 1.25;
  border-top: 2px dashed var(--color-tinta-suave);
}

#instrucciones-pasos li {
  counter-increment: paso;
  position: relative;
  padding-left: 1.5rem;
}

#instrucciones-pasos li::before {
  content: counter(paso) ".";
  position: absolute;
  left: 0;
  color: var(--color-sello);
}

#instrucciones-firma {
  flex: none;
  margin-top: auto;
  padding-top: 3px;
  font-size: 0.8125rem;
  line-height: 1.25;
  text-align: right;
  color: var(--color-tinta-azul);
  border-top: 1px solid rgba(74, 63, 42, 0.5);
}

/* Titulos de la segunda pagina: METHOD OF INVESTIGATION / HOUSE RULES */
#instrucciones-modos legend,
#instrucciones-reglas h3 {
  padding: 0;
  margin-bottom: clamp(3px, 0.8dvh, 8px);
  font-family: var(--fuente-datos);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sello);
}

/* Los tres modos son casillas de un formulario: la elegida lleva un aspa roja. Se reparten el alto libre */
#instrucciones-modos {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(min-content, 1fr);
  gap: clamp(6px, 1.2dvh, 12px);
}

#instrucciones-modos legend {
  grid-column: 1 / -1;
}

.modo {
  position: relative;
  min-width: 0;
  display: flex;
}

.modo input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.modo label {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: var(--tactil-min);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "caja nom"
    "caja desc";
  align-content: center;
  align-items: center;
  column-gap: 12px;
  row-gap: 1px;
  padding: 4px 12px;
  text-align: left;
  color: var(--color-tinta);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid var(--color-tinta-suave);
  border-radius: var(--radio-1);
}

.modo label::before {
  content: "";
  grid-area: caja;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--color-papel-claro);
  border: 2px solid var(--color-tinta);
  border-radius: 2px;
}

.modo input:checked + label {
  background: rgba(155, 28, 28, 0.1);
  border-color: var(--color-sello);
  box-shadow: inset 0 0 0 1px var(--color-sello);
}

.modo input:checked + label::before {
  background: url("../img/ui/aspa.svg") no-repeat center / 88%, var(--color-papel-claro);
}

.modo input:focus-visible + label {
  outline: 3px solid var(--color-tinta);
  outline-offset: 2px;
}

.modo-nombre {
  grid-area: nom;
  max-width: 100%;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(1rem, min(5vw, 3dvh), 1.625rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.modo-desc {
  grid-area: desc;
  font-family: var(--fuente-datos);
  font-size: 0.8125rem;
  line-height: 1.2;
}

/* Normas de Fact or Fake: el aviso, la etiqueta y la ficha de ejemplo, que crece hasta llenar el hueco */
#instrucciones-reglas {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1dvh, 10px);
}

#instrucciones-reglas h3 {
  flex: none;
  margin-bottom: 0;
}

#instrucciones-aviso-caja {
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icono titulo"
    "icono texto";
  align-items: center;
  column-gap: 10px;
  padding: 6px 10px;
  color: var(--color-tinta);
  background: rgba(155, 28, 28, 0.09);
  border: 2px solid var(--color-sello);
  border-radius: var(--radio-1);
}

.aviso-icono {
  grid-area: icono;
  width: 1.75rem;
  height: 1.75rem;
  background: url("../img/ui/aviso.svg") no-repeat center / contain;
}

.aviso-titulo {
  grid-area: titulo;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-sello);
}

#instrucciones-aviso {
  grid-area: texto;
  font-size: 0.75rem;
  line-height: 1.2;
}

/* Ficha de muestra: no es interactiva y no lleva respuesta. Crece y se ladea un poco */
#instrucciones-ejemplo {
  flex: 1 1 auto;
  margin-block: 3px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "etq etq"
    "txt txt"
    "marca marca"
    "b1 b2";
  gap: 3px var(--espacio-2);
  padding: 6px 10px 8px;
  color: var(--color-tinta);
  background: url("../img/ui/papel.svg") repeat top left / 240px 240px, var(--color-papel-claro);
  box-shadow: 0 0 0 1px rgba(74, 63, 42, 0.5), 0 3px 8px rgba(0, 0, 0, 0.35);
  transform: rotate(-1.5deg);
  -webkit-user-select: none;
  user-select: none;
}

.ejemplo-etiqueta {
  grid-area: etq;
  font-size: 0.75rem;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-sello);
}

.ejemplo-marca {
  grid-area: marca;
  justify-self: center;
  margin-bottom: 4px;
  font-size: 0.6875rem;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--color-nota);
}

.ejemplo-texto {
  grid-area: txt;
  align-self: center;
  padding-block: 2px;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(1rem, min(4.6vw, 2.6dvh), 1.25rem);
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

.ejemplo-boton {
  min-height: 2rem;
  display: grid;
  place-items: center;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gris-muestra-texto);
  background: var(--color-gris-muestra);
  border: 2px dashed #8f8a78;
  border-radius: var(--radio-2);
  cursor: default;
  pointer-events: none;
}

.ejemplo-boton:nth-of-type(1) {
  grid-area: b1;
}

#instrucciones-ejemplo .ejemplo-boton:last-child {
  grid-area: b2;
}

/* "Open the case": rojo de sello, siempre visible al final de la pagina de accion (R13: si hay que
   desplazar la carpeta, el boton se queda pegado abajo) */
#instrucciones-accion > .boton {
  position: sticky;
  bottom: 0;
  flex: none;
  width: 100%;
  margin-top: auto;
  min-height: var(--tactil-min);
  font-size: 1.25rem;
  color: var(--color-papel);
  background: var(--color-sello);
  border-color: var(--color-tinta);
}

/* Movil de pie alto (390 x 844): hay sitio para la frase y un poco mas de aire */
@media (max-width: 699px) and (orientation: portrait) and (min-height: 760px) {
  #instrucciones-membrete {
    font-size: 0.8125rem;
  }

  #instrucciones-aviso {
    font-size: 0.8125rem;
  }

  .ejemplo-texto {
    font-size: 1.25rem;
  }
}

/* Movil de pie bajo (360 x 640, 375 x 667): la frase se omite y todo se apreta (R19, R20).
   El objetivo es que quepa sin desplazar la carpeta; el scroll interno queda solo como reserva */
@media (max-height: 759px) and (max-width: 699px) and (orientation: portrait) {
  #instrucciones-frase {
    display: none;
  }

  .carpeta-pestana {
    padding-block: 1px;
  }

  #instrucciones-pasos {
    line-height: 1.2;
  }

  #instrucciones-aviso-caja {
    padding-block: 4px;
  }

  .aviso-titulo {
    font-size: 0.875rem;
  }

  #instrucciones-aviso {
    line-height: 1.15;
  }

  #instrucciones-ejemplo {
    padding: 4px 10px 6px;
    gap: 2px var(--espacio-2);
  }

  .ejemplo-texto {
    padding-block: 0;
    line-height: 1.1;
  }

  .pagina {
    gap: 3px;
    padding-block: 6px;
  }

  #instrucciones-modos {
    gap: 5px;
  }
}

/* Dos paginas: horizontal desde 600 px o cualquier orientacion desde 700 px. Lomo central y clip */
@media (min-width: 600px) and (orientation: landscape), (min-width: 700px) {
  #pantalla-instrucciones:not([hidden]) {
    max-width: 80rem;
  }

  .carpeta-pestana {
    margin-left: clamp(16px, 3vw, 40px);
    padding: 4px 16px 3px;
    font-size: 0.875rem;
  }

  .carpeta {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: minmax(min-content, 1fr);
    padding: clamp(8px, 1.6dvh, 16px) clamp(8px, 1.4vw, 20px);
  }

  .pagina {
    gap: clamp(8px, 1.6dvh, 18px);
    padding: clamp(14px, 2.6dvh, 32px) clamp(20px, 3vw, 44px);
  }

  #instrucciones-briefing {
    border-radius: var(--radio-1) 0 0 var(--radio-1);
    box-shadow: inset -16px 0 14px -12px rgba(0, 0, 0, 0.45);
  }

  #instrucciones-accion {
    border-top: 0;
    border-radius: 0 var(--radio-1) var(--radio-1) 0;
    box-shadow: inset 16px 0 14px -12px rgba(0, 0, 0, 0.45);
  }

  .carpeta-clip {
    display: block;
  }

  /* Pagina izquierda: membrete, titulo, frase, linea discontinua, pasos repartidos y firma al pie */
  #instrucciones-membrete {
    font-size: 0.875rem;
  }

  #instrucciones-titulo {
    font-size: clamp(3rem, min(6vw, 10dvh), 5.5rem);
  }

  #instrucciones-frase {
    font-size: clamp(1.125rem, 1.4vw, 1.25rem);
  }

  #instrucciones-pasos {
    flex: 1 1 auto;
    justify-content: space-evenly;
    gap: clamp(12px, 1.2vw, 16px);
    padding-top: clamp(10px, 2dvh, 20px);
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.3;
  }

  #instrucciones-pasos li {
    padding-left: 1.75rem;
  }

  #instrucciones-firma {
    padding-top: 6px;
    font-size: clamp(1rem, 1.3vw, 1.125rem);
  }

  /* Pagina derecha */
  #instrucciones-modos legend,
  #instrucciones-reglas h3 {
    padding-right: 2.5rem;
    font-size: 0.875rem;
  }

  .modo label {
    column-gap: 16px;
    padding: 6px 18px;
  }

  .modo label::before {
    width: 1.75rem;
    height: 1.75rem;
  }

  .modo-nombre {
    font-size: clamp(1.25rem, 2vw, 1.625rem);
  }

  .modo-desc {
    font-size: clamp(0.875rem, 1.1vw, 1rem);
  }

  #instrucciones-aviso-caja {
    column-gap: 14px;
    padding: 10px 14px;
  }

  .aviso-icono {
    width: 2.5rem;
    height: 2.5rem;
  }

  .aviso-titulo {
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  }

  #instrucciones-aviso {
    font-size: clamp(0.9375rem, 1.1vw, 1rem);
    line-height: 1.3;
  }

  .ejemplo-etiqueta {
    font-size: 0.875rem;
    letter-spacing: 0.14em;
  }

  #instrucciones-ejemplo {
    margin-block: 8px;
    padding: 12px 18px 16px;
    gap: 8px var(--espacio-3);
  }

  .ejemplo-texto {
    font-size: clamp(1.3125rem, 1.8vw, 1.5rem);
    line-height: 1.2;
  }

  .ejemplo-marca {
    font-size: 0.75rem;
  }

  .ejemplo-boton {
    min-height: 2.75rem;
    font-size: 1.25rem;
  }
}

/* Dos paginas pero de poco alto (800 x 600, 1024 x 600): letra intermedia */
@media ((min-width: 600px) and (orientation: landscape)) and (max-height: 700px), ((min-width: 700px) and (max-height: 700px)) {
  #instrucciones-titulo {
    font-size: clamp(2.5rem, min(6vw, 9dvh), 4rem);
  }

  #instrucciones-frase {
    font-size: 1rem;
  }

  #instrucciones-pasos {
    gap: 8px;
    font-size: 0.875rem;
    line-height: 1.25;
  }

  #instrucciones-firma {
    font-size: 0.875rem;
  }

  .pagina {
    gap: 6px;
  }

  .aviso-icono {
    width: 2rem;
    height: 2rem;
  }

  .aviso-titulo {
    font-size: 1rem;
  }

  #instrucciones-aviso {
    font-size: 0.8125rem;
    line-height: 1.2;
  }

  #instrucciones-aviso-caja {
    padding-block: 6px;
  }

  .ejemplo-texto {
    font-size: 1.125rem;
  }

  .modo-nombre {
    font-size: 1.125rem;
  }

  .modo-desc {
    font-size: 0.8125rem;
  }
}

/* Horizontal bajo (640 x 360): dos paginas con letra pequena; sin frase ni pestana */
@media (orientation: landscape) and (max-height: 420px) {
  #instrucciones-frase,
  .carpeta-pestana,
  .carpeta-clip {
    display: none;
  }

  .carpeta {
    border-radius: var(--radio-2);
    padding-block: 4px;
  }

  .pagina {
    gap: 4px;
    padding: 5px 12px;
  }

  #instrucciones-membrete {
    font-size: 0.6875rem;
    padding-bottom: 1px;
  }

  #instrucciones-titulo {
    font-size: 1.75rem;
  }

  #instrucciones-pasos {
    gap: 4px;
    padding-top: 4px;
    font-size: 0.75rem;
    line-height: 1.2;
  }

  #instrucciones-pasos li {
    padding-left: 1.25rem;
  }

  #instrucciones-firma {
    padding-top: 2px;
    font-size: 0.75rem;
  }

  #instrucciones-modos legend,
  #instrucciones-reglas h3 {
    margin-bottom: 1px;
    padding-right: 0;
    font-size: 0.6875rem;
  }

  #instrucciones-modos {
    gap: 4px;
  }

  .modo label {
    column-gap: 10px;
    padding: 2px 10px;
  }

  .modo label::before {
    width: 1.375rem;
    height: 1.375rem;
  }

  .modo-nombre {
    font-size: 0.9375rem;
  }

  .modo-desc {
    font-size: 0.6875rem;
  }

  #instrucciones-aviso-caja {
    column-gap: 8px;
    padding: 3px 8px;
  }

  .aviso-icono {
    width: 1.5rem;
    height: 1.5rem;
  }

  .aviso-titulo {
    font-size: 0.8125rem;
  }

  #instrucciones-aviso {
    font-size: 0.6875rem;
    line-height: 1.15;
  }

  #instrucciones-ejemplo {
    margin-block: 2px;
    padding: 4px 8px 5px;
    gap: 2px var(--espacio-2);
  }

  .ejemplo-etiqueta {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
  }

  .ejemplo-texto {
    padding-block: 0;
    font-size: 0.8125rem;
    line-height: 1.1;
  }

  .ejemplo-marca {
    font-size: 0.625rem;
  }

  .ejemplo-boton {
    min-height: 1.5rem;
    font-size: 0.75rem;
  }

  #instrucciones-accion > .boton {
    font-size: 1.0625rem;
  }
}

/* ---------- Cargando y cuenta atras ---------- */
.lupa-giro {
  width: clamp(3.5rem, 16dvh, 6rem);
  height: clamp(3.5rem, 16dvh, 6rem);
  background: url("../img/ui/lupa.svg") no-repeat center / contain;
  animation: barrido 1.6s ease-in-out infinite alternate;
}

@keyframes barrido {
  from {
    transform: translateX(-2.5rem) rotate(-10deg);
  }
  to {
    transform: translateX(2.5rem) rotate(10deg);
  }
}

#cuenta-atras-numero {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(4rem, min(50vw, 40dvh), 14rem);
  line-height: 1;
  color: var(--color-ambar);
  text-shadow: 0 0 40px rgba(242, 169, 59, 0.45);
}

.huella-fondo {
  width: clamp(4rem, 20dvh, 8rem);
  height: clamp(4rem, 20dvh, 8rem);
  background: url("../img/ui/huella.svg") no-repeat center / contain;
}

/* ---------- Dialogo de la ficha ---------- */
#ficha {
  width: min(36rem, calc(100vw - 2rem));
  max-width: min(36rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: clamp(12px, 3vw, var(--espacio-5));
  overflow-y: auto;
  color: var(--color-tinta);
  background: url("../img/ui/papel.svg") repeat top left / 240px 240px, var(--color-papel);
  border: 3px solid var(--color-tinta);
  border-radius: var(--radio-2);
  box-shadow: var(--sombra-papel);
}

#ficha[open] {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
}

#ficha::backdrop {
  background: rgba(5, 8, 13, 0.82);
}

#ficha :focus-visible {
  outline-color: var(--color-tinta);
}

#ficha-titulo {
  font-size: clamp(1.5rem, 6vw, 2rem);
  color: var(--color-sello);
}

#ficha-cerrar {
  align-self: flex-start;
  margin-top: var(--espacio-2);
  color: var(--color-tinta);
  background: var(--color-ambar);
  border-color: var(--color-tinta);
  box-shadow: var(--sombra-boton);
}

/* ---------- Caso ---------- */
/* Columna flex: cabecera de su alto y escena con el resto (flex-basis 0 + min-height 0 = altura definida).
   Asi las filas 1fr de la escena siempre se reparten el alto de la ventana y el boton nunca queda fuera. */
#pantalla-caso:not([hidden]) {
  flex: 1 1 0;
  gap: clamp(4px, 1.2dvh, var(--espacio-3));
  padding-block: clamp(6px, 1.5dvh, 12px);
}

#caso-cabecera {
  flex: none;
}

/* Cada reto muestra lo suyo: nombres, foto, tarjeta y temporizador */
[data-reto-nombre] {
  display: none;
}

#app[data-reto="imagenes"] [data-reto-nombre="imagenes"],
#app[data-reto="afirmaciones"] [data-reto-nombre="afirmaciones"] {
  display: inline;
}

/* Cabecera: reto y tema, cinco casillas de progreso, modo y aciertos */
#caso-cabecera {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "titulo puntos"
    "progreso progreso"
    "aviso aviso";
  align-items: center;
  gap: 4px var(--espacio-3);
  font-family: var(--fuente-datos);
}

#caso-titulo {
  grid-area: titulo;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#caso-reto {
  flex: none;
  white-space: nowrap;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-papel);
}

#caso-tema {
  /* En espanol el tema ("Caso del dia: Fuegos artificiales") es mas largo: hasta dos lineas */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  font-size: 0.875rem;
  line-height: 1.25;
  color: var(--color-ambar);
}

#caso-puntuacion {
  grid-area: puntos;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.875rem;
  line-height: 1.25;
  text-align: right;
}

#caso-modo {
  color: var(--color-texto-suave);
}

#caso-marcador {
  color: var(--color-ambar);
}

#caso-progreso {
  grid-area: progreso;
  display: flex;
  gap: 6px;
  counter-reset: casilla;
}

#caso-progreso li {
  counter-increment: casilla;
  flex: 1 1 0;
  display: grid;
  place-items: center;
  height: clamp(1.625rem, 4.2dvh, 2rem);
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-texto-suave);
  border: 2px dashed var(--color-texto-suave);
  border-radius: var(--radio-1);
}

#caso-progreso li::before {
  content: counter(casilla);
}

#caso-progreso li[data-estado="actual"] {
  color: var(--color-ambar);
  background: var(--color-ambar-suave);
  border: 2px solid var(--color-ambar);
}

#caso-progreso li[data-estado="acierto"],
#caso-progreso li[data-estado="fallo"] {
  border-style: solid;
}

#caso-progreso li[data-estado="acierto"] {
  background: var(--color-acierto);
  border-color: var(--color-sobre-estado);
}

#caso-progreso li[data-estado="fallo"] {
  background: var(--color-fallo);
  border-color: var(--color-sobre-estado);
}

/* Acierto y fallo llevan icono (check o X) en lugar del numero */
#caso-progreso li[data-estado="acierto"]::before,
#caso-progreso li[data-estado="fallo"]::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background: no-repeat center / contain;
}

#caso-progreso li[data-estado="acierto"]::before {
  background-image: url("../img/ui/icono-acierto.svg");
}

#caso-progreso li[data-estado="fallo"]::before {
  background-image: url("../img/ui/icono-fallo.svg");
}

/* Aviso de ausencia: 14 px, contraste AA, dos lineas a 360 px */
#caso-aviso {
  grid-area: aviso;
  padding: 2px var(--espacio-2);
  font-family: var(--fuente-cuerpo);
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--color-texto);
  background: var(--color-ambar-suave);
  border-left: 3px solid var(--color-ambar);
  border-radius: var(--radio-1);
}

#app[data-reto="afirmaciones"] #caso-modo {
  display: none;
}

@media (min-width: 640px) {
  /* 640 a 899 px: titulo y puntuacion en dos lineas para que nada se trunque ni se pise */
  #caso-cabecera {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "titulo progreso puntos"
      "aviso aviso aviso";
  }

  #caso-progreso li {
    flex: none;
    width: 2rem;
  }

  #caso-puntuacion {
    justify-self: end;
  }
}

@media (min-width: 900px) {
  #caso-cabecera {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  #caso-titulo {
    flex-direction: row;
    align-items: baseline;
    gap: var(--espacio-2);
  }

  #caso-reto::after {
    content: "\00b7";
    margin-left: var(--espacio-2);
    color: var(--color-texto-suave);
  }

  #caso-progreso li {
    width: 2.5rem;
  }

  #caso-puntuacion {
    flex-direction: row;
    align-items: baseline;
  }

  #caso-modo:not(:empty)::after {
    content: "\00a0\00b7\00a0";
  }
}

/* Escena: foto o tarjeta, temporizador y botones. Una sola cuadricula para las dos fases */
#caso-escena {
  --margen-tarjeta: clamp(12px, 4vw, var(--espacio-5));
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: clamp(4px, 1.2dvh, var(--espacio-3));
}

#app[data-reto="afirmaciones"] #caso-escena {
  grid-template-rows: minmax(0, 1fr) auto;
}

#app[data-reto="afirmaciones"] #prueba-vitrina,
#app[data-reto="afirmaciones"] #temporizador,
#app[data-reto="imagenes"] #afirmacion,
#app[data-reto="imagenes"] #caso-aviso,
#app[data-reto="imagenes"] #pantalla-caso[data-fase="pregunta"] #caso-tarjeta {
  display: none;
}

/* La foto: contenedor de tamano; la caja 4:5 toma el mayor tamano que cabe */
#prueba-vitrina {
  container-type: size;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
}

#prueba-caja {
  position: relative;
  width: min(100cqw, 80cqh);
  aspect-ratio: 4 / 5;
}

#prueba-marco,
#prueba-sobre {
  position: absolute;
  inset: 0;
}

#prueba-marco {
  padding: 6px;
  background: url("../img/ui/papel.svg") repeat top left / 240px 240px, var(--color-papel);
  border-radius: var(--radio-1);
  box-shadow: var(--sombra-foto);
}

/* La foto nunca se recorta: proporcion completa dentro del marco */
.prueba-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-fondo);
}

/* Revelacion de Images: la foto llena el marco de papel (borde 8px), sin marco interior; el fondo de la
   imagen es el del borde, asi la franja de ajuste de object-fit: contain no se nota */
#pantalla-caso[data-fase="veredicto"] #prueba-marco {
  padding: 0;
  background: #c9bd9f;
  border: 8px solid #c9bd9f;
  box-sizing: border-box;
}

#pantalla-caso[data-fase="veredicto"] #prueba-marco .prueba-img {
  background: #c9bd9f;
}

/* Prueba tapada: sobre sellado con la misma caja que el marco */
#prueba-sobre {
  background: url("../img/ui/sobre.svg") no-repeat center / 100% 100%;
  border-radius: var(--radio-1);
  box-shadow: var(--sombra-foto);
  animation: aparece 200ms ease-out both;
}

#prueba-sobre-texto {
  position: absolute;
  left: 17.5%;
  right: 17.5%;
  top: 79.6%;
  height: 12%;
  display: grid;
  place-items: center;
  font-family: var(--fuente-datos);
  font-size: max(0.75rem, calc(min(100cqw, 80cqh) * 0.055));
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--color-sello);
}

@keyframes aparece {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Revelacion de Images: etiqueta y sello pequenos en las esquinas, sin tapar el centro */
#prueba-etiqueta,
#prueba-sello {
  position: absolute;
  z-index: 2;
  margin: 0;
  pointer-events: none;
}

#pantalla-caso[data-fase="pregunta"] #prueba-etiqueta,
#pantalla-caso[data-fase="pregunta"] #prueba-sello,
#prueba-etiqueta:empty,
#prueba-sello:empty {
  display: none;
}

#prueba-etiqueta {
  top: 0.4rem;
  left: 0.4rem;
  padding: 0 var(--espacio-2);
  font-family: var(--fuente-datos);
  font-size: clamp(0.75rem, calc(min(100cqw, 80cqh) * 0.05), 1rem);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-tinta);
  background: var(--color-papel);
  border: 1px solid var(--color-tinta-suave);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  transform: rotate(-3deg);
}

#prueba-sello {
  --giro: 8deg;
  top: 0.4rem;
  right: 0.4rem;
  padding: 0 0.5rem;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(1.25rem, calc(min(100cqw, 80cqh) * 0.1), 2.25rem);
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-hecho);
  background: var(--color-papel);
  border: 3px solid var(--color-hecho);
  border-radius: var(--radio-1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  transform: rotate(var(--giro));
  animation: estampar var(--duracion-sello) var(--curva-estampa) both;
}

#caso-escena:has(#veredicto[data-verdad="generada"]) #prueba-sello {
  color: var(--color-papel);
  background: var(--color-sello);
  border-color: var(--color-tinta);
}

#caso-escena:has(#veredicto[data-estado="fallo"]) #prueba-sello {
  animation: estampar var(--duracion-sello) var(--curva-estampa) both, sacudida 0.4s linear var(--duracion-sello);
}

@keyframes estampar {
  from {
    opacity: 0;
    transform: scale(2.4) rotate(calc(var(--giro) - 14deg));
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(var(--giro));
  }
}

@keyframes sacudida {
  0%, 100% {
    translate: 0 0;
  }
  20% {
    translate: -8px 3px;
  }
  40% {
    translate: 7px -3px;
  }
  60% {
    translate: -5px 2px;
  }
  80% {
    translate: 4px -2px;
  }
}

/* Ficha de papel: afirmacion de Fact or Fake y revelacion de los dos retos */
#caso-tarjeta {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  color: var(--color-tinta);
  background: url("../img/ui/papel.svg") repeat top left / 240px 240px, var(--color-papel);
  border-radius: var(--radio-1);
  box-shadow: var(--sombra-foto);
}

#caso-tarjeta :focus-visible {
  outline-color: var(--color-tinta);
}

/* Franja de acierto o fallo; solo existe a la vista con la revelacion */
#veredicto-banda {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-2) var(--margen-tarjeta);
  color: var(--color-sobre-estado);
  background: var(--color-fondo-2);
}

#caso-tarjeta:has(> #veredicto[hidden]) > #veredicto-banda {
  display: none;
}

#caso-tarjeta:has(#veredicto[data-estado="acierto"]) #veredicto-banda {
  background: var(--color-acierto);
}

#caso-tarjeta:has(#veredicto[data-estado="fallo"]) #veredicto-banda {
  background: var(--color-fallo);
}

#veredicto-icono {
  flex: none;
  width: 2rem;
  height: 2rem;
  background: no-repeat center / contain;
}

#caso-tarjeta:has(#veredicto[data-estado="acierto"]) #veredicto-icono {
  background-image: url("../img/ui/icono-acierto.svg");
}

#caso-tarjeta:has(#veredicto[data-estado="fallo"]) #veredicto-icono {
  background-image: url("../img/ui/icono-fallo.svg");
}

#veredicto-banda-cuerpo {
  min-width: 0;
}

#veredicto-banda-texto {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#veredicto-texto {
  font-family: var(--fuente-datos);
  font-size: 0.9375rem;
  line-height: 1.25;
}

/* Etiquetas de seccion: THE CLAIM, THE VERDICT, THE TRUTH, THE SUSPECT'S CONFESSION */
#afirmacion-titulo,
#veredicto-titulo,
#veredicto-confesion-titulo {
  font-family: var(--fuente-datos);
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-sello);
}

/* Revelacion: sello, resumen, aclaracion y confesion */
#veredicto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  padding: var(--espacio-2) var(--margen-tarjeta);
}

#veredicto-resumen {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-tinta);
}

#veredicto-resumen:empty {
  display: none;
}

#veredicto-sello:empty {
  display: none;
}

#veredicto-aclaracion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  line-height: 1.35;
  color: var(--color-tinta);
}

#veredicto-aclaracion-texto {
  font-size: 1.0625rem;
  font-weight: 600;
}

#veredicto-detalles,
#ficha-detalles {
  padding-left: 1.1rem;
  list-style: disc;
  color: var(--color-tinta-suave);
}

#veredicto-detalles li + li,
#ficha-detalles li + li {
  margin-top: 2px;
}

/* Confesion de Images: el prompt entero en una cita; scroll interno solo si desborda */
#veredicto-confesion {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  padding-top: var(--espacio-2);
  border-top: 2px dashed var(--color-tinta-suave);
}

#veredicto-confesion-texto {
  flex: 0 1 auto;
  min-height: 0;
  margin: 0;
  padding-left: var(--espacio-3);
  overflow-y: auto;
  font-family: var(--fuente-datos);
  font-size: 0.9375rem;
  line-height: 1.4;
  white-space: pre-line;
  overflow-wrap: anywhere;
  border-left: 4px solid var(--color-sello);
}

/* La confesion nunca se oculta por falta de sitio: como minimo dos lineas y el resto se desplaza dentro */
#veredicto-confesion-texto {
  min-height: 2.8em;
}

#app[data-reto="afirmaciones"] #veredicto-confesion,
#app[data-reto="afirmaciones"] #veredicto-resumen,
#veredicto[data-verdad="autentica"] #veredicto-confesion {
  display: none;
}

/* Images: la ficha reparte su alto entre franja, veredicto y confesion */
#app[data-reto="imagenes"] #caso-tarjeta {
  max-height: 40dvh;
}

#app[data-reto="imagenes"] #veredicto {
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
  padding-block: var(--espacio-3);
}

/* Revelacion de Images (movil, vertical): etiqueta, frase, linea, titulo y recuadro de la confesion */
#app[data-reto="imagenes"] #veredicto-titulo {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--color-nota);
}

#app[data-reto="imagenes"] #veredicto-resumen {
  margin-top: 2px;
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: 0;
}

#app[data-reto="imagenes"] #veredicto-confesion {
  margin-top: var(--espacio-2);
  padding-top: var(--espacio-2);
  gap: var(--espacio-1);
  border-top: 2px dashed #b9ad92;
}

#app[data-reto="imagenes"] #veredicto-confesion-titulo {
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  color: #b3261e;
}

#app[data-reto="imagenes"] #veredicto-confesion-texto {
  min-height: 2.8em;
  padding: 10px 12px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: #2a2a2a;
  background: #f3ead6;
  border: 1px solid #cdbf9f;
}

#app[data-reto="imagenes"] #veredicto-confesion-texto::before {
  content: "\201C";
}

#app[data-reto="imagenes"] #veredicto-confesion-texto::after {
  content: "\201D";
}

/* Nota bajo la confesion y marca al pie: solo en el diseno horizontal */
#veredicto-confesion-nota,
#veredicto-marca,
#app[data-reto="afirmaciones"] #veredicto-marca {
  display: none;
}

#veredicto-confesion-nota {
  flex: none;
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--color-nota);
}

#veredicto-marca {
  flex: none;
  margin: auto 0 0;
  padding: var(--espacio-2) var(--margen-tarjeta);
  font-family: var(--fuente-datos);
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--color-nota);
}

/* Fact or Fake: la tarjeta es la afirmacion; en la revelacion baja la aclaracion bajo una linea discontinua */
#app[data-reto="afirmaciones"] #caso-tarjeta {
  box-shadow: var(--sombra-foto), inset 0 0 0 5px var(--color-papel), inset 0 0 0 6px rgba(74, 63, 42, 0.55);
}

#app[data-reto="afirmaciones"] #pantalla-caso[data-fase="veredicto"] #caso-tarjeta {
  box-shadow: var(--sombra-foto), 0 0 0 3px var(--color-hecho);
}

#app[data-reto="afirmaciones"] #caso-tarjeta:has(#veredicto[data-verdad="generada"]) {
  box-shadow: var(--sombra-foto), 0 0 0 3px var(--color-sello);
}

/* Bloqueo de copia (freno casual): solo en la afirmacion */
#afirmacion {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#app[data-reto="afirmaciones"] #afirmacion:not([hidden]) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  padding: clamp(10px, 2.5dvh, var(--espacio-5)) var(--margen-tarjeta);
}

#afirmacion-texto {
  overflow-wrap: anywhere;
}

#pantalla-caso[data-fase="pregunta"] #afirmacion-titulo {
  display: none;
}

#pantalla-caso[data-fase="pregunta"] #afirmacion-texto {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: var(--texto-afirmacion);
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-wrap: balance;
}

#afirmacion-marca {
  flex: none;
  padding-top: var(--espacio-2);
  font-family: var(--fuente-datos);
  font-size: 0.875rem;
  line-height: 1.2;
  text-align: center;
  color: var(--color-tinta-suave);
  border-top: 1px dashed var(--color-tinta-suave);
}

/* Revelacion de Fact or Fake: la afirmacion en grande (tachada si es falsa) y la marca al pie.
   El articulo pasa a display:contents para ordenar sus tres piezas en la columna de la tarjeta
   (afirmacion, aclaracion, marca) sin posiciones absolutas: la marca va siempre la ultima, en el flujo. */
#app[data-reto="afirmaciones"] #pantalla-caso[data-fase="veredicto"] #afirmacion:not([hidden]) {
  display: contents;
}

#app[data-reto="afirmaciones"] #pantalla-caso[data-fase="veredicto"] #afirmacion-titulo,
#app[data-reto="afirmaciones"] #pantalla-caso[data-fase="veredicto"] #afirmacion-texto {
  order: 1;
  flex: none;
  margin-inline: var(--margen-tarjeta);
}

#app[data-reto="afirmaciones"] #pantalla-caso[data-fase="veredicto"] #afirmacion-titulo {
  margin-top: var(--espacio-3);
}

#app[data-reto="afirmaciones"] #pantalla-caso[data-fase="veredicto"] #afirmacion-texto {
  margin-bottom: var(--espacio-2);
}

#pantalla-caso[data-fase="veredicto"] #afirmacion-texto {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(1.25rem, 5.4vw, 1.875rem);
  line-height: 1.2;
  text-align: left;
}

#caso-tarjeta:has(#veredicto[data-verdad="generada"]) #afirmacion-texto {
  text-decoration: line-through;
  text-decoration-color: var(--color-sello);
  text-decoration-thickness: 0.12em;
}

#app[data-reto="afirmaciones"] #pantalla-caso[data-fase="veredicto"] #afirmacion-marca {
  order: 3;
  margin: auto var(--margen-tarjeta) 0;
  padding: var(--espacio-2) 0;
  text-align: left;
  border-top: 1px dashed var(--color-tinta-suave);
}

#app[data-reto="afirmaciones"] #veredicto {
  order: 2;
  flex: none;
  margin-inline: var(--margen-tarjeta);
  padding: var(--espacio-3) 0 var(--espacio-2);
  border-top: 2px dashed var(--color-tinta-suave);
}

#app[data-reto="afirmaciones"] #veredicto-banda {
  padding-right: calc(var(--margen-tarjeta) + 5.75rem);
}

/* Sello de Fact or Fake: grande y girado, en la esquina superior derecha de la tarjeta */
#app[data-reto="afirmaciones"] #veredicto-sello {
  --giro: -6deg;
  position: absolute;
  z-index: 3;
  top: 0.5rem;
  right: var(--margen-tarjeta);
  padding: 0 0.6rem;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: 0.12em;
  color: var(--color-hecho);
  background: var(--color-papel);
  border: 4px solid var(--color-hecho);
  border-radius: var(--radio-1);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  transform: rotate(var(--giro));
  pointer-events: none;
  animation: estampar var(--duracion-sello) var(--curva-estampa) both;
}

/* FAKE: relleno rojo, invertido respecto al de FACT; ademas del color lo distingue el texto */
#app[data-reto="afirmaciones"] #veredicto[data-verdad="generada"] #veredicto-sello {
  --giro: -5deg;
  color: var(--color-papel);
  background: var(--color-sello);
  border-color: var(--color-tinta);
  box-shadow: 0 0 0 2px var(--color-papel), 0 3px 8px rgba(0, 0, 0, 0.5);
}

#app[data-reto="afirmaciones"] #veredicto[data-estado="fallo"] #veredicto-sello {
  animation: estampar var(--duracion-sello) var(--curva-estampa) both, sacudida 0.4s linear var(--duracion-sello);
}

/* En Images el sello visible esta sobre la foto; este solo lo leen los lectores de pantalla */
#app[data-reto="imagenes"] #veredicto-sello {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Temporizador: cinta que se consume. Se oculta sin mover el diseno */
#temporizador {
  --restante: 1;
  height: 10px;
  overflow: hidden;
  background: var(--color-fondo-2);
  border: 1px solid var(--color-texto-suave);
  border-radius: var(--radio-1);
}

#app[data-modo="investigador"] #temporizador,
#pantalla-caso[data-tapada="si"] #temporizador {
  visibility: hidden;
}

#temporizador-cinta {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(-45deg, var(--color-ambar) 0 0.6rem, #c98a22 0.6rem 1.2rem);
  transform-origin: left center;
  transform: scaleX(var(--restante));
}

#temporizador[data-nivel="critico"] #temporizador-cinta {
  background: repeating-linear-gradient(-45deg, var(--color-sello-vivo) 0 0.6rem, #b83a32 0.6rem 1.2rem);
}

#pantalla-caso[data-fase="veredicto"] #temporizador {
  display: none;
}

/* Botones de respuesta: zona del pulgar, en la mitad inferior */
#caso-botones {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--espacio-3);
}

.boton-voto {
  min-height: clamp(2.75rem, 9dvh, var(--alto-boton));
  font-size: clamp(1.375rem, 5dvh, 2rem);
}

.boton-voto[data-voto="autentica"] {
  color: var(--color-tinta);
  background: var(--color-papel);
}

.boton-voto[data-voto="generada"] {
  color: var(--color-tinta);
  background: var(--color-ambar);
}

#caso-botones [data-accion="siguiente"] {
  grid-column: 1 / -1;
  min-height: clamp(2.75rem, 9dvh, var(--alto-boton));
}

#pantalla-caso[data-fase="pregunta"] [data-accion="siguiente"],
#pantalla-caso[data-fase="veredicto"] [data-voto] {
  display: none;
}

#pantalla-caso[data-fase="veredicto"] #caso-botones {
  grid-template-columns: minmax(0, 1fr);
}

/* El boton va por encima de la ficha en el orden de pintado (la ficha es position:relative y lo taparia) */
#caso-botones {
  position: relative;
  z-index: 1;
}

/* Revelacion de Images en vertical: foto arriba (lo que quede libre), ficha debajo (hasta 40 dvh) y
   boton fuera, en su propia fila final. Tres filas: 1fr / auto / auto. */
#app[data-reto="imagenes"] #pantalla-caso[data-fase="veredicto"] #caso-escena {
  grid-template-rows: minmax(0, 1fr) auto auto;
}

/* Revelacion de Fact or Fake en vertical: tarjeta arriba (su alto, con scroll interno si no cabe) y boton
   fuera, a todo el ancho, en la fila final fija. */
#app[data-reto="afirmaciones"] #pantalla-caso[data-fase="veredicto"] #caso-tarjeta {
  align-self: start;
  max-height: 100%;
}

/* ---------- Caso en horizontal: escena a la izquierda, controles a la derecha ---------- */
@media (orientation: landscape) {
  #caso-escena {
    grid-template-columns: minmax(0, 1fr) clamp(12rem, 32vw, 20rem);
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
    column-gap: clamp(8px, 2vw, 24px);
  }

  #app[data-reto="afirmaciones"] #caso-escena {
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
  }

  #prueba-vitrina,
  #caso-tarjeta {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  #temporizador {
    grid-column: 2;
    grid-row: 2;
  }

  #caso-botones {
    grid-column: 2;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr);
  }

  /* Revelacion de Images: foto a la izquierda; a la derecha la ficha (1fr) y, pegado a su pie, el boton
     (auto) en su propia fila. Dos filas: el boton nunca se superpone. */
  #app[data-reto="imagenes"] #pantalla-caso[data-fase="veredicto"] #caso-escena {
    grid-template-columns: minmax(0, 1fr) var(--ancho-ficha);
    grid-template-rows: minmax(0, 1fr) auto;
    row-gap: 0;
    width: 100%;
    max-width: 60rem;
    align-self: center;
  }

  #pantalla-caso[data-fase="veredicto"] #prueba-vitrina {
    grid-column: 1;
    grid-row: 1 / 3;
    place-items: center end;
  }

  #app[data-reto="imagenes"] #pantalla-caso[data-fase="veredicto"] #caso-tarjeta {
    grid-column: 2;
    grid-row: 1;
    max-height: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* El boton cierra la ficha: barra oscura a todo su ancho, pegada al borde inferior, sin margen */
  #app[data-reto="imagenes"] #pantalla-caso[data-fase="veredicto"] #caso-botones {
    grid-column: 2;
    grid-row: 2;
    padding: 0;
    gap: 0;
    background: #1b1b1b;
    border-radius: 0 0 var(--radio-1) var(--radio-1);
  }

  #app[data-reto="imagenes"] #pantalla-caso[data-fase="veredicto"] #caso-botones [data-accion="siguiente"] {
    width: 100%;
    height: 68px;
    min-height: 0;
    padding: 0 var(--espacio-3);
    font-size: 28px;
    letter-spacing: 0.06em;
    color: #e9dcc0;
    background: #1b1b1b;
    border: 0;
    border-radius: 0 0 var(--radio-1) var(--radio-1);
    box-shadow: none;
  }

  #app[data-reto="imagenes"] #pantalla-caso[data-fase="veredicto"] #caso-botones [data-accion="siguiente"]:focus-visible {
    outline-offset: -5px;
  }

  /* Ficha en ordenador: frase grande, confesion amplia, nota y marca al pie */
  #app[data-reto="imagenes"] #veredicto-resumen {
    margin-top: var(--espacio-1);
    font-size: 26px;
    line-height: 1.2;
  }

  #app[data-reto="imagenes"] #veredicto-confesion {
    margin-top: var(--espacio-3);
    padding-top: var(--espacio-3);
    gap: var(--espacio-2);
  }

  #app[data-reto="imagenes"] #veredicto-confesion-texto {
    padding: 18px 20px;
    font-size: 19px;
  }

  #app[data-reto="imagenes"] #veredicto-confesion-nota,
  #app[data-reto="imagenes"] #veredicto-marca {
    display: block;
  }

  /* Revelacion de Fact or Fake: una tarjeta centrada (su alto, con scroll interno) y el boton en la fila
     de debajo, a la derecha, con el mismo papel. */
  #app[data-reto="afirmaciones"] #pantalla-caso[data-fase="veredicto"] #caso-escena {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, auto) auto;
    row-gap: 0;
    align-content: center;
    justify-items: center;
    width: 100%;
    max-width: var(--ancho-tarjeta);
    align-self: center;
  }

  #app[data-reto="afirmaciones"] #pantalla-caso[data-fase="veredicto"] #caso-tarjeta {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    max-height: none;
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  #app[data-reto="afirmaciones"] #pantalla-caso[data-fase="veredicto"] #caso-botones {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    justify-items: end;
    padding: var(--espacio-2) var(--margen-tarjeta) var(--espacio-3);
    background: url("../img/ui/papel.svg") repeat top left / 240px 240px, var(--color-papel);
    border-radius: 0 0 var(--radio-1) var(--radio-1);
  }

  #app[data-reto="afirmaciones"] #pantalla-caso[data-fase="veredicto"] #caso-botones [data-accion="siguiente"] {
    min-width: 13rem;
  }

  #pantalla-caso[data-fase="veredicto"] #caso-botones [data-accion="siguiente"] {
    min-height: 2.75rem;
  }
}

/* Horizontal bajo (640 x 360): todo mas compacto */
@media (orientation: landscape) and (max-height: 420px) {
  #app[data-reto="imagenes"] #pantalla-caso[data-fase="veredicto"] #caso-botones,
  #app[data-reto="afirmaciones"] #pantalla-caso[data-fase="veredicto"] #caso-botones {
    padding-block: var(--espacio-1) var(--espacio-2);
  }

  #veredicto-banda {
    padding-block: var(--espacio-1);
  }

  #veredicto-banda-texto {
    font-size: 1rem;
  }

  #veredicto-texto {
    font-size: 0.875rem;
  }

  #veredicto-icono {
    width: 1.5rem;
    height: 1.5rem;
  }

  #pantalla-caso[data-fase="veredicto"] #afirmacion-texto {
    font-size: 1.125rem;
  }

  #veredicto-resumen {
    font-size: 1.0625rem;
  }

  #app[data-reto="afirmaciones"] #veredicto-sello {
    font-size: 1.5rem;
  }
}

/* Horizontal con poco alto (<= 520 px): la ficha de Images se compacta y prioriza la confesion completa
   (con scroll interno); sin nota ni marca, y la barra del boton baja de 68 a 44 px */
@media (orientation: landscape) and (max-height: 520px) {
  #app[data-reto="imagenes"] #pantalla-caso[data-fase="veredicto"] #caso-botones {
    padding: 0;
  }

  #app[data-reto="imagenes"] #pantalla-caso[data-fase="veredicto"] #caso-botones [data-accion="siguiente"] {
    height: 44px;
    font-size: 20px;
  }

  #app[data-reto="imagenes"] #veredicto-resumen {
    font-size: 17px;
  }

  #app[data-reto="imagenes"] #veredicto-confesion {
    margin-top: var(--espacio-2);
    padding-top: var(--espacio-2);
    gap: var(--espacio-1);
  }

  #app[data-reto="imagenes"] #veredicto-confesion-texto {
    padding: 10px 12px;
    font-size: 14px;
  }

  #app[data-reto="imagenes"] #veredicto-confesion-nota,
  #app[data-reto="imagenes"] #veredicto-marca {
    display: none;
  }
}

/* ---------- Resultado: tablon de pruebas ---------- */
#pantalla-resultado:not([hidden]) {
  max-width: 64rem;
}

/* Franja de papel: puntuacion | etiqueta y mensaje | sello (el sello solo desde 640 px) */
#resultado-franja {
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--espacio-4);
  padding: clamp(6px, 1.5dvh, var(--espacio-4)) var(--espacio-4);
  color: var(--color-tinta);
  background: url("../img/ui/papel.svg") repeat top left / 240px 240px, var(--color-papel);
  border-radius: var(--radio-1);
  box-shadow: var(--sombra-papel);
}

#resultado-aciertos {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(2.5rem, 11dvh, 6rem);
  line-height: 1;
  color: var(--color-sello);
}

#resultado-datos {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#resultado-reto {
  font-family: var(--fuente-datos);
  font-size: 0.8125rem;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-nota);
}

#resultado-mensaje {
  font-family: var(--fuente-datos);
  font-size: clamp(0.9375rem, 2.2dvh + 0.4rem, 1.375rem);
  line-height: 1.25;
  color: var(--color-tinta);
}

#resultado-sello {
  display: none;
  --giro: -8deg;
  padding: 0.1em 0.5em;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(1.25rem, 4.5dvh, 2.25rem);
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-sello);
  border: 4px solid var(--color-sello);
  border-radius: var(--radio-1);
  box-shadow: inset 0 0 0 2px var(--color-papel), inset 0 0 0 3px var(--color-sello);
  opacity: 0.9;
  transform: rotate(var(--giro));
  pointer-events: none;
  animation: estampar var(--duracion-sello) var(--curva-estampa) 250ms both;
}

/* Tablon: superficie oscura donde se clavan las pruebas */
#resultado-tablon {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  padding: clamp(4px, 1dvh, var(--espacio-3)) clamp(6px, 2vw, var(--espacio-4));
  background: var(--color-fondo-2);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio-2);
  box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.55);
}

#resultado-revision {
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  align-content: center;
  gap: clamp(8px, 2dvh, 16px) clamp(8px, 2vw, 18px);
  padding: 8px 4px 4px;
  /* Bloqueo de copia casual de las afirmaciones del tablon */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Cada prueba: un li de tamano de contenedor (con inclinacion y chincheta) y dentro el boton */
#resultado-revision li {
  position: relative;
  container-type: size;
  align-self: center;
  width: 100%;
  max-height: 100%;
  aspect-ratio: 5 / 8;
  transform: rotate(var(--giro-prueba, 0deg));
  transition: transform var(--duracion-corta);
}

#resultado-revision li:nth-child(1) { --giro-prueba: -1.6deg; }
#resultado-revision li:nth-child(2) { --giro-prueba: 1.2deg; }
#resultado-revision li:nth-child(3) { --giro-prueba: -0.7deg; }
#resultado-revision li:nth-child(4) { --giro-prueba: 1.8deg; }
#resultado-revision li:nth-child(5) { --giro-prueba: -1.1deg; }

#app[data-reto="afirmaciones"] #resultado-revision li {
  aspect-ratio: 4 / 5;
}

/* Chincheta decorativa */
#resultado-revision li::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -6px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 35% 30%, #ff9b8f 0 12%, #c4302b 45%, #6e1414 100%);
  border-radius: 50%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.6);
  transform: translateX(-50%);
  pointer-events: none;
}

@media (hover: hover) {
  #resultado-revision li:hover {
    transform: rotate(var(--giro-prueba, 0deg)) translateY(-3px);
  }
}

.miniatura {
  --pie: 2.6rem;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  color: var(--color-tinta);
  background: url("../img/ui/papel.svg") repeat top left / 240px 240px, var(--color-papel);
  /* Borde de 4 px siempre (transparente salvo fallo): la tarjeta no cambia de tamano */
  border: 4px solid transparent;
  border-radius: var(--radio-1);
  box-shadow: var(--sombra-foto);
  text-align: center;
}

.miniatura[data-estado="fallo"] {
  border-color: var(--color-fallo);
}

@container (min-width: 11rem) {
  .miniatura {
    --pie: 1.6rem;
  }
}

/* Sello pequeno: verde en autentica, rojo en generada; el texto lo pone main.js */
.mini-sello {
  --giro: 7deg;
  padding: 0 0.35em;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(0.75rem, 11cqw, 1.125rem);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-verdad);
  background: var(--color-papel);
  border: 2px solid var(--color-verdad);
  border-radius: var(--radio-1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transform: rotate(var(--giro));
}

.miniatura[data-verdad="generada"] .mini-sello {
  color: var(--color-sello);
  border-color: var(--color-sello);
}

.mini-numero {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(1rem, 11cqw, 1.5rem);
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.mini-voto {
  font-family: var(--fuente-datos);
  font-size: clamp(0.6875rem, 8cqw, 1rem);
  line-height: 1.2;
}

.mini-pie {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
}

/* Images: foto 4:5 completa, con sello arriba a la derecha y marca de acierto abajo a la izquierda */
.mini-foto {
  position: relative;
  flex: none;
  width: min(100cqw - 16px, (100cqh - 16px - var(--pie) - 4px) * 0.8);
  aspect-ratio: 4 / 5;
  background: var(--color-fondo);
}

.mini-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mini-foto .mini-sello {
  position: absolute;
  top: 4px;
  right: 4px;
}

.mini-foto::after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: clamp(1.25rem, 22cqw, 1.75rem);
  height: clamp(1.25rem, 22cqw, 1.75rem);
  background: no-repeat center / contain;
}

.miniatura[data-estado="acierto"] .mini-foto::after {
  background-image: url("../img/ui/icono-acierto.svg");
}

.miniatura[data-estado="fallo"] .mini-foto::after {
  background-image: url("../img/ui/icono-fallo.svg");
}

/* Cuando cabe, numero y voto van en una linea: "#1 · You said Real" */
@container (min-width: 11rem) {
  .mini-foto + .mini-pie {
    flex-direction: row;
    justify-content: center;
    gap: 0.4em;
  }

  .mini-foto + .mini-pie .mini-numero::after {
    content: "\00a0\00b7";
  }
}

/* Fact or Fake: numero y sello arriba, afirmacion, voto y marca abajo */
.mini-cabecera {
  flex: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.mini-texto {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lineas, 3);
  line-clamp: var(--lineas, 3);
  overflow: hidden;
  font-family: var(--fuente-datos);
  font-size: clamp(0.75rem, 7cqw, 1.125rem);
  line-height: 1.25;
  text-align: left;
  overflow-wrap: anywhere;
}

.miniatura[data-verdad="generada"] .mini-texto {
  text-decoration: line-through;
  text-decoration-color: var(--color-sello);
  text-decoration-thickness: 0.12em;
}

.mini-texto + .mini-pie {
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
}

.mini-texto + .mini-pie::after {
  content: "";
  flex: none;
  width: clamp(1.25rem, 14cqw, 1.75rem);
  height: clamp(1.25rem, 14cqw, 1.75rem);
  background: no-repeat center / contain;
}

.miniatura[data-estado="acierto"] .mini-texto + .mini-pie::after {
  background-image: url("../img/ui/icono-acierto.svg");
}

.miniatura[data-estado="fallo"] .mini-texto + .mini-pie::after {
  background-image: url("../img/ui/icono-fallo.svg");
}

/* Nota bajo las pruebas */
#resultado-nota {
  flex: none;
  font-family: var(--fuente-datos);
  font-size: 0.8125rem;
  line-height: 1.25;
  text-align: center;
  color: var(--color-texto-suave);
}

/* Pie: tres datos y dos botones */
#resultado-pie {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1.2dvh, var(--espacio-3));
}

#resultado-rachas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--espacio-2);
  font-family: var(--fuente-datos);
}

.cifra {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cifra-etiqueta {
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.cifra-valor {
  font-size: 1.125rem;
  line-height: 1.25;
  color: var(--color-texto);
}

.cifra-ambar {
  color: var(--color-ambar);
  font-variant-numeric: tabular-nums;
}

/* "New case available": sustituye a la cuenta atras; ocupa las dos columnas de la derecha */
#resultado-nuevo-caso {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
}

#resultado-nuevo-caso p {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--color-ambar);
}

#resultado-nuevo-caso .boton {
  flex: none;
  min-height: var(--tactil-min);
  padding-inline: var(--espacio-4);
  font-size: 1rem;
}

#resultado-pie .acciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espacio-3);
}

#resultado-pie .acciones .boton {
  max-width: none;
  padding-inline: var(--espacio-3);
}

/* Vertical (portada del movil y tabletas): 3 + 2 en Images, 2 + 2 + 1 en Fact or Fake */
@media (orientation: portrait) {
  #resultado-revision {
    --lineas: 3;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  #resultado-revision li {
    grid-column: span 2;
  }

  #resultado-revision li:nth-child(4) {
    grid-column: 2 / 4;
  }

  #resultado-revision li:nth-child(5) {
    grid-column: 4 / 6;
  }

  #app[data-reto="afirmaciones"] #resultado-revision {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  #app[data-reto="afirmaciones"] #resultado-revision li:nth-child(4) {
    grid-column: span 2;
  }

  #app[data-reto="afirmaciones"] #resultado-revision li:nth-child(5) {
    grid-column: 2 / 4;
  }
}

@media (orientation: portrait) and (min-height: 740px) {
  #resultado-revision {
    --lineas: 6;
  }
}

/* Horizontal o ancho: cinco en fila, sello y pie en una sola fila */
@media (orientation: landscape) {
  #resultado-revision {
    --lineas: 7;
  }
}

@media (orientation: landscape) and (min-height: 600px) {
  #resultado-revision {
    --lineas: 9;
  }
}

/* Horizontal bajo (640 x 360): Safari no resuelve el aspect-ratio con container-type: size dentro de la celda
   (las fichas se salian del tablon y tapaban los botones), asi que el li se estira con la celda y la tarjeta
   se coloca en absoluto, como en el movil vertical */
@media (orientation: landscape) and (max-height: 420px) {
  /* Espanol: la cuenta atras y el boton de compartir no se pisan en 640 x 360 */
  #resultado-pie .acciones {
    grid-template-columns: repeat(2, minmax(6rem, 8.5rem));
  }

  #resultado-pie .cifra-valor {
    font-size: 0.9375rem;
    letter-spacing: 0;
  }

  .mini-voto {
    font-size: 0.6875rem;
    line-height: 1;
    letter-spacing: 0;
  }

  #resultado-revision li,
  #app[data-reto="afirmaciones"] #resultado-revision li {
    align-self: stretch;
    height: auto;
    max-height: none;
    min-height: 0;
    aspect-ratio: auto;
  }

  .miniatura {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
  }
}

/* Movil vertical (hasta 600 px): la pantalla es una columna cerrada (franja | tablon | pie) y cada
   prueba se ajusta a su celda. Safari iOS no resuelve bien alturas en % ni aspect-ratio dentro de celdas
   con container-type: size, asi que el li se estira con la celda y la tarjeta se coloca en absoluto. */
@media (max-width: 600px) and (orientation: portrait) {
  #pantalla-resultado:not([hidden]) {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }

  #pantalla-resultado .cinta-peligro {
    flex: none;
  }

  /* Franja compacta */
  #resultado-franja {
    column-gap: var(--espacio-3);
    padding: 6px var(--espacio-3);
  }

  #resultado-aciertos {
    font-size: 64px;
  }

  #resultado-reto {
    font-size: 0.75rem;
    line-height: 1.2;
  }

  #resultado-mensaje {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.25;
  }

  /* Tablon: rejilla de dos filas (cuadricula y nota); la cuadricula toma todo el alto libre */
  #resultado-tablon {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 2px;
    padding: 4px 6px;
    overflow: hidden;
  }

  #resultado-nota {
    font-size: 0.75rem;
    line-height: 1.2;
  }

  #resultado-revision {
    min-height: 0;
    min-width: 0;
    height: auto;
    align-content: stretch;
    gap: 10px;
    padding: 8px 2px 2px;
    overflow: hidden;
  }

  #resultado-revision li {
    align-self: stretch;
    justify-self: stretch;
    width: auto;
    height: auto;
    max-height: none;
    min-width: 0;
    min-height: 0;
    aspect-ratio: auto;
    transform: rotate(var(--giro-prueba, 0deg));
  }

  #app[data-reto="afirmaciones"] #resultado-revision li {
    aspect-ratio: auto;
  }

  /* Giros pequenos: con el gap no invaden a la vecina */
  #resultado-revision li:nth-child(1) { --giro-prueba: -0.8deg; }
  #resultado-revision li:nth-child(2) { --giro-prueba: 0.6deg; }
  #resultado-revision li:nth-child(3) { --giro-prueba: -0.4deg; }
  #resultado-revision li:nth-child(4) { --giro-prueba: 0.9deg; }
  #resultado-revision li:nth-child(5) { --giro-prueba: -0.6deg; }

  #resultado-revision li::before {
    top: -5px;
    width: 12px;
    height: 12px;
  }

  #resultado-revision li:hover,
  #resultado-revision li:active {
    transform: rotate(var(--giro-prueba, 0deg));
  }

  .miniatura {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 2px;
    gap: 2px;
    overflow: hidden;
    border-width: 3px;
  }

  /* Images: fotos 4:5 completas (3 + 2); el lado limitante es el ancho o el alto de la celda */
  .mini-foto {
    flex: 0 1 auto;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    width: min(100cqw - 12px, (100cqh - 12px - var(--pie) - 2px) * 0.8);
  }

  /* Fact or Fake: 2 columnas y la #5 ocupa las dos */
  #app[data-reto="afirmaciones"] #resultado-revision {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  #app[data-reto="afirmaciones"] #resultado-revision li,
  #app[data-reto="afirmaciones"] #resultado-revision li:nth-child(4) {
    grid-column: auto;
  }

  #app[data-reto="afirmaciones"] #resultado-revision li:nth-child(5) {
    grid-column: 1 / -1;
  }

  /* Cabecera y pie fijos; solo cede la zona de texto */
  .mini-cabecera,
  .mini-texto + .mini-pie {
    flex: none;
    margin-top: auto;
  }

  /* Misma fuente y altura de linea en todas las celdas (tambien la #5). Altura exacta de
     N lineas (mismo N en el line-clamp, ver umbrales abajo): sin linea a medias y, si el
     texto excede N lineas, la ultima termina en "...". El hueco sobrante queda libre y
     el pie se ancla abajo con margin-top:auto. */
  .mini-texto {
    --lineas: 1; /* anula el 3 heredado de #resultado-revision; los umbrales lo suben */
    flex: 0 1 auto;
    height: calc(var(--lineas, 1) * 0.9375rem);
    max-height: calc(var(--lineas, 1) * 0.9375rem);
    min-height: 0;
    padding: 0;
    overflow: hidden;
    font-size: 0.75rem;
    line-height: 0.9375rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lineas, 1);
    line-clamp: var(--lineas, 1);
  }

  .mini-voto {
    font-size: 0.75rem;
  }

  .mini-texto + .mini-pie::after {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* Lineas segun el alto H de la celda. Fijo: borde 6 + padding 4 + gaps 4 + cabecera ~27
     + pie 24 = 65 px; N = floor((H - 71) / 15) deja 6 px de holgura. Minimo 1 linea. */
  @container (min-height: 6.3125rem) { .mini-texto { --lineas: 2; } }  /* H >= 101 */
  @container (min-height: 7.25rem) { .mini-texto { --lineas: 3; } }    /* H >= 116 */
  @container (min-height: 8.1875rem) { .mini-texto { --lineas: 4; } }  /* H >= 131 */
  @container (min-height: 9.125rem) { .mini-texto { --lineas: 5; } }   /* H >= 146 */
  @container (min-height: 10.0625rem) { .mini-texto { --lineas: 6; } } /* H >= 161 */
  @container (min-height: 11rem) { .mini-texto { --lineas: 7; } }      /* H >= 176 */
  @container (min-height: 11.9375rem) { .mini-texto { --lineas: 8; } } /* H >= 191 */

  /* Pie siempre visible: estadisticas en una linea y dos botones de 52 px */
  #resultado-pie {
    flex: none;
    flex-direction: column;
    gap: 6px;
  }

  #resultado-rachas {
    gap: var(--espacio-2);
    align-items: end;
  }

  .cifra-etiqueta {
    font-size: 0.6875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cifra-valor {
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  #resultado-pie .acciones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-3);
  }

  #resultado-pie .acciones .boton {
    height: 52px;
    min-height: 52px;
    padding-block: 0;
    padding-inline: clamp(0.375rem, 2.2vw, 0.75rem);
    gap: clamp(0.25rem, 1.8vw, 0.5rem);
    font-size: clamp(0.8125rem, 4vw, 1.125rem);
    letter-spacing: 0.04em;
    line-height: 1.05;
    white-space: normal;
  }

  /* "Compartir resultado" cabe en dos lineas dentro de los 52 px del boton */
  #resultado-pie .acciones .boton .boton-texto {
    white-space: normal;
    text-align: center;
  }

  #resultado-pie .acciones .icono-compartir {
    width: 1.05em;
    height: 1.05em;
  }
}

@media (min-width: 640px) {
  #resultado-franja {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--espacio-5);
  }

  #resultado-datos {
    text-align: center;
  }

  #resultado-reto {
    font-size: 0.9375rem;
  }

  #resultado-sello {
    display: block;
  }

  #resultado-pie {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--espacio-3);
  }

  #resultado-rachas {
    flex: 1 1 auto;
    max-width: 30rem;
    gap: var(--espacio-3);
  }

  #resultado-pie .acciones {
    flex: none;
    width: auto;
    grid-template-columns: repeat(2, minmax(7.5rem, 11rem));
  }

  .cifra-valor {
    font-size: 1.125rem;
  }
}

@media (min-width: 900px) {
  #resultado-pie {
    gap: var(--espacio-5);
  }

  #resultado-rachas {
    gap: var(--espacio-4);
  }

  #resultado-pie .acciones {
    grid-template-columns: repeat(2, minmax(8.5rem, 11rem));
  }

  .cifra-valor {
    font-size: 1.25rem;
  }
}

/* Resultado y ya jugado de afirmaciones (R17): acciones del ya jugado en una fila */
#ya-jugado-reto {
  font-family: var(--fuente-datos);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-tinta-suave);
}

#app[data-reto="afirmaciones"] #pantalla-ya-jugado .acciones {
  flex-direction: row;
}

#app[data-reto="afirmaciones"] #pantalla-ya-jugado .acciones .boton {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: var(--espacio-3);
}

/* ---------- Ya jugado ---------- */
#ya-jugado-aciertos {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(2.5rem, 9dvh, 4rem);
  line-height: 1;
  color: var(--color-sello);
}

#ya-jugado-cuadros {
  font-size: clamp(1.25rem, 4dvh, 2rem);
  line-height: 1.2;
  letter-spacing: 0.1em;
}

#ya-jugado-racha,
#ya-jugado-modo {
  font-family: var(--fuente-datos);
}

#ya-jugado-cuenta-atras {
  font-family: var(--fuente-datos);
  font-size: clamp(1.25rem, 4dvh, 2rem);
  padding-top: var(--espacio-2);
  border-top: 2px dashed var(--color-tinta-suave);
}

#pantalla-ya-jugado .tarjeta {
  flex: none;
}

#pantalla-ya-jugado .acciones {
  flex: none;
  margin-top: auto;
}

@media (orientation: landscape) and (max-height: 500px) {
  #pantalla-ya-jugado .tarjeta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--espacio-4);
    row-gap: 2px;
    padding: var(--espacio-2) var(--espacio-4);
  }

  #pantalla-ya-jugado .tarjeta h2 {
    grid-column: 1 / -1;
    font-size: 1.5rem;
    padding-bottom: 2px;
  }

  #ya-jugado-texto,
  #ya-jugado-cuenta-atras {
    grid-column: 1 / -1;
  }

  #ya-jugado-texto {
    font-size: 0.9375rem;
    line-height: 1.3;
  }
}

/* ---------- Dialogo de ficha (R11) ---------- */
#ficha-img {
  align-self: center;
  width: auto;
  height: auto;
  max-height: 40dvh;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 4px solid var(--color-papel-2);
  box-shadow: var(--sombra-foto);
}

#ficha-era {
  font-family: var(--fuente-datos);
  font-size: var(--texto-grande);
}

#ficha-confesion-titulo {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-sello);
}

#ficha-texto {
  font-family: var(--fuente-datos);
  line-height: 1.4;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Afirmacion y aclaracion en el dialogo (R11) */
#ficha-afirmacion {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

#ficha-aclaracion {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-1);
  padding-top: var(--espacio-2);
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  line-height: 1.4;
  border-top: 1px dashed var(--color-tinta-suave);
}

@media (max-height: 420px) {
  #ficha {
    padding: var(--espacio-2) var(--espacio-4);
  }

  #ficha[open] {
    gap: var(--espacio-1);
  }

  #ficha-titulo {
    font-size: 1.25rem;
  }

  #ficha-afirmacion {
    font-size: 1.125rem;
  }

  #ficha-era {
    font-size: 1rem;
  }
}

@media (orientation: landscape) {
  #ficha-img {
    max-height: min(55dvh, 24rem);
  }

  /* Con foto, el dialogo se ensancha: a 1920 x 1080 la foto (55 dvh) dejaba solo 30 px al texto */
  #ficha:has(#ficha-img:not([hidden])) {
    width: min(48rem, calc(100vw - 2rem));
    max-width: min(48rem, calc(100vw - 2rem));
  }

  #ficha[open]:has(#ficha-img:not([hidden])) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--espacio-4);
    align-content: start;
  }

  #ficha[open]:has(#ficha-img:not([hidden])) > :not(#ficha-img) {
    grid-column: 2;
  }

  #ficha[open] > #ficha-img {
    grid-column: 1;
    grid-row: 1 / span 5;
    align-self: start;
  }
}

/* ---------- Avisos (R2) ---------- */
#aviso-almacen,
#aviso-previsualizacion {
  order: -1;
  flex: none;
  padding: var(--espacio-1) var(--espacio-4);
  font-family: var(--fuente-datos);
  font-size: var(--texto-pequeno);
  line-height: 1.3;
  text-align: center;
  color: var(--color-tinta);
  background: var(--color-ambar);
  border-bottom: 2px solid var(--color-tinta);
}

#compartir-aviso {
  position: fixed;
  left: 50%;
  bottom: calc(var(--espacio-5) + env(safe-area-inset-bottom));
  z-index: 20;
  max-width: calc(100% - 2rem);
  padding: var(--espacio-3) var(--espacio-5);
  font-family: var(--fuente-datos);
  color: var(--color-tinta);
  background: var(--color-papel);
  border-left: 6px solid var(--color-sello);
  border-radius: var(--radio-1);
  box-shadow: var(--sombra-papel);
  transform: translateX(-50%);
  transition: opacity var(--duracion-media);
}

#compartir-aviso[data-visible="no"] {
  opacity: 0;
  visibility: hidden;
}

/* Texto para copiar a mano: se superpone arriba y no ocupa sitio */
#compartir-manual {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 40;
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--espacio-3);
  padding-top: calc(var(--espacio-3) + env(safe-area-inset-top));
  font-family: var(--fuente-datos);
  font-size: var(--texto-base);
  color: var(--color-tinta);
  background: var(--color-papel);
  border: 0;
  border-bottom: 4px solid var(--color-ambar);
  resize: none;
}

#compartir-manual[hidden] + label {
  display: none;
}

/* Aviso de previsualizacion: una sola linea en 360 px */
#aviso-previsualizacion {
  padding-inline: var(--espacio-2);
  font-size: clamp(0.6875rem, 3.2vw, var(--texto-pequeno));
  line-height: 1.2;
}

/* ---------- Escritorio ---------- */
@media (min-width: 768px) {
  .acciones {
    flex-direction: row;
    justify-content: center;
  }

  .acciones .boton {
    flex: 1;
    max-width: 16rem;
  }
}

/* ---------- Espanol (R20): textos mas largos, solo ajustes de composicion ---------- */
:lang(es) .cifra-etiqueta,
:lang(es) #resultado-reto {
  letter-spacing: 0;
}

:lang(es) .modo-nombre {
  letter-spacing: 0;
}

/* ---------- Pagina de creditos (2.7) ---------- */
body[data-pagina="creditos"] {
  height: auto;
}

body[data-pagina="creditos"] #creditos {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-4);
  max-width: var(--ancho-lectura);
  margin-inline: auto;
  padding: var(--espacio-5) var(--espacio-4) var(--espacio-4);
}

body[data-pagina="creditos"] h1 {
  font-size: clamp(2.2rem, 11vw, 3.5rem);
  color: var(--color-papel);
}

body[data-pagina="creditos"] h1::after {
  content: "";
  display: block;
  width: 4rem;
  height: 6px;
  margin-top: var(--espacio-3);
  background: var(--color-sello-vivo);
}

body[data-pagina="creditos"] section {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
  padding: var(--espacio-4);
  color: var(--color-tinta);
  background: url("../img/ui/papel.svg") repeat top left / 240px 240px, var(--color-papel);
  border-radius: var(--radio-1);
  box-shadow: var(--sombra-papel);
}

body[data-pagina="creditos"] h2 {
  font-size: 1.75rem;
  color: var(--color-sello);
}

body[data-pagina="creditos"] ul {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  font-family: var(--fuente-datos);
}

body[data-pagina="creditos"] li {
  padding-left: 1rem;
  border-left: 3px solid var(--color-sello);
}

body[data-pagina="creditos"] section a {
  color: var(--color-sello);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-pagina="creditos"] #creditos-pie {
  max-width: var(--ancho-lectura);
  margin-inline: auto;
  padding: var(--espacio-2) var(--espacio-4) var(--espacio-6);
}

body[data-pagina="creditos"] #creditos-volver {
  display: inline-flex;
  align-items: center;
  min-width: var(--tactil-min);
  min-height: var(--tactil-min);
  padding: var(--espacio-2) 0;
  color: var(--color-ambar);
  text-decoration: underline;
  text-underline-offset: 3px;
}