/* ══════════════════════════════════════════════════════════════
   DECADENCIA MENTAL — hoja de estilos
   Sistema: hormigón + señal. Dos voces tipográficas:
     mono  = la máquina (etiquetas, fechas, números, controles)
     serif = tú (el texto que escribes)
   Paleta de la gráfica validada con el validador de dataviz
   contra la superficie #12110F en modo oscuro.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* superficies */
  --concreto:  #12110F;   /* plano de página y superficie de la gráfica */
  --hormigon:  #1A1916;   /* panel */
  --cemento:   #26241F;   /* bordes, retícula, hairlines */
  --junta:     #3A372F;   /* borde más marcado */

  /* tinta */
  /* Los tres niveles de tinta pasan AA (4.5:1) sobre --concreto: hasta la
     etiqueta más apagada lleva información real (fechas, conteos, ejes). */
  --hueso:     #EDE8DC;   /* texto primario   — 15.4:1 */
  --ceniza:    #A39D8E;   /* texto secundario —  7.0:1 */
  --polvo:     #878275;   /* texto apagado    —  5.0:1 */

  /* acento único: pintura de señalización */
  --senal:     #E5C038;
  --senal-oscuro: #6B5817;  /* fondo del banner de edición — 5.7:1 con --hueso */

  /* datos: escala divergente (mal ← neutro → bien) */
  --mal:       #E8452A;
  --neutro:    #8C8A80;
  --bien:      #3C9BE0;

  /* separación de canales solo para la aberración cromática del título */
  --fantasma-a: #00E5D0;
  --fantasma-b: #FF2D6F;

  /* peligro */
  --peligro:   #E8452A;

  /* ritmo 4/8 */
  --e1: 4px; --e2: 8px; --e3: 16px; --e4: 24px; --e5: 32px; --e6: 48px; --e7: 64px;

  --mono: "Space Mono", ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;

  --ancho: 1080px;

  /* amplitud del glitch del título; la controla el JS según el ánimo */
  --deterioro: 0px;

  --z-scrim: 100;
  --z-toast: 1000;
}

* { box-sizing: border-box; }

/* Varias piezas de abajo declaran display:flex/grid/block, y una regla de autor
   le gana al [hidden]{display:none} del navegador aunque tengan la misma
   especificidad. Sin esto, el diálogo y el banner de edición se ven siempre. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--concreto);
  color: var(--hueso);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.5;
  /* retícula de hormigón: dos hairlines, nunca decorativa por encima del texto */
  background-image:
    linear-gradient(to right, var(--cemento) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cemento) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: -1px -1px;
}

/* ── saltar al contenido ──────────────────────────────────── */
.saltar {
  position: absolute; left: -9999px; top: 0;
  background: var(--senal); color: var(--concreto);
  min-height: 44px; display: flex; align-items: center;
  padding: var(--e2) var(--e3);
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  text-decoration: none; z-index: var(--z-toast);
}
.saltar:focus { left: 0; }

/* ══ CABECERA ════════════════════════════════════════════════ */
.cabecera {
  border-bottom: 2px solid var(--junta);
  background: var(--concreto);
  padding: var(--e6) var(--e4) var(--e4);
}
.cabecera-fila { max-width: var(--ancho); margin: 0 auto; }

.titulo {
  position: relative;
  margin: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2rem, 9vw, 5rem);
  line-height: .95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--hueso);
}
/* Firma de la página: el título se desalinea en canales RGB según tu ánimo
   reciente. La amplitud está topada para que siempre se lea. */
.titulo::before,
.titulo::after {
  content: attr(data-texto);
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .85;
  mix-blend-mode: screen;
}
.titulo::before { color: var(--fantasma-a); transform: translateX(calc(var(--deterioro) * -1)); }
.titulo::after  { color: var(--fantasma-b); transform: translateX(var(--deterioro)); }

