/* ══ v2, segunda tanda ═══════════════════════════════════════════════════════════════════════════════
   Se carga después de estilo.css y manda sobre ella. Más aire y menos tamaño: la jerarquía la dan el espacio y el
   peso, no la letra grande. Luego: marca, chat, placas, tablero y el Arcade. */
body { font-size: 13.5px; }
.principal { padding: 26px 44px 90px; }
.principal-ancho { max-width: 1080px; }
h1.titulo-pagina { font-size: 22px; letter-spacing: -0.02em; margin-bottom: 4px; }
.bajada { font-size: 13px; }
.titulo-seccion { font-size: 13.5px; margin-bottom: 10px; }
.tarjeta-pad { padding: 20px 22px; }
.rejilla-inicio { gap: 22px; margin-top: 24px; }
.columna { gap: 22px; }
.prueba { padding: 14px 22px; gap: 16px; }
.prueba-fecha b { font-size: 20px; }
.prueba-titulo { font-size: 13px; }
.prueba-meta, .prueba-cuando { font-size: 12px; }
.asig-fila { padding: 11px 22px; }
.asig-nombre { font-size: 13px; }
.asig-nombre small { font-size: 12px; }
.riesgo b { font-size: 28px; }
.riesgo p { font-size: 12.5px; }
.saludo { font-size: 26px; }
.duda textarea { font-size: 14.5px; }
.riel-enlace { font-size: 13px; min-height: 36px; }
.persona b { font-size: 12.5px; }
.persona small { font-size: 11.5px; }
.cabecera { margin-bottom: 22px; }
.asignatura { min-height: 180px; padding: 20px; }
.asignatura-num { font-size: 52px; }
.asignatura h3 { font-size: 14px; }
.tema-cabeza h2 { font-size: 22px; }
.leccion-tarjeta h3 { font-size: 14.5px; }
.fichas { gap: 14px; }
.ficha h3 { font-size: 13.5px; }
.ficha p { font-size: 12.5px; }
.ficha pre { font-size: 12px; }
.seccion-chuleta h2 { font-size: 18px; }
.registro-dia, .falta-asig h4 { font-size: 12.5px; }

/* Tema: el claro activo; el oscuro, visible pero apagado. */
.temas-sel:not(.temas-sel-2) { grid-template-columns: 1fr 1fr; }
.temas-sel .tema-pronto { opacity: 0.38; cursor: not-allowed; }

/* La marca: el personaje y el nombre con un solo peso y un solo color. */
.marca-nombre, .marca-nombre span { font-family: var(--texto); font-weight: 500; color: var(--tinta); letter-spacing: -0.02em; }
.marca-nombre { font-size: 16px; }
.mascota { flex: none; display: block; overflow: visible; }
.mascota .m-cuerpo { fill: var(--tinta); }
.mascota .m-antena { fill: var(--bermellon); animation: cursor 1.1s steps(1) infinite; }
.mascota .m-brillo { fill: rgba(255, 255, 255, 0.12); }
.mascota .m-pupilas circle { fill: var(--tinta); }
.mascota .m-pupilas { transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform 0.25s var(--curva); }
.mascota .m-ojos { transform-origin: 32px 31px; animation: parpadea 5.5s infinite; }
.mascota .m-boca { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
@keyframes parpadea { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
.marca:hover .mascota { animation: salta 0.5s var(--curva); }
@keyframes salta { 40% { transform: translateY(-4px) rotate(-6deg); } }

/* ── Chat: código, reacciones ─────────────────────────────────────────────────────────────────────── */
.msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 88%; }
.msg.mia { align-self: flex-end; align-items: flex-end; }
.msg .burbuja { max-width: 100%; position: relative; }
.burbuja.con-codigo { padding: 0; overflow: visible; width: 100%; background: var(--codigo); box-shadow: inset 0 0 0 1px var(--hilo-2); color: var(--tinta); }
.burbuja.con-codigo time { padding: 0 10px 6px; color: var(--tinta-3); }
.msg-texto { white-space: pre-wrap; }
.msg-codigo { border-radius: 14px; overflow: hidden; }
.msg-prosa { display: block; padding: 8px 12px 6px; background: var(--hoja); }
.burbuja.mia .msg-prosa { background: var(--tinta); color: var(--hoja); }
.msg-codigo-barra { display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 10px; font-size: 11.5px; color: var(--tinta-3); border-bottom: 1px solid var(--hilo); }
.msg-codigo-barra span { margin-right: auto; }
.msg-codigo-barra .btn-icono { width: 30px; min-height: 30px; }
.msg-codigo pre { margin: 0; padding: 10px 12px; font-size: 11.5px; line-height: 1.6; max-height: 180px; overflow: auto; white-space: pre; }
.msg-reaccionar { position: absolute; top: -16px; right: 6px; display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: var(--hoja); box-shadow: var(--sombra-alta), inset 0 0 0 1px var(--hilo); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 0.15s, transform 0.15s var(--curva); z-index: 2; }
.burbuja.mia .msg-reaccionar { right: auto; left: 6px; }
.msg:hover .msg-reaccionar, .msg:focus-within .msg-reaccionar { opacity: 1; transform: none; pointer-events: auto; }
.msg-reaccionar button { width: 28px; height: 28px; border-radius: 50%; font-size: 15px; transition: transform 0.15s var(--curva); }
.msg-reaccionar button:hover { transform: scale(1.25); }
.msg-reac { display: flex; gap: 4px; margin: -4px 6px 2px; position: relative; z-index: 1; }
.msg-reac button { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 99px; font-size: 12px; background: var(--hoja); box-shadow: inset 0 0 0 1px var(--hilo-2); }
.msg-reac button[aria-pressed='true'] { box-shadow: inset 0 0 0 1.5px var(--bermellon); background: var(--bermellon-suave); }
.msg-reac span { font-size: 11px; color: var(--tinta-2); }
.ventana-escribir { align-items: flex-end; }
.ventana-escribir textarea { flex: 1; min-height: 40px; max-height: 160px; border: 0; padding: 10px 12px; border-radius: 10px; background: var(--hoja-3); resize: none; line-height: 1.45; }
.ventana-escribir textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--tinta); }
.codigo-grande { width: min(1100px, calc(100vw - 56px)); height: calc(100vh - 56px); display: flex; flex-direction: column; background: var(--hoja); border-radius: 16px; box-shadow: var(--sombra-alta); overflow: hidden; }
.codigo-grande header { display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--hilo); font-size: 12.5px; color: var(--tinta-3); }
.codigo-grande header span { margin-right: auto; }
.codigo-grande pre, .hoja-codigo pre { margin: 0; padding: 22px 26px; overflow: auto; flex: 1; font-size: 12.5px; line-height: 1.75; background: var(--codigo); tab-size: 4; }
.ln { display: inline-block; width: 3ch; margin-right: 18px; text-align: right; color: var(--tinta-3); opacity: 0.6; user-select: none; }
.velo:has(.codigo-grande) { padding: 28px; align-items: center; }

