/* Fósforo · pantalla de fósforo. El color del texto es el de su linaje (--h);
   la franja de arriba es el cielo, que da la vuelta a la rueda de color con su año (--hf). */
:root {
  --h: 140;
  --hf: 200;
  --fondo: #050806;
  --tinta: oklch(0.85 0.14 var(--h));
  --suave: oklch(0.70 0.09 var(--h));
  --tenue: oklch(0.52 0.05 var(--h));
  --borde: oklch(0.36 0.05 var(--h));
  --panel: oklch(0.16 0.02 var(--h));
  --cielo: oklch(0.74 0.13 var(--hf));
  --alerta: oklch(0.80 0.15 60);
  --mal: oklch(0.74 0.16 25);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
}
@supports not (color: oklch(0.5 0.1 100)) {
  :root {
    --tinta: hsl(var(--h) 70% 70%); --suave: hsl(var(--h) 35% 58%); --tenue: hsl(var(--h) 18% 42%);
    --borde: hsl(var(--h) 22% 26%); --panel: hsl(var(--h) 20% 9%); --cielo: hsl(var(--hf) 60% 62%);
    --alerta: hsl(40 90% 65%); --mal: hsl(8 80% 66%);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--tinta); }
body { font-family: var(--mono); font-size: 15px; line-height: 1.55; -webkit-text-size-adjust: 100%; }
.crt { min-height: 100vh; text-shadow: 0 0 6px color-mix(in oklch, var(--tinta) 35%, transparent); }
.crt::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0, 0, 0, 0.16) 3px);
}
main { max-width: 720px; margin: 0 auto; padding: 14px 16px 72px; }
.cielo { position: sticky; top: 0; z-index: 10; height: 6px; background: var(--cielo); box-shadow: 0 0 16px var(--cielo); }

h1, h2, h3 { font-weight: 600; letter-spacing: 0.04em; margin: 0; }
h1 { font-size: 17px; text-transform: uppercase; }
h2 { font-size: 13px; text-transform: uppercase; color: var(--suave); margin: 30px 0 10px; letter-spacing: 0.12em; }
h2::before { content: "▌"; color: var(--tinta); margin-right: 6px; }
p { margin: 8px 0; }
a { color: var(--tinta); }
.tenue { color: var(--tenue); }
.suave { color: var(--suave); }
.alerta { color: var(--alerta); }
.mal { color: var(--mal); }
.pequeno { font-size: 13px; }

button, .boton {
  font: inherit; color: var(--fondo); background: var(--tinta); border: 0; border-radius: 3px;
  padding: 10px 14px; min-height: 44px; cursor: pointer; text-shadow: none; display: inline-block; text-decoration: none;
}
button.secundario, .boton.secundario { background: transparent; color: var(--tinta); border: 1px solid var(--borde); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

input[type="text"], select {
  font: inherit; color: var(--tinta); background: var(--panel); border: 1px solid var(--borde); border-radius: 3px;
  padding: 10px 12px; min-height: 44px; width: 100%;
}
input[type="range"] { width: 100%; accent-color: var(--tinta); }
label { display: block; }

/* cabecera */
.cabecera { border-bottom: 1px solid var(--borde); padding-bottom: 12px; }
.cabecera .linea1 { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.edad-viva { font-size: 26px; font-weight: 600; margin-top: 6px; font-variant-numeric: tabular-nums; }
.meta { color: var(--suave); font-size: 13px; }

/* paneles */
.panel { background: var(--panel); border: 1px solid var(--borde); border-radius: 4px; padding: 12px 14px; margin: 10px 0; }
.aviso { border-color: var(--alerta); }
.aviso h3 { color: var(--alerta); font-size: 14px; }

/* diario */
.hechos { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; font-size: 14px; margin: 8px 0 10px; }
.hechos dt { color: var(--suave); }
.hechos dd { margin: 0; }
.diario-texto { font-style: italic; border-left: 2px solid var(--borde); padding-left: 10px; white-space: pre-wrap; }
.marca { font-size: 12px; }

/* decisiones */
.decision .opciones { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.decision .opciones button { text-align: left; }
.decision .bloqueo { font-size: 12px; color: var(--mal); margin-top: 2px; }
.plazo { font-size: 13px; color: var(--alerta); }

/* línea */
.linea-form { display: flex; gap: 8px; }
.linea-form input { flex: 1; min-width: 0; }
.contador { font-size: 12px; color: var(--tenue); text-align: right; margin-top: 4px; }
.respuesta { margin: 10px 0 0; }
.veredicto { font-weight: 700; margin-right: 8px; }
.historial { list-style: none; padding: 0; margin: 10px 0 0; font-size: 14px; }
.historial li { padding: 6px 0; border-top: 1px dashed var(--borde); }
.historial .tuya { color: var(--suave); }

/* conversación */
.chat { list-style: none; padding: 0; margin: 8px 0; }
.chat li { margin: 6px 0; }
.chat .dueno { color: var(--suave); }

/* hechos del año */
.feed { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.feed li { padding: 5px 0; border-top: 1px dashed var(--borde); display: grid; grid-template-columns: 6.5em 1fr; gap: 8px; }
.feed .cuando { color: var(--tenue); font-size: 12px; padding-top: 2px; }
.feed .i3 { color: var(--tinta); }
.feed .i2 { color: var(--suave); }
.feed .i1 { color: var(--tenue); }

/* fachada */
.fachada { display: grid; gap: 6px; padding: 12px; background: #020302; border: 1px solid var(--borde); border-radius: 4px; position: relative; overflow: hidden; }
.piso { display: grid; gap: 6px; }
.ventana {
  height: 26px; border: 1px solid #1b1f1c; background: #0a0d0b; border-radius: 2px; display: flex; overflow: hidden;
  padding: 0; min-height: 0; cursor: pointer;
}
.ventana span { flex: 1; }
.ventana.mia { outline: 2px solid var(--tinta); outline-offset: 2px; animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .ventana.mia { animation: none; } }
.mar { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, oklch(0.5 0.12 240 / 0.55), oklch(0.5 0.12 240 / 0.15)); pointer-events: none; }
.info-ventana { min-height: 1.5em; font-size: 13px; color: var(--suave); margin-top: 6px; }

/* órdenes */
.ordenes { display: grid; gap: 10px; }
.ordenes .fila3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.radios { display: flex; gap: 14px; flex-wrap: wrap; }
.radios label { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }

/* arranque */
.arranque { white-space: pre-wrap; font-size: 14px; }
.cursor { display: inline-block; width: 0.6em; height: 1.1em; background: var(--tinta); vertical-align: text-bottom; animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

.edificios { display: grid; gap: 10px; }
.edificios button { text-align: left; background: var(--panel); color: var(--tinta); border: 1px solid var(--borde); }
.edificios button[aria-pressed="true"] { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta) inset; }

.error { color: var(--mal); min-height: 1.2em; font-size: 13px; }
.pie { margin-top: 40px; font-size: 12px; color: var(--tenue); border-top: 1px solid var(--borde); padding-top: 12px; }
.crisis { border-color: var(--alerta); color: var(--alerta); }