.lema {
  max-width: 46ch;
  margin: var(--e3) 0 0;
  color: var(--ceniza);
  font-size: .8125rem;
  letter-spacing: .02em;
}

.marcador {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  max-width: var(--ancho);
  margin: var(--e5) auto 0;
  padding: 0;
  background: var(--cemento);
  border: 1px solid var(--cemento);
}
.marcador-celda { background: var(--concreto); padding: var(--e3); }
.marcador dt {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--polvo);
}
.marcador dd {
  margin: var(--e1) 0 0;
  font-size: 1.75rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--hueso);
}

/* ══ BLOQUES ═════════════════════════════════════════════════ */
main { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e4); }

.bloque {
  border-bottom: 1px solid var(--cemento);
  padding: var(--e6) 0;
}
.bloque-pie { border-bottom: 0; }

.eyebrow {
  display: flex; align-items: baseline; gap: var(--e2);
  margin: 0 0 var(--e4);
  font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--hueso);
}
.eyebrow-marca {
  color: var(--senal);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

.nota {
  max-width: 62ch;
  margin: 0 0 var(--e4);
  color: var(--ceniza);
  font-size: .8125rem;
  line-height: 1.7;
}

/* ══ COMPOSITOR ══════════════════════════════════════════════ */
.compositor {
  background: var(--hormigon);
  border: 1px solid var(--junta);
  padding: var(--e4);
}

.sello {
  margin: 0 0 var(--e4);
  padding-bottom: var(--e3);
  border-bottom: 1px solid var(--cemento);
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ceniza);
  font-variant-numeric: tabular-nums;
}

.campo { margin: 0 0 var(--e4); border: 0; padding: 0; }

.campo label,
.campo legend {
  display: block;
  margin-bottom: var(--e2);
  padding: 0;
  font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--hueso);
}
.opt { color: var(--polvo); font-weight: 400; letter-spacing: .08em; }

.campo input[type="text"],
.campo textarea {
  display: block; width: 100%;
  background: var(--concreto);
  border: 1px solid var(--junta);
  border-radius: 0;
  color: var(--hueso);
  padding: 12px var(--e3);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.7;
}
.campo input[type="text"] {
  font-size: 1.25rem;
  min-height: 48px;
}
.campo textarea {
  min-height: 220px;
  resize: vertical;
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--polvo); font-style: italic; }

.campo input[type="text"]:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--senal);
  outline-offset: -2px;
  border-color: var(--senal);
}

.ayuda {
  margin: var(--e2) 0 0;
  font-size: .6875rem; letter-spacing: .06em;
  color: var(--polvo);
}
.error {
  margin: var(--e2) 0 0;
  padding-left: var(--e2);
  border-left: 3px solid var(--peligro);
  font-size: .75rem; font-weight: 700;
  color: var(--mal);
}

/* ── selector de ánimo ────────────────────────────────────── */
/* Los cinco caben siempre en una fila: es una escala, y partida en dos líneas
   deja de leerse como escala. */
.animo-fila { display: flex; gap: var(--e2); }

.animo-btn {
  flex: 1 1 0;
  min-width: 48px; max-width: 88px; min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  background: var(--concreto);
  border: 1px solid var(--junta);
  border-radius: 0;
  color: var(--ceniza);
  font-family: var(--mono);
  font-size: 1.125rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}
.animo-btn .animo-barra {
  width: 22px; height: 3px;
  background: currentColor;
  opacity: .45;
}
.animo-btn:hover { border-color: var(--senal); color: var(--hueso); }
.animo-btn:focus-visible { outline: 2px solid var(--senal); outline-offset: 2px; }
.animo-btn[aria-checked="true"] {
  background: var(--senal);
  border-color: var(--senal);
  color: var(--concreto);
}
.animo-btn[aria-checked="true"] .animo-barra { opacity: 1; }

/* ══ BOTONES ═════════════════════════════════════════════════ */
.acciones { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }

.btn {
  min-height: 48px;
  padding: 12px var(--e4);
  border: 1px solid var(--junta);
  border-radius: 0;
  background: transparent;
  color: var(--hueso);
  font-family: var(--mono);
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer;
  transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}
.btn:focus-visible { outline: 2px solid var(--senal); outline-offset: 2px; }

.btn-principal { background: var(--senal); border-color: var(--senal); color: var(--concreto); }
.btn-principal:hover { background: var(--hueso); border-color: var(--hueso); }

.btn-fantasma:hover { border-color: var(--senal); color: var(--senal); }

.btn-peligro { background: var(--peligro); border-color: var(--peligro); color: var(--concreto); }
.btn-peligro:hover { background: var(--hueso); border-color: var(--hueso); }

/* Sigue siendo secundario por tipografía y peso, no por ser más chico de lo
   que un dedo puede tocar. */
.btn-mini { min-height: 44px; padding: var(--e2) var(--e3); font-size: .6875rem; }

.btn[disabled] { opacity: .4; cursor: not-allowed; }

/* ── aviso de edición ─────────────────────────────────────── */
.editando {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3);
  justify-content: space-between;
  margin-bottom: var(--e3);
  padding: var(--e3);
  background: var(--senal-oscuro);
  border: 1px solid var(--senal);
}
.editando p { margin: 0; font-size: .75rem; letter-spacing: .08em; color: var(--hueso); }

/* ══ GRÁFICA ═════════════════════════════════════════════════ */
.grafica-cabecera {
  display: flex; flex-wrap: wrap; gap: var(--e3);
  align-items: center; justify-content: space-between;
  margin-bottom: var(--e3);
}
.grafica-sub { margin: 0; font-size: .6875rem; letter-spacing: .06em; color: var(--polvo); max-width: 52ch; }

.grafica-caja {
  position: relative;
  background: var(--concreto);
  border: 1px solid var(--junta);
  padding: var(--e4) var(--e3) var(--e3);
  overflow-x: auto;
}
#grafica { display: block; width: 100%; height: 200px; }

.barra { cursor: pointer; }
.barra-golpe { fill: transparent; cursor: pointer; }
.barra-golpe:focus-visible { outline: 2px solid var(--senal); outline-offset: 0; }
.linea-base { stroke: var(--junta); stroke-width: 1; }
.reticula { stroke: var(--cemento); stroke-width: 1; }
.marca-eje {
  fill: var(--polvo);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .08em;
}

.tooltip {
  position: absolute;
  z-index: 10;
  min-width: 150px; max-width: 240px;
  padding: var(--e2) var(--e3);
  background: var(--hormigon);
  border: 1px solid var(--senal);
  font-size: .6875rem; line-height: 1.6;
  color: var(--hueso);
  pointer-events: none;
}
.tooltip b { display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.tooltip .tt-titulo { font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; color: var(--ceniza); }

.leyenda {
  display: flex; flex-wrap: wrap; gap: var(--e4);
  margin: var(--e3) 0 0; padding: 0; list-style: none;
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ceniza);
}
.leyenda li { display: flex; align-items: center; gap: var(--e2); }
.ficha { width: 14px; height: 14px; display: inline-block; }
.ficha-mal { background: var(--mal); }
.ficha-neutro { background: var(--neutro); }
.ficha-bien { background: var(--bien); }

