/* ==========================================================================
   CGT Burgos — sitio público · «El tablón de la sección»
   Tablón casi negro, banda roja con el logo, una ficha de papel por página.
   Identidad: manual de estilo CGT (rojo #E51E25, negro, blanco; Gotham).
   ========================================================================== */

/* ---- Gotham ScreenSmart (licencia CGT, autohospedada) ------------------- */
@font-face {
  font-family: 'Gotham SSm';
  src: url('fonts/GothamSSm-Book.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham SSm';
  src: url('fonts/GothamSSm-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham SSm';
  src: url('fonts/GothamSSm-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham SSm';
  src: url('fonts/GothamSSm-Black.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  --rojo: #E51E25;
  --rojo-tinta: #C0161C;      /* rojo prensado: hovers y texto de error */
  --verde: #00A751;           /* solo confirmación (manual CGT) */
  --naranja: #F68C1E;         /* solo aviso-antes-de-alarma (manual CGT) */
  --tablon: #1B1713;
  --tablon-hondo: #0F0C0A;
  --papel: #FBF9F4;
  --papel-blanco: #FFFFFF;
  --tinta: #17140F;
  --tinta-media: #5B564C;
  --tinta-linea: rgba(23, 20, 15, 0.35);
  --hueso: #B7AFA4;           /* texto secundario sobre el tablón */
  --fuente: 'Gotham SSm', 'Helvetica Neue', Arial, sans-serif;
  --sombra-papel: 0 12px 28px -10px rgba(0, 0, 0, 0.55),
                  0 3px 8px -2px rgba(0, 0, 0, 0.4);
  --sombra-nota: 0 6px 14px -6px rgba(0, 0, 0, 0.5);
}

/* ---- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--fuente);
  font-weight: 400;
  color: var(--tinta);
  background: var(--tablon-hondo);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--rojo);
  accent-color: var(--rojo);
}

::selection { background: var(--rojo); color: #fff; }

:focus-visible {
  outline: 3px solid var(--rojo);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Scrollbar del tablón, no del navegador */
html { scrollbar-color: #4a423a var(--tablon-hondo); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.salto {
  position: absolute;
  left: 0.75rem; top: -3rem;
  z-index: 10;
  padding: 0.5rem 0.9rem;
  background: var(--papel);
  color: var(--tinta);
  font-weight: 500;
  text-decoration: none;
  transition: top 160ms ease-out;
}
.salto:focus-visible { top: 0.75rem; outline-color: #fff; }

/* ---- Banda roja de cabecera ---------------------------------------------- */
.banda {
  background: var(--rojo);
  padding: 0.7rem clamp(0.9rem, 4vw, 2.2rem);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 2;
}

.banda-logo {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.35);
}

.banda-nombre {
  margin: 0;
  color: #fff;
  font-weight: 800;
  font-size: clamp(1.15rem, 3.5vw, 1.45rem);
  letter-spacing: 0.015em;
  line-height: 1.05;
  text-transform: uppercase;
}

.banda-nombre small {
  display: block;
  font-weight: 500;
  font-size: 0.62em;
  letter-spacing: 0.14em;
  opacity: 0.92;
}

/* ---- El tablón ------------------------------------------------------------ */
.tablon {
  flex: 1;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 55%),
    radial-gradient(150% 130% at 50% 45%, transparent 50%, rgba(0, 0, 0, 0.42) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 3px),
    var(--tablon);
  padding: clamp(1rem, 2.5vh, 2.2rem) clamp(0.8rem, 4vw, 2rem) clamp(2.2rem, 8vh, 5rem);
}

.escena {
  position: relative;
  max-width: 680px;
  margin-inline: auto;
}

/* ---- La ficha de papel ----------------------------------------------------
   Todo lo visible está sujeto al tablón: la ficha lleva sus chinchetas,
   las notas llevan su celo. Nada flota sin explicación. */
.ficha {
  position: relative;
  /* Fibra mínima del papel (≤2% de tinta) sobre el degradado base:
     material, no decoración; nunca por encima de la legibilidad. */
  background:
    repeating-linear-gradient(93deg, rgba(23, 20, 15, 0.016) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(2deg, rgba(23, 20, 15, 0.012) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--papel-blanco), var(--papel) 14%);
  color: var(--tinta);
  padding: clamp(1.3rem, 4vw, 2rem) clamp(1.2rem, 5vw, 2.75rem) clamp(1.6rem, 5vw, 2.6rem);
  box-shadow: var(--sombra-papel);
  transform: rotate(-0.35deg);
  border-radius: 1px;
}

.escena > .ficha + .ficha { margin-top: clamp(1.4rem, 4vh, 2.2rem); }

/* Chinchetas: cabeza de plástico rojo, dibujadas, con su sombra sobre el papel */
.pin {
  position: absolute;
  top: -7px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ff7a72, var(--rojo-tinta) 58%, #6e0a0e);
  box-shadow: 0 3px 4px -1px rgba(0, 0, 0, 0.45),
              0 1px 2px rgba(0, 0, 0, 0.35);
}
.pin--izq { left: 9%; }
.pin--der { right: 9%; }

/* ---- Membrete y título ---------------------------------------------------- */
.membrete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--rojo);
  margin-bottom: 1.4rem;
}

.membrete-org {
  margin: 0;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta);
}