/* ── Placas y auras (personalización de la tarjeta) ───────────────────────────────────────────────── */
.persona, .fp-cab, .perfil-cab { position: relative; isolation: isolate; overflow: hidden; }
.persona > :not(.placa), .perfil-cab > :not(.placa), .fp-cab > :not(.placa) { position: relative; z-index: 1; }
.placa { position: absolute; inset: 0; z-index: 0; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 78%); mask-image: linear-gradient(90deg, transparent 18%, #000 78%); opacity: 0.55; transition: opacity 0.3s var(--curva); overflow: hidden; }
.persona:hover .placa, .persona[aria-pressed='true'] .placa, .fp-cab .placa, .perfil-cab .placa { opacity: 1; }
.persona[data-estilo]:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--hilo-2); }
.placa i { position: absolute; display: block; }
.placa[data-estilo='sakura'] { background: linear-gradient(110deg, #fff4f6 0%, #ffd9e4 55%, #f7b6cc 100%); }
.placa[data-estilo='sakura'] i { top: -10px; left: calc(42% + var(--i) * 12%); width: 7px; height: 9px; border-radius: 70% 0 70% 0; background: #f48fb1; animation: petalo calc(4.2s + var(--i) * 0.7s) linear infinite; animation-delay: calc(var(--i) * -1.1s); }
@keyframes petalo { to { transform: translate(-30px, 80px) rotate(320deg); } }
.placa[data-estilo='corazones'] { background: linear-gradient(110deg, #fff5f5 0%, #ffd6d9 60%, #ff9aa5 100%); }
.placa[data-estilo='corazones'] i { bottom: -12px; left: calc(50% + var(--i) * 10%); width: 9px; height: 9px; background: #ff5c74; transform: rotate(45deg); animation: sube-corazon calc(3s + var(--i) * 0.5s) ease-in infinite; animation-delay: calc(var(--i) * -0.8s); }
.placa[data-estilo='corazones'] i::before, .placa[data-estilo='corazones'] i::after { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: inherit; }
.placa[data-estilo='corazones'] i::before { left: -4.5px; }
.placa[data-estilo='corazones'] i::after { top: -4.5px; }
@keyframes sube-corazon { 0% { transform: translateY(0) rotate(45deg) scale(0.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-70px) rotate(45deg) scale(1); opacity: 0; } }
.placa[data-estilo='aurora'] { background: linear-gradient(110deg, #eefcf7 0%, #b9f0dd 40%, #9fd6f5 70%, #c3a8f5 100%); background-size: 220% 100%; animation: aurora 9s ease-in-out infinite alternate; }
@keyframes aurora { to { background-position: 100% 0; } }
.placa[data-estilo='nocturno'] { background: radial-gradient(circle at 88% 30%, #f6f0d4 0 9px, transparent 10px), linear-gradient(110deg, #5b6399 0%, #2d3463 55%, #1a1f45 100%); }
.placa[data-estilo='nocturno'] i { top: calc(18% + var(--i) * 13%); left: calc(48% + var(--i) * 8%); width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px #fff; animation: titila calc(1.6s + var(--i) * 0.4s) ease-in-out infinite; }
.placa[data-estilo='circuito'] { background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(46, 166, 107, 0.25) 22px 23px), repeating-linear-gradient(0deg, transparent 0 14px, rgba(46, 166, 107, 0.22) 14px 15px), linear-gradient(110deg, #f2fbf5 0%, #d2f1de 60%, #a9e3bf 100%); }
.placa[data-estilo='circuito'] i { top: calc(20% + var(--i) * 18%); left: 40%; width: 18px; height: 2px; background: #1fbf6a; box-shadow: 0 0 6px #1fbf6a; animation: corre calc(2.2s + var(--i) * 0.5s) linear infinite; animation-delay: calc(var(--i) * -0.6s); }
@keyframes corre { from { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } to { transform: translateX(220px); opacity: 0; } }
.placa[data-estilo='arcade'] { background: repeating-conic-gradient(#ffe1f0 0 25%, #e3f8ff 0 50%) 0 0 / 12px 12px; }
.placa[data-estilo='arcade'] i { bottom: calc(15% + var(--i) * 11%); left: calc(55% + var(--i) * 7%); width: 6px; height: 6px; background: #ff5fa2; animation: pixel calc(1.2s + var(--i) * 0.3s) steps(2) infinite; }
.placa[data-estilo='arcade'] i:nth-child(odd) { background: #3ee6ff; }
@keyframes pixel { 50% { opacity: 0.2; transform: translateY(-4px); } }
.placa[data-estilo='atardecer'] { background: radial-gradient(circle at 82% 62%, #ffe08a 0 14px, transparent 15px), linear-gradient(180deg, #ffd1a6 0%, #ff9f87 55%, #f08bb0 100%); }
.placa[data-estilo='atardecer']::after { content: ''; position: absolute; left: 40%; right: 0; bottom: 0; height: 40%; background: #c47079; clip-path: polygon(0 100%, 18% 40%, 30% 70%, 48% 20%, 66% 65%, 80% 35%, 100% 80%, 100% 100%); opacity: 0.75; }

.aura { position: relative; display: inline-grid; flex: none; }
.aura > .av { position: relative; z-index: 1; }
.persona[data-estilo] b, .persona[data-estilo] small, .fp-cab[data-estilo] b, .fp-cab[data-estilo] small, .perfil-cab[data-estilo] p { text-shadow: 0 0 6px var(--hoja), 0 0 2px var(--hoja), 0 0 12px var(--hoja); }
.aura > i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; pointer-events: none; }
.aura[data-estilo='corazones'] > i { background: #ff5c74; animation: orbita-sube 2.6s ease-in infinite; animation-delay: calc(var(--i) * -0.52s); }
.aura[data-estilo='corazones'] > i::before, .aura[data-estilo='corazones'] > i::after { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: inherit; }
.aura[data-estilo='corazones'] > i::before { left: -3px; } .aura[data-estilo='corazones'] > i::after { top: -3px; }
@keyframes orbita-sube { 0% { opacity: 0; transform: translate(calc((var(--i) - 2) * 7px), 4px) rotate(45deg) scale(0.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(calc((var(--i) - 2) * 11px), calc(var(--t) * -0.9)) rotate(45deg) scale(1); } }
.aura[data-estilo='sakura'] > i { width: 5px; height: 7px; border-radius: 70% 0 70% 0; background: #f48fb1; animation: orbita 4s linear infinite; animation-delay: calc(var(--i) * -0.8s); }
.aura[data-estilo='nocturno'] > i { width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px 1px #b9c4ff; animation: orbita 5s linear infinite; animation-delay: calc(var(--i) * -1s); }
.aura[data-estilo='arcade'] > i { width: 4px; height: 4px; background: #ff5fa2; animation: orbita 3s steps(12) infinite; animation-delay: calc(var(--i) * -0.6s); }
.aura[data-estilo='arcade'] > i:nth-of-type(even) { background: #3ee6ff; }
.aura[data-estilo='circuito'] > i, .aura[data-estilo='aurora'] > i, .aura[data-estilo='atardecer'] > i { display: none; }
.aura[data-estilo='circuito'] .av { box-shadow: 0 0 0 2px var(--papel), 0 0 0 3.5px #1fbf6a, 0 0 12px rgba(31, 191, 106, 0.5); }
.aura[data-estilo='aurora'] .av { box-shadow: 0 0 0 2px var(--papel), 0 0 0 3.5px #8fd8ea, 0 0 14px rgba(160, 120, 240, 0.45); }
.aura[data-estilo='atardecer'] .av { box-shadow: 0 0 0 2px var(--papel), 0 0 0 3.5px #ff9f87; }
@keyframes orbita { from { transform: rotate(calc(var(--i) * 72deg)) translateX(calc(var(--t) * 0.64)) rotate(0); } to { transform: rotate(calc(var(--i) * 72deg + 360deg)) translateX(calc(var(--t) * 0.64)) rotate(-360deg); } }
.elegir-estilo { display: grid; gap: 6px; }
.persona.muestra { min-height: 52px; box-shadow: inset 0 0 0 1px var(--hilo); }
.persona.muestra[aria-pressed='true'] { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.persona.muestra .placa { opacity: 0.9; }
.fp-cab { margin: -12px -12px 0; padding: 14px 12px; border-radius: 16px 16px 0 0; }
.fp-cab .placa { -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 70%); mask-image: linear-gradient(90deg, transparent 10%, #000 70%); }
.perfil-cab .placa { -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 85%); mask-image: linear-gradient(90deg, transparent 30%, #000 85%); }

/* ── Tablero: rejilla de cuadros y la hoja grande ─────────────────────────────────────────────────── */
.tablero-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap; }
.tablero-top { display: flex; align-items: center; gap: 4px; }
.tablero-top a { position: relative; display: inline-flex; text-decoration: none; }
.tablero-top a .tt-n { position: absolute; right: -3px; bottom: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 99px; display: grid; place-items: center; font-size: 10px; font-weight: 600; background: var(--tinta); color: var(--hoja); box-shadow: 0 0 0 2px var(--papel); }
.tablero-top small { font-size: 12px; color: var(--tinta-3); margin-left: 10px; }
.filtros { margin-bottom: 20px; flex-wrap: wrap; }
.cuadros { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.cuadro { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; border-radius: var(--r); background: var(--hoja); box-shadow: inset 0 0 0 1px var(--hilo); text-decoration: none; min-width: 0; transition: box-shadow 0.2s, transform 0.2s var(--curva); }
.cuadro:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--hilo-2), var(--sombra); }
.cuadro-cab { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tinta-2); }
.cuadro-meta { margin-left: auto; color: var(--tinta-3); }
.cuadro-guardado { color: var(--bermellon); }
.cuadro h3 { margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.cuadro pre { margin: 0; padding: 10px 12px; border-radius: 9px; background: var(--codigo); font-size: 11px; line-height: 1.55; height: 104px; overflow: hidden; color: var(--tinta-2); -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent); mask-image: linear-gradient(180deg, #000 60%, transparent); }
.cuadro-pie { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--tinta-3); }
.cuadro-hace { margin-right: auto; }
.cuadro-votos { display: inline-flex; align-items: center; gap: 3px; color: var(--tinta-2); }
.punto { display: inline-flex; align-items: center; gap: 5px; color: var(--tinta-2); }
.punto::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tinta-3); }
.punto-ayuda { color: var(--ambar); } .punto-ayuda::before { background: var(--ambar); }
.punto-ok { color: var(--verde); } .punto-ok::before { background: var(--verde); }
.hoja-velo { position: fixed; inset: 0; z-index: 80; display: grid; padding: 28px; background: rgba(28, 28, 26, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: aparece 0.2s var(--curva); }
.hoja { display: flex; flex-direction: column; min-height: 0; background: var(--hoja); border-radius: 18px; box-shadow: var(--sombra-alta); overflow: hidden; animation: hoja-entra 0.32s var(--curva); }
@keyframes hoja-entra { from { transform: translateY(14px) scale(0.985); opacity: 0; } }
.hoja-cab { display: flex; align-items: center; gap: 14px; padding: 16px 18px 16px 22px; border-bottom: 1px solid var(--hilo); }
.hoja-titulo { min-width: 0; flex: 1; }
.hoja-titulo h2 { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -0.015em; }
.hoja-titulo p { margin: 2px 0 0; font-size: 12px; color: var(--tinta-3); }
.hoja-acciones { display: flex; align-items: center; gap: 6px; }
.hoja-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.hoja-cuerpo.con-lado { grid-template-columns: minmax(0, 1fr) 340px; }
.hoja-codigo { min-height: 0; overflow: auto; background: var(--codigo); display: flex; }
.hoja-codigo pre { flex: 1; }
.hoja-codigo textarea.codigo { flex: 1; border: 0; padding: 22px 26px; font-size: 12.5px; line-height: 1.75; background: transparent; resize: none; tab-size: 4; }
.hoja-codigo textarea.codigo:focus { outline: none; }
.hoja-lado { min-height: 0; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; border-left: 1px solid var(--hilo); }
.hoja-lado h3 { margin: 0; font-size: 13px; font-weight: 500; }
.hoja-nota { margin: -6px 0 4px; font-size: 12px; color: var(--tinta-3); }
.hoja-lado .propuesta { font-size: 13px; }
.hoja-proponer { display: grid; gap: 8px; margin-top: auto; }
.hoja-componer .hoja-lado { gap: 14px; }
html.sin-scroll { overflow: hidden; }

/* ══ El Arcade ═══════════════════════════════════════════════════════════════════════════════════════
   Otra luz. Índigo profundo y limpio, cuatro neones con oficio: rosa (duelo), cian (one shot), sol (ranked),
   lima (lo que se gana). La letra, en mono y mayúsculas cortas: máquina recreativa, no oficina. */
body[data-zona='arcade'] { --arc-fondo: #191542; --arc-panel: #221d55; --arc-panel-2: #2b2566; --arc-borde: rgba(255, 255, 255, 0.09); --arc-texto: #f3f1ff; --arc-texto-2: #b6b0e3; --arc-rosa: #ff5fa2; --arc-cian: #3ee6ff; --arc-sol: #ffd84a; --arc-lima: #c6ff4a; }
body[data-zona='arcade'] .principal {
  --papel: var(--arc-fondo); --hoja: var(--arc-panel); --hoja-2: var(--arc-panel-2); --hoja-3: rgba(255, 255, 255, 0.07);
  --hilo: var(--arc-borde); --hilo-2: rgba(255, 255, 255, 0.16); --tinta: var(--arc-texto); --tinta-2: var(--arc-texto-2); --tinta-3: #9d96d4;
  --codigo: #15113a; --bermellon: var(--arc-rosa); --verde: var(--arc-lima); --verde-suave: rgba(198, 255, 74, 0.12); --bermellon-texto: var(--arc-rosa); --bermellon-suave: rgba(255, 95, 162, 0.14);
  --sombra: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
  color: var(--arc-texto); font-family: var(--mono);
  background: radial-gradient(1200px 500px at 70% -10%, rgba(255, 95, 162, 0.16), transparent 60%), radial-gradient(900px 500px at 0% 30%, rgba(62, 230, 255, 0.1), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 28px 28px, var(--arc-fondo);
}
body[data-zona='arcade'] { background: #191542; }
body[data-zona='arcade'] .principal .c-kw { color: #c9a6ff; } body[data-zona='arcade'] .principal .c-str { color: #9ff0c3; } body[data-zona='arcade'] .principal .c-num { color: #ffc685; }
body[data-zona='arcade'] .principal .miga { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px var(--arc-borde); color: var(--arc-texto); }
body[data-zona='arcade'] .principal .btn-icono { color: var(--arc-texto-2); }
body[data-zona='arcade'] .principal .aqui .pila-bola, body[data-zona='arcade'] .principal .aqui .pila-mas { box-shadow: 0 0 0 2px var(--arc-fondo); }
body[data-zona='arcade'] .principal .aqui-txt { color: var(--arc-texto-2); }
body[data-zona='arcade'] .principal .cabeza-movil { background: rgba(25, 21, 66, 0.85); }
body.arc-entra .principal { animation: arc-entra 0.6s cubic-bezier(.2, .8, .2, 1); }
@keyframes arc-entra { 0% { clip-path: inset(50% 0 50% 0); filter: brightness(2.2); } 60% { clip-path: inset(0 0 0 0); filter: brightness(1.3); } 100% { filter: none; } }
.riel-arcade .ic { color: var(--bermellon); }
.riel-arcade[aria-current='page'] { background: linear-gradient(90deg, #191542, #3a2470); color: #fff; }
.riel-arcade[aria-current='page'] .ic { color: #ff5fa2; }

.arc-marquesina { position: relative; padding: 46px 28px 34px; border-radius: 22px; text-align: center; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); box-shadow: inset 0 0 0 1px var(--arc-borde); }
.arc-luces { position: absolute; inset: 10px 14px; pointer-events: none; display: grid; grid-template-columns: repeat(14, 1fr); align-content: space-between; justify-items: center; }
.arc-luces i { width: 5px; height: 5px; border-radius: 50%; background: var(--arc-sol); box-shadow: 0 0 6px var(--arc-sol); opacity: 0.25; animation: luz 1.4s steps(1) infinite; animation-delay: calc(var(--i) * 0.1s); }
@keyframes luz { 50% { opacity: 1; } }
.arc-titulo { margin: 0; font-family: var(--mono); font-size: clamp(42px, 7vw, 76px); font-weight: 700; letter-spacing: 0.08em; line-height: 1; display: inline-flex; gap: 0.06em; }
.arc-titulo span { display: inline-block; color: transparent; background: linear-gradient(180deg, #fff 30%, var(--arc-rosa)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px rgba(255, 95, 162, 0.35)); animation: letra 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * 0.12s); }
@keyframes letra { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-6px); } }
.arc-sub { margin: 14px 0 0; color: var(--arc-texto-2); font-size: 13px; }
.arc-marcas { display: flex; justify-content: center; gap: 34px; margin-top: 28px; flex-wrap: wrap; }
.arc-marcas div { display: grid; gap: 2px; }
.arc-marcas b { font-size: 26px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.arc-marcas b small { font-size: 14px; margin-left: 2px; color: var(--arc-texto-2); }
.arc-marcas span { font-size: 11px; color: var(--arc-texto-2); text-transform: uppercase; letter-spacing: 0.08em; }
.arc-lider { color: var(--arc-sol) !important; }
.arc-ficha { position: absolute; right: 18px; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 99px; font-size: 11.5px; color: var(--arc-sol); box-shadow: inset 0 0 0 1px rgba(255, 216, 74, 0.4); }
.arc-ficha:hover { background: rgba(255, 216, 74, 0.1); }
.arc-ficha.cae .ic { animation: ficha 0.5s cubic-bezier(.5, 0, .5, 1.6); }
@keyframes ficha { 50% { transform: translateY(8px) rotate(90deg); opacity: 0; } 51% { transform: translateY(-8px); } }

.arc-modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.arc-modo { --c: var(--arc-rosa); position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 18px; background: var(--arc-panel); box-shadow: inset 0 0 0 1px var(--arc-borde); overflow: hidden; transition: transform 0.25s var(--curva), box-shadow 0.25s; }
.arc-modo::before { content: ''; position: absolute; inset: auto -30% -60% auto; width: 220px; height: 220px; border-radius: 50%; background: var(--c); opacity: 0.16; filter: blur(30px); transition: opacity 0.3s; pointer-events: none; }
.arc-modo:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--c), 0 16px 40px -18px var(--c); }
.arc-modo:hover::before { opacity: 0.3; }
.arc-modo[data-color='cian'] { --c: var(--arc-cian); }
.arc-modo[data-color='sol'] { --c: var(--arc-sol); }
.arc-modo h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: 0.02em; color: #fff; }
.arc-modo p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--arc-texto-2); flex: 1; font-family: var(--texto); }
.arc-modo-tag { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c, var(--arc-cian)); }
.arc-bloqueado { filter: saturate(0.7); }
.arc-bloqueado::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.07) 50%, transparent 60%) -100% 0 / 250% 100%; animation: brillo 3.5s ease-in-out infinite; pointer-events: none; }
@keyframes brillo { to { background-position: 150% 0; } }
.arc-boton { --c2: var(--c, var(--arc-rosa)); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; min-height: 44px; padding: 0 18px; border-radius: 12px; font-family: var(--mono); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; color: #191542; background: var(--c2); box-shadow: 0 4px 0 color-mix(in srgb, var(--c2) 55%, #000); transition: transform 0.1s, box-shadow 0.1s; }
.arc-boton:hover { filter: brightness(1.08); }
.arc-boton:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--c2) 55%, #000); }
.arc-boton[disabled], .arc-boton[aria-disabled='true'] { opacity: 0.45; pointer-events: none; }
.arc-bloqueado .arc-boton { background: rgba(255, 255, 255, 0.08); color: var(--arc-texto-2); box-shadow: none; opacity: 1; }
.arc-boton.arc-pq { min-height: 38px; padding: 0 14px; font-size: 11.5px; }
.arc-boton.arc-grande { min-height: 52px; padding: 0 30px; font-size: 14px; margin: 8px auto 0; }
.arc-boton.arc-gris { --c2: #d9d5ff; }
.arc-cuenta { font-size: 11px; padding: 2px 7px; border-radius: 99px; background: rgba(25, 21, 66, 0.2); }

.arc-rejilla { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; margin-top: 18px; align-items: start; }
.arc-panel { padding: 22px; border-radius: 18px; background: var(--arc-panel); box-shadow: inset 0 0 0 1px var(--arc-borde); scroll-margin-top: 20px; }
.arc-h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--arc-texto-2); }
.arc-h2 span { margin-left: auto; color: var(--arc-lima); }
.arc-h1 { margin: 8px 0 6px; font-size: 26px; font-weight: 700; color: #fff; letter-spacing: 0.01em; }
.arc-rival { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--arc-borde); }
.arc-rival:first-of-type { border-top: 0; }
.arc-rival b { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.arc-rival small { font-size: 11.5px; color: var(--arc-texto-2); font-family: var(--texto); }
.arc-ocupado { opacity: 0.55; }
.arc-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--arc-sol); }
.arc-vacio, .arc-nota { margin: 8px 0 0; font-size: 12px; color: var(--arc-texto-2); }
.arc-podio { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 8px; margin: 6px 0 16px; }
.arc-escalon { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: #fff; }
.arc-escalon > b { font-size: 12.5px; }
.arc-escalon > span:not(.aura):not(.av) { font-size: 11px; color: var(--arc-texto-2); }
.arc-escalon > i { width: 100%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 18px; border-radius: 10px 10px 4px 4px; color: #191542; height: 46px; background: var(--arc-cian); }
.arc-escalon[data-puesto='1'] > i { height: 70px; background: var(--arc-sol); box-shadow: 0 0 24px rgba(255, 216, 74, 0.35); }
.arc-escalon[data-puesto='3'] > i { height: 34px; background: var(--arc-rosa); }
.arc-fila { display: grid; grid-template-columns: 20px auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 6px; border-radius: 10px; text-decoration: none; color: #fff; font-size: 12.5px; min-height: 44px; }
.arc-fila:hover { background: rgba(255, 255, 255, 0.05); }
.arc-fila small { display: block; color: var(--arc-texto-2); font-size: 11px; }
.arc-fila b { color: var(--arc-lima); }
.arc-pos { color: var(--arc-texto-2); font-size: 11.5px; }
.arc-yo { background: rgba(198, 255, 74, 0.08); }
.arc-confeti { position: fixed; top: -12px; left: var(--x); z-index: 200; width: 8px; height: 12px; background: var(--c); animation: confeti var(--d) cubic-bezier(.2, .6, .4, 1) forwards; pointer-events: none; }
@keyframes confeti { to { transform: translateY(105vh) rotate(720deg); } }
body.arc-konami .arc-titulo span { animation-duration: 0.5s; }

/* El duelo y el One Shot, dentro del Arcade. */
body[data-zona='arcade'] .duelo-cab, body[data-zona='arcade'] .enunciado, body[data-zona='arcade'] .editor { background: var(--arc-panel); box-shadow: inset 0 0 0 1px var(--arc-borde); }
body[data-zona='arcade'] .reloj-duelo b { color: var(--arc-lima); text-shadow: 0 0 18px rgba(198, 255, 74, 0.35); }
body[data-zona='arcade'] .consola, body[data-zona='arcade'] .editor-pie { background: var(--arc-panel); }
body[data-zona='arcade'] .editor-zona { background: #15113a; }
body[data-zona='arcade'] .principal .btn-negro { background: var(--arc-rosa); color: #191542; box-shadow: 0 3px 0 #a3305f; }
body[data-zona='arcade'] .principal .btn-hoja { background: rgba(255, 255, 255, 0.07); color: var(--arc-texto); box-shadow: inset 0 0 0 1px var(--arc-borde); }
body[data-zona='arcade'] .lineas-rival i[data-on] { background: var(--arc-cian); }
body[data-zona='arcade'] .final-duelo h2 { color: var(--arc-sol); }
.os-sala, .os-fin { text-align: center; padding: 40px 24px; }
.os-asientos { display: flex; justify-content: center; gap: 18px; margin: 28px 0; flex-wrap: wrap; }
.os-asiento { display: grid; justify-items: center; gap: 8px; width: 84px; font-size: 12px; color: var(--arc-texto-2); }
.os-asiento > i { width: 54px; height: 54px; border-radius: 16px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14); background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 255, 255, 0.04) 6px 12px); animation: espera 1.4s ease-in-out infinite; }
@keyframes espera { 50% { opacity: 0.4; } }
.os-asiento.lleno { color: #fff; animation: asiento 0.45s cubic-bezier(.34, 1.6, .64, 1); }
@keyframes asiento { from { transform: scale(0.4); opacity: 0; } }
.os-cuenta { display: grid; justify-items: center; gap: 6px; padding: 80px 20px; }
.os-cuenta b { font-size: 140px; line-height: 1; font-weight: 700; color: var(--arc-sol); text-shadow: 0 0 50px rgba(255, 216, 74, 0.45); animation: cuenta 1s ease-out; }
@keyframes cuenta { from { transform: scale(1.6); opacity: 0; } }
.os-cuenta p { margin: 0; color: var(--arc-texto-2); }
.os-mesa { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) 230px; gap: 14px; align-items: stretch; }
.os-enunciado p { font-size: 13px; line-height: 1.65; color: var(--arc-texto-2); font-family: var(--texto); }
.os-enunciado pre { margin: 0; padding: 12px 14px; border-radius: 10px; background: #15113a; font-size: 12.5px; }
.os-tiempo { height: 4px; margin-top: 20px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.os-tiempo i { display: block; height: 100%; background: linear-gradient(90deg, var(--arc-rosa), var(--arc-sol)); transform-origin: left; }
.os-editor { padding: 0; overflow: hidden; display: grid; grid-template-rows: 1fr auto auto; }
.os-editor .editor-zona { min-height: 300px; }
.os-jugador { display: grid; grid-template-columns: 16px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 4px; border-radius: 10px; transition: background 0.3s; }
.os-jugador b { font-size: 18px; color: var(--arc-lima); font-variant-numeric: tabular-nums; }
.os-pos { font-size: 11px; color: var(--arc-texto-2); }
.os-nombre { font-size: 12.5px; color: #fff; }
.os-nombre small { display: block; font-size: 11px; color: var(--arc-texto-2); }
.os-yo { background: rgba(255, 255, 255, 0.05); }
.os-hecho .os-nombre small { color: var(--arc-lima); }
.os-hecho { animation: hecho 0.6s ease-out; }
@keyframes hecho { 30% { background: rgba(198, 255, 74, 0.18); } }

@media (max-width: 1100px) {
  .arc-modos, .arc-rejilla, .os-mesa { grid-template-columns: minmax(0, 1fr); }
  .hoja-cuerpo.con-lado { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .hoja-lado { border-left: 0; border-top: 1px solid var(--hilo); max-height: 45vh; }
}
@media (max-width: 900px) {
  .principal { padding: 0 16px 96px; }
  .hoja-velo { padding: 10px; }
  .hoja-cab { flex-wrap: wrap; padding: 12px 14px; }
  .hoja-acciones { width: 100%; justify-content: flex-end; }
  .codigo-grande { width: calc(100vw - 20px); height: calc(100vh - 20px); }
  .arc-marquesina { padding: 36px 16px 64px; }
  .arc-marcas { gap: 20px; }
  .cuadros { grid-template-columns: minmax(0, 1fr); }
  .msg-codigo-barra .btn-icono { width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .placa i, .aura > i, .arc-luces i, .arc-titulo span, .os-asiento > i, .mascota .m-ojos { animation: none !important; }
}

/* Ajustes de la auditoría (toques de 44 px y texto mínimo). */
.falta-asig h4 small { font-size: 11.5px; }
.tablero-top a { padding: 9px; margin: 0 -5px; }
.hoja-acciones { flex-wrap: wrap; justify-content: flex-end; }
.hoja-acciones .btn-icono { flex: none; }
@media (max-width: 900px) {
  .arc-ficha, .arc-boton.arc-pq { min-height: 44px; }
  .hoja-acciones .btn-icono { width: 44px; min-height: 44px; }
}

/* La frase del día en la puerta, y la firma. Mismo tipo y mismo color que el lema que sustituyen. */
.entrada-lema { max-width: 560px; }
.entrada-lema .frase { margin: 0; }
.entrada-lema blockquote { margin: 0; font-size: clamp(24px, 2.7vw, 36px); line-height: 1.15; font-weight: 500; letter-spacing: -0.035em; color: #182024; text-wrap: balance; }
.entrada-lema blockquote::before { content: '\201C'; }
.entrada-lema blockquote::after { content: '\201D'; }
.entrada-lema figcaption { margin-top: 16px; font-size: 14px; color: #2c3438; }
.entrada-lema figcaption span { color: #3d474c; }
.entrada-lema .firma { margin: 26px 0 0; font-size: 12.5px; color: #2c3438; max-width: none; }
.entrada-lema .firma a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.entrada-lema .firma a:hover { text-decoration-thickness: 2px; }
.entrada-paisaje[data-momento='noche'] .entrada-lema blockquote, .entrada-paisaje[data-momento='noche'] .entrada-lema figcaption, .entrada-paisaje[data-momento='noche'] .entrada-lema .firma { color: #f1efe8; }
.entrada-paisaje[data-momento='noche'] .entrada-lema figcaption span { color: #cfd2de; }
@media (max-width: 900px) { .entrada-lema .firma a { display: inline-flex; align-items: center; min-height: 44px; } .entrada-lema blockquote { font-size: 23px; } }

/* ── Tanda 3: la personalización, completa; y el Arcade en el riel, con su propia luz ───────────────── */
/* Sin degradado de desvanecido: la placa llena la fila entera, a plena fuerza. */
.placa, .fp-cab .placa, .perfil-cab .placa { -webkit-mask-image: none; mask-image: none; opacity: 1; }
.persona .placa { border-radius: inherit; }
.persona[data-estilo]:hover, .persona[data-estilo]:focus-visible { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55), 0 6px 18px -8px rgba(20, 20, 18, 0.35); }
/* Los textos sobre una placa oscura se leen en claro; sobre una clara, en oscuro. */
.persona[data-estilo='nocturno'] b, .persona[data-estilo='nocturno'] small, .persona[data-estilo='arcade'] b, .persona[data-estilo='arcade'] small { text-shadow: none; }
.persona[data-estilo='nocturno'] b, .persona[data-estilo='nocturno'] small { color: #f4f1e6; }
.persona[data-estilo='nocturno'] small { color: #c9cce6; }
.persona[data-estilo='atardecer'] b, .persona[data-estilo='atardecer'] small { color: #3a1f22; text-shadow: none; }
.persona[data-estilo='nocturno'] .cuenta, .persona[data-estilo] .cuenta { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85); }
.fp-cab[data-estilo='nocturno'] b, .perfil-cab[data-estilo='nocturno'] h1 { color: #f4f1e6; }
.fp-cab[data-estilo='nocturno'] small, .perfil-cab[data-estilo='nocturno'] p { color: #c9cce6; }
.fp-cab[data-estilo='atardecer'] b, .fp-cab[data-estilo='atardecer'] small, .perfil-cab[data-estilo='atardecer'] h1, .perfil-cab[data-estilo='atardecer'] p { color: #3a1f22; }
.fp-cab[data-estilo] b, .fp-cab[data-estilo] small, .perfil-cab[data-estilo] p { text-shadow: none; }
.persona.muestra .placa { opacity: 1; }
.placa[data-estilo='sakura'] { background: linear-gradient(0deg, #ffd5e2, #ffd5e2); }
.placa[data-estilo='corazones'] { background: linear-gradient(0deg, #ffc9ce, #ffc9ce); }
.placa[data-estilo='aurora'] { background: linear-gradient(100deg, #aef0d6, #9cd3f5, #c3a8f5, #aef0d6); background-size: 300% 100%; }
.placa[data-estilo='circuito'] { background: repeating-linear-gradient(90deg, transparent 0 22px, rgba(31, 150, 90, 0.28) 22px 23px), repeating-linear-gradient(0deg, transparent 0 14px, rgba(31, 150, 90, 0.24) 14px 15px), #bfeccf; }
.placa[data-estilo='arcade'] { background: repeating-conic-gradient(#ffd0e6 0 25%, #c9f3ff 0 50%) 0 0 / 12px 12px; }
.placa[data-estilo='nocturno'] { background: radial-gradient(circle at 90% 30%, #f6f0d4 0 8px, transparent 9px), #262c58; }
.placa[data-estilo='atardecer'] { background: radial-gradient(circle at 86% 58%, #ffe08a 0 12px, transparent 13px), #ff9f87; }
.placa[data-estilo='atardecer']::after { left: 50%; height: 44%; background: #b4616f; opacity: 1; }
.placa[data-estilo='sakura'] i { top: -10px; }

/* El enlace del Arcade en el riel: siempre con la luz del Arcade, para que se note que es otro sitio. */
.riel-arcade { background: linear-gradient(100deg, #191542, #3a2470); color: #fff; margin-top: 6px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 18px -10px rgba(58, 36, 112, 0.8); position: relative; overflow: hidden; }
.riel-arcade:hover { background: linear-gradient(100deg, #221b57, #4a2d8a); color: #fff; }
.riel-arcade .ic { color: #ff5fa2; }
.riel-arcade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62%) -120% 0 / 260% 100%; animation: brillo-riel 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes brillo-riel { 60%, 100% { background-position: 160% 0; } }
.riel-arcade[aria-current='page'] { background: linear-gradient(100deg, #ff5fa2, #8a5cff); color: #191542; }
.riel-arcade[aria-current='page'] .ic { color: #191542; }
.barra-movil a[href='#/arcade'] .ic { color: #ff5fa2; }
@media (prefers-reduced-motion: reduce) { .riel-arcade::after { animation: none; } }

/* Foto de perfil dentro del avatar: la imagen tapa las iniciales, que quedan debajo por si no carga. */
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Faltas: recreo del horario y editor de asignaturas. */
.horario .recreo td { height: 22px; background: none; color: var(--tinta-3); font-size: 11px; font-weight: 400; cursor: default; text-align: center; letter-spacing: 0.04em; }
.horario .recreo td.hora { text-align: right; padding-right: 6px; }
.editor-asig { display: grid; gap: 6px; }
.fila-asig { display: grid; grid-template-columns: minmax(0, 1fr) 76px auto; gap: 6px; align-items: center; }
.fila-asig .entrada { min-height: 40px; }