/* Laboratorio · «Tres cajas». Se carga después de estilos.css. Sin animación larga ni en bucle. */
.titulo-pieza{font-size:clamp(1.75rem,7vw,2.75rem);line-height:1.12;letter-spacing:-.02em;font-weight:800;text-wrap:balance}
.titulo-tema{display:block;margin-top:8px;font-size:clamp(1.0625rem,4vw,1.25rem);line-height:1.35;letter-spacing:0;font-weight:600;color:var(--gris)}
.cajas-seccion{padding-top:28px}
.cajas-cabeza{display:grid;gap:20px}
.rotulo-criterio{margin-top:14px;display:inline-block;font-size:.9375rem;background:var(--niebla);border-left:3px solid var(--verde);padding:6px 12px}

/* Escena estática: tres cajas y un pósit que no cabe */
.escena-lienzo{position:relative;display:grid;grid-template-columns:repeat(3,1fr) 76px;gap:8px;align-items:end;border-bottom:2px solid var(--grafito);padding-top:10px}
.caja{display:flex;align-items:flex-start;justify-content:center;height:84px;background:var(--niebla);border:2px solid var(--grafito);border-bottom:0;border-radius:4px 4px 0 0;padding:10px 4px 0;box-shadow:inset 0 22px 0 #fff}
.caja-nombre{font-size:.875rem;font-weight:800;color:var(--verde-f);text-align:center;line-height:1.15}
.posit{align-self:center;width:76px;min-height:66px;background:var(--posit);border:1px solid var(--posit-borde);padding:7px;font-size:.875rem;font-weight:700;line-height:1.15;transform:rotate(-7deg);margin-bottom:12px}
.escena-pie{margin-top:8px;text-align:right;font-weight:800;font-size:1.0625rem}
@media (prefers-reduced-motion:no-preference){.posit{animation:posit .6s var(--curva) .2s both}}
@keyframes posit{from{opacity:0;transform:translate(-30px,-24px) rotate(10deg)}to{opacity:1;transform:rotate(-7deg)}}

/* Juego */
.juego{margin-top:28px;display:grid;gap:18px}
.tarea-marco{background:#fff;border:1px solid var(--regla);border-radius:8px;padding:18px 16px 20px}
.progreso{font-size:.875rem;font-weight:700;color:var(--verde-f)}
.puntos{display:flex;gap:6px;margin:8px 0 14px}
.puntos li{width:100%;height:4px;border-radius:2px;background:var(--regla)}
.puntos li.hecho{background:var(--verde)}
.puntos li.actual{background:var(--grafito)}
.tarea-titulo{font-size:1.3rem;line-height:1.25;font-weight:800;min-height:2.5em}
.tarea-titulo:focus{outline:none}
.tarea-titulo:focus-visible{outline:3px solid var(--verde)}
.pregunta{margin-top:10px;font-size:.9375rem;color:var(--gris)}
.opciones{margin-top:10px;display:grid;gap:8px}
.opcion{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:56px;padding:10px 14px;background:#fff;border:2px solid var(--grafito);border-radius:6px;font:inherit;color:var(--grafito);text-align:left;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.opcion:hover:not([aria-disabled="true"]){background:var(--niebla)}
.opcion-nombre{font-weight:800;font-size:1.0625rem}
.opcion-sub{font-size:.875rem;color:var(--gris)}
.opcion[aria-pressed="true"]{background:var(--niebla);border-color:var(--verde-f);box-shadow:inset 0 0 0 1px var(--verde-f)}
.opcion[aria-disabled="true"]{cursor:default}
.opcion[aria-disabled="true"][aria-pressed="false"]{color:var(--gris);border-color:var(--regla)}
.opcion.es-jc[aria-disabled="true"]{border-color:var(--verde);color:var(--grafito)}
/* La insignia va en el flujo, bajo el subtítulo, para no pisarlo en pantallas estrechas. Texto alternativo vacío: el aviso ya llega por #j-anuncio. */
.opcion.es-jc::after{content:"Juan Carlos";content:"Juan Carlos" / "";margin-top:6px;align-self:flex-start;font-size:.8125rem;font-weight:700;color:var(--verde-f);background:#fff;border:1.5px solid var(--verde);border-radius:99px;padding:2px 8px}
.veredicto{margin-top:16px;border-top:1px solid var(--regla);padding-top:14px}
@media (prefers-reduced-motion:no-preference){.veredicto{animation:entrar .3s var(--curva) both}}
@keyframes entrar{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.comparar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.comparar-col{background:var(--niebla);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.comparar-jc{background:#fff;border:2px solid var(--verde)}
.comparar-etq{font-size:.875rem;font-weight:700;color:var(--gris)}
.comparar-nota{display:block;font-weight:600;color:var(--verde-f)}
.comparar-caja{font-weight:800}
.porque{margin-top:12px}
.marca-igual{font-weight:800;color:var(--verde-f)}
.veredicto .boton{margin-top:14px;width:100%}
.mis-cajas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start}
.mi-caja{background:#fff;border:2px solid var(--grafito);border-top-width:6px;border-radius:4px;padding:8px;min-height:96px}
.mi-caja-nombre{font-size:.875rem;font-weight:800;color:var(--verde-f);line-height:1.15;margin-bottom:6px}
.mi-caja-lista{display:flex;flex-direction:column;gap:4px}
.mi-caja-lista li{font-size:.875rem;line-height:1.2;background:var(--niebla);border-radius:3px;padding:3px 5px}

/* Resultado */
.resultado-cajas{margin-top:28px;background:#fff;border:1px solid var(--regla);border-radius:8px;padding:24px 16px}
.resultado-titulo{font-size:clamp(1.4rem,5.4vw,2rem);font-weight:800;line-height:1.2}
.resultado-titulo:focus{outline:none}
.resultado-titulo:focus-visible{outline:3px solid var(--verde)}
.resultado-texto{margin-top:10px;max-width:40em}
.tabla-envoltura{margin-top:18px;overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:.9375rem}
.tabla th,.tabla td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--regla);vertical-align:top}
.tabla th{font-size:.875rem;color:var(--gris)}
.tabla td:first-child{font-weight:600}
.tabla .igual{color:var(--verde-f);font-weight:700}
.tabla .distinta{background:var(--hueco)}
.compartir-cajas{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.compartir-cajas .micro{flex-basis:100%}
.resultado-cta{margin-top:22px;padding-top:18px;border-top:1px solid var(--regla);display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.resultado-cta p{flex-basis:100%}

/* Criterio en texto (sin JavaScript, o tras terminar el juego) */
.criterio{margin-top:32px;max-width:48em}
.criterio h2{font-size:1.375rem}
.criterio-lista{margin-top:12px;display:grid;gap:10px;counter-reset:c}
.criterio-lista li{counter-increment:c;padding:12px 14px 12px 44px;position:relative;background:#fff;border:1px solid var(--regla);border-radius:8px;font-size:.9375rem}
.criterio-lista li::before{content:counter(c);position:absolute;left:14px;top:12px;font-weight:800;color:var(--verde-f)}
.c-tarea{display:block}
.c-caja{font-weight:800;color:var(--verde-f)}

@media (min-width:760px){
  .veredicto .boton{width:auto}
  .cajas-cabeza{grid-template-columns:1.2fr 1fr;align-items:end;gap:48px}
}
@media (min-width:960px){
  .cajas-seccion{padding-top:56px}
  .juego{grid-template-columns:1.3fr 1fr;gap:40px;align-items:start;margin-top:40px}
  .tarea-marco{padding:30px 32px}
  .tarea-titulo{font-size:1.6rem}
  .mis-cajas{grid-template-columns:1fr;gap:12px}
  .mi-caja-lista{flex-direction:row;flex-wrap:wrap}
  .caja{height:120px}
  .resultado-cajas{padding:40px 44px}
}