.membrete-registro {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-media);
  white-space: nowrap;
}

/* En pantallas estrechas el membrete se apila en dos líneas limpias */
@media (max-width: 560px) {
  .membrete {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .membrete-org { white-space: nowrap; }
}

.ficha h1, .ficha h2 {
  font-weight: 800;
  font-size: clamp(1.45rem, 4.6vw, 1.95rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 0.55rem;
}

.ficha-intro {
  margin: 0 0 0.3rem;
  max-width: 58ch;
  line-height: 1.55;
  font-size: 0.98rem;
}

.ficha-clave {
  margin: 0.7rem 0 0;
  max-width: 58ch;
  padding: 0.6rem 0.9rem;
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.5;
  background: rgba(229, 30, 37, 0.06);
  border: 1px solid rgba(229, 30, 37, 0.35);
}

/* ---- Campos: casillas numeradas de impreso oficial ------------------------ */
.campos {
  margin-top: 1.4rem;
  display: grid;
  gap: 1.2rem;
}

.campo { position: relative; }

.campo-cabecera {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}

.campo-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--tinta);
  border: 1px solid var(--tinta-linea);
  background: var(--papel-blanco);
  transition: background 160ms ease-out, color 160ms ease-out,
              border-color 160ms ease-out;
}

.campo:focus-within .campo-num {
  background: var(--rojo);
  border-color: var(--rojo);
  color: #fff;
}

.campo label {
  font-weight: 500;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}

.campo-input {
  display: block;
  width: 100%;
  padding: 0.72rem 0.85rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--tinta);
  background: var(--papel-blanco);
  border: 1px solid var(--tinta-linea);
  border-radius: 2px;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

.campo-input::placeholder { color: var(--tinta-media); opacity: 1; }

.campo-input:focus {
  outline: none;
  border-color: var(--rojo);
  box-shadow: 0 1px 0 0 var(--rojo);
}

/* Aviso antes de alarma: el campo insinúa en cuanto el dato no encaja,
   con trazo discontinuo naranja; la alarma roja la pone el servidor. */
.campo-input:user-invalid {
  border-style: dashed;
  border-color: var(--naranja);
}
.campo:has(.campo-input:user-invalid) .campo-num {
  border-style: dashed;
  border-color: var(--naranja);
}

.campo-ayuda {
  margin: 0.45rem 0 0;
  max-width: 52ch;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--tinta-media);
}

/* Error del servidor: aspa dibujada + borde firme; nunca solo color */
.campo--error .campo-input { border: 2px solid var(--rojo-tinta); }
.campo--error .campo-num {
  background: var(--rojo-tinta);
  border-color: var(--rojo-tinta);
  color: #fff;
}