/* ── tabla alternativa ────────────────────────────────────── */
.tabla-envoltura { margin-top: var(--e4); overflow-x: auto; border: 1px solid var(--junta); }
.tabla { width: 100%; border-collapse: collapse; font-size: .75rem; }
.tabla th, .tabla td {
  padding: var(--e2) var(--e3);
  text-align: left;
  border-bottom: 1px solid var(--cemento);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tabla th {
  text-transform: uppercase; letter-spacing: .12em; font-size: .6875rem;
  color: var(--polvo); background: var(--hormigon);
}
.tabla td { color: var(--ceniza); }
.tabla .td-titulo { font-family: var(--serif); font-style: italic; white-space: normal; }

/* ══ ARCHIVO ═════════════════════════════════════════════════ */
.archivo-lista { border-top: 1px solid var(--cemento); }

.registro { border-bottom: 1px solid var(--cemento); }

.registro-cabeza {
  display: grid;
  grid-template-columns: 4px 4.5rem 1fr auto;
  gap: var(--e3);
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: var(--e3) var(--e2);
  background: transparent;
  border: 0; border-radius: 0;
  color: var(--hueso);
  font-family: var(--mono);
  text-align: left;
  cursor: pointer;
  transition: background-color 180ms ease-out;
}
.registro-cabeza:hover { background: var(--hormigon); }
.registro-cabeza:focus-visible { outline: 2px solid var(--senal); outline-offset: -2px; }

.registro-cinta { width: 4px; height: 32px; background: var(--junta); }
.registro-cinta[data-animo="mal"]    { background: var(--mal); }
.registro-cinta[data-animo="neutro"] { background: var(--neutro); }
.registro-cinta[data-animo="bien"]   { background: var(--bien); }

.registro-num {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--polvo);
}
.registro-medio { min-width: 0; }
.registro-titulo {
  display: block;
  font-family: var(--serif); font-size: 1.0625rem; line-height: 1.35;
  color: var(--hueso);
  overflow-wrap: anywhere;
}
.registro-fecha {
  display: block;
  margin-top: 2px;
  font-size: .625rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--polvo);
}
.registro-flecha {
  font-size: .875rem; color: var(--ceniza);
  transition: transform 180ms ease-out;
}
.registro-cabeza[aria-expanded="true"] .registro-flecha { transform: rotate(90deg); }

.registro-cuerpo {
  padding: 0 var(--e2) var(--e5) calc(4px + 4.5rem + var(--e3) * 2);
}
.registro-texto {
  max-width: 68ch;
  margin: 0 0 var(--e4);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--hueso);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.registro-meta {
  margin: 0 0 var(--e3);
  font-size: .625rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--polvo);
}

/* ══ ESTADOS VACÍOS ══════════════════════════════════════════ */
.vacio {
  padding: var(--e6) var(--e4);
  border: 1px dashed var(--junta);
  text-align: center;
}
.vacio p { margin: 0; font-size: .8125rem; letter-spacing: .06em; color: var(--ceniza); }
.vacio-guia { margin-top: var(--e2) !important; color: var(--polvo) !important; }

/* ══ DIÁLOGO ═════════════════════════════════════════════════ */
.scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  display: flex; align-items: center; justify-content: center;
  padding: var(--e4);
  background: rgba(6, 6, 5, .72);
}
.dialogo {
  width: 100%; max-width: 420px;
  background: var(--hormigon);
  border: 2px solid var(--peligro);
  padding: var(--e4);
}
.dialogo h2 {
  margin: 0 0 var(--e2);
  font-size: .875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--hueso);
}
.dialogo p {
  margin: 0 0 var(--e4);
  font-size: .8125rem; line-height: 1.6;
  color: var(--ceniza);
}

/* ══ TOAST ═══════════════════════════════════════════════════ */
.toast {
  position: fixed; left: 50%; bottom: var(--e4);
  transform: translateX(-50%);
  z-index: var(--z-toast);
  padding: var(--e3) var(--e4);
  background: var(--hueso);
  color: var(--concreto);
  border: 1px solid var(--hueso);
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  max-width: calc(100vw - var(--e5));
}

/* ══ PIE ═════════════════════════════════════════════════════ */
.pie {
  border-top: 1px solid var(--cemento);
  margin-top: var(--e6);
  padding: var(--e4);
  text-align: center;
}
.pie p {
  margin: 0;
  font-size: .625rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--polvo);
}

/* ══ CERRADURA (admin.html) ══════════════════════════════════
   Cubre la pantalla entera hasta que se escribe la clave. */
.cerradura {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  display: flex; align-items: center; justify-content: center;
  padding: var(--e4);
  background: var(--concreto);
  overflow-y: auto;
}
.cerradura-caja {
  width: 100%; max-width: 420px;
  background: var(--hormigon);
  border: 2px solid var(--junta);
  padding: var(--e4);
}
.cerradura-titulo {
  margin: 0 0 var(--e3);
  font-family: var(--mono);
  font-size: 1.25rem; font-weight: 700;
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--hueso);
}
.cerradura .campo input[type="password"] {
  display: block; width: 100%;
  min-height: 48px;
  background: var(--concreto);
  border: 1px solid var(--junta);
  border-radius: 0;
  color: var(--hueso);
  padding: 12px var(--e3);
  font-family: var(--mono);
  font-size: 1.125rem;
  letter-spacing: .18em;
}
.cerradura .campo input[type="password"]:focus-visible {
  outline: 2px solid var(--senal);
  outline-offset: -2px;
  border-color: var(--senal);
}
.cerradura .nota { font-size: .75rem; }

/* Un <a> con clase .btn necesita alinearse como los <button> de al lado */
a.btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}

/* ══ NAV DEL PANEL ═══════════════════════════════════════════ */
.nav-panel {
  display: flex; flex-wrap: wrap; gap: var(--e2);
  margin-top: var(--e3);
}

/* ══ AVISO DE VISTA PREVIA (index.html) ══════════════════════ */
.aviso-borrador {
  margin: 0;
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--senal);
  background: var(--senal-oscuro);
  color: var(--hueso);
  font-size: .75rem; letter-spacing: .08em;
  text-align: center;
}

/* ══ PUBLICAR (admin.html) ═══════════════════════════════════ */
.publicar-estado {
  margin-bottom: var(--e4);
  padding: var(--e3);
  border: 1px solid var(--junta);
  border-left-width: 4px;
  background: var(--hormigon);
}
.publicar-estado[data-estado="aldia"]     { border-left-color: var(--bien); }
.publicar-estado[data-estado="pendiente"] { border-left-color: var(--senal); }
.publicar-estado[data-estado="vacio"]     { border-left-color: var(--junta); }

.publicar-linea {
  margin: 0;
  font-size: .8125rem; letter-spacing: .04em;
  color: var(--hueso);
}

.nota-menor { margin-top: var(--e4); margin-bottom: 0; font-size: .75rem; }

code {
  padding: 1px 5px;
  background: var(--cemento);
  border: 1px solid var(--junta);
  font-family: var(--mono);
  font-size: .9em;
  color: var(--senal);
}

/* ══ UTILIDADES ══════════════════════════════════════════════ */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ══ PANTALLAS PEQUEÑAS ══════════════════════════════════════ */
@media (max-width: 640px) {
  body { background-size: 48px 48px; }
  .cabecera { padding: var(--e5) var(--e3) var(--e3); }
  main { padding: 0 var(--e3); }
  .bloque { padding: var(--e5) 0; }
  .compositor { padding: var(--e3); }
  .registro-cabeza { grid-template-columns: 4px 1fr auto; }
  .registro-num { display: none; }
  .registro-cuerpo { padding-left: calc(4px + var(--e3)); }
  .marcador dd { font-size: 1.375rem; }
}

/* ══ MOVIMIENTO REDUCIDO ═════════════════════════════════════
   Sin transiciones y sin desalineación de canales: el título
   se queda quieto y limpio. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .titulo::before, .titulo::after { display: none; }
}

/* ══ COLORES FORZADOS ════════════════════════════════════════ */
@media (forced-colors: active) {
  .titulo::before, .titulo::after { display: none; }
  .btn, .compositor, .registro, .dialogo { border: 1px solid CanvasText; }
  .ficha, .registro-cinta, .barra { forced-color-adjust: none; }
}