/* Practique Seguro
   Público: adultos y adultos mayores. Letra grande, contraste alto, botones que parecen teclas.
   Cada color de texto cumple 4.5:1 sobre su fondo; revise eso antes de cambiar un valor. */

/* Atkinson se usa sin dígitos: su cero tachado parece una Ø en montos como ₡5.000. Los números salen en Nunito. */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-display: swap; unicode-range: U+0000-002F, U+003A-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+20A0-20AB, U+20AD-20C0, U+2113; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 1000; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+20A0-20AB, U+20AD-20C0, U+2113; }

:root {
  /* Marca */
  --ciruela: #2D1B3D;
  --ciruela-suave: #F3E6FF;
  --mandarina: #FF7A1A;
  --mandarina-clara: #FF9A2E;
  --sol: #FFC93C;
  --sol-borde: #C9951A;
  --cafe: #7A3B12;

  /* Superficies */
  --fondo: #FFF1DA;
  --punto: #FFE5BD;
  --superficie: #fff;
  --superficie-tibia: #FFF6E8;
  --superficie-honda: #FDE7CC;
  --linea: #ECD9C4;
  --linea-fuerte: #A67C52;       /* borde de campos: 3:1 como mínimo */
  --borde-tarjeta: #FFD9A8;
  --sombra-tarjeta: #F3C48C;

  /* Texto */
  --texto: #2B1A0E;
  --texto-suave: #6B5A4C;
  --enlace: #9A3F00;

  /* Acciones y estados */
  --primario: #BF4A00;
  --primario-hover: #A84100;
  --primario-sombra: #7A2F00;
  --bien: #1F7A4A;
  --bien-fondo: #E3F4E4;
  --bien-texto: #14532D;
  --bien-sombra: #14532D;
  --mal: #B91C1C;
  --mal-fondo: #FDE7E7;
  --mal-texto: #7F1D1D;
  --mal-sombra: #7F1D1D;
  --justificado: #2360D9;

  /* Letra */
  --letra: "Atkinson Hyperlegible Next", "Nunito", "Segoe UI", system-ui, Arial, sans-serif;
  --letra-titulo: "Nunito", "Segoe UI", system-ui, Arial, sans-serif;

  /* Movimiento */
  --salida: cubic-bezier(.23, 1, .32, 1);
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--letra);
  font-size: 22px;
  line-height: 1.5;
  color: var(--texto);
  background-color: var(--fondo);
  background-image: radial-gradient(var(--punto) 2px, transparent 2.5px);
  background-size: 28px 28px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--sol); color: var(--ciruela); }
h1, h2, h3, h4 { font-family: var(--letra-titulo); color: var(--ciruela); text-wrap: balance; }
h1 { font-size: 40px; font-weight: 900; line-height: 1.15; margin: 0 0 16px; }
h2 { font-size: 26px; font-weight: 800; line-height: 1.25; margin: 0 0 8px; }
p, .intro { text-wrap: pretty; }
a { color: var(--enlace); text-underline-offset: 3px; }
strong { font-weight: 700; }
small { font-size: 17px; }
.ico { width: 1.1em; height: 1.1em; flex: none; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* El anillo de enfoque debe verse sobre cualquier fondo claro */
:focus-visible { outline: 3px solid var(--ciruela); outline-offset: 3px; border-radius: 10px; }
.barra :focus-visible, .portada :focus-visible { outline-offset: 2px; }
.portada :focus-visible, .modulo.final :focus-visible { outline-color: #fff; }

/* ===== Encabezado ===== */
.barra {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px;
  background: linear-gradient(100deg, var(--mandarina) 0%, var(--mandarina-clara) 100%);
  border-radius: 0 0 28px 28px; padding: 12px 28px;
  box-shadow: 0 6px 0 rgba(122, 59, 18, .25); margin-bottom: 8px;
}
.marca { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 240px; color: var(--ciruela); text-decoration: none; }
.marca-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--ciruela); color: var(--sol); display: grid; place-items: center; font-size: 24px; }
.marca-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.marca-nombre { font-family: var(--letra-titulo); font-size: 26px; font-weight: 900; }
.saludo { font-size: 19px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; }
.barra nav a {
  background: #fff; color: var(--ciruela); font-weight: 700; text-decoration: none;
  padding: 10px 18px; border-radius: 14px; box-shadow: 0 4px 0 rgba(90, 40, 5, .35);
  transition: transform .16s var(--salida), box-shadow .16s var(--salida);
  touch-action: manipulation;
}
.barra nav a[aria-current="page"] { background: var(--ciruela); color: #fff; box-shadow: 0 4px 0 #130A1C; }
.barra nav a.salir { color: var(--mal); text-decoration: underline; text-underline-offset: 3px; }
.barra nav a:active { transform: translateY(3px) scale(.985); box-shadow: 0 1px 0 rgba(90, 40, 5, .35); }
.vista-estudiante { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; max-width: 1100px; margin: 14px auto 0; padding: 12px 18px; border-radius: 16px; background: var(--ciruela); color: #fff; }
.vista-estudiante p { flex: 1 1 320px; margin: 0; font-size: 19px; color: var(--ciruela-suave); }
.vista-estudiante strong { color: #fff; }
.vista-estudiante form { display: flex; flex-wrap: wrap; gap: 10px; }
.vista-estudiante .boton { margin: 0 0 6px; min-height: 48px; padding: 8px 16px; font-size: 18px; }
.vista-estudiante :focus-visible { outline-color: #fff; }
.contenedor { max-width: 1000px; margin: 0 auto; padding: 24px 16px 48px; }
.pie { text-align: center; color: var(--cafe); padding: 16px; font-size: 17px; }

/* ===== Contenedores ===== */
.tarjeta > :first-child { margin-top: 0; }
.tarjeta { background: var(--superficie); border: 3px solid var(--borde-tarjeta); border-radius: 26px; padding: 24px; margin-bottom: 20px; box-shadow: 0 8px 0 var(--sombra-tarjeta); }
.angosta { max-width: 520px; margin-left: auto; margin-right: auto; }
.centrado { text-align: center; }
.grande { font-size: 28px; }

/* ===== Formularios ===== */
label { display: block; font-weight: 700; margin: 14px 0 6px; }
input, select { font: inherit; color: var(--texto); }
input { width: 100%; font-size: 22px; padding: 12px; border: 3px solid var(--linea-fuerte); border-radius: 10px; background: #fff; transition: border-color .16s ease; }
input::placeholder { color: var(--texto-suave); opacity: 1; }
input:focus-visible, select:focus-visible { outline: 3px solid var(--ciruela); outline-offset: 1px; border-color: var(--ciruela); border-radius: 10px; }
input[type="checkbox"] { accent-color: var(--primario); }
input[readonly] { background: #F4EEE6; }
input:disabled { background: #F4EEE6; cursor: not-allowed; }
label.mostrar { display: flex; align-items: center; gap: 12px; font-weight: 600; margin-top: 16px; cursor: pointer; }
label.mostrar input { width: 28px; height: 28px; flex: none; }
.ayuda { display: block; color: var(--texto-suave); font-size: 18px; margin-top: 4px; }
.enlace-aparte { margin: 18px 0 0; }
.enlace-aparte a { font-weight: 700; }

/* ===== Botones: se hunden al tocarlos, como una tecla ===== */
.boton {
  font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1.3;
  display: inline-block; min-height: 56px; padding: 14px 26px; margin-top: 14px;
  background: var(--primario); color: #fff;
  border: 0; border-radius: 16px; box-shadow: 0 6px 0 var(--primario-sombra);
  cursor: pointer; text-decoration: none; touch-action: manipulation;
  transition: transform .16s var(--salida), box-shadow .16s var(--salida), background-color .16s ease;
}
.boton:focus-visible { outline: 4px solid var(--ciruela); outline-offset: 3px; border-radius: 16px; }
.boton:active:not(:disabled) { transform: translateY(5px) scale(.985); box-shadow: 0 1px 0 var(--primario-sombra); }
.boton:disabled { background: #D9CFC5; color: #5C4F44; box-shadow: none; transform: none; cursor: not-allowed; }
.boton[aria-busy="true"] { background: var(--primario-hover); color: #fff; cursor: progress; }
.boton[hidden] { display: none; }
.boton.secundario { background: #fff; color: var(--ciruela); box-shadow: inset 0 0 0 3px var(--primario), 0 6px 0 var(--sombra-tarjeta); }
.boton.secundario:active:not(:disabled) { box-shadow: inset 0 0 0 3px var(--primario), 0 1px 0 var(--sombra-tarjeta); }
.b-grande { width: 100%; text-align: center; }

/* ===== Respuestas ===== */
.opciones { display: grid; gap: 14px; margin-top: 18px; }
.boton.opcion { width: 100%; text-align: left; margin-top: 0; background: #fff; color: var(--texto); box-shadow: inset 0 0 0 3px var(--primario), 0 5px 0 var(--sombra-tarjeta); }
.boton.opcion:active:not(:disabled) { box-shadow: inset 0 0 0 3px var(--primario), 0 1px 0 var(--sombra-tarjeta); }
.boton.decision { display: block; width: 100%; text-align: center; margin-top: 12px; }
.boton.opcion:disabled, .boton.decision:disabled { background: #fff; color: var(--texto-suave); box-shadow: inset 0 0 0 3px var(--linea); }
/* El color de acierto y error siempre gana a los demás estados del botón */
.boton.opcion.bien, .boton.decision.bien { background: var(--bien); color: #fff; box-shadow: 0 5px 0 var(--bien-sombra); }
.boton.opcion.mal, .boton.decision.mal { background: var(--mal); color: #fff; box-shadow: 0 5px 0 var(--mal-sombra); }
.retro {
  margin-top: 18px; padding: 16px; border-radius: 12px; font-weight: 600;
  transition: opacity .22s var(--salida), transform .22s var(--salida);
  @starting-style { opacity: 0; transform: translateY(6px); }
}
.retro.bien { background: var(--bien-fondo); color: var(--bien-texto); border: 2px solid var(--bien); }
.retro.mal { background: var(--mal-fondo); color: var(--mal-texto); border: 2px solid var(--mal); }
.retro[hidden] { display: none; }
.aviso { padding: 12px 16px; border-radius: 10px; margin-bottom: 12px; font-weight: 600; }
.aviso.error { background: var(--mal-fondo); color: var(--mal-texto); border: 2px solid var(--mal); }
.requisitos { list-style: none; padding: 0; margin: 18px 0 0; }
.requisitos li { padding: 10px 14px; border-radius: 10px; margin-bottom: 6px; font-weight: 600; }
.requisitos li.ok { background: var(--bien-fondo); color: var(--bien-texto); }
.requisitos li.falta { background: var(--mal-fondo); color: var(--mal-texto); }
.requisitos[hidden] { display: none; }

/* ===== Progreso ===== */
.barra-prog { background: #F0D9C0; border-radius: 99px; height: 16px; overflow: hidden; margin: 8px 0; }
.barra-prog > div { background: var(--primario); height: 100%; border-radius: 99px; }
.barra-prog.mini { height: 8px; margin: 0 0 2px; min-width: 70px; }
.avance { color: var(--ciruela); font-weight: 600; font-variant-numeric: tabular-nums; }
.migas { color: var(--cafe); margin: 0 0 8px; }
.migas a { color: var(--enlace); font-weight: 700; }

/* ===== Inicio: portada ===== */
.portada { display: grid; grid-template-columns: 1fr auto auto; gap: 22px 32px; align-items: center; margin: 8px 0 26px;
  background: var(--ciruela); color: #fff; border-radius: 30px; padding: 26px 30px; box-shadow: 0 8px 0 #130A1C; }
.portada h1 { color: #fff; margin: 0 0 8px; }
.portada p { margin: 0; font-size: 21px; color: var(--ciruela-suave); max-width: 34ch; }
.portada-admin { grid-template-columns: 1fr; }
.portada-admin p { max-width: 52ch; }
.portada-datos { text-align: center; }
.anillo { --p: 0; width: 118px; height: 118px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto;
  background: conic-gradient(var(--sol) calc(var(--p) * 1%), rgba(255, 255, 255, .18) 0); position: relative; }
.anillo::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--ciruela); }
.anillo span { position: relative; font-family: var(--letra-titulo); font-size: 30px; font-weight: 900; color: var(--sol); font-variant-numeric: tabular-nums; }
.anillo-pie { margin-top: 8px; font-size: 18px; font-weight: 700; color: var(--ciruela-suave); }
.bombillas { display: flex; gap: 4px; height: 118px; align-items: center; font-size: 40px; }
.bombillas .on { color: var(--sol); fill: var(--sol); }
.bombillas .on .ico { fill: rgba(255, 201, 60, .35); }
.bombillas .off { color: rgba(255, 255, 255, .35); }

/* ===== Inicio: módulos ===== */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 26px; }
.modulo {
  --c: var(--primario);
  position: relative; display: flex; flex-direction: column; gap: 6px;
  background: var(--superficie); border: 3px solid color-mix(in srgb, var(--c) 35%, white); border-radius: 28px;
  padding: 22px 22px 24px; box-shadow: 0 8px 0 color-mix(in srgb, var(--c) 45%, white);
  transition: transform .22s var(--salida);
}
.modulo.siguiente { border-color: var(--c); box-shadow: 0 8px 0 var(--c); }
.modulo p { margin: 0; }
.modulo h2 { margin-top: 6px; }
.modulo .icono { color: var(--c); width: 78px; height: 78px; display: grid; place-items: center; font-size: 40px; border-radius: 24px;
  background: color-mix(in srgb, var(--c) 14%, white); box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--c) 28%, white); }
.modulo .barra-prog { background: color-mix(in srgb, var(--c) 18%, white); height: 14px; }
.modulo .barra-prog > div { background: var(--c); }
.modulo .boton { background: var(--c); box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 62%, black); text-align: center; margin-top: auto; }
.modulo .boton:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 62%, black); }
.modulo-accion { margin-top: auto; }
.modulo .avance + .boton, .modulo .barra-prog ~ .boton { margin-top: auto; }
.modulo .avance { margin-bottom: 14px; }
/* Toda la tarjeta se puede tocar (comun.js) y al presionarla se hunde su tecla */
.modulo:has(a.boton) { cursor: pointer; }
.modulo:has(a.boton):active .boton { transform: translateY(5px) scale(.985); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 62%, black); }
.modulo.final:has(a.boton):active .boton { box-shadow: 0 1px 0 var(--sol-borde); }
.modulo.pronto { filter: grayscale(.8); opacity: .75; }
.modulo.dato-suelto:last-child { grid-column: 1 / -1; }
.modulo.dato-suelto { background: transparent; border: 2px dashed var(--linea-fuerte); box-shadow: none; }
.modulo.dato-suelto .icono { width: 56px; height: 56px; font-size: 28px; border-radius: 16px; box-shadow: none; }
.etiqueta { position: absolute; top: -14px; right: 14px; background: var(--sol); color: var(--ciruela); font-weight: 800; font-size: 19px;
  padding: 6px 16px; border-radius: 99px; transform: rotate(4deg); box-shadow: 0 4px 0 var(--sol-borde); z-index: 1; }
.modulo.siguiente .etiqueta { background: var(--ciruela); color: #fff; box-shadow: 0 4px 0 #130A1C; }
/* El quiz cierra el recorrido: ocupa toda la fila y repite la voz de la portada */
.modulo.final { --c: var(--sol); grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, 280px); gap: 4px 24px; align-items: center;
  background: var(--ciruela); color: var(--ciruela-suave); border-color: var(--ciruela); box-shadow: 0 8px 0 #130A1C; }
.modulo.final .icono { grid-row: 1 / span 3; background: rgba(255, 255, 255, .1); box-shadow: none; }
.modulo.final h2 { color: #fff; margin: 0; }
.modulo.final .barra-prog { grid-column: 3; grid-row: 1; background: rgba(255, 255, 255, .18); margin: 0; }
.modulo.final .avance { grid-column: 3; grid-row: 2; color: #fff; margin: 0; }
.modulo.final .boton { grid-column: 3; grid-row: 3; color: var(--ciruela); box-shadow: 0 6px 0 var(--sol-borde); margin-top: 8px; }
.modulo.final .boton:active { box-shadow: 0 1px 0 var(--sol-borde); }
.modulo.final.completo .etiqueta, .modulo.final.siguiente .etiqueta { background: var(--sol); color: var(--ciruela); box-shadow: 0 4px 0 var(--sol-borde); }
/* Entrada breve: esta pantalla se ve muchas veces, así que no debe hacer esperar */
.rejilla .modulo { animation: aparece .24s var(--salida) both; animation-delay: calc(var(--i) * 30ms); }
@keyframes aparece { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

/* ===== Escena del ejercicio: instrucciones a la izquierda, teléfono a la derecha ===== */
.contenedor:has(.escena) { max-width: 1100px; }
.escena { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 8px 32px; align-items: start; grid-template-areas: "arriba tel" "abajo tel"; }
.escena-arriba { grid-area: arriba; }
.escena-tel { grid-area: tel; display: flex; justify-content: center; }
.escena-abajo { grid-area: abajo; }
.intro { color: var(--cafe); font-weight: 600; margin: 0 0 6px; }
.tarea { background: var(--superficie-tibia); border: 2px solid var(--borde-tarjeta); border-radius: 14px; padding: 14px 16px; margin: 10px 0 18px; }
.primero { display: flex; gap: 10px; background: #fff; border: 2px dashed var(--primario); border-radius: 12px; padding: 12px 16px; margin: 0 0 14px; font-size: 20px; }
.primero .ico { margin-top: .2em; color: var(--primario); }
/* Ya abrió la aplicación: la instrucción de abrirla sobra */
.escena:has(.telefono.en-app) .primero { display: none; }

/* ===== Teléfono simulado ===== */
.telefono { width: 100%; max-width: 400px; background: #1D120A; border-radius: 44px; padding: 14px 12px 10px;
  box-shadow: 0 12px 30px rgba(45, 27, 61, .35); position: sticky; top: 12px; }
.tel-estado { display: flex; justify-content: space-between; align-items: center; color: #fff; font-size: 15px; padding: 2px 22px 8px; font-variant-numeric: tabular-nums; }
.tel-red { display: flex; gap: 6px; font-size: 16px; }
.tel-pantalla { background: #fff; border-radius: 28px; overflow-y: auto; overflow-x: hidden; height: 640px; max-height: 78svh; position: relative;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; }
.tel-inicio { min-height: 100%; padding: 28px 16px 20px; background: linear-gradient(165deg, #B84A00 0%, var(--cafe) 55%, var(--ciruela) 100%); color: #fff; }
.tel-fecha { text-align: center; font-family: var(--letra-titulo); font-size: 21px; font-weight: 800; margin-bottom: 22px; }
.tel-iconos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 6px; }
.tel-icono { background: none; border: 0; color: #fff; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px; touch-action: manipulation; }
.tel-ico { width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center; font-size: 36px; color: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  transition: transform .16s var(--salida); }
.tel-icono:active .tel-ico { transform: scale(.94); }
.tel-nom { font-size: 17px; font-weight: 600; line-height: 1.25; }
.tel-icono:focus-visible { outline: 4px solid #fff; border-radius: 14px; }
.tel-aviso { min-height: 1.5em; margin: 22px 4px 0; background: rgba(255, 255, 255, .96); color: var(--cafe); font-weight: 700; font-size: 18px; border-radius: 12px; padding: 10px 12px; }
.tel-aviso:empty { display: none; }
.tel-icono.sacudir { animation: sacudir .32s var(--salida); }
@keyframes sacudir { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.tel-app[hidden], .tel-inicio[hidden] { display: none; }
/* La aplicación crece desde el ícono que se tocó: --ox y --oy los pone telefono.js */
.tel-app.abriendo { animation: abrir-app .24s var(--salida); transform-origin: var(--ox, 50%) var(--oy, 50%); }
@keyframes abrir-app { from { opacity: 0; transform: scale(.88); } }
.tel-barra { display: flex; justify-content: center; padding: 8px 0 2px; }
.tel-barra.vacia { height: 10px; }
.tel-barra button { background: #3A2412; color: #fff; border: 0; border-radius: 999px; min-height: 44px; padding: 8px 26px; font: inherit; font-size: 17px; cursor: pointer; touch-action: manipulation;
  transition: transform .16s var(--salida); }
.tel-barra button:active { transform: scale(.96); }
.tel-barra button:focus-visible { outline-color: #fff; border-radius: 999px; }
.app-barra { background: var(--cafe); color: #fff; padding: 14px 16px; font-size: 20px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.app-barra > span:first-child { display: flex; align-items: center; gap: 10px; }
.app-cuerpo { padding: 14px 16px 20px; }
.pastilla { background: var(--sol); color: var(--ciruela); border-radius: 999px; padding: 0 12px; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.burbuja { background: #E9F3FF; border-radius: 18px 18px 18px 4px; padding: 14px 16px; margin: 0 0 14px; font-size: 20px; }
.tel-app .boton.opcion { font-size: 19px; }
.sms { background: var(--superficie-tibia); border: 2px dashed var(--primario); border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.sms span { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--enlace); font-weight: 700; margin-bottom: 4px; }
.sms strong { font-size: 30px; letter-spacing: 3px; color: var(--cafe); font-variant-numeric: tabular-nums; }

/* ===== Correo dentro del teléfono ===== */
.lista-titulo { padding: 14px 16px; font-weight: 700; color: var(--cafe); border-bottom: 1px solid var(--linea); }
.fila { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border-bottom: 1px solid #F1E3D2; cursor: pointer; font-size: 18px; touch-action: manipulation; }
.fila:active { background: var(--superficie-honda); }
.fila:focus-visible { outline: 3px solid var(--ciruela); outline-offset: -3px; }
.fila.abierta { background: var(--superficie-honda); }
.fila:not(.no-leido) { background: #FAF5EE; }
.fila-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.remitente, .asunto, .vista-previa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vista-previa { color: var(--texto-suave); font-size: 16px; }
.fila.no-leido .remitente, .fila.no-leido .asunto { font-weight: 800; }
.hora { flex: none; font-size: 15px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.marca-resp { flex: none; font-size: 22px; width: 24px; text-align: center; font-weight: 800; }
.marca-resp:empty { display: none; }
.fila.acierto .marca-resp { color: var(--bien); }
.fila.error .marca-resp { color: var(--mal); }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.avatar.grande { width: 52px; height: 52px; }
.lectura { display: none; padding: 14px; }
.bandeja.leyendo .lista { display: none; }
.bandeja.leyendo .lectura { display: block; }
.lectura-vacia { color: var(--texto-suave); padding: 60px 10px; text-align: center; }
.volver { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; background: none; border: 0; color: var(--enlace); font: inherit; font-weight: 700; cursor: pointer; padding: 0 0 6px; touch-action: manipulation; }
.msg-asunto { color: var(--texto); font-size: 25px; margin: 0 0 12px; }
.msg-cabecera { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; }
.msg-cabecera > div:nth-child(2) { flex: 1; min-width: 0; }
.msg-nombre { font-weight: 700; }
.msg-de { color: var(--texto-suave); font-size: 17px; word-break: break-all; }
.msg-hora { color: var(--texto-suave); font-size: 16px; font-variant-numeric: tabular-nums; }
.msg-cuerpo { background: #FFFAF3; border: 1px solid var(--linea); border-radius: 12px; padding: 16px; }
.decidir { margin-top: 18px; }
.decidir-texto { font-weight: 700; color: var(--cafe); margin: 0; }
.resultado { text-align: center; padding: 30px 10px; }
.resultado .boton { display: block; }
.resultado[hidden], .mensaje[hidden], .lectura-vacia[hidden] { display: none; }

/* ===== Banco Práctica ===== */
#banco, #calendario { display: block; }
.b-app { width: 100%; background: #fff; }
.b-head { background: var(--cafe); color: #fff; padding: 18px 20px 14px; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.b-logo { display: flex; align-items: center; gap: 10px; font-family: var(--letra-titulo); font-weight: 800; font-size: 23px; }
.b-user { font-size: 17px; opacity: .92; min-width: 0; overflow-wrap: anywhere; }
.b-cuenta { margin: 16px; background: linear-gradient(135deg, #B84A00, var(--cafe)); color: #fff; border-radius: 18px; padding: 18px; }
.b-cuenta small { font-size: 16px; opacity: .95; }
.b-saldo { font-family: var(--letra-titulo); font-size: 36px; font-weight: 900; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.b-link { text-wrap: balance; background: none; border: 0; font: inherit; font-size: 18px; color: var(--enlace); font-weight: 700; cursor: pointer; padding: 8px 0; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; touch-action: manipulation; }
.b-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 8px; }
.b-atajo { font: inherit; font-size: 18px; font-weight: 700; color: var(--cafe); background: var(--superficie-tibia); border: 2px solid #F1D3B0; border-radius: 16px; padding: 16px 8px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; touch-action: manipulation; transition: transform .16s var(--salida); }
.b-atajo .ico, .b-fila .ico { font-size: 28px; color: var(--primario); }
.b-atajo:active:not(.apagado), .b-fila:active:not(.apagado) { transform: scale(.97); }
/* Lo que no se usa en este ejercicio se ve claramente apagado, pero su nombre se puede leer */
.b-atajo.apagado, .b-fila.apagado { background: #F7F3EE; border-color: var(--linea); color: var(--texto-suave); }
.b-atajo.apagado .ico, .b-fila.apagado .ico { color: var(--texto-suave); }
.b-top { display: flex; align-items: center; gap: 10px; background: var(--cafe); color: #fff; padding: 14px 16px; }
.b-atras { display: grid; place-items: center; flex: none; background: rgba(255, 255, 255, .18); color: #fff; border: 0; font-size: 24px; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; touch-action: manipulation; }
.b-atras:focus-visible { outline-color: #fff; border-radius: 50%; }
.b-titulo { font-size: 21px; font-weight: 800; font-family: var(--letra-titulo); }
.b-lista { padding: 12px 16px; display: grid; gap: 10px; }
.b-fila { font: inherit; text-align: left; display: flex; gap: 14px; align-items: center; background: var(--superficie-tibia); border: 2px solid #F1D3B0; border-radius: 16px; padding: 14px; cursor: pointer; color: var(--texto); touch-action: manipulation; transition: transform .16s var(--salida); }
.b-fila strong, .b-fila small { display: block; }
.b-fila small { color: var(--texto-suave); font-size: 16px; }
.b-form { padding: 6px 18px 12px; }
.b-form label { font-size: 19px; }
.b-form select { width: 100%; font-size: 20px; padding: 12px; border: 3px solid var(--linea-fuerte); border-radius: 12px; background: #fff; }
.b-nota { color: var(--texto-suave); font-size: 17px; padding: 0 18px; margin: 10px 0 0; }
.b-form .b-nota { padding: 0; }
.b-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.b-chip { font: inherit; font-size: 17px; background: var(--superficie-honda); color: var(--cafe); border: 2px solid var(--primario); border-radius: 999px; min-height: 44px; padding: 6px 14px; cursor: pointer; font-weight: 600; touch-action: manipulation; }
.b-botones { display: grid; gap: 10px; padding: 0 18px 8px; }
.b-resumen { margin: 16px; background: #FFFAF3; border: 2px solid var(--linea); border-radius: 16px; padding: 6px 14px; }
.b-linea { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F1E3D2; font-size: 19px; }
.b-linea:last-child { border-bottom: 0; }
.b-linea span { color: var(--texto-suave); }
.b-linea strong { text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.b-monto { font-size: 24px; color: var(--cafe); }
.rojo { color: var(--mal); }
/* Las ayudas del banco lo llaman «cuadro naranja»: debe seguir viéndose así */
.b-pin-aviso { background: #FFE9CC; border: 2px dashed var(--primario); border-radius: 12px; padding: 12px; margin: 10px 0; text-align: center; }
.b-pin-aviso strong { font-size: 30px; letter-spacing: 4px; color: var(--cafe); }
.b-error { background: var(--mal-fondo); color: var(--mal-texto); border: 2px solid var(--mal); border-radius: 10px; padding: 10px 14px; margin: 10px 16px; font-weight: 600; }
.b-form .b-error { margin: 12px 0; }
.b-ayuda { padding: 8px 16px 16px; text-align: center; }
.b-pista { background: #FFF9C4; border-radius: 10px; padding: 10px 14px; text-align: left; }
.b-pista.sin { background: var(--ciruela-suave); color: var(--ciruela); }
.b-movs { list-style: none; margin: 0; padding: 8px 16px 12px; }
.b-movs li { display: flex; justify-content: space-between; gap: 10px; padding: 14px 0; border-bottom: 1px solid #F1E3D2; }
.b-movs small { display: block; color: var(--texto-suave); }
.b-movs .sale { color: var(--mal-texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.b-movs .entra { color: var(--bien); font-weight: 700; font-variant-numeric: tabular-nums; }
.b-exito { padding: 24px 12px 12px; text-align: center; }
.b-exito h2 { margin: 10px 0; }
.b-check { width: 84px; height: 84px; border-radius: 50%; background: var(--bien); color: #fff; font-size: 48px; display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.b-check.gris { background: #6B5A4C; }
.b-saldo-fijo { position: sticky; top: 0; z-index: 5; background: var(--superficie-tibia); color: var(--cafe); border-bottom: 3px solid var(--primario);
  padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 600; }
.b-saldo-fijo strong { font-size: 22px; font-variant-numeric: tabular-nums; }

/* ===== Calendario ===== */
.c-cab { background: var(--cafe); color: #fff; padding: 14px 16px; }
.c-mes { font-family: var(--letra-titulo); font-size: 22px; font-weight: 800; text-transform: capitalize; }
.c-semana, .c-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.c-semana span { text-align: center; font-size: 15px; font-weight: 700; color: var(--enlace); padding: 8px 0 4px; }
.c-rejilla { gap: 4px; padding: 0 8px 8px; }
.c-vacio { display: block; }
.c-dia { position: relative; aspect-ratio: 1; min-width: 0; background: var(--superficie-tibia); border: 2px solid transparent; border-radius: 12px; font: inherit; font-size: 20px; font-weight: 700; color: var(--texto); cursor: pointer; padding: 0; touch-action: manipulation; }
.c-dia.sel { background: var(--primario); color: #fff; border-color: var(--cafe); }
.c-punto { position: absolute; bottom: 5px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--primario); }
.c-dia.sel .c-punto { background: #fff; }
.c-panel { padding: 8px 16px 12px; }
.c-panel .b-nota { padding: 0; }
.c-panel h3 { margin: 6px 0 8px; font-size: 20px; }
.c-evs { list-style: none; padding: 0; margin: 0 0 10px; }
.c-evs li { background: var(--superficie-tibia); border: 2px solid var(--borde-tarjeta); border-radius: 10px; padding: 8px 12px; margin-bottom: 6px; }
.c-evs small { display: block; color: var(--texto-suave); font-size: 16px; }
.c-fecha { display: flex; align-items: center; gap: 8px; background: var(--superficie-tibia); border-radius: 10px; padding: 10px 12px; margin: 14px 0 4px; font-weight: 700; }

/* ===== Tienda de apps ===== */
.t-wifi { display: flex; align-items: center; gap: 8px; background: var(--bien-fondo); color: var(--bien-texto); font-weight: 700; font-size: 17px; padding: 8px 16px; }
.t-wifi.sin { background: var(--mal-fondo); color: var(--mal-texto); }
.t-cab { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px 4px; }
.t-cab h3 { margin: 0; font-size: 24px; }
.t-cab span { color: var(--enlace); font-weight: 700; font-size: 17px; }
.t-todo { padding: 4px 16px 8px; }
.t-todo .boton { margin-top: 4px; }
.t-lista { list-style: none; margin: 0; padding: 0 12px; }
.t-fila { display: grid; grid-template-columns: 54px 1fr; gap: 4px 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--linea); }
.t-ico { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; color: #fff; }
.t-info strong { display: block; font-size: 20px; }
.t-info small { display: block; color: var(--texto-suave); font-size: 16px; line-height: 1.3; }
.t-verif { display: block; color: var(--bien); font-size: 16px; font-weight: 700; }
.t-noverif { display: block; color: var(--mal); font-size: 16px; font-weight: 700; }
.t-acc { grid-column: 1 / -1; }
.t-acc small { color: var(--texto-suave); }
.t-btn { width: 100%; min-height: 48px; padding: 10px; font-size: 19px; margin: 4px 0 6px; }
.t-ok { color: var(--bien); font-weight: 800; font-size: 19px; }
.t-prog { height: 12px; background: var(--linea); border-radius: 99px; overflow: hidden; }
.t-prog i { display: block; height: 100%; background: var(--primario); transform: scaleX(0); transform-origin: left; animation: cargar 1.2s linear forwards; }
@keyframes cargar { to { transform: scaleX(1); } }
.t-sub { margin: 14px 16px 0; font-size: 18px; }
.t-fin { padding: 14px 16px 4px; }
.t-fin:empty { display: none; }
.t-fin .boton { margin-top: 0; }

/* ===== Panel del instructor ===== */
.contenedor:has(.tabla-scroll) { max-width: 1250px; }
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 20px; }
.dato { background: #fff; border-radius: 14px; padding: 14px; text-align: center; box-shadow: 0 2px 6px rgba(122, 59, 18, .12); }
.dato strong { display: block; font-family: var(--letra-titulo); font-size: 38px; font-weight: 900; color: var(--ciruela); line-height: 1.1; font-variant-numeric: tabular-nums; }
.dato span { font-size: 17px; color: var(--texto-suave); }
.titulo-fila { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; }
.titulo-fila h2 { margin: 0; }
.acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.acciones form { margin: 0; }
.acciones .boton { font-size: 18px; min-height: 48px; padding: 10px 16px; margin-top: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 19px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--linea); }
th { color: var(--cafe); font-family: var(--letra); }
.tabla-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; }
.tabla-scroll table { min-width: 760px; font-size: 18px; }
.tabla-scroll table.tabla-corta { min-width: 560px; }
.tabla-scroll th { font-size: 16px; vertical-align: bottom; }
.tabla-scroll td { padding: 8px 6px; }
td.completo { color: var(--bien); font-weight: 800; }
td.vacio { color: var(--texto-suave); }
td.fecha { white-space: nowrap; }
.nota-tabla { color: var(--texto-suave); font-size: 17px; margin: 8px 0 0; }

/* ===== Notas ===== */
.contenedor:has(.tabla-cal) { max-width: 1500px; }
.tabla-scroll .tabla-cal { min-width: 1290px; font-size: 16px; }
.tabla-scroll .tabla-cal th { font-size: 14px; text-align: center; min-width: 64px; }
.tabla-scroll .tabla-cal td { text-align: center; padding: 6px 3px; }
.tabla-scroll .tabla-cal .fija { position: sticky; left: 0; background: #fff; text-align: left; min-width: 160px; max-width: 190px; z-index: 1; padding-left: 8px; }
.tabla-cal td a { white-space: nowrap; font-weight: 700; }
.campo-nota { width: 60px; font-size: 18px; padding: 6px 2px; border: 3px solid var(--linea-fuerte); border-radius: 10px; text-align: center; font-variant-numeric: tabular-nums; }
.campo-nota:disabled { border-color: var(--linea); color: var(--texto-suave); }
.campo-nota::placeholder { font-size: 15px; }
.tabla-scroll .tabla-cal th small { display: block; font-size: 13px; font-weight: 400; color: var(--texto-suave); }
.tabla-cal td.auto { background: var(--superficie-tibia); }
.tabla-cal td.auto small { display: block; font-size: 13px; color: var(--texto-suave); }
.tabla-cal .celda-final { background: var(--bien-fondo); font-size: 20px; color: var(--bien-texto); }
.tabla-cal .celda-final.perdio { background: var(--mal-fondo); color: var(--mal-texto); }
.tabla-cal .celda-final small { display: block; font-size: 13px; line-height: 1.2; }
.casilla-pub { width: 30px; height: 30px; }
.barra-guardar { position: sticky; bottom: 0; z-index: 5; background: #fff; border-top: 3px solid var(--primario); padding: 8px 0 12px; margin-top: 12px; display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== Mi nota ===== */
.nota-grande { font-family: var(--letra-titulo); font-size: 96px; font-weight: 900; color: var(--cafe); line-height: 1.1; margin: 8px 0 16px; font-variant-numeric: tabular-nums; }
.mensaje-nota { white-space: pre-line; text-align: left; background: var(--superficie-tibia); border: 2px solid var(--borde-tarjeta); border-radius: 14px; padding: 16px 18px; margin: 0 0 18px; font-size: 20px; }
.tarjeta .formulario { text-align: left; border-top: 3px solid var(--linea); margin-top: 8px; padding-top: 8px; }
.tarjeta .formulario h2 { font-size: 24px; margin: 8px 0 0; }
#confeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }

/* ===== Asistencia ===== */
.asis-semanas { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; margin: 0 0 22px; }
.asis-semanas a { position: relative; display: block; padding: 8px 10px; min-height: 64px; border-radius: 14px; background: #fff; border: 2px solid var(--borde-tarjeta); color: var(--ciruela); text-decoration: none; line-height: 1.25; }
.asis-semanas small { display: block; font-size: 15px; color: var(--texto-suave); }
.asis-semanas strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.asis-semanas a[aria-current="page"] { background: var(--ciruela); border-color: var(--ciruela); color: #fff; }
.asis-semanas a[aria-current="page"] small { color: var(--ciruela-suave); }
.asis-hecha { position: absolute; top: 7px; right: 8px; color: var(--bien); font-size: 17px; }
.asis-semanas a[aria-current="page"] .asis-hecha { color: var(--sol); }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.asis-titulo { margin: 0; }
.asis-cuenta { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 12px 0 0; padding: 0; font-size: 18px; font-variant-numeric: tabular-nums; }
.asis-cuenta strong { font-size: 22px; }
.asis-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.asis-fila { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 520px) 140px; gap: 8px 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); margin: 0; }
.asis-nombre { display: block; font-weight: 700; overflow-wrap: anywhere; }
.asis-nota { display: block; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.asis-nota.perdio { color: var(--mal); font-weight: 700; }
.asis-regla { margin: 8px 0 0; color: var(--texto-suave); font-size: 19px; }
.asis-estados { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.asis-estado { position: relative; display: block; margin: 0; font-weight: 400; cursor: pointer; }
.asis-estado input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.asis-estado span { display: grid; place-items: center; min-height: 52px; padding: 4px 6px; border: 2px solid var(--linea-fuerte); border-radius: 12px; background: #fff; color: var(--texto); font-size: 18px; font-weight: 700; transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s var(--salida); }
.asis-estado input:focus-visible + span { outline: 3px solid var(--ciruela); outline-offset: 2px; }
.asis-estado input:active + span { transform: scale(.97); }
.asis-estado input:checked + span { border-color: transparent; color: #fff; }
.asis-estado.presente input:checked + span { background: var(--bien); }
.asis-estado.ausente input:checked + span { background: var(--mal); }
.asis-estado.justificado input:checked + span { background: var(--justificado); }
.asis-estado.tarde input:checked + span { background: var(--sol); color: var(--ciruela); }
.asis-min { margin: 0; transition: opacity .16s ease; @starting-style { opacity: 0; } }
.asis-min[hidden] { display: none; }
.asis-min label { font-size: 16px; margin: 0 0 2px; }
.asis-min input { padding: 8px; font-size: 20px; font-variant-numeric: tabular-nums; }
.asis-acciones { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.asis-acciones .boton { margin-top: 8px; }

/* Vista general: se lee como una hoja de cálculo */
.vistas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.vistas a { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 18px; border-radius: 12px; background: #fff; border: 2px solid var(--borde-tarjeta); color: var(--ciruela); font-weight: 700; text-decoration: none; }
.vistas a[aria-current="page"] { background: var(--ciruela); border-color: var(--ciruela); color: #fff; }
.contenedor:has(.tabla-asis) { max-width: 1500px; }
.asis-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; list-style: none; margin: 0 0 12px; padding: 0; font-size: 18px; }
.asis-leyenda span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; font-weight: 800; }
.hoja-scroll { max-height: 74svh; overflow: auto; border: 1px solid var(--linea-fuerte); border-radius: 8px; }
.hoja-scroll:focus-visible { outline-offset: 2px; }
.tabla-scroll .tabla-asis { min-width: 1240px; border-collapse: separate; border-spacing: 0; font-size: 17px; }
.tabla-asis th, .tabla-scroll .tabla-asis td { padding: 6px 4px; text-align: center; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.tabla-scroll .tabla-asis th { vertical-align: middle; }
.tabla-asis td { height: 42px; font-weight: 700; white-space: nowrap; }
.tabla-scroll .tabla-asis thead th { position: sticky; top: 0; z-index: 2; background: var(--superficie-honda); color: var(--ciruela); font-size: 15px; min-width: 58px; vertical-align: middle; border-bottom: 2px solid var(--linea-fuerte); }
.tabla-asis thead a { display: block; color: inherit; text-decoration: none; font-weight: 700; }
.tabla-asis thead small { display: block; font-size: 14px; font-weight: 400; }
.tabla-scroll .tabla-asis .hoja-nombre { position: sticky; left: 0; z-index: 1; min-width: 170px; max-width: 200px; padding-left: 10px; text-align: left; background: var(--superficie-tibia); color: var(--texto); font-size: 17px; overflow-wrap: anywhere; border-right: 2px solid var(--linea-fuerte); }
.tabla-scroll .tabla-asis thead .hoja-nombre { z-index: 3; background: var(--superficie-honda); }
.tabla-asis .hoja-total { min-width: 62px; background: var(--superficie-tibia); }
.tabla-scroll .tabla-asis thead .hoja-total { background: var(--superficie-honda); }
.tabla-asis .hoja-nota { font-size: 19px; background: var(--bien-fondo); color: var(--bien-texto); }
.tabla-asis .hoja-nota.perdio { background: var(--mal-fondo); color: var(--mal-texto); }
.tabla-asis .hoja-nota small { display: block; font-size: 13px; line-height: 1.1; }
.tabla-asis tfoot th, .tabla-asis tfoot td { background: var(--superficie-tibia); }
.tabla-asis tbody tr:hover td:not([class]) { background: var(--superficie-tibia); }
.celda-presente { background: var(--bien-fondo); color: var(--bien-texto); }
.celda-ausente { background: var(--mal-fondo); color: var(--mal-texto); }
.celda-justificado { background: #E3ECFB; color: #1A4AA8; }
.celda-tarde { background: #FFF1C2; color: #5C4300; }

/* Desglose de notas por persona */
.desglose { max-width: 820px; margin-left: auto; margin-right: auto; }
.desglose-buscar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.desglose-buscar > div { flex: 1 1 260px; min-width: 0; }
.desglose-buscar label { margin-top: 0; }
.desglose-buscar select { width: 100%; min-height: 56px; padding: 10px 12px; border: 3px solid var(--linea-fuerte); border-radius: 10px; background: #fff; }
.desglose-buscar .boton { margin: 0 0 6px; }
.desglose-vacio { color: var(--texto-suave); margin: 20px 0 4px; }
.desglose-cab { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; margin: 24px 0 12px; padding-top: 18px; border-top: 3px solid var(--linea); }
.desglose-cab h2 { margin: 0; overflow-wrap: anywhere; }
.desglose-cab > div:first-child { flex: 1 1 240px; min-width: 0; }
.desglose-estado { margin: 2px 0 0; font-size: 19px; font-weight: 700; }
.desglose-estado.bien { color: var(--bien-texto); }
.desglose-estado.mal { color: var(--mal-texto); }
.desglose-final { font-family: var(--letra-titulo); font-size: 52px; font-weight: 900; line-height: 1; color: var(--cafe); text-align: right; font-variant-numeric: tabular-nums; }
.desglose-final small { display: block; font-family: var(--letra); font-size: 17px; font-weight: 600; color: var(--texto-suave); margin-top: 4px; }
.tabla-desglose th { font-weight: 600; color: var(--texto); }
.tabla-desglose thead th { color: var(--cafe); font-size: 17px; font-weight: 700; }
.desglose-nota { text-align: right; font-weight: 700; white-space: nowrap; padding-right: 20px; }
.tabla-desglose thead th:nth-child(2) { text-align: right; padding-right: 20px; }
.desglose-detalle { color: var(--texto-suave); font-size: 18px; }
.tabla-desglose tfoot th, .tabla-desglose tfoot td { border-bottom: 0; border-top: 2px solid var(--linea-fuerte); }
.tabla-desglose tfoot th, .tabla-desglose tfoot .desglose-nota { font-weight: 800; font-size: 22px; color: var(--ciruela); }

/* ===== Solo con mouse: en pantallas táctiles el efecto se queda pegado ===== */
@media (hover: hover) and (pointer: fine) {
  .barra nav a:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(90, 40, 5, .35); }
  .barra nav a[aria-current="page"]:hover { box-shadow: 0 6px 0 #130A1C; }
  .barra nav a:active { transform: translateY(3px) scale(.985); box-shadow: 0 1px 0 rgba(90, 40, 5, .35); }
  .boton:hover:not(:disabled) { background: var(--primario-hover); }
  .boton.secundario:hover:not(:disabled), .boton.opcion:hover:not(:disabled) { background: var(--superficie-tibia); }
  .boton.opcion.bien:hover, .boton.decision.bien:hover { background: var(--bien); }
  .boton.opcion.mal:hover, .boton.decision.mal:hover { background: var(--mal); }
  .modulo:has(.boton):hover { transform: translateY(-4px); }
  .modulo .boton:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 88%, black); }
  .modulo.final .boton:hover:not(:disabled) { background: #FFD45F; }
  .fila:hover { background: var(--superficie-tibia); }
  .asis-estado input:not(:checked):hover + span { background: var(--superficie-honda); }
  .asis-semanas a:not([aria-current]):hover { background: var(--superficie-honda); }
  .b-atajo:hover:not(.apagado), .b-fila:hover:not(.apagado) { background: var(--superficie-honda); border-color: var(--primario); }
  .c-dia:hover:not(.sel) { border-color: var(--primario); }
}

/* ===== Pantallas medianas y pequeñas ===== */
@media (min-width: 901px) {
  /* En pantallas angostas la casilla «Publicada» sigue a la vista */
  .tabla-scroll .tabla-cal .fija-der { position: sticky; right: 0; background: #fff; z-index: 1; }
}
@media (max-width: 900px) {
  .escena { grid-template-columns: minmax(0, 1fr); grid-template-areas: "arriba" "tel" "abajo"; }
  .telefono { position: static; }
  .modulo.final { grid-template-columns: auto minmax(0, 1fr); }
  .modulo.final .icono { grid-row: 1 / span 2; }
  .modulo.final h2, .modulo.final > p { grid-column: 2; }
  .modulo.final .barra-prog, .modulo.final .avance, .modulo.final .boton { grid-column: 1 / -1; grid-row: auto; }
  .modulo.final .barra-prog { margin-top: 12px; }
}
@media (max-width: 760px) {
  .asis-fila { grid-template-columns: minmax(0, 1fr); }
  .asis-estados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1140px) { .vista-estudiante { margin-left: 16px; margin-right: 16px; } }
@media (max-width: 800px) {
  .portada { grid-template-columns: 1fr 1fr; padding: 20px; }
  .portada-texto { grid-column: 1 / -1; }
  .portada-admin { grid-template-columns: 1fr; }
  h1 { font-size: 30px; }
  .barra { padding: 10px 14px; }
  .barra nav { justify-content: flex-start; flex-basis: 100%; }
  .barra nav a { flex: 1; text-align: center; padding: 10px 8px; }
}
@media (max-width: 560px) {
  .tabla-desglose thead th:nth-child(3) { display: none; }
  .tabla-desglose tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--linea); padding: 6px 0; }
  .tabla-desglose th, .tabla-desglose td { border: 0; padding: 2px 0; }
  .desglose-nota, .tabla-desglose thead th:nth-child(2) { padding-right: 0; }
  .desglose-detalle { grid-column: 1 / -1; }
  .desglose-detalle:empty { display: none; }
  .tabla-desglose tfoot tr { border-bottom: 0; }
  .tabla-desglose tfoot th, .tabla-desglose tfoot td { border: 0; }
  .desglose-final { text-align: left; }
}
@media (max-width: 600px) {
  body { font-size: 20px; }
  .boton { font-size: 20px; }
  .marca-ico { width: 44px; height: 44px; font-size: 22px; }
  .marca-nombre { font-size: 23px; }
  .saludo { font-size: 18px; }
  .nota-grande { font-size: 76px; }
  /* El ejercicio usa todo el ancho: nada de tarjeta alrededor del teléfono */
  #escenario { background: none; border: 0; box-shadow: none; padding: 8px 0 0; }
}
@media (max-width: 520px) {
  .telefono { max-width: none; border-radius: 0; padding: 0; box-shadow: none; background: transparent; }
  .tel-estado { display: none; }
  .tel-pantalla { border-radius: 16px; border: 3px solid var(--cafe); height: auto; min-height: 560px; max-height: none; }
  .tel-barra button { background: var(--cafe); }
  .tel-barra button:focus-visible { outline-color: var(--ciruela); }
}
@media (max-width: 400px) {
  .portada { gap: 16px; }
  .bombillas { font-size: 30px; gap: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rejilla .modulo, .tel-icono.sacudir { animation: none; }
  .tel-app.abriendo { animation: aparecer-suave .16s ease; }
  .retro { transform: none; @starting-style { transform: none; } }
  .boton, .barra nav a, .modulo, .tel-ico, .b-atajo, .b-fila { transition: background-color .16s ease; }
  .boton:active:not(:disabled), .barra nav a:active, .barra nav a:hover, .modulo:has(.boton):hover { transform: none; }
}
@keyframes aparecer-suave { from { opacity: 0; } }

/* Pestañas de Notas y Asistencia (como botones) */
.asis-vistas { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 18px; }
.asis-vistas a {
  display: inline-block; padding: 12px 20px; border-radius: 14px; font-weight: 800; text-decoration: none;
  background: #fff; color: var(--ciruela); box-shadow: inset 0 0 0 3px var(--primario), 0 5px 0 var(--sombra-tarjeta);
  transition: transform .15s ease, box-shadow .15s ease;
}
.asis-vistas a:hover { background: var(--superficie-tibia); }
.asis-vistas a:active { transform: translateY(4px); box-shadow: inset 0 0 0 3px var(--primario), 0 1px 0 var(--sombra-tarjeta); }
.asis-vistas a:focus-visible { outline: 4px solid var(--ciruela); outline-offset: 3px; }
.asis-vistas a[aria-current="page"] { background: var(--primario); color: #fff; box-shadow: 0 5px 0 var(--primario-sombra); }

/* ===== Notas configurables ===== */
.rubros-resumen { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 10px; padding: 0; }
.rubros-resumen li { padding: 6px 14px; border-radius: 999px; background: var(--superficie-tibia); border: 2px solid var(--borde-tarjeta); font-size: 18px; font-variant-numeric: tabular-nums; }
.rubros-resumen small { color: var(--texto-suave); }
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin: 16px 0 12px; }
.filtros > div { min-width: 0; flex: 0 1 260px; }
.filtros label { margin-top: 0; }
.filtros select, .config-rubro select, .config-nuevo select, .tabla-items select { width: 100%; min-height: 52px; padding: 8px 10px; border: 3px solid var(--linea-fuerte); border-radius: 10px; background: #fff; font-size: 19px; }
.filtros .boton { margin: 0 0 4px; }
.filtros-quitar { font-weight: 700; margin-bottom: 14px; }
.tabla-scroll .tabla-cal { min-width: 0; }
.tabla-cal .fila-rubros th { font-size: 15px; }
.tabla-cal .grupo-rubro { background: var(--superficie-honda); color: var(--ciruela); border-left: 2px solid #fff; }
.tabla-cal th small { display: block; font-size: 13px; font-weight: 400; color: var(--texto-suave); }
.tabla-cal .col-aporte { background: var(--superficie-tibia); min-width: 70px; }
.tabla-cal tbody th.fija { font-weight: 700; color: var(--texto); font-size: 16px; }
.config-campos { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: flex-start; }
.config-campos > div { flex: 1 1 260px; min-width: 0; }
.config-campos > div.corto { flex: 0 1 200px; }
.config-tipo { display: inline-block; font-family: var(--letra); font-size: 16px; font-weight: 600; color: var(--texto-suave); margin-left: 8px; }
.config-reparto { border: 0; padding: 0; margin: 16px 0 0; }
.config-reparto legend { font-weight: 700; padding: 0; }
.tabla-items { min-width: 980px; font-size: 17px; }
.tabla-items th { font-size: 15px; white-space: nowrap; }
.tabla-items th small { font-weight: 400; color: var(--texto-suave); }
.tabla-items td { padding: 6px 4px; vertical-align: middle; }
.tabla-items input:not([type=checkbox]) { font-size: 18px; padding: 8px; }
.tabla-items .campo-nota { width: 76px; }
.tabla-items input[type=date] { min-width: 150px; }
.tabla-items .col-peso { display: none; }
.tabla-items.con-peso .col-peso { display: table-cell; }
.cuenta-notas { text-align: center; font-weight: 700; color: var(--texto-suave); }
.tabla-rubros { min-width: 640px; }
.tabla-rubros th[scope=row] { font-weight: 700; }
.tabla-rubros th[scope=row] a { font-size: 20px; }
.tabla-rubros tfoot th, .tabla-rubros tfoot td { border-bottom: 0; border-top: 2px solid var(--linea-fuerte); font-size: 20px; }
.tabla-rubros .suma-mal { color: var(--mal); }
.orden { white-space: nowrap; }
.orden-btn { width: 40px; height: 40px; font: inherit; font-size: 20px; font-weight: 800; color: var(--ciruela); background: #fff; border: 2px solid var(--linea-fuerte); border-radius: 10px; cursor: pointer; touch-action: manipulation; }
.orden-btn:disabled { opacity: .35; cursor: default; }
.acciones-fila { white-space: nowrap; }
.acciones-fila a { font-weight: 700; margin-right: 14px; }
.enlace-borrar { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--mal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.semanas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; padding: 0; list-style: none; margin: 8px 0 0; }
.semanas-lista label { margin: 8px 0 2px; font-size: 17px; }
.semanas-lista input { font-size: 19px; padding: 8px; }
.confirmar-lista { margin: 12px 0; padding-left: 22px; }
.confirmar-lista li { margin-bottom: 6px; }
.confirmar-escala { border: 2px solid var(--borde-tarjeta); border-radius: 12px; padding: 4px 16px 14px; margin: 8px 0 0; }
.confirmar-escala legend { font-weight: 700; padding: 0 6px; }
.tabla-desglose .desglose-rubro th, .tabla-desglose .desglose-rubro td { background: var(--superficie-tibia); font-weight: 800; color: var(--ciruela); }
.tabla-desglose .desglose-item th { padding-left: 22px; }
.desglose-nota small { font-weight: 400; color: var(--texto-suave); }

/* ===== Grupos ===== */
.grupos-lista { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.grupo-tarjeta { border: 2px solid var(--borde-tarjeta); border-radius: 18px; padding: 14px 16px; background: var(--superficie-tibia); }
.grupo-renombrar { display: flex; gap: 8px; align-items: center; }
.grupo-renombrar input { font-family: var(--letra-titulo); font-weight: 800; font-size: 21px; padding: 8px 10px; min-width: 0; }
.grupo-renombrar .boton { margin: 0; min-height: 48px; padding: 8px 14px; font-size: 17px; flex: none; }
.grupo-dato { margin: 8px 0 4px; color: var(--texto-suave); font-size: 18px; }
.grupo-miembros { margin: 0 0 8px; padding-left: 22px; }
.grupo-nuevo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; padding-top: 14px; border-top: 2px solid var(--linea); }
.grupo-nuevo > div { flex: 1 1 280px; }
.grupo-nuevo .boton { margin: 0 0 4px; }
.grupo-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 320px); gap: 8px 16px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.grupo-fila .asis-nombre { margin: 0; }
.grupo-fila select { width: 100%; min-height: 52px; padding: 8px 10px; border: 3px solid var(--linea-fuerte); border-radius: 10px; background: #fff; font-size: 19px; }
.desglose-grupo { margin: 0; color: var(--texto-suave); font-size: 18px; }
.tabla-cal .fila-grupo th, .tabla-cal .fila-grupo td { background: var(--ciruela-suave); }
.tabla-cal .fila-grupo th small { color: var(--ciruela); }
.grupo-copiar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--ciruela-suave); }
.grupo-copiar p { flex: 1 1 320px; margin: 0; font-size: 18px; }
.grupo-copiar .boton { margin: 0 0 6px; }
@media (max-width: 560px) { .grupo-fila { grid-template-columns: minmax(0, 1fr); } }

/* ===== Disponibilidad de módulos ===== */
.mod-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 6px 20px; }
.mod-fila label.mostrar { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.mod-fila small { display: block; color: var(--texto-suave); font-weight: 400; font-size: 17px; }
.tabla-acceso { font-size: 17px; }
.tabla-acceso th { white-space: nowrap; font-size: 15px; }
.tabla-acceso tbody th { color: var(--texto); font-size: 17px; white-space: normal; min-width: 170px; }
.tabla-acceso th small { display: block; font-weight: 400; color: var(--texto-suave); font-size: 14px; }
.tabla-acceso select { width: 100%; min-width: 150px; min-height: 46px; padding: 6px 8px; border: 2px solid var(--linea-fuerte); border-radius: 10px; background: #fff; font-size: 16px; }
.tabla-personas { min-width: 1100px; }
.tabla-personas .fija { position: sticky; left: 0; z-index: 1; background: #fff; }
.tabla-personas td.acceso-si { background: var(--bien-fondo); }
.tabla-personas td.acceso-no { background: var(--mal-fondo); }
.mod-avanzado { margin: 14px 0 4px; }
.mod-avanzado summary { cursor: pointer; font-weight: 700; color: var(--enlace); min-height: 44px; display: flex; align-items: center; }

/* ===== Juego serpientes y escaleras ===== */
/* Lo oculto con el atributo hidden no se muestra, aunque su clase le dé display */
.juego [hidden] { display: none !important; }
.contenedor:has(.juego) { max-width: 1680px; }
.juego-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-bottom: 10px; }
.juego-cab h1 { margin: 0; }
.juego-herr { display: flex; flex-wrap: wrap; gap: 10px; }
.juego-herr .boton { margin: 0 0 6px; min-height: 48px; padding: 8px 16px; font-size: 18px; }
.juego-confirmar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; padding: 12px 16px; border-radius: 14px;
  background: var(--mal-fondo); border: 2px solid var(--mal); }
.juego-confirmar p { flex: 1 1 280px; margin: 0; color: var(--mal-texto); }
.juego-confirmar .boton { margin: 0 0 6px; }

/* Pantalla inicial */
.juego-inicio { max-width: 760px; margin: 0 auto 20px; }
.juego-equipos { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 10px; }
.juego-equipo-fila { display: grid; grid-template-columns: 56px minmax(140px, 220px) minmax(0, 1fr); gap: 12px; align-items: center; }
.juego-equipo-fila label { margin: 0; }
.juego-equipo-fila small { font-weight: 400; color: var(--texto-suave); }
.juego-empezar { margin-top: 18px; }
.juego-reglas { margin-top: 18px; }
.juego-reglas summary { cursor: pointer; font-weight: 700; color: var(--enlace); min-height: 44px; display: flex; align-items: center; }
.juego-reglas ol { margin: 6px 0 0; padding-left: 26px; }
.juego-reglas li { margin-bottom: 6px; }

/* Fichas: color + forma blanca, con borde oscuro para verse sobre cualquier casilla */
.ficha { --color: var(--primario); display: inline-grid; place-items: center; border-radius: 50%; background: var(--color);
  border: 3px solid #fff; box-shadow: 0 0 0 2px var(--ciruela), 0 3px 6px rgba(0, 0, 0, .35); }
.ficha svg { width: 66%; height: 66%; fill: #fff; }
.ficha-muestra { width: 48px; height: 48px; flex: none; }

/* Tablero: se adapta a la altura de la pantalla para poder proyectarlo completo */
.juego-partida { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 470px); gap: 20px; align-items: start; }
.tablero-caja { display: flex; justify-content: center; }
.tablero { position: relative; width: min(100%, calc(100svh - 230px)); min-width: 280px; aspect-ratio: 1; container-type: inline-size;
  border: 4px solid var(--ciruela); border-radius: 18px; overflow: hidden; background: var(--superficie-tibia); box-shadow: 0 8px 0 var(--sombra-tarjeta); }
.tablero-casillas { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); }
.casilla { position: relative; background: #FFF6E8; border: 1px solid rgba(166, 124, 82, .35); }
.casilla.par { background: #FFE0B0; }
.casilla.salida { background: var(--bien-fondo); }
.casilla.meta { background: var(--sol); }
.tablero-numeros { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); pointer-events: none; z-index: 2; }
.casilla-capa { position: relative; }
.casilla-num { text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff; }
.casilla-num { position: absolute; top: 3%; left: 6%; font-family: var(--letra-titulo); font-weight: 900; font-size: 14px; font-size: 2.1cqw;
  color: var(--ciruela); line-height: 1; font-variant-numeric: tabular-nums; }
.casilla-rotulo { position: absolute; bottom: 6%; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 12px; font-size: 1.6cqw; color: var(--ciruela); }
.casilla-salto { position: absolute; bottom: 5%; right: 5%; z-index: 2; padding: 0 .3em; border-radius: 6px; font-weight: 800; font-size: 11px; font-size: 1.55cqw;
  line-height: 1.35; color: #fff; font-variant-numeric: tabular-nums; }
.casilla-salto.escalera { background: var(--bien); }
.casilla-salto.serpiente { background: var(--mal); }
.tablero-dibujo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.escalera .borde { stroke: #fff; stroke-width: 1.5; fill: none; stroke-linecap: round; }
.escalera .riel { stroke: var(--cafe); stroke-width: .75; fill: none; stroke-linecap: round; }
.escalera .peldano { stroke: #C9951A; stroke-width: .6; fill: none; stroke-linecap: round; }
.serpiente .borde { stroke: #0B3D22; stroke-width: 3.2; fill: none; stroke-linecap: round; }
.serpiente .cuerpo { stroke: #2E9E5B; stroke-width: 2.2; fill: none; stroke-linecap: round; }
.serpiente .manchas { stroke: #BFF0CC; stroke-width: .8; fill: none; stroke-linecap: round; stroke-dasharray: .4 2.6; }
.serpiente .cabeza { fill: #2E9E5B; stroke: #0B3D22; stroke-width: .6; }
.serpiente .ojo { fill: #fff; }
.serpiente .pupila { fill: #111; }
.serpiente .lengua { stroke: var(--mal); stroke-width: .45; fill: none; stroke-linecap: round; }
.tablero-fichas { position: absolute; inset: 0; pointer-events: none; }
.ficha-tablero { position: absolute; width: 7%; height: 7%; translate: -50% -50%; z-index: 3;
  transition: left .2s var(--salida), top .2s var(--salida), width .2s var(--salida), height .2s var(--salida); }
.ficha-tablero.apretada { border-width: 2px; }
.ficha-tablero.activa { z-index: 4; box-shadow: 0 0 0 2px var(--ciruela), 0 0 0 5px var(--sol), 0 3px 6px rgba(0, 0, 0, .35); }
.ficha-tablero.saltando { scale: 1.12; }
.ficha-tablero.deslizando { transition: left .8s cubic-bezier(.77, 0, .175, 1), top .8s cubic-bezier(.77, 0, .175, 1); }

/* Marcador */
.juego-lado { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.juego-marcador ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Con muchas personas, cada fila del marcador se vuelve más compacta (una sola columna: los nombres son largos) */
.juego-marcador h2 { font-size: 22px; margin: 0 0 8px; }
.juego-marcador ol:has(> li:nth-child(4)) { gap: 6px; }
.juego-marcador ol:has(> li:nth-child(4)) .marcador-equipo { padding: 6px 12px; }
.juego-marcador ol:has(> li:nth-child(4)) .marcador-equipo .ficha { width: 36px; height: 36px; }
.juego-marcador ol:has(> li:nth-child(4)) .marcador-nombre { font-size: 18px; }
.juego-marcador ol:has(> li:nth-child(4)) .marcador-casilla strong { font-size: 24px; }
.marcador-equipo { --color: var(--primario); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ficha nombre casilla" "ficha turno casilla";
  align-items: center; column-gap: 12px; padding: 8px 14px; border-radius: 16px; background: #fff; border: 3px solid transparent; box-shadow: 0 4px 0 var(--sombra-tarjeta); }
.marcador-equipo .ficha { grid-area: ficha; --color: inherit; background: var(--color); width: 44px; height: 44px; }
.marcador-nombre { grid-area: nombre; font-weight: 800; font-size: 20px; overflow-wrap: anywhere; line-height: 1.2; }
.marcador-casilla { grid-area: casilla; text-align: right; line-height: 1.1; }
.marcador-casilla small { display: block; font-size: 15px; color: var(--texto-suave); }
.marcador-casilla strong { font-family: var(--letra-titulo); font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; }
.marcador-turno { grid-area: turno; font-size: 15px; font-weight: 800; color: var(--ciruela); }
.marcador-equipo.turno { border-color: var(--ciruela); background: var(--superficie-tibia); box-shadow: 0 4px 0 var(--ciruela); }

/* Turno, dado y pregunta */
.juego-turno { margin: 0; padding: 18px 20px; }
.juego-turno-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.juego-turno h2 { margin: 0; font-size: 26px; min-width: 0; overflow-wrap: anywhere; }
.juego-turno h2 span { color: var(--ciruela); text-decoration: underline; text-decoration-color: var(--sol); text-decoration-thickness: 5px; text-underline-offset: 6px; }
.juego-tirar { margin: 4px 0 6px; font-size: 24px; min-height: 64px; }
.dado { width: 68px; height: 68px; flex: none; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 10px; gap: 2px; border-radius: 16px;
  background: #fff; border: 3px solid var(--ciruela); box-shadow: 0 5px 0 var(--ciruela); }
.dado span { border-radius: 50%; background: var(--ciruela); visibility: hidden; margin: 2px; }
.dado.apagado { opacity: .45; }
.dado.rodando { animation: dado-rueda .14s linear infinite; }
@keyframes dado-rueda { 50% { rotate: 12deg; scale: 1.06; } }
.dado[data-valor="1"] span:nth-child(5),
.dado[data-valor="2"] span:nth-child(1), .dado[data-valor="2"] span:nth-child(9),
.dado[data-valor="3"] span:nth-child(1), .dado[data-valor="3"] span:nth-child(5), .dado[data-valor="3"] span:nth-child(9),
.dado[data-valor="4"] span:nth-child(1), .dado[data-valor="4"] span:nth-child(3), .dado[data-valor="4"] span:nth-child(7), .dado[data-valor="4"] span:nth-child(9),
.dado[data-valor="5"] span:nth-child(1), .dado[data-valor="5"] span:nth-child(3), .dado[data-valor="5"] span:nth-child(5), .dado[data-valor="5"] span:nth-child(7), .dado[data-valor="5"] span:nth-child(9),
.dado[data-valor="6"] span:nth-child(1), .dado[data-valor="6"] span:nth-child(3), .dado[data-valor="6"] span:nth-child(4), .dado[data-valor="6"] span:nth-child(6), .dado[data-valor="6"] span:nth-child(7), .dado[data-valor="6"] span:nth-child(9) { visibility: visible; }
.juego-pregunta { margin-top: 14px; }
.juego-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 6px; font-size: 17px; color: var(--texto-suave); }
.juego-tema { padding: 2px 12px; border-radius: 999px; background: var(--ciruela); color: #fff; font-weight: 700; font-size: 16px; }
.juego-texto { font-family: var(--letra); font-size: 24px; font-weight: 700; line-height: 1.35; margin: 0 0 12px; }
.juego-texto:focus { outline: none; }
.juego-texto:focus-visible { outline: 3px solid var(--ciruela); outline-offset: 4px; }
.juego-opciones { display: grid; gap: 10px; }
.juego-opcion { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; text-align: left; font: inherit; font-size: 20px; font-weight: 600;
  color: var(--texto); background: #fff; border: 3px solid var(--linea-fuerte); border-radius: 14px; cursor: pointer; touch-action: manipulation;
  transition: background-color .16s ease, border-color .16s ease, transform .16s var(--salida); }
.juego-opcion:active:not(:disabled) { transform: scale(.98); }
.juego-letra { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--superficie-honda); color: var(--ciruela);
  font-family: var(--letra-titulo); font-weight: 900; }
.juego-opcion[aria-pressed="true"] { border-color: var(--ciruela); background: var(--ciruela-suave); box-shadow: inset 0 0 0 2px var(--ciruela); }
.juego-opcion[aria-pressed="true"] .juego-letra { background: var(--ciruela); color: #fff; }
.juego-opcion:disabled { cursor: default; color: var(--texto-suave); }
.juego-opcion.bien { border-color: var(--bien); background: var(--bien-fondo); color: var(--bien-texto); }
.juego-opcion.bien .juego-letra { background: var(--bien); color: #fff; }
.juego-opcion.mal { border-color: var(--mal); background: var(--mal-fondo); color: var(--mal-texto); }
.juego-opcion.mal .juego-letra { background: var(--mal); color: #fff; }
.juego-seguro { display: flex; align-items: center; gap: 14px; width: 100%; margin: 14px 0 0; min-height: 60px; padding: 10px 14px; text-align: left; font: inherit;
  font-size: 20px; font-weight: 800; color: var(--ciruela); background: var(--superficie-tibia); border: 3px dashed var(--sol-borde); border-radius: 14px; cursor: pointer; touch-action: manipulation; }
.juego-seguro small { display: block; font-size: 16px; font-weight: 600; color: var(--texto-suave); }
.juego-seguro-caja { flex: none; width: 34px; height: 34px; border-radius: 8px; border: 3px solid var(--ciruela); background: #fff; display: grid; place-items: center; }
.juego-seguro[aria-pressed="true"] { border-style: solid; border-color: var(--ciruela); background: var(--sol); }
.juego-seguro[aria-pressed="true"] .juego-seguro-caja { background: var(--ciruela); }
.juego-seguro[aria-pressed="true"] .juego-seguro-caja::after { content: ""; width: 10px; height: 18px; margin-top: -4px; border: solid #fff; border-width: 0 4px 4px 0; rotate: 45deg; }
.juego-seguro[aria-pressed="true"] small { color: var(--ciruela); }
.juego-seguro:disabled { cursor: default; opacity: .7; }
.juego-resultado .retro { margin-top: 14px; font-size: 21px; }
.juego-explica { margin: 10px 0 0; font-size: 19px; }
.juego-movida { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 21px; font-weight: 800; color: var(--ciruela); background: var(--superficie-tibia); }
.juego-movida.escalera { color: #fff; background: var(--bien); }
.juego-movida.serpiente { color: #fff; background: var(--mal); }
.juego-aviso { margin: 0; min-height: 1.5em; padding: 10px 14px; border-radius: 12px; background: var(--ciruela); color: #fff; font-weight: 700; font-size: 19px; }
.juego-aviso:empty { visibility: hidden; }

/* Ganador */
.juego-ganador { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 20px; background: rgba(45, 27, 61, .72); }
.juego-ganador[hidden] { display: none; }
.juego-ganador-caja { max-width: 560px; width: 100%; text-align: center; padding: 32px 26px; border-radius: 30px; background: #fff; border: 4px solid var(--sol);
  box-shadow: 0 10px 0 var(--sol-borde); animation: ganador-entra .35s var(--salida); }
@keyframes ganador-entra { from { opacity: 0; scale: .92; } }
.juego-ganador-caja h2 { font-size: 40px; margin: 12px 0 8px; }
.juego-ganador-caja p { font-size: 21px; }
.juego-ganador-ficha { width: 110px; height: 110px; }

/* Pantalla completa (proyector) */
.juego:fullscreen { background: var(--fondo); padding: 16px 24px; overflow: auto; }
.juego:fullscreen .tablero { width: min(100%, calc(100svh - 110px)); }

@media (hover: hover) and (pointer: fine) {
  .juego-opcion:hover:not(:disabled) { border-color: var(--ciruela); }
  .juego-seguro:hover:not(:disabled) { border-style: solid; }
}
@media (max-width: 1000px) {
  .juego-partida { grid-template-columns: minmax(0, 1fr); }
  .tablero { width: min(100%, 720px); }
  .juego:fullscreen .tablero { width: min(100%, 720px); }
}
@media (max-width: 560px) {
  .juego-equipo-fila { grid-template-columns: 48px minmax(0, 1fr); }
  .juego-equipo-fila input { grid-column: 1 / -1; }
  .tablero { min-width: 0; border-width: 3px; border-radius: 12px; }
  .ficha-tablero { width: 8%; height: 8%; }
  .juego-texto { font-size: 21px; }
  .juego-opcion { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ficha-tablero, .ficha-tablero.deslizando { transition: none; }
  .dado.rodando, .juego-ganador-caja { animation: none; }
}

/* Juego en línea: sala de espera, turno de cada persona y su propia ficha */
.sala-fila { display: flex; align-items: center; gap: 14px; padding: 6px 0; font-size: 20px; font-weight: 700; }
.sala-fila .sala-nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#sala-texto:focus { outline: none; }
.juego-espera { margin: 4px 0 6px; padding: 12px 14px; border-radius: 12px; background: var(--ciruela-suave); color: var(--ciruela); font-size: 19px; font-weight: 700; }
.marcador-equipo.yo .marcador-nombre { text-decoration: underline; text-decoration-color: var(--sol); text-decoration-thickness: 4px; text-underline-offset: 4px; }
.marcador-equipo { position: relative; }
.marcador-quitar { grid-column: 2; font-size: 15px; justify-self: start; }
.ficha-tablero.mia { box-shadow: 0 0 0 2px var(--ciruela), 0 0 0 4px #fff, 0 3px 6px rgba(0, 0, 0, .35); }
.ficha-tablero.mia.activa { box-shadow: 0 0 0 2px var(--ciruela), 0 0 0 5px var(--sol), 0 3px 6px rgba(0, 0, 0, .35); }
.juego-ganador-caja .boton + .boton { margin-top: 10px; }

/* ===== «Adivina quién» (Prueba 2) ===== */
.contenedor:has(.adv) { max-width: 1440px; }
.adv [hidden] { display: none !important; }
.adv-sobre { display: inline-block; margin: 0 0 6px; padding: 2px 14px; border-radius: 999px; background: var(--sol); color: var(--ciruela); font-family: var(--letra-titulo); font-size: 18px; font-weight: 900; }
.adv-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 20px; margin-bottom: 14px; }
.adv-cab h1 { margin: 0; }

/* Conexión de la pareja: punto y texto, nunca solo color */
.adv-presencia { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 8px 18px; border-radius: 999px; background: #fff; border: 3px solid var(--linea-fuerte);
  font-size: 19px; font-weight: 800; color: var(--texto-suave); }
.adv-presencia.si { border-color: var(--bien); color: var(--bien-texto); }
.adv-presencia.no { border-color: var(--mal); color: var(--mal-texto); }
.adv-punto { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--texto-suave); }
.si > .adv-punto { background: var(--bien); }
.no > .adv-punto { background: var(--mal); }
.nunca > .adv-punto { background: transparent; border: 3px solid var(--texto-suave); }
.adv-conexion { margin: 0 0 14px; padding: 12px 18px; border-radius: 14px; font-weight: 700; font-size: 20px;
  transition: opacity .2s var(--salida), transform .2s var(--salida); @starting-style { opacity: 0; transform: translateY(-6px); } }
.adv-conexion.no { background: var(--mal-fondo); color: var(--mal-texto); border: 2px solid var(--mal); }
.adv-conexion.si { background: var(--bien-fondo); color: var(--bien-texto); border: 2px solid var(--bien); }

/* Sala de espera */
.adv-espera { max-width: 760px; margin: 10px auto 20px; text-align: center; }
.adv-espera h2 { font-size: 30px; }
.adv-espera h2:focus { outline: none; }
.adv-espera-ico { display: inline-grid; place-items: center; width: 96px; height: 96px; margin-bottom: 10px; border-radius: 50%; background: var(--ciruela-suave); color: var(--ciruela); font-size: 48px;
  animation: adv-respira 2.4s ease-in-out infinite; }
@keyframes adv-respira { 50% { transform: scale(1.06); } }
.adv-espera-nota { color: var(--texto-suave); font-size: 18px; margin-bottom: 0; }
.adv-reglas { margin: 22px 0 0; }
.adv-reglas summary { font-size: 22px; }

/* Turno y personaje secreto */
.adv-franja { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.adv-turno { flex: 1 1 420px; display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 14px 22px; border-radius: 24px;
  font-family: var(--letra-titulo); font-size: 26px; font-weight: 900; line-height: 1.25; color: var(--ciruela); background: #fff; border: 3px dashed var(--linea-fuerte); }
.adv-turno p { margin: 0; text-wrap: balance; }
.adv-turno.mio { background: var(--sol); border: 3px solid var(--sol-borde); box-shadow: 0 6px 0 var(--sol-borde); }
.adv-turno.fin { background: var(--ciruela); color: #fff; border: 3px solid var(--ciruela); }
.adv-turno-ico { flex: none; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; font-size: 30px; background: var(--ciruela-suave); color: var(--ciruela); }
.adv-turno.mio .adv-turno-ico { background: var(--ciruela); color: var(--sol); }
.adv-turno.fin .adv-turno-ico { background: var(--sol); color: var(--ciruela); }
.adv-secreto { flex: 0 1 340px; padding: 12px 20px 14px; border-radius: 24px; background: var(--ciruela); color: #fff; box-shadow: 0 6px 0 #130A1C; }
.adv-secreto-tit { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 17px; font-weight: 800; color: var(--sol); }
.adv-secreto-nota { margin: 8px 0 0; font-size: 15px; color: var(--ciruela-suave); }
.adv-secreto .adv-mini strong { color: #fff; }

/* Ícono de cada personaje: fondo de su color; los de «varios colores» llevan un anillo de cuatro colores */
.adv-ico { flex: none; display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 22%; background: var(--c); color: #fff; }
.adv-ico .ico { width: 1em; height: 1em; }
.multi .adv-ico { border: 4px solid transparent;
  background: linear-gradient(var(--c), var(--c)) padding-box, conic-gradient(#EA4335 0 25%, #FBBC04 0 50%, #34A853 0 75%, #4285F4 0) border-box; }
.adv-mini { display: flex; align-items: center; gap: 14px; font-size: 30px; }
.adv-mini > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.adv-mini strong { font-family: var(--letra-titulo); font-size: 24px; font-weight: 900; line-height: 1.15; color: var(--ciruela); }
.adv-mini small { font-size: 16px; color: var(--texto-suave); }

/* Tablero y barra lateral */
.adv-area { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); gap: 24px; align-items: start; }
.adv-lado { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.adv-lado .tarjeta { margin: 0; }
.adv-tablero-caja { container-type: inline-size; background: var(--superficie); border: 3px solid var(--borde-tarjeta); border-radius: 26px; padding: 18px 20px 22px; box-shadow: 0 8px 0 var(--sombra-tarjeta); }
.adv-tablero-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.adv-tablero-cab h2 { margin: 0; }
.adv-contador { margin: 0; font-size: 20px; font-weight: 800; color: var(--ciruela); font-variant-numeric: tabular-nums; }
.adv-tablero-ayuda { margin: 4px 0 14px; color: var(--texto-suave); font-size: 18px; }
.adv-tablero { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@container (min-width: 780px) { .adv-tablero { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@container (max-width: 480px) { .adv-tablero { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
@container (max-width: 340px) { .adv-tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adv-tablero li { display: flex; }
.adv-carta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-height: 150px; padding: 14px 6px 10px;
  font: inherit; font-size: 34px; color: var(--texto); background: #fff; border: 3px solid var(--linea); border-radius: 18px; box-shadow: 0 4px 0 var(--linea);
  cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: transform .16s var(--salida), border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.adv-carta:active:not([aria-disabled="true"]) { transform: scale(.97); }
.adv-carta:focus-visible { outline: 4px solid var(--ciruela); outline-offset: 3px; border-radius: 18px; }
.adv-nombre { font-size: 18px; font-weight: 800; line-height: 1.2; text-align: center; overflow-wrap: anywhere; hyphens: auto; transition: opacity .16s ease; }
.adv-carta .adv-ico { transition: opacity .16s ease, filter .16s ease; }
.adv-x { position: absolute; top: 6px; left: 50%; translate: -50% 0; display: grid; place-items: center; width: 82px; height: 82px; font-size: 72px; color: var(--mal);
  opacity: 0; scale: .8; pointer-events: none; transition: opacity .16s ease, scale .2s var(--salida); }
.adv-x .ico { stroke-width: 3.2; }
.adv-etiqueta { font-size: 15px; font-weight: 800; line-height: 1.2; }
.adv-etiqueta:empty { display: none; }
/* Descartado: apagado, con una X roja y la palabra «Descartado» */
.adv-carta.fuera { background: #F4EEE6; border-color: var(--linea); box-shadow: none; }
.adv-carta.fuera .adv-ico { opacity: .35; filter: grayscale(.7); }
.adv-carta.fuera .adv-nombre { opacity: .55; text-decoration: line-through; text-decoration-thickness: 2px; }
.adv-carta.fuera .adv-x { opacity: 1; scale: 1; }
.adv-carta.fuera .adv-etiqueta { color: var(--mal-texto); }
/* Escogiendo a quién adivinar */
.adv-tablero.adivinando .adv-carta { border-style: dashed; border-color: var(--ciruela); }
.adv-tablero.adivinando .adv-carta.candidato { border-style: solid; background: var(--sol); box-shadow: 0 4px 0 var(--ciruela); }
.adv-tablero.adivinando .adv-carta.candidato .adv-ico, .adv-tablero.adivinando .adv-carta.candidato .adv-nombre { opacity: 1; filter: none; }
/* Al terminar: el personaje que tenía la pareja */
.adv-carta.era { border: 4px solid var(--bien); background: var(--bien-fondo); box-shadow: 0 4px 0 var(--bien-sombra); }
.adv-carta.era .adv-ico, .adv-carta.era .adv-nombre { opacity: 1; filter: none; text-decoration: none; }
.adv-carta.era .adv-x { opacity: 0; }
.adv-carta.era .adv-etiqueta { color: var(--bien-texto); }
.adv-carta[aria-disabled="true"] { cursor: default; }
.adv-modo { position: sticky; top: 8px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 14px; padding: 14px 18px;
  border-radius: 18px; background: var(--ciruela); color: #fff; box-shadow: 0 6px 0 #130A1C; }
.adv-modo p { flex: 1 1 260px; margin: 0; font-size: 21px; font-weight: 800; }
.adv-modo-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.adv-modo .boton { margin: 0 0 6px; min-height: 52px; padding: 10px 18px; font-size: 19px; }
.adv-modo .boton:not(.secundario) { background: var(--sol); color: var(--ciruela); box-shadow: 0 6px 0 var(--sol-borde); }
.adv-modo :focus-visible { outline-color: #fff; }

/* Última jugada */
.adv-ultima.mia { border-color: var(--ciruela); box-shadow: 0 8px 0 var(--ciruela); }
.adv-ultima-quien { margin: 0; font-size: 17px; font-weight: 800; color: var(--texto-suave); }
.adv-ultima-preg { margin: 4px 0 10px; font-family: var(--letra-titulo); font-size: 24px; font-weight: 900; line-height: 1.25; color: var(--ciruela); }
.adv-ultima-resp { margin: 0; font-size: 22px; font-weight: 700; }
.adv-ultima-resp .adv-resp { font-size: 26px; padding: 2px 18px; }
.adv-ultima-ayuda { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--superficie-tibia); font-size: 18px; font-weight: 600; }
.adv-resp { display: inline-block; padding: 0 12px; border-radius: 999px; font-weight: 900; white-space: nowrap; }
.adv-resp.si { background: var(--bien); color: #fff; }
.adv-resp.no { background: var(--ciruela); color: #fff; }

/* Preguntas */
.adv-jugar h2 { margin-bottom: 2px; }
.adv-jugar-ayuda { margin: 0 0 4px; font-size: 17px; color: var(--texto-suave); }
.adv-grupo { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 8px; }
.adv-grupo h3 { grid-column: 1 / -1; margin: 14px 0 0; font-size: 18px; color: var(--cafe); }
.adv-pregunta { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; column-gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px;
  text-align: left; font: inherit; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--texto); background: #fff;
  border: 3px solid var(--linea-fuerte); border-radius: 14px; cursor: pointer; touch-action: manipulation;
  transition: background-color .16s ease, border-color .16s ease, transform .16s var(--salida); }
.adv-pregunta::before { content: ""; grid-row: 1 / span 2; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--linea-fuerte); background: #fff; box-sizing: border-box; }
.adv-pregunta:active:not(:disabled) { transform: scale(.98); }
.adv-pregunta[aria-pressed="true"] { border-color: var(--ciruela); background: var(--ciruela-suave); box-shadow: inset 0 0 0 2px var(--ciruela); }
.adv-pregunta[aria-pressed="true"]::before { border-color: var(--ciruela); background: radial-gradient(var(--ciruela) 0 5px, #fff 6px); }
.adv-pregunta:disabled { cursor: default; color: var(--texto-suave); background: #FAF5EE; border-color: var(--linea); }
.adv-pregunta:disabled::before { border-color: var(--linea); }
.adv-ya { grid-column: 2; font-size: 15px; font-weight: 800; color: var(--cafe); }
.adv-ya:empty { display: none; }
#btn-preguntar { margin-top: 16px; }
.adv-o { margin: 18px 0 0; text-align: center; font-size: 18px; font-weight: 800; color: var(--texto-suave); }
#btn-adivinar { margin-top: 8px; }
#btn-adivinar + .adv-jugar-ayuda { margin: 14px 0 0; text-align: center; }
#btn-adivinar .ico { margin-right: 4px; }

/* Historial */
.adv-historial ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.adv-mov { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; background: var(--superficie-tibia); font-size: 18px; line-height: 1.3; }
.adv-mov.suya { background: var(--ciruela-suave); }
.adv-mov-quien { flex-basis: 100%; font-size: 15px; font-weight: 800; color: var(--ciruela); }
.adv-mov-txt { flex: 1 1 160px; min-width: 0; font-weight: 600; }
.adv-vacio { color: var(--texto-suave); margin: 0; }

/* Fin de la partida */
.adv-fin { text-align: center; border-color: var(--sol); box-shadow: 0 8px 0 var(--sol-borde); }
.adv-fin h2 { font-size: 32px; margin: 8px 0 4px; }
.adv-fin h2:focus { outline: none; }
.adv-fin-ico { display: inline-grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; background: var(--superficie-honda); color: var(--cafe); font-size: 42px; }
.adv-fin.gane .adv-fin-ico { background: var(--sol); color: var(--ciruela); animation: adv-gana .5s var(--salida); }
@keyframes adv-gana { from { transform: scale(.85) rotate(-8deg); opacity: .4; } }
.adv-fin p { font-size: 20px; }
.adv-fin-cartas { display: grid; gap: 10px; margin: 16px 0 4px; text-align: left; }
.adv-fin-cartas .adv-mini { padding: 10px 14px; border-radius: 14px; background: var(--superficie-tibia); }

/* Inicio del estudiante */
.adv-modulo .icono { color: var(--ciruela); }

/* Panel del instructor */
.adv-intro { color: var(--texto-suave); margin: 0 0 18px; }
.adv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: 999px; font-size: 16px; font-weight: 800; white-space: nowrap; }
.adv-pill.espera { background: var(--superficie-honda); color: var(--cafe); }
.adv-pill.jugando { background: var(--sol); color: var(--ciruela); }
.adv-pill.terminada { background: var(--ciruela); color: #fff; }
.adv-pill.gano { background: var(--bien); color: #fff; }
.adv-en { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--texto-suave); white-space: nowrap; }
.adv-en .adv-punto { width: 10px; height: 10px; }
.adv-en.si { color: var(--bien-texto); }
.adv-en.no { color: var(--mal-texto); }
.adv-en.nunca .adv-punto { border-width: 2px; }
.adv-jugador { font-size: 19px; }
.adv-tabla td { vertical-align: middle; }
.adv-tabla small { font-size: 16px; color: var(--texto-suave); }
.adv-cuenta strong { font-size: 20px; }
.adv-acciones { gap: 8px; }
.adv-acciones .boton { margin: 0 0 6px; min-height: 46px; padding: 8px 14px; font-size: 17px; }
.tabla-scroll table.adv-resultados { min-width: 1040px; }
.adv-resultados .adv-res-cab th { background: var(--ciruela-suave); color: var(--ciruela); font-size: 18px; padding: 10px 8px; }
.adv-resultados .adv-res-cab small { font-size: 15px; font-weight: 400; color: var(--ciruela); }
.adv-resultados td small { font-size: 14px; color: var(--texto-suave); }
.adv-resultados .adv-pill .ico { font-size: 16px; }
.adv-sugerencia { font-family: var(--letra-titulo); font-size: 24px; font-weight: 900; color: var(--ciruela); }
td.adv-error { color: var(--mal-texto); font-weight: 700; }
.adv-sub { font-size: 21px; margin: 20px 0 6px; }
.adv-grupos { margin: 0 0 4px; padding-left: 22px; }
.adv-grupos small { color: var(--texto-suave); }
.adv-manual { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; }
.adv-manual > div { flex: 1 1 240px; }
.adv-manual select { width: 100%; min-height: 52px; padding: 8px 10px; border: 3px solid var(--linea-fuerte); border-radius: 10px; background: #fff; font-size: 19px; }
.adv-manual .boton { margin: 0 0 4px; }
.adv-referencia summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-family: var(--letra-titulo); font-size: 24px; font-weight: 800; color: var(--ciruela); }
.tabla-scroll table.adv-tabla-ref { min-width: 1500px; font-size: 15px; }
.adv-tabla-ref thead th { font-size: 13px; line-height: 1.25; min-width: 88px; vertical-align: bottom; }
.adv-tabla-ref tbody th { position: sticky; left: 0; z-index: 1; background: #fff; white-space: nowrap; font-size: 16px; }
.adv-tabla-ref td { text-align: center; color: var(--texto-suave); }
.adv-tabla-ref td.si { background: var(--bien-fondo); color: var(--bien-texto); font-weight: 800; }

@media (hover: hover) and (pointer: fine) {
  .adv-carta:hover:not([aria-disabled="true"]):not(.fuera) { border-color: var(--primario); }
  .adv-carta.fuera:hover:not([aria-disabled="true"]) { border-color: var(--linea-fuerte); }
  .adv-pregunta:hover:not(:disabled) { border-color: var(--ciruela); }
}
/* Tableta y pantallas angostas: preguntas arriba y tablero abajo */
@media (max-width: 1100px) {
  .adv-area { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .adv-lado { display: contents; }
  .adv-fin { order: 1; }
  .adv-ultima { order: 2; }
  .adv-jugar { order: 3; }
  .adv-tablero-caja { order: 4; }
  .adv-historial { order: 5; }
  .adv-secreto { flex-grow: 1; }
}
@media (max-width: 600px) {
  .adv-turno { font-size: 21px; padding: 12px 16px; min-height: 0; }
  .adv-turno-ico { width: 46px; height: 46px; font-size: 24px; }
  .adv-tablero-caja { padding: 14px 12px 16px; border-radius: 20px; }
  .adv-carta { min-height: 124px; font-size: 28px; padding: 10px 4px 8px; }
  .adv-nombre { font-size: 16px; }
  .adv-x { width: 64px; height: 64px; font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .adv-espera-ico, .adv-fin.gane .adv-fin-ico { animation: none; }
  .adv-carta, .adv-pregunta { transition: background-color .16s ease, border-color .16s ease; }
  .adv-carta:active:not([aria-disabled="true"]), .adv-pregunta:active:not(:disabled) { transform: none; }
  .adv-x { transition: opacity .16s ease; scale: 1; }
  .adv-conexion { transform: none; @starting-style { transform: none; } }
}