/* Biblioteca FLAVI — estilos comunes de la web pública y de la zona de voluntarios */

@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 400; font-display: swap; src: url('/fuentes/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-weight: 700; font-display: swap; src: url('/fuentes/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Literata'; font-weight: 500; font-display: swap; src: url('/fuentes/literata-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Literata'; font-weight: 700; font-display: swap; src: url('/fuentes/literata-latin-700-normal.woff2') format('woff2'); }

:root {
  --fondo: #F4F6F5;
  --papel: #FFFFFF;
  --tinta: #17302B;
  --suave: #4E5D59;
  --linea: #D6DDDA;
  --borde-campo: #8C9C97;
  --verde: #1F5C4E;
  --verde-oscuro: #123B32;
  --foco: #8FC3B4;
  --libre-fondo: #DDF0E3; --libre-tinta: #1E5C34;
  --fuera-fondo: #FBEBD3; --fuera-tinta: #7A4206;
  --tarde-fondo: #FBE7E7; --tarde-borde: #E7AFAF; --tarde-tinta: #8E1B1B;
  --serif: 'Literata', Georgia, serif;
  --sans: 'Atkinson Hyperlegible', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--sans); font-size: 17px; line-height: 1.45; }
a { color: var(--verde); }
a:hover { color: var(--verde-oscuro); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.2; margin: 0; }
p { margin: 0; }

.contenedor { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

.cabecera { background: var(--tinta); color: #FFFFFF; }
.cabecera .contenedor { padding-top: 24px; padding-bottom: 26px; display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; justify-content: space-between; }
.cabecera h1 { font-weight: 700; font-size: clamp(30px, 6vw, 40px); letter-spacing: -0.01em; }
.cabecera p { color: #D3E3DD; font-size: 18px; margin-top: 4px; }
.cabecera a.boton-claro { color: #FFFFFF; border: 1px solid #5E7F76; border-radius: 8px; padding: 10px 14px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; }

main.contenedor { padding-top: 24px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 22px; }

.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 20px; }
.tarjeta > h2 { font-size: 24px; font-weight: 700; margin-bottom: 12px; }

.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label, .etiqueta { font-weight: 700; }
.ayuda { font-size: 14px; color: var(--suave); }
input[type=text], input[type=search], input[type=tel], input[type=password], input[type=number], select, textarea {
  font: inherit; font-size: 18px; color: var(--tinta); background: #FFFFFF;
  border: 2px solid var(--borde-campo); border-radius: 10px; padding: 10px 12px; min-height: 50px; width: 100%;
}
textarea { min-height: 80px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: center; min-height: 50px; cursor: pointer; }
.check input { width: 24px; height: 24px; accent-color: var(--verde); }

.boton { font: inherit; font-weight: 700; font-size: 17px; border-radius: 10px; padding: 0 20px; min-height: 48px; cursor: pointer;
  background: var(--verde); color: #FFFFFF; border: 2px solid var(--verde); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.boton:hover { background: var(--verde-oscuro); border-color: var(--verde-oscuro); color: #FFFFFF; }
.boton.secundario { background: #FFFFFF; color: var(--verde); }
.boton.secundario:hover { background: #EEF4F2; color: var(--verde-oscuro); }
.boton.discreto { background: transparent; color: var(--tinta); border: 1px solid var(--borde-campo); font-weight: 400; }
.boton.peligro { background: #FFFFFF; color: var(--tarde-tinta); border-color: var(--tarde-tinta); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.fila-botones { display: flex; flex-wrap: wrap; gap: 10px; }

.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.item { border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; background: var(--papel); }
.item-cabeza { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.item-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.item-titulo { font-family: var(--serif); font-weight: 700; font-size: 19px; line-height: 1.25; }
.item-meta { font-size: 15px; color: var(--suave); }
.item.tarde { background: var(--tarde-fondo); border-color: var(--tarde-borde); }
.texto-tarde { color: var(--tarde-tinta); font-weight: 700; }
.texto-fuera { color: var(--fuera-tinta); }

.estado { flex: none; border-radius: 999px; padding: 6px 12px; font-size: 15px; font-weight: 700; white-space: nowrap; }
.estado.libre { background: var(--libre-fondo); color: var(--libre-tinta); }
.estado.fuera { background: var(--fuera-fondo); color: var(--fuera-tinta); border-radius: 12px; font-weight: 400; font-size: 14px; text-align: right; white-space: normal; line-height: 1.3; }
.estado.fuera strong { display: block; font-size: 15px; }

.aviso { border-radius: 10px; padding: 12px 16px; font-weight: 700; }
.aviso.ok { background: var(--libre-fondo); color: var(--libre-tinta); border: 1px solid #9CCBAA; }
.aviso.mal { background: var(--tarde-fondo); color: var(--tarde-tinta); border: 1px solid var(--tarde-borde); }

.vacio { padding: 28px; text-align: center; background: var(--papel); border: 1px dashed var(--borde-campo); border-radius: 14px; color: var(--suave); }
.solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }