/* cruci · la hoja de estilos.
 *
 * El lenguaje de las apps de duortizz: superficies en capas en vez de líneas
 * (--hundido < --fondo < --superficie < --elevada), un único acento, Geist en
 * 500 y 600 con la jerarquía por tamaño y por el paso de gris a blanco, radios
 * sobrios y sin sombras de adorno. Lo que se mueve, con muelle.
 *
 * Las casillas son fichas: un degradado de dos paradas (--ficha-1 → --ficha-2;
 * con brillo en los temas de material), su canto (--canto) y su letra (--letra).
 * La palabra activa se tiñe de azafrán por encima del material y la casilla
 * activa es azafrán entera. El teclado usa las mismas fichas.
 *
 * El acento es siempre el azafrán de la marca (#f2b33d). Temas (data-tema en
 * <html> y en las muestras de Tu perfil, donde se eligen): Oscuro (por defecto,
 * fichas mates color hueso), Claro, Satinado (grafito con brillo de raso) y Plata
 * (fichas cromadas sobre gris perla). --lienzo-1/2 y --marca-* sirven también
 * para la tarjeta de compartir (js/compartir.mjs).
 *
 * Primero el móvil (360–430 px); desde 900 px, el escritorio. */

@font-face { font-family: 'Geist'; src: url('/fuentes/Geist-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fuentes/Geist-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* ================================================================ temas */
/* Oscuro (por defecto): la base de la marca (#101318, texto hueso #f3f1ec) y
   fichas mates color hueso con canto, como teclas; la activa, de azafrán. */
:root, [data-tema='oscuro'] {
  color-scheme: dark;
  --hundido: #0a0c10;
  --fondo: #101318;
  --superficie: #171a21;
  --elevada: #1f232b;
  --borde: #2b2f38;
  --fondo-img: none;
  --texto: #f3f1ec;
  --texto-2: #c3c0b9;
  --texto-3: #9e9b94;
  --acento: #f2b33d;
  --acento-texto: #f2b33d;
  --sobre-acento: #1b1304;
  --boton-2: #262a33;
  --sobre-boton-2: #f3f1ec;
  --bien: #6fcf97;
  --mal: #f28a83;
  --ficha-1: #f1ede6;
  --ficha-2: #e4dfd5;
  --ficha-borde: transparent;
  --ficha-luz: rgb(255 255 255 / 0.7);
  --ficha-canto: #a9a294;
  --canto: 3px;
  --letra: #101318;
  --letra-2: #6d685f;
  --letra-bien: #1d6b43;
  --letra-mal: #b3261e;
  --tinte-palabra: rgb(242 179 61 / 0.3);
  --velo: rgb(5 6 9 / 0.68);
  --lienzo-1: #161a22;
  --lienzo-2: #0b0d11;
  --marca-limpia: #6fcf97;
  --marca-comprobada: #f2b33d;
  --marca-desvelada: #f28a83;
}
[data-tema='claro'] {
  color-scheme: light;
  --hundido: #e2e5ea;
  --fondo: #eef0f3;
  --superficie: #f8f9fa;
  --elevada: #ffffff;
  --borde: #d8dce2;
  --fondo-img: none;
  --texto: #101318;
  --texto-2: #3a404b;
  --texto-3: #575d68;
  --acento: #f2b33d;
  --acento-texto: #865800;
  --sobre-acento: #1b1304;
  --boton-2: #dde1e7;
  --sobre-boton-2: #101318;
  --bien: #1b7442;
  --mal: #c0262d;
  --ficha-1: #ffffff;
  --ficha-2: #fafbfc;
  --ficha-borde: #d5d9e0;
  --ficha-luz: transparent;
  --ficha-canto: #c2c7cf;
  --canto: 2px;
  --letra: #101318;
  --letra-2: #575d68;
  --letra-bien: #1b7442;
  --letra-mal: #c0262d;
  --tinte-palabra: rgb(242 179 61 / 0.2);
  --velo: rgb(16 19 24 / 0.42);
  --lienzo-1: #f8f9fa;
  --lienzo-2: #e5e8ed;
  --marca-limpia: #2e9a5c;
  --marca-comprobada: #f2b33d;
  --marca-desvelada: #d9443b;
}
/* Satinado: grafito cálido con un brillo de raso arriba; fichas como teclas satinadas. */
[data-tema='satinado'] {
  color-scheme: dark;
  --hundido: #0c0c0e;
  --fondo: #131315;
  --superficie: #1b1b1e;
  --elevada: #242428;
  --borde: #303035;
  --fondo-img: radial-gradient(120% 70% at 50% -12%, rgb(255 244 222 / 0.07), transparent 62%);
  --texto: #f3f1ec;
  --texto-2: #c4beb3;
  --texto-3: #a39d93;
  --acento: #f2b33d;
  --acento-texto: #f2b33d;
  --sobre-acento: #1b1304;
  --boton-2: #2c2c31;
  --sobre-boton-2: #f3f1ec;
  --bien: #8fd0a6;
  --mal: #f0958c;
  --ficha-1: #36363c;
  --ficha-2: #1f1f23;
  --ficha-borde: rgb(255 255 255 / 0.05);
  --ficha-luz: rgb(255 248 235 / 0.15);
  --ficha-canto: #050506;
  --canto: 2px;
  --letra: #f3f1ec;
  --letra-2: #a39d93;
  --letra-bien: #8fd0a6;
  --letra-mal: #f0958c;
  --tinte-palabra: rgb(242 179 61 / 0.16);
  --velo: rgb(6 6 7 / 0.7);
  --lienzo-1: #232327;
  --lienzo-2: #0e0e10;
  --marca-limpia: #8fd0a6;
  --marca-comprobada: #f2b33d;
  --marca-desvelada: #f0958c;
}
/* Plata: gris perla con un cromado sutil; fichas de metal pulido. */
[data-tema='plata'] {
  color-scheme: light;
  --hundido: #d3d8de;
  --fondo: #e3e7eb;
  --superficie: #eef1f4;
  --elevada: #fafbfc;
  --borde: #cbd1d9;
  --fondo-img: linear-gradient(165deg, #edf0f3 0%, #dfe3e8 48%, #e8ebee 100%);
  --texto: #12161c;
  --texto-2: #36404d;
  --texto-3: #535d6a;
  --acento: #f2b33d;
  --acento-texto: #7f5300;
  --sobre-acento: #1b1304;
  --boton-2: #d5dae1;
  --sobre-boton-2: #12161c;
  --bien: #1b7442;
  --mal: #b9252c;
  --ficha-1: #ffffff;
  --ficha-2: #d9dde3;
  --ficha-borde: #c2c8d0;
  --ficha-luz: #ffffff;
  --ficha-canto: #9ea6b1;
  --canto: 2px;
  --letra: #12161c;
  --letra-2: #535d6a;
  --letra-bien: #1b7442;
  --letra-mal: #b9252c;
  --tinte-palabra: rgb(242 179 61 / 0.22);
  --velo: rgb(18 22 28 / 0.4);
  --lienzo-1: #f3f5f7;
  --lienzo-2: #cfd5dc;
  --marca-limpia: #2e9a5c;
  --marca-comprobada: #d99a1e;
  --marca-desvelada: #d9443b;
}

:root {
  --fuente: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radio: 8px;
  --radio-tarjeta: 16px;
  --radio-hoja: 20px;
  --muelle: cubic-bezier(0.22, 1, 0.36, 1);
  --rapido: 120ms;
  --barra-abajo: calc(60px + env(safe-area-inset-bottom));
}
/* Las derivadas, en cada sitio con tema (también las muestras de Tu perfil): si
   solo estuvieran en :root, se heredarían ya calculadas con el tema de la página. */
:root, [data-tema] {
  --estado-hover: color-mix(in srgb, var(--texto) 6%, transparent);
  --estado-pulsado: color-mix(in srgb, var(--texto) 10%, transparent);
  --seleccion: color-mix(in srgb, var(--acento) 16%, transparent);
  --ficha: linear-gradient(180deg, var(--ficha-1), var(--ficha-2));
  --ficha-sombra: inset 0 0 0 1px var(--ficha-borde), inset 0 1px 0 var(--ficha-luz);
  --activa: linear-gradient(180deg, color-mix(in srgb, var(--acento) 88%, #fff), var(--acento));
  --activa-canto: color-mix(in srgb, var(--acento) 70%, #000);
}

/* ================================================================ base */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
html { background: var(--fondo); background-image: var(--fondo-img); background-attachment: fixed; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh;
  color: var(--texto);
  font: 500 15px/1.5 var(--fuente);
  font-feature-settings: 'kern', 'liga', 'ss03';
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.cargando #app { visibility: hidden; }
h1, h2, h3 { font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: 32px; letter-spacing: -0.035em; line-height: 1.1; }
h2 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; }
h3 { font-size: 15px; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
b { font-weight: 600; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--radio); }
::selection { background: var(--acento); color: var(--sobre-acento); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

.icono { width: 20px; height: 20px; flex: none; }
.nota { color: var(--texto-3); font-size: 13px; }
.error { color: var(--mal); font-size: 13px; }
.error:empty { display: none; }

/* ================================================================ botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--radio);
  background: var(--acento); color: var(--sobre-acento);
  font-weight: 600; font-size: 14px; letter-spacing: -0.005em; white-space: nowrap; line-height: 1;
  transition: background var(--rapido), transform 200ms var(--muelle);
  touch-action: manipulation;
}
.boton:hover { background: color-mix(in srgb, var(--acento) 88%, var(--texto)); }
.boton:active { transform: scale(0.97); }
.boton .icono { width: 18px; height: 18px; }
.boton.grande { width: 100%; height: 48px; font-size: 15px; border-radius: 10px; }
.boton.pequeno { height: 32px; padding: 0 12px; font-size: 13px; }
.boton.secundario { background: var(--boton-2); color: var(--sobre-boton-2); }
.boton.secundario:hover { background: color-mix(in srgb, var(--boton-2) 88%, var(--sobre-boton-2)); }
.boton-icono {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--texto-2);
  transition: background var(--rapido), color var(--rapido), transform 200ms var(--muelle);
  touch-action: manipulation;
}
.boton-icono:hover { background: var(--estado-hover); color: var(--texto); }
.boton-icono:active { background: var(--estado-pulsado); transform: scale(0.92); }
.enlace { color: var(--acento-texto); font-size: 14px; font-weight: 600; padding: 6px 0; }
.enlace:hover { text-decoration: underline; text-underline-offset: 3px; }
.enlace.centrado { display: block; margin: 20px auto 0; }

/* ================================================================ marca: logo y mascota (provisionales: js/marca.mjs) */
.logo { display: inline-flex; align-items: center; height: 40px; color: var(--texto); }
.logo svg { height: 30px; width: auto; display: block; }
.logo-letras { fill: currentColor; }
.logo-punto { fill: var(--acento); }
.logo.grande svg { height: 64px; }
.mascota { display: block; flex: none; height: 64px; width: auto; user-select: none; -webkit-user-drag: none; }
@media (prefers-reduced-motion: no-preference) {
  .mascota.pose-celebra { transform-origin: 50% 100%; animation: salto 1.6s var(--muelle) 300ms both; }
  .mascota.pose-saluda { transform-origin: 50% 100%; animation: saludo 2.4s var(--muelle) 400ms both; }
}
@keyframes salto { 0% { transform: translateY(0); } 18% { transform: translateY(-28%) rotate(-6deg); } 36% { transform: none; } 50% { transform: translateY(-12%) rotate(4deg); } 64%, 100% { transform: none; } }
@keyframes saludo { 0%, 100% { transform: none; } 15% { transform: rotate(-10deg); } 30% { transform: rotate(8deg); } 45% { transform: rotate(-5deg); } 60% { transform: none; } }

/* ================================================================ la estructura */
.barra-sup {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
  background: var(--fondo);
}
.yo { display: block; border-radius: 50%; }
.yo[aria-current] .avatar { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--acento); }
.pestanas {
  position: fixed; inset: auto 0 0 0; z-index: 6;
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: var(--barra-abajo); padding-bottom: env(safe-area-inset-bottom);
  background: var(--hundido);
}
.pestana { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--texto-3); font-size: 11px; font-weight: 600; }
.pestana[aria-current] { color: var(--texto); }
.pestana[aria-current] .icono { color: var(--acento); }
.pantalla { max-width: 640px; margin: 0 auto; padding: 4px 16px calc(var(--barra-abajo) + 28px); display: grid; gap: 12px; }
.titulo-pantalla { margin-top: 8px; }
.subtitulo { color: var(--texto-3); margin-top: -6px; }
.fecha { color: var(--texto-3); font-size: 13px; margin-top: 4px; }
.fecha::first-letter { text-transform: uppercase; }
.tarjeta { background: var(--superficie); border-radius: var(--radio-tarjeta); padding: 18px; }
.sin-nada { text-align: center; padding: 48px 16px; display: grid; gap: 12px; justify-items: center; color: var(--texto-2); }
.pastilla { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--seleccion); color: var(--acento-texto); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meta { color: var(--texto-3); font-size: 13px; }

/* ================================================================ avatares */
.avatar {
  display: inline-grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  font-weight: 600; font-size: 15px; line-height: 1; color: #fff;
}
.avatar.mediano { width: 44px; height: 44px; font-size: 18px; }
.avatar.enorme { width: 104px; height: 104px; font-size: 42px; }
.avatar.vacio { background: var(--elevada); color: var(--texto-3); cursor: pointer; overflow: hidden; }
.avatar.vacio img { width: 100%; height: 100%; object-fit: cover; }
.avatar.vacio .icono { display: block; width: 30px; height: 30px; }
/* Ocho tonos apagados, con texto blanco que se lee bien (AA). */
.tono-0 { background: #a8562f; } .tono-1 { background: #2f6f6c; } .tono-2 { background: #6550a0; } .tono-3 { background: #7d6420; }
.tono-4 { background: #3a6e45; } .tono-5 { background: #9a4569; } .tono-6 { background: #3e5d9b; } .tono-7 { background: #5b5f69; }
.grupo-avatares { display: inline-flex; flex: none; }
.grupo-avatares .avatar { width: 26px; height: 26px; font-size: 12px; box-shadow: 0 0 0 2px var(--superficie); }
.grupo-avatares .avatar + .avatar { margin-left: -7px; }
.avatar.mas { background: var(--elevada); color: var(--texto-2); font-size: 11px; }

/* ================================================================ bienvenida */
.bienvenida { max-width: 400px; margin: 0 auto; padding: calc(48px + env(safe-area-inset-top)) 20px 40px; display: grid; justify-items: center; }
.bienvenida > .mascota { height: 150px; margin-bottom: 18px; }
.lema { color: var(--texto-2); font-size: 17px; margin: 16px 0 28px; text-align: center; letter-spacing: -0.01em; }
.alta { width: 100%; display: grid; gap: 10px; }
.alta-avatar { display: grid; justify-items: center; gap: 2px; margin-bottom: 8px; }
.alta-avatar .avatar.enorme { width: 88px; height: 88px; font-size: 36px; }
label { font-weight: 600; font-size: 13px; color: var(--texto-2); }
input:not([type='range']) {
  width: 100%; height: 48px; padding: 0 14px;
  border: 0; border-radius: var(--radio);
  background: var(--hundido); color: var(--texto); font-size: 16px;
  transition: box-shadow var(--rapido);
}
input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--acento); }
input::placeholder { color: var(--texto-3); }
.recuperar { width: 100%; display: grid; gap: 10px; margin-top: 18px; }

/* ================================================================ Hoy */
.tarjeta-dia { display: grid; gap: 14px; padding: 20px; }
.cabeza-dia { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hecho { display: inline-flex; align-items: center; gap: 4px; color: var(--bien); font-weight: 600; font-size: 13px; }
.hecho .icono { width: 16px; height: 16px; }
.tarjeta-dia h1 { font-size: 30px; }
.quien { display: flex; align-items: center; gap: 10px; color: var(--texto-2); font-size: 13px; }
.quien.nadie { color: var(--texto-3); }
.sin-dia { grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; }
.sin-dia h1 { font-size: 20px; letter-spacing: -0.02em; }
.sin-dia p { color: var(--texto-3); }
.sin-dia .mascota { grid-row: span 2; height: 84px; }

.dos { display: grid; gap: 12px; }
.racha { display: grid; gap: 14px; }
.racha-cifra { display: flex; align-items: baseline; gap: 10px; }
.racha-cifra .llama { align-self: center; }
.racha-cifra b { font-size: 40px; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.racha-cifra span { color: var(--texto-2); }
.llama { width: 24px; height: 30px; flex: none; }
.llama .fuera { fill: var(--acento); }
.llama .dentro { fill: color-mix(in srgb, var(--acento) 45%, #fff); }
.llama.apagada .fuera { fill: var(--borde); }
.llama.apagada .dentro { fill: var(--elevada); }
.semana { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.semana li { display: grid; justify-items: center; gap: 6px; }
.semana .punto { display: grid; place-items: center; width: 100%; max-width: 38px; aspect-ratio: 1; border-radius: 10px; background: var(--ficha); box-shadow: var(--ficha-sombra), 0 var(--canto) 0 var(--ficha-canto); }
.semana .hecho .punto { background: var(--activa); color: var(--sobre-acento); box-shadow: 0 var(--canto) 0 var(--activa-canto); }
.semana .hoy .punto { box-shadow: inset 0 0 0 2px var(--acento); }
.semana .punto .icono { width: 16px; height: 16px; stroke-width: 2.6; }
.letra-dia { font-size: 11px; font-weight: 600; color: var(--texto-3); }

.nivel-actual { display: grid; gap: 14px; align-content: start; }
.cabeza-nivel { display: flex; align-items: baseline; justify-content: space-between; }
.progreso { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.progreso span { height: 6px; border-radius: 3px; background: var(--elevada); }
.progreso .lleno { background: var(--acento); }
.fila-nivel { display: flex; align-items: center; gap: 14px; }
.fila-nivel .texto { flex: 1; display: grid; min-width: 0; }
.fila-nivel .texto b { font-size: 16px; letter-spacing: -0.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-nivel .texto span { color: var(--texto-3); font-size: 13px; }
.fila-nivel > .icono { color: var(--texto-3); }
.ficha-nivel {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--ficha); box-shadow: var(--ficha-sombra), 0 var(--canto) 0 var(--ficha-canto); color: var(--letra);
  font-size: 19px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}

/* ================================================================ Niveles */
.camino { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.nivel .fila-nivel { padding: 12px 14px; border-radius: var(--radio-tarjeta); background: var(--superficie); transition: background var(--rapido), transform 200ms var(--muelle); }
a.fila-nivel:hover { background: color-mix(in srgb, var(--superficie) 70%, var(--elevada)); }
a.fila-nivel:active { transform: scale(0.985); }
.nivel.hecho .ficha-nivel { color: var(--letra-bien); }
.nivel.hecho .ficha-nivel .icono { width: 22px; height: 22px; stroke-width: 2.4; }
.nivel.abierto .ficha-nivel, .nivel.empezado .ficha-nivel { background: var(--activa); color: var(--sobre-acento); box-shadow: 0 var(--canto) 0 var(--activa-canto); }
.nivel.cerrado .fila-nivel { background: transparent; box-shadow: inset 0 0 0 1px var(--borde); }
.nivel.cerrado .ficha-nivel { background: transparent; box-shadow: inset 0 0 0 1px var(--borde); color: var(--texto-3); }
.nivel.cerrado .ficha-nivel .icono { width: 18px; height: 18px; }
.nivel.cerrado .texto b { color: var(--texto-2); }

/* ================================================================ Amigos */
.cabeza-amigos { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cabeza-amigos .mascota { height: 72px; }
.amigos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.amigos li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radio-tarjeta); background: var(--superficie); }
.amigos li.yo { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 45%, transparent); }
.amigos .texto { flex: 1; min-width: 0; display: grid; }
.amigos .texto b { display: flex; align-items: center; gap: 6px; font-size: 16px; letter-spacing: -0.015em; overflow: hidden; white-space: nowrap; }
.amigos .texto > span { color: var(--texto-3); font-size: 13px; }
.tu { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 6px; background: var(--seleccion); color: var(--acento-texto); }
.estado-hoy { display: grid; justify-items: end; gap: 6px; }
.chip { font-size: 12px; font-weight: 600; height: 22px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; white-space: nowrap; }
.chip.hecho { background: color-mix(in srgb, var(--bien) 16%, transparent); color: var(--bien); }
.chip.medias { background: var(--seleccion); color: var(--acento-texto); }
.chip.no { background: var(--estado-hover); color: var(--texto-3); }
.chip-racha { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip-racha .llama { width: 14px; height: 18px; }
.chip-racha.cero { color: var(--texto-3); }

/* ================================================================ Tu perfil */
.perfil-cabeza { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fila-form { display: flex; gap: 8px; margin-top: 8px; }
.fila-form input { flex: 1; min-width: 0; }
.fila-form .boton { height: 48px; }
.temas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.tema {
  display: grid; gap: 10px; padding: 10px; border-radius: 12px; text-align: left;
  background: var(--hundido); color: var(--texto-2); font-size: 13px; font-weight: 600;
  transition: box-shadow var(--rapido), transform 200ms var(--muelle);
}
.tema:active { transform: scale(0.97); }
.tema[aria-pressed='true'] { color: var(--texto); box-shadow: inset 0 0 0 2px var(--acento); }
/* La muestra de cada tema: su fondo y tres fichas suyas (la del medio, activa). */
.muestra { display: flex; gap: 4px; padding: 10px; border-radius: 8px; background: var(--fondo); background-image: var(--fondo-img); }
.muestra span { flex: 1; aspect-ratio: 1; max-width: 30px; border-radius: 6px; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--letra); background: var(--ficha); box-shadow: var(--ficha-sombra), 0 var(--canto) 0 var(--ficha-canto); }
.muestra span:nth-child(2) { background: var(--activa); color: var(--sobre-acento); box-shadow: 0 var(--canto) 0 var(--activa-canto); }
.recuperacion { display: grid; gap: 12px; }
.recuperacion > p { color: var(--texto-2); }
.codigo { display: block; padding: 12px; border-radius: var(--radio); background: var(--hundido); font: 500 13px/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; word-break: break-all; user-select: all; }

/* ================================================================ capas, hojas y avisos */
.capa {
  position: fixed; inset: 0; z-index: 30;
  display: grid; align-items: end; justify-items: center;
  background: var(--velo);
}
.hoja {
  width: min(100%, 440px); max-height: 92dvh; overflow: auto;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: var(--radio-hoja) var(--radio-hoja) 0 0;
  background: var(--elevada);
  display: grid; gap: 12px;
}
.hoja h2 { font-size: 22px; letter-spacing: -0.03em; }
.opcion { display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 12px; background: var(--superficie); transition: background var(--rapido), transform 200ms var(--muelle); }
.opcion:hover { background: color-mix(in srgb, var(--superficie) 60%, var(--borde)); }
.opcion:active { transform: scale(0.98); }
.opcion b { font-size: 15px; }
.opcion span { color: var(--texto-3); font-size: 13px; }
.acciones { display: grid; gap: 8px; margin-top: 4px; }
#avisos { position: fixed; left: 0; right: 0; bottom: calc(var(--barra-abajo) + 12px); z-index: 40; display: grid; justify-items: center; gap: 8px; pointer-events: none; }
body.jugando #avisos { bottom: auto; top: calc(64px + env(safe-area-inset-top)); }
.aviso { padding: 10px 16px; border-radius: 12px; background: var(--texto); color: var(--fondo); font-weight: 600; font-size: 14px; }

/* El encuadre de la foto */
.hoja-foto { justify-items: center; text-align: center; }
.encuadre { position: relative; width: 240px; height: 240px; border-radius: 50%; overflow: hidden; background: var(--hundido); touch-action: none; cursor: grab; box-shadow: 0 0 0 3px var(--elevada), 0 0 0 5px var(--acento); margin: 8px 0; }
.encuadre-imagen { position: absolute; left: 50%; top: 50%; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.control-zoom { display: flex; align-items: center; gap: 10px; width: 240px; color: var(--texto-3); }
.zoom { flex: 1; accent-color: var(--acento); }
.hoja-foto .acciones { width: 100%; }

/* ================================================================ el juego */
body.jugando { overflow: hidden; overscroll-behavior: none; }
.juego { height: 100dvh; display: flex; flex-direction: column; }
.juego-cabecera { display: flex; align-items: center; gap: 2px; padding: calc(6px + env(safe-area-inset-top)) 8px 6px; }
.juego-titulo { flex: 1; min-width: 0; display: grid; line-height: 1.25; padding: 0 6px; }
.antetitulo { font-size: 11px; font-weight: 600; color: var(--texto-3); letter-spacing: 0.02em; }
.juego-titulo .titulo { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reloj { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texto-2); }
.reloj .icono { width: 16px; height: 16px; }
.juego-cuerpo { flex: 1; min-height: 0; display: flex; }

.tablero { flex: 1; min-width: 0; min-height: 0; display: flex; overflow: auto; padding: 6px; }
.rejilla {
  --celda: 40px;
  --hueco: calc(var(--celda) * 0.07);
  margin: auto;
  display: grid;
  grid-template-columns: repeat(var(--ancho), var(--celda));
  grid-template-rows: repeat(var(--alto), var(--celda));
  gap: var(--hueco);
  padding: 4px;
  perspective: 900px;
}
.casilla {
  position: relative; display: grid; place-items: center;
  border-radius: max(3px, calc(var(--celda) * 0.18));
  --grosor: min(var(--canto), max(1.5px, calc(var(--celda) * 0.07)));
  background: var(--ficha);
  box-shadow: var(--ficha-sombra), 0 var(--grosor) 0 var(--ficha-canto);
  cursor: pointer; user-select: none;
  transition: box-shadow var(--rapido);
}
.casilla .num {
  position: absolute; left: max(2px, calc(var(--celda) * 0.09)); top: max(1px, calc(var(--celda) * 0.05));
  font-weight: 600; font-size: max(7px, calc(var(--celda) * 0.22)); line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--letra-2);
}
.casilla .letra { font-weight: 600; font-size: calc(var(--celda) * 0.54); line-height: 1; letter-spacing: -0.02em; color: var(--letra); padding-top: calc(var(--celda) * 0.12); }
.casilla.en-palabra { background: linear-gradient(var(--tinte-palabra), var(--tinte-palabra)), var(--ficha); }
.casilla.activa { background: var(--activa); box-shadow: 0 var(--grosor) 0 var(--activa-canto); z-index: 1; }
.casilla.activa .letra, .casilla.activa .num { color: var(--sobre-acento); }
.casilla.bien .letra { color: var(--letra-bien); }
.casilla.mala .letra { color: var(--letra-mal); }
.casilla.mala::before { content: ''; position: absolute; left: 22%; right: 22%; bottom: 16%; height: 2px; border-radius: 1px; background: var(--letra-mal); }
/* Desvelada: un punto del acento en la esquina (en la activa, del color de su canto). */
.casilla.activa.desvelada::after { background: var(--activa-canto); }
.casilla.desvelada::after { content: ''; position: absolute; right: 12%; top: 12%; width: max(3px, calc(var(--celda) * 0.1)); height: max(3px, calc(var(--celda) * 0.1)); border-radius: 50%; background: var(--acento); }

@media (prefers-reduced-motion: no-preference) {
  .letra.nueva { animation: aparecer 260ms var(--muelle); }
  .casilla.ola { animation: ola 640ms var(--muelle) calc(var(--i) * 45ms) both; }
  .casilla.volteo { animation: volteo 820ms var(--muelle) calc(var(--i) * 26ms) both; }
  .casilla.destapa .letra { animation: aparecer 420ms var(--muelle); }
}
@keyframes aparecer { from { transform: scale(0.5); opacity: 0; } }
@keyframes ola {
  0% { transform: none; }
  32% { transform: translateY(-22%) scale(1.06); box-shadow: inset 0 0 0 2px var(--letra-bien), 0 var(--grosor) 0 var(--ficha-canto); }
  100% { transform: none; }
}
@keyframes volteo {
  0% { transform: rotateX(0); }
  45% { transform: rotateX(180deg) scale(1.04); }
  100% { transform: rotateX(360deg); }
}

/* La pista activa: siempre encima del teclado. */
.pista-activa {
  display: flex; align-items: center; gap: 2px;
  margin: 0 8px; padding: 4px; min-height: 60px;
  border-radius: 14px; background: var(--superficie);
  touch-action: pan-y;
}
.pista-activa.oculta { visibility: hidden; }
.pista-activa p { flex: 1; min-width: 0; display: grid; text-align: center; line-height: 1.3; }
.pista-numero { font-size: 11px; font-weight: 600; color: var(--acento-texto); letter-spacing: 0.02em; }
.pista-texto { font-size: 16px; font-weight: 500; color: var(--texto); letter-spacing: -0.01em; text-wrap: balance; }

/* El teclado propio (QWERTY con Ñ): las mismas fichas. */
.teclado { display: grid; gap: 8px; padding: 10px 4px calc(8px + env(safe-area-inset-bottom)); user-select: none; }
.fila { display: flex; justify-content: center; gap: 5px; }
.fila:nth-child(3) { padding: 0 4px; }
.tecla {
  flex: 1 1 0; max-width: 46px; height: 52px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--ficha); color: var(--letra);
  box-shadow: var(--ficha-sombra), 0 var(--canto) 0 var(--ficha-canto);
  font-size: 20px; font-weight: 600;
  touch-action: manipulation;
  transition: transform 90ms var(--muelle);
}
.tecla.pulsada { transform: translateY(var(--canto)) scale(0.97); background: var(--activa); color: var(--sobre-acento); box-shadow: none; }
.tecla.borrar { flex: 1.6 1 0; max-width: 74px; color: var(--letra-2); }
.tecla .icono { width: 24px; height: 24px; }

.pistas { display: none; }

/* La tarjeta del resultado */
.capa-resultado { align-items: center; padding: 16px; }
.tarjeta-resultado { position: relative; border-radius: var(--radio-hoja); padding: 24px 20px 20px; justify-items: center; text-align: center; gap: 14px; }
.tarjeta-resultado:focus { outline: none; }
.tarjeta-resultado .cerrar { position: absolute; right: 8px; top: 8px; }
.tarjeta-resultado .mascota { height: 104px; margin-top: -4px; }
.tarjeta-resultado h2 { font-size: 30px; letter-spacing: -0.04em; }
.cifras { display: flex; justify-content: center; gap: 8px; width: 100%; }
.cifra { flex: 1; display: grid; justify-items: center; align-content: end; gap: 2px; padding: 12px 6px; border-radius: 12px; background: var(--superficie); }
.cifra b { font-size: 26px; letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifra span { color: var(--texto-3); font-size: 12px; }
.cifra .llama { width: 16px; height: 20px; }
.marcas { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 300px; }
.marca { width: 18px; height: 18px; border-radius: 5px; }
.marca.limpia { background: var(--marca-limpia); }
.marca.comprobada { background: var(--marca-comprobada); }
.marca.desvelada { background: var(--marca-desvelada); }
.leyenda { color: var(--texto-2); font-size: 13px; margin-top: -4px; }
.tiempos { width: 100%; display: grid; gap: 6px; text-align: left; }
.tiempos:empty { display: none; }
.tiempos h3 { color: var(--texto-2); }
.tiempos ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tiempos li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; }
.tiempos li.yo { background: var(--seleccion); }
.tiempos .avatar { width: 28px; height: 28px; font-size: 12px; }
.puesto { width: 16px; text-align: center; font-weight: 600; color: var(--texto-3); font-variant-numeric: tabular-nums; }
.tiempos .nombre { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiempos .ayudas { color: var(--texto-3); font-size: 12px; }
.tiempos .tiempo { font-variant-numeric: tabular-nums; font-weight: 600; }
.tarjeta-resultado .acciones { width: 100%; }

/* ================================================================ con ratón (sin teclado en pantalla) */
@media (hover: hover) and (pointer: fine) {
  .teclado { display: none; }
  .pista-activa { margin-bottom: 14px; }
}

/* ================================================================ escritorio */
@media (min-width: 900px) {
  .barra-sup { padding: 14px 28px; }
  .pestanas { position: static; display: flex; gap: 2px; height: auto; padding: 3px; background: var(--hundido); border-radius: 11px; }
  .pestana { flex-direction: row; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--radio); font-size: 13px; }
  .pestana[aria-current] { background: var(--elevada); }
  .pantalla { max-width: 860px; padding: 12px 28px 56px; gap: 16px; }
  .dos { grid-template-columns: 1fr 1fr; }
  .tarjeta-dia { padding: 28px; }
  .tarjeta-dia h1 { font-size: 40px; }
  .tarjeta-dia .boton.grande { width: auto; min-width: 220px; justify-self: start; }
  .temas { grid-template-columns: repeat(4, 1fr); }
  #avisos { bottom: 24px; }

  .juego-cabecera { padding: 12px 20px; }
  .juego-titulo .titulo { font-size: 18px; }
  .juego-cuerpo { gap: 8px; padding: 0 20px; }
  .pistas { display: grid; align-content: start; gap: 20px; width: 340px; flex: none; overflow: auto; padding: 8px 4px 24px; }
  .pistas .mascota { height: 96px; margin: 8px 0 0 10px; opacity: 0.9; }
  .lista-pistas h3 { font-size: 12px; color: var(--texto-3); margin-bottom: 6px; letter-spacing: 0.02em; }
  .lista-pistas ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .lista-pistas li { display: flex; gap: 10px; padding: 7px 10px; border-radius: var(--radio); cursor: pointer; color: var(--texto-2); font-size: 14px; transition: background var(--rapido); }
  .lista-pistas li:hover { background: var(--estado-hover); }
  .lista-pistas li b { min-width: 22px; color: var(--texto-3); font-variant-numeric: tabular-nums; }
  .lista-pistas li.activa { background: var(--seleccion); color: var(--texto); }
  .lista-pistas li.activa b { color: var(--acento-texto); }
  .lista-pistas li.hecha { color: var(--texto-3); }
  .lista-pistas li.hecha span { text-decoration: line-through; text-decoration-color: var(--borde); }
  .pista-activa { width: min(720px, calc(100% - 40px)); margin: 10px auto 18px; }
  .pista-texto { font-size: 18px; }
  .capa { align-items: center; }
  .hoja { border-radius: var(--radio-hoja); }
}