.campo-errores {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
}
.campo-errores li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--rojo-tinta);
}
.campo-errores .marca { flex: none; transform: translateY(2px); }

/* Marcas dibujadas (un solo grosor de trazo en todo el sistema) */
.marca { display: inline-block; }
.marca--aspa { stroke: var(--rojo-tinta); }
.marca--check { stroke: var(--verde); }
.marca--aviso { stroke: var(--naranja); }
.marca, .marca * { stroke-width: 2.2; stroke-linecap: round; fill: none; }

/* ---- Verificación (Turnstile), enmarcada en la propia ficha --------------- */
.verificacion {
  margin-top: 1.4rem;
  padding: 0.8rem 0.9rem;
  border: 1px dashed var(--tinta-linea);
}

.verificacion-titulo {
  margin: 0 0 0.6rem;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

/* ---- Botón-sello ----------------------------------------------------------- */
.sello-btn {
  display: block;
  width: 100%;
  margin-top: 1.4rem;
  padding: 0.9rem 1.4rem;
  font: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rojo);
  border: 1px solid var(--rojo-tinta);
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--rojo), inset 0 0 0 3.5px rgba(255, 255, 255, 0.85),
              0 4px 10px -4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: background 160ms ease-out, transform 160ms ease-out,
              box-shadow 160ms ease-out;
}

.sello-btn:hover {
  background: var(--rojo-tinta);
  box-shadow: inset 0 0 0 2px var(--rojo-tinta), inset 0 0 0 3.5px rgba(255, 255, 255, 0.85),
              0 2px 6px -3px rgba(0, 0, 0, 0.45);
  transform: translateY(1px);
}

.sello-btn:active { transform: translateY(2px); }

@media (min-width: 560px) {
  .sello-btn { width: auto; min-width: 60%; margin-inline: auto; }
}

/* ---- Sello RECIBIDA: el momento del trámite --------------------------------
   Anclado al papel de la primera ficha (nunca al tablón ni a las notas). */
.escena--sellada > .ficha:first-of-type::after {
  content: 'Recibida';
  position: absolute;
  z-index: 3;
  top: clamp(1.6rem, 5vw, 2.4rem);
  right: clamp(0.9rem, 4vw, 2rem);
  padding: 0.4rem 1rem;
  font-weight: 800;
  font-size: clamp(1.2rem, 4.5vw, 1.6rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rojo);
  border: 4px double var(--rojo);
  border-radius: 4px;
  transform: rotate(-8deg);
  mix-blend-mode: multiply;
  /* tinta de tampón: cobertura irregular */
  mask-image: radial-gradient(130% 100% at 42% 30%, #000 55%, rgba(0, 0, 0, 0.72) 78%, rgba(0, 0, 0, 0.55) 100%);
  animation: estampar 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: none;
}

@keyframes estampar {
  from { transform: rotate(-8deg) scale(1.55); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: rotate(-8deg) scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .escena--sellada > .ficha:first-of-type::after { animation: none; }
  .salto, .campo-num, .campo-input, .sello-btn { transition: none; }
}

/* ---- Notas fijadas (mensajes flash) ---------------------------------------- */
.notas {
  display: grid;
  gap: 0.8rem;
  margin-bottom: 1.3rem;
}

.nota {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  max-width: 46ch;
  padding: 0.8rem 1rem 0.85rem;
  background: var(--papel-blanco);
  color: var(--tinta);
  font-weight: 500;
  font-size: 0.92rem;
  line-height: 1.45;
  box-shadow: var(--sombra-nota);
  transform: rotate(0.5deg);
}

.nota:nth-child(even) { transform: rotate(-0.6deg); }

/* Celo que la sujeta al tablón: presente, con brillo y cantos legibles */
.nota::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  width: 74px;
  height: 18px;
  transform: translateX(-50%) rotate(-1.5deg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.26));
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.3);
}

.nota .marca { flex: none; transform: translateY(2px); }
.nota p { margin: 0; }

/* ---- Resguardo QR ----------------------------------------------------------- */
.resguardo {
  margin-top: 1rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--tinta-linea);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.resguardo svg { flex: none; }

.resguardo p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--tinta-media);
  max-width: 30ch;
}

/* ---- Directorio de contacto (landing) ---------------------------------------- */
.ficha a {
  color: var(--tinta);
  text-decoration-color: var(--rojo);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 160ms ease-out;
}

.ficha a:hover { color: var(--rojo-tinta); }

.directorio {
  margin-top: 1.4rem;
  border-top: 1px dashed var(--tinta-linea);
}

.directorio-item {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 0 1rem;
  border-bottom: 1px dashed var(--tinta-linea);
}

.directorio-tipo {
  margin: 0;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-media);
}

.directorio-valor {
  margin: 0;
  font-weight: 500;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.directorio-aviso {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
}

/* En escritorio la dirección preside y los contactos comparten retícula */
@media (min-width: 560px) {
  .directorio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.2rem;
  }
  .directorio-item:first-child { grid-column: 1 / -1; }
}

/* Sello de tampón del sindicato al pie del documento */
.sello-org-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: -1.3rem;
  padding-right: 0.5rem;
}

.sello-org {
  width: clamp(96px, 22vw, 124px);
  height: auto;
  color: var(--rojo);
  transform: rotate(-12deg);
  mix-blend-mode: multiply;
  /* misma tinta de tampón irregular que el sello RECIBIDA */
  mask-image: radial-gradient(120% 105% at 40% 32%, #000 50%, rgba(0, 0, 0, 0.7) 76%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

.sello-org-arco {
  fill: currentColor;
  font-weight: 500;
  font-size: 5.7px;
  letter-spacing: 0.06em;
}

.sello-org-arco--inf {
  font-size: 7.6px;
  letter-spacing: 0.22em;
}

.sello-org-centro {
  fill: currentColor;
  font-weight: 800;
  font-size: 25px;
  letter-spacing: 0.02em;
}

/* ---- Página de resultado (verificación) ------------------------------------- */
.resultado {
  margin: 1.4rem 0 0.6rem;
  font-weight: 500;
  font-size: clamp(1.1rem, 3.6vw, 1.35rem);
  line-height: 1.4;
  max-width: 44ch;
}

.ficha-ref {
  margin: 2rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--tinta-media);
  opacity: 0.75;
  overflow-wrap: anywhere;
}

/* ---- Estado del servicio (/status) ------------------------------------------ */
.estado-titulo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.estado-titulo .marca {
  width: 1.05rem;
  height: 1rem;
  flex: none;
}

.estado-version {
  font-weight: 800;
  font-size: clamp(2rem, 8vw, 3rem);
  letter-spacing: -0.01em;
  margin: 0.6rem 0 0.3rem;
  font-variant-numeric: tabular-nums;
}

.estado-dato {
  margin: 0;
  font-size: 0.92rem;
  color: var(--tinta-media);
  font-variant-numeric: tabular-nums;
}

/* ---- Ficheros (subida CSV) --------------------------------------------------- */
.campo-input[type='file'] { padding: 0.55rem; cursor: pointer; }

.campo-input::file-selector-button {
  font: inherit;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rojo-tinta);
  background: transparent;
  border: 1.5px solid var(--rojo-tinta);
  border-radius: 2px;
  padding: 0.4rem 0.8rem;
  margin-right: 0.8rem;
  cursor: pointer;
  transition: background 160ms ease-out, color 160ms ease-out;
}

.campo-input::file-selector-button:hover {
  background: var(--rojo-tinta);
  color: #fff;
}

/* ---- Pie del tablón ----------------------------------------------------------- */
.pie {
  background: var(--tablon-hondo);
  text-align: center;
  padding: 1rem 1.2rem 1.2rem;
}

.pie p {
  margin: 0;
  color: var(--hueso);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}