/* PuraNota Undécimo · la app de verdad, sobre undecimo.css (componentes) y ficcion.css (.fic-esferas: piedra y jade).
   Los prototipos pintaban dentro de un teléfono (.tel); aquí la pantalla es el teléfono. */
html { background: var(--fondo); }
body { background: var(--fondo); color: var(--texto); min-height: 100dvh; }
#app { max-width: 520px; margin: 0 auto; }
.pantalla { min-height: 100dvh; display: flex; flex-direction: column; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 100px; }
.pantalla.sin-tabs { padding-bottom: 24px; }
.pantalla.centrada { justify-content: center; gap: 16px; }
.pantalla .hero { margin: -12px -16px -12px; padding: 32px 20px 28px; min-height: 100dvh; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; position: relative; overflow: hidden; }
.pantalla .hero > * { position: relative; }
/* Botones de acción abajo (como .pie del prototipo) y la barra de pestañas, fijas */
.pie { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 10px 16px max(16px, env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto;
  background: linear-gradient(180deg, transparent, var(--fondo) 30%); z-index: 3; }
.pie.con-tabs { bottom: 68px; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto; padding-bottom: max(14px, env(safe-area-inset-bottom)); z-index: 4; }
.tabs a { text-decoration: none; }
.boton { cursor: pointer; border: 0; font-family: 'Inter', sans-serif; }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.op { cursor: pointer; }
.op:active { transform: scale(.99); }
.op.bloqueada { cursor: default; }
.entrada { display: block; width: 100%; outline: none; padding: 14px 16px; border-radius: 14px; background: var(--tarjeta); border: 1px solid var(--linea); font: 700 18px 'Inter', sans-serif; color: var(--texto); }
.entrada::placeholder { color: var(--tenue); font-weight: 600; }
.campo { display: grid; gap: 6px; }
.campo label { font: 700 12px 'Inter'; color: var(--suave); }
.entrada:focus { outline: 2px solid var(--acento); outline-offset: -2px; }
input.entrada { -webkit-appearance: none; appearance: none; }
.campo label { display: block; }
.estado { display: none; }
/* La cuadrícula de 60 del simulacro */
.celdas { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.celdas i { aspect-ratio: 1; border-radius: 5px; background: var(--tarjeta-2); border: var(--borde); font: 700 10px 'Inter'; display: grid; place-items: center; font-style: normal; color: var(--tenue); cursor: pointer; }
.celdas i.r { background: color-mix(in srgb, var(--acento) 55%, var(--tarjeta)); color: var(--acento-tinta); }
.celdas i.m { background: var(--ambar); color: #111; }
.celdas i.a { outline: 2px solid var(--texto); outline-offset: 1px; }
/* Imágenes de las preguntas y el subrayado */
.figura { background: #fff; border-radius: 12px; padding: 6px; display: grid; place-items: center; border: var(--borde); }
.figura img { max-width: 100%; max-height: 260px; display: block; }
.estimulo u, .pregunta u { text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.estimulo table, .pregunta table { border-collapse: collapse; margin: 6px 0; font-size: 12.5px; width: 100%; }
.estimulo td, .estimulo th, .pregunta td, .pregunta th { border: 1px solid var(--linea); padding: 4px 6px; }
.estimulo.larga { max-height: 180px; overflow: hidden; position: relative; }
.estimulo.larga::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(transparent, var(--fondo)); }
.plegar { background: none; border: 0; color: var(--acento); font: 700 12px 'Inter'; padding: 2px 0; cursor: pointer; }
/* Capas: panel que sube y avisos */
.velo { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 10; }
.panel { position: fixed; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto; background: var(--capa); border-radius: 22px 22px 0 0; border-top: var(--borde); padding: 18px 16px max(20px, env(safe-area-inset-bottom)); z-index: 11; display: grid; gap: 12px; animation: subir .22s ease-out; }
/* ficcion.css también define .panel (las luces del prototipo G, 8 columnas); el diálogo va a una sola columna */
.panel[role="dialog"] { grid-template-columns: 1fr; }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.aviso-flotante { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--texto); color: var(--fondo); padding: 10px 16px; border-radius: 999px; font: 700 13px 'Inter'; z-index: 12; max-width: 90vw; text-align: center; }
.cargando { text-align: center; color: var(--suave); padding: 40vh 0 0; font-weight: 700; }
/* Radar y esferas a tamaño de pantalla */
.radar { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; }
.radar svg { width: 150px; height: 150px; overflow: visible; }
.radar .ejes { display: grid; gap: 4px; font-size: 13px; }
.radar .ejes div { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.radar .ejes b { font-family: 'Fraunces'; font-size: 16px; }
.radar .ejes b.r { color: var(--ambar); }
.pent { height: 272px; }
.esfera { display: inline-block; }
.pent .nodo > span:first-child { display: inline-block; line-height: 0; }
.est-ruido { position: absolute; border-radius: 50%; opacity: .45; mix-blend-mode: screen; pointer-events: none; }
.fic-esferas .estatica { filter: hue-rotate(90deg); }
.main-tag { font: 800 9px 'Inter'; letter-spacing: .1em; padding: 2px 5px; border-radius: 5px; background: var(--oro); color: #0E1311; vertical-align: middle; }
.hud { display: flex; gap: 6px; }
.hud span { font: 700 11px 'Inter'; padding: 4px 8px; border-radius: 999px; background: var(--tarjeta-2); border: 1px solid var(--linea); white-space: nowrap; }
.piezas { display: flex; gap: 4px; }
.piezas i { flex: 1; height: 8px; border-radius: 3px; background: var(--tarjeta-2); border: 1px solid var(--linea); }
.piezas i.ok { background: var(--acento); border-color: var(--acento); }
.zona { display: grid; gap: 5px; padding: 9px 0; border-top: 1px solid var(--linea); }
.zona:first-of-type { border-top: 0; padding-top: 0; }
.guardian { text-align: center; padding: 14px; background: radial-gradient(80% 70% at 50% 0%, #243830 0%, var(--tarjeta) 70%); }
.guardian .nombre { font: 900 24px 'Fraunces'; text-transform: uppercase; letter-spacing: .04em; line-height: 1; }
.fases { display: flex; gap: 6px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
.fases span { font: 700 11px 'Inter'; padding: 3px 9px; border-radius: 999px; background: var(--tarjeta-2); border: var(--borde); }
.fases span.on { background: var(--acento); color: #0E1311; }
.trampa { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px 'Inter'; color: var(--ambar); }
.patron { border-left: 3px solid var(--ambar); padding-left: 10px; font-size: 13.5px; line-height: 1.5; }
.porque { border-left: 3px solid var(--verde); padding-left: 10px; font-size: 13.5px; line-height: 1.5; }
.porque.tuya { border-left-color: var(--rojo); }
/* Entrada */
.sug { display: grid; gap: 4px; }
.sug div { padding: 10px 12px; border-radius: 10px; background: var(--tarjeta); border: 1px solid var(--linea); font-size: 13.5px; cursor: pointer; }
.sug div.on { outline: 2px solid var(--acento); outline-offset: -2px; }
.sug small { display: block; color: var(--suave); font-size: 11.5px; }
.anios { display: flex; gap: 6px; }
.anios span { flex: 1; text-align: center; padding: 10px 4px; border-radius: 10px; background: var(--tarjeta); border: 1px solid var(--linea); font: 700 12px 'Inter'; cursor: pointer; }
.anios span.on { background: var(--acento); color: #0E1311; border-color: var(--acento); }
.aviso { font-size: 12.5px; line-height: 1.5; color: var(--suave); padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--linea); }
.pin { display: flex; gap: 14px; justify-content: center; }
.pin i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--suave); }
.pin i.on { background: var(--acento); border-color: var(--acento); }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.teclado button { text-align: center; padding: 14px 0; border-radius: 12px; background: var(--tarjeta); border: 1px solid var(--linea); font: 700 22px 'Fraunces'; color: var(--texto); cursor: pointer; }
.teclado button.mudo { background: transparent; border-color: transparent; font: 700 12px 'Inter'; color: var(--suave); }
.guia { display: grid; gap: 6px; }
.guia .r { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 9px 10px; border-radius: 12px; background: var(--tarjeta); border: 1px solid var(--linea); font-size: 13px; line-height: 1.4; }
.guia .r b { display: block; font-size: 14px; }
.guia .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--tarjeta-2); font-size: 16px; }
.lista-simple { display: grid; gap: 6px; }
.lista-simple .r { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--tarjeta); border: 1px solid var(--linea); font-size: 13.5px; cursor: pointer; }
.lista-simple .r small { display: block; color: var(--suave); font-size: 11.5px; }
.num.grande { font-size: 84px; }
.nota-lateral { font-size: 12px; color: var(--tenue); }
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } }
/* Tu sistema: casillas de la lista de la víspera y los toques de la mañana */
.habito { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--linea); font-size: 14px; cursor: pointer; }
.habito:first-of-type { border-top: 0; }
.habito .ok { width: 24px; height: 24px; border-radius: 8px; border: 1px solid var(--linea); display: grid; place-items: center; font-size: 13px; }
.habito .ok.si { background: var(--verde); color: #0E1311; border-color: var(--verde); }