/* Muro de la Memoria
   Concepto: papelitos blancos sobre una pared azul-noche, celeste de la bandera como único acento.
   El formulario (celular) es claro y sobrio; el muro (pantalla grande) es oscuro. */

:root {
  --tinta: #131a24;
  --tinta-suave: #4a5565;
  --papel: #f4f6f9;
  --superficie: #ffffff;
  --linea: #d9dee6;
  --celeste: #74acdf;
  --celeste-fuerte: #2a6aa6;
  --alerta: #b4372f;
  --ok: #2e7d4f;

  --f-titulo: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-texto: "Newsreader", Georgia, "Times New Roman", serif;
  --f-ui: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tinta: #eef2f7;
    --tinta-suave: #a9b4c4;
    --papel: #0e141d;
    --superficie: #17202d;
    --linea: #2a3748;
    --celeste-fuerte: #74acdf;
    --alerta: #ff8a80;
    --ok: #7bd9a0;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-ui);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--celeste-fuerte); }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 2px; }

/* ---------------- Formulario ---------------- */
.pagina {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.cabeza { display: flex; align-items: flex-end; gap: 1rem; }
.cincuenta {
  font-family: var(--f-titulo);
  font-weight: 900;
  font-stretch: 75%;
  font-size: clamp(5rem, 28vw, 8rem);
  line-height: .8;
  letter-spacing: -.04em;
  color: var(--celeste-fuerte);
}
.cabeza-texto { display: flex; flex-direction: column; gap: .15rem; padding-bottom: .25rem; min-width: 0; }
.etiqueta {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-suave);
}
.cabeza h1 {
  margin: 0; font-family: var(--f-titulo); font-weight: 800; font-stretch: 80%;
  font-size: 1.5rem; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em;
  text-wrap: balance;
}
.pregunta {
  margin: 0; font-family: var(--f-texto); font-weight: 500; font-size: clamp(1.5rem, 6vw, 1.95rem);
  line-height: 1.2; text-wrap: balance;
}
.formulario { display: flex; flex-direction: column; gap: 1.1rem; }
.campo { display: flex; flex-direction: column; gap: .4rem; }
.campo label { font-weight: 700; font-size: .9rem; }
.campo .ayuda { font-weight: 400; color: var(--tinta-suave); }
textarea, input[type="text"] {
  width: 100%;
  font: inherit; font-family: var(--f-texto); font-size: 1.15rem; line-height: 1.4;
  color: var(--tinta); background: var(--superficie);
  border: 2px solid var(--linea); border-radius: 6px;
  padding: .8rem .9rem;
}
textarea { min-height: 9rem; resize: vertical; }
textarea:focus, input[type="text"]:focus { border-color: var(--celeste-fuerte); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--celeste) 45%, transparent); }
.contador { align-self: flex-end; font-size: .8rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.contador.casi { color: var(--alerta); font-weight: 700; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.boton {
  font: inherit; font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase;
  background: var(--celeste-fuerte); color: #fff; border: 0; border-radius: 6px;
  padding: 1rem 1.25rem; cursor: pointer; min-height: 3.2rem;
}
.boton:hover { filter: brightness(1.08); }
.boton:disabled { opacity: .55; cursor: default; }
.boton.secundario { background: transparent; color: var(--celeste-fuerte); border: 2px solid var(--celeste-fuerte); }
.error { color: var(--alerta); font-weight: 600; margin: 0; }
.nota { font-size: .85rem; color: var(--tinta-suave); margin: 0; }
.gracias { display: flex; flex-direction: column; gap: 1rem; padding-block: .5rem; }
.gracias h2 { margin: 0; font-family: var(--f-titulo); font-stretch: 80%; font-weight: 800; font-size: 1.8rem; text-transform: uppercase; }
.gracias p { margin: 0; font-family: var(--f-texto); font-size: 1.2rem; }
.pie { font-size: .8rem; color: var(--tinta-suave); border-top: 1px solid var(--linea); padding-top: 1rem; }

/* ---------------- Muro (pantalla grande) ---------------- */
body.muro {
  --papel: #17294a;
  --tinta: #f2f6fb;
  --tinta-suave: #b4c4dc;
  --linea: rgba(255,255,255,.16);
  /* Fondo: azul profundo que aclara hacia abajo, con un resplandor celeste suave.
     Queda por detrás de los papelitos, que son opacos, así que no compite con la lectura. */
  background:
    radial-gradient(60rem 38rem at 85% 108%, rgba(116,172,223,.38), transparent 70%),
    radial-gradient(48rem 30rem at 8% -8%, rgba(116,172,223,.18), transparent 70%),
    linear-gradient(180deg, #14264a 0%, #1b3560 100%);
  background-attachment: fixed;
  color: #f2f6fb;
  height: 100vh; height: 100dvh; overflow: hidden;
  color-scheme: dark;
  position: relative;
}
/* Aviones de papel (los de las láminas de la DGCyE): líneas finas, casi transparentes, a la deriva muy lenta */
.fondo { position: fixed; inset: 0 0 0 max(20rem, 27vw); z-index: 0; pointer-events: none; overflow: hidden; }
.avion {
  position: absolute; left: -12rem; width: var(--t, 7rem); height: auto; opacity: var(--o, .13);
  fill: none; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round;
  animation: deriva var(--d, 140s) linear var(--r, 0s) infinite;
}
@keyframes deriva {
  from { transform: translate3d(0, 0, 0) rotate(var(--g, -8deg)); }
  to   { transform: translate3d(calc(73vw + 26rem), var(--dy, -10vh), 0) rotate(var(--g, -8deg)); }
}
.muro-grilla { position: relative; z-index: 1; }
.muro-grilla {
  display: grid;
  grid-template-columns: minmax(20rem, 27vw) 1fr;
  height: 100%;
}
.lateral {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.25rem, 2.6vw, 2.5rem);
  border-right: 1px solid var(--linea);
  min-height: 0; overflow: hidden;
}
.lateral .etiqueta { color: var(--celeste); }
.lateral h1 {
  margin: .5rem 0 0; font-family: var(--f-titulo); font-weight: 900; font-stretch: 75%;
  font-size: clamp(2.6rem, 5.2vw, 5.4rem); line-height: .9; text-transform: uppercase; letter-spacing: -.01em;
}
.lateral .sub { margin: .75rem 0 0; color: var(--tinta-suave); font-size: clamp(.9rem, 1.2vw, 1.2rem); }
.lateral .pregunta { font-size: clamp(1.25rem, 2vw, 2.1rem); color: #fff; }
.qr-bloque { display: flex; flex-direction: column; gap: .75rem; }
.qr-marco {
  background: #fff; padding: clamp(.6rem, 1vw, 1rem); border-radius: 6px;
  width: min(100%, 24vh, 17rem); aspect-ratio: 1;
  border: 4px solid var(--celeste);
}
.qr-marco svg { display: block; width: 100%; height: 100%; }
.qr-texto { margin: 0; font-weight: 800; font-size: clamp(1rem, 1.5vw, 1.5rem); text-transform: uppercase; letter-spacing: .04em; }
.qr-url { margin: 0; color: var(--tinta-suave); font-size: clamp(.8rem, 1vw, 1rem); overflow-wrap: anywhere; }
.lateral .pie-lat { margin: 0; color: var(--tinta-suave); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.contador-muro { font-family: var(--f-titulo); font-weight: 800; font-stretch: 80%; color: var(--celeste); }

.escenario { position: relative; min-width: 0; min-height: 0; }
.pared {
  height: 100%; overflow-y: auto; scrollbar-width: none;
  padding: clamp(1.25rem, 2.4vw, 2.5rem);
}
.pared::-webkit-scrollbar { display: none; }
.papelitos { column-width: 19rem; column-gap: clamp(1rem, 1.6vw, 1.75rem); }
.papelito {
  break-inside: avoid;
  background: #f4f6f9; color: #131a24;
  border-radius: 3px;
  padding: 1.1rem 1.2rem 1rem;
  margin: 0 0 clamp(1rem, 1.6vw, 1.75rem);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 8px 22px rgba(7,16,36,.28);
  transform: rotate(var(--giro, 0deg));
  display: flex; flex-direction: column; gap: .8rem;
}
.papelito p {
  margin: 0; font-family: var(--f-texto); font-size: clamp(1.15rem, 1.55vw, 1.6rem); line-height: 1.3;
  white-space: pre-line; overflow-wrap: anywhere;
}
.papelito footer {
  font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #2a6aa6;
  border-top: 1px solid #d9dee6; padding-top: .55rem; overflow-wrap: anywhere;
}
.papelito.nuevo { animation: llega .9s cubic-bezier(.2,.8,.2,1) both; outline: 3px solid var(--celeste); outline-offset: 2px; }
.papelito.nuevo.visto { outline-color: transparent; transition: outline-color 2s; }
@keyframes llega { from { opacity: 0; transform: translateY(-24px) rotate(var(--giro, 0deg)) scale(.96); } }
.vacio {
  height: 100%; display: grid; place-content: center; text-align: center; gap: .75rem; padding: 2rem;
}
.vacio p { margin: 0; font-family: var(--f-texto); font-size: clamp(1.5rem, 2.6vw, 2.6rem); max-width: 22ch; text-wrap: balance; }
.vacio span { color: var(--tinta-suave); }
.pantalla-completa {
  position: absolute; right: .75rem; bottom: .75rem; opacity: .0;
  font: inherit; font-size: .8rem; background: #0f1e3a; color: #eef2f7; border: 1px solid var(--linea);
  border-radius: 4px; padding: .4rem .7rem; cursor: pointer; transition: opacity .2s;
}
.escenario:hover .pantalla-completa, .pantalla-completa:focus-visible { opacity: .85; }

@media (max-width: 52rem) {
  body.muro { height: auto; overflow: auto; }
  .muro-grilla { grid-template-columns: 1fr; height: auto; }
  .lateral { border-right: 0; border-bottom: 1px solid var(--linea); }
  .pared { height: auto; overflow: visible; }
  .qr-marco { width: 11rem; }
  .fondo { left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .papelito.nuevo { animation: none; }
  .avion { animation: none; left: 8%; }
  .avion:nth-child(2) { left: 52%; top: 62%; }
  .avion:nth-child(3) { left: 78%; top: 18%; }
}

/* ---------------- Panel de moderación ---------------- */
.admin { max-width: 64rem; margin: 0 auto; padding: 1.25rem 1rem 4rem; display: flex; flex-direction: column; gap: 1.25rem; }
.admin h1 { margin: 0; font-family: var(--f-titulo); font-stretch: 80%; font-weight: 800; text-transform: uppercase; font-size: 1.6rem; }
.admin-barra { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; }
.pestanas { display: flex; flex-wrap: wrap; gap: .5rem; }
.pestana {
  text-decoration: none; color: var(--tinta); font-weight: 700; font-size: .9rem;
  border: 2px solid var(--linea); border-radius: 999px; padding: .4rem .9rem; background: var(--superficie);
}
.pestana[aria-current="page"] { border-color: var(--celeste-fuerte); background: var(--celeste-fuerte); color: #fff; }
.acciones-top { display: flex; flex-wrap: wrap; gap: .5rem; }
.chico {
  font: inherit; font-weight: 700; font-size: .85rem; border-radius: 5px; padding: .5rem .85rem; cursor: pointer;
  border: 2px solid var(--linea); background: var(--superficie); color: var(--tinta); text-decoration: none; display: inline-block;
}
.chico.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.chico.no { border-color: var(--alerta); color: var(--alerta); }
.lista-admin { display: flex; flex-direction: column; gap: .75rem; }
.item {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 6px; padding: 1rem;
  display: grid; grid-template-columns: 1fr auto; gap: .75rem 1rem; align-items: start;
}
.item p { margin: 0; font-family: var(--f-texto); font-size: 1.15rem; white-space: pre-line; overflow-wrap: anywhere; }
.item .meta { grid-column: 1 / -1; font-size: .78rem; color: var(--tinta-suave); }
.item form { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.vacio-admin { color: var(--tinta-suave); padding: 2rem 0; }
.login { max-width: 22rem; margin: 18vh auto 0; padding: 0 1rem; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 36rem) { .item { grid-template-columns: 1fr; } .item form { justify-content: flex-start; } }

[hidden] { display: none !important; }