/* =========================================================
   Recogida Solidaria — estilos comunes de toda la web
   Móvil primero: las reglas base son para pantallas
   pequeñas (375 px) y la @media del final adapta a PC.
   ========================================================= */

/* ---------- Variables ----------
   Los colores están aquí una sola vez para que cambiar la
   paleta sea tocar un sitio. Todos los pares texto/fondo
   cumplen contraste AA (4,5:1 o más). */
:root {
  --verde: #2f7d4f;          /* principal: botones, enlaces */
  --verde-oscuro: #1f5a37;   /* hover y títulos */
  --verde-suave: #eaf5ee;    /* fondos de sección */
  --naranja: #e8893a;        /* acento decorativo (bordes) */
  --naranja-texto: #8a4510;  /* naranja oscuro para texto legible */
  --naranja-suave: #fdf1e6;  /* fondo del aviso */
  --texto: #1f2a24;
  --texto-suave: #4d5a52;
  --fondo: #ffffff;
  --borde: #d5ded8;
  --gris-desactivado: #e3e7e4;

  --radio: 10px;
  --espacio: 1rem;
  --ancho-max: 64rem;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Mantiene ocultos los elementos también cuando tienen estilos de botón. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  /* Fuentes del sistema: cargan al instante y no dependen de
     servicios externos (importante si falla la red del instituto). */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fondo);
}

h1,
h2,
h3 {
  line-height: 1.25;
  color: var(--verde-oscuro);
  margin: 0 0 0.5em;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }

p {
  margin: 0 0 1em;
}

a {
  color: var(--verde);
}

a:hover {
  color: var(--verde-oscuro);
}

/* Marca de foco bien visible para quien navega con teclado */
:focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 2px;
}

/* El blanco destaca mejor que el naranja sobre la cabecera verde. */
.cabecera :focus-visible {
  outline-color: #fff;
}

/* Contenedor que centra el contenido y deja margen lateral en móvil */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--espacio);
}

/* ---------- Cabecera ---------- */
.cabecera {
  background: var(--verde);
  color: #fff;
}

.cabecera .contenedor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.logo {
  font-weight: 700;
  font-size: 1.2rem;
  color: #fff;
  text-decoration: none;
}

.logo:hover {
  color: #fff;
}

/* Sin menú hamburguesa: con pocos enlaces basta con que salten
   de línea en móvil, y así no hace falta JavaScript. */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  color: #fff;
  text-decoration: none;
  padding: 0.25rem 0;
}

.nav a:hover {
  text-decoration: underline;
}

/* ---------- Aviso de campaña simulada ----------
   Va justo debajo de la cabecera en todas las páginas
   públicas para que nadie la confunda con una campaña real. */
.aviso {
  background: var(--naranja-suave);
  color: var(--naranja-texto);
  border-bottom: 3px solid var(--naranja);
  font-size: 0.95rem;
}

.aviso p {
  margin: 0;
  padding: 0.6rem 0;
}

/* ---------- Secciones ---------- */
.seccion {
  padding: 2rem 0;
}

.seccion-suave {
  background: var(--verde-suave);
}

.portada {
  padding: 2.5rem 0;
  background: var(--verde-suave);
}

.portada .subtitulo {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--texto-suave);
}

.nota {
  font-size: 0.9rem;
  color: var(--texto-suave);
}

/* ---------- Botones ---------- */
.boton {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--verde);
  border-radius: var(--radio);
  background: var(--verde);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.boton:hover {
  background: var(--verde-oscuro);
  border-color: var(--verde-oscuro);
  color: #fff;
}

.boton-secundario {
  background: transparent;
  color: var(--verde);
}

/* Desactivado: se usará también mientras se envía un formulario,
   para evitar envíos duplicados. */
.boton:disabled,
.boton[aria-disabled="true"] {
  background: var(--gris-desactivado);
  border-color: var(--gris-desactivado);
  color: var(--texto-suave);
  cursor: not-allowed;
}

/* ---------- Tarjetas ---------- */
.rejilla {
  display: grid;
  gap: var(--espacio);
  grid-template-columns: 1fr;
}

.tarjeta {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-top: 4px solid var(--verde);
  border-radius: var(--radio);
  padding: 1.25rem;
}

.tarjeta-naranja {
  border-top-color: var(--naranja);
}

.tarjeta ul {
  margin: 0;
  padding-left: 1.2rem;
}

/* Cifra grande del contador público */
.cifra {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--verde-oscuro);
}

/* Caja para los bloques que aún no tienen datos */
.pendiente {
  border: 2px dashed var(--borde);
  border-radius: var(--radio);
  padding: 1.25rem;
  text-align: center;
  color: var(--texto-suave);
  background: var(--fondo);
}

/* Lista de fechas: término y valor */
.fechas {
  margin: 0;
}

.fechas dt {
  font-weight: 600;
}

.fechas dd {
  margin: 0 0 0.75rem;
}

/* ---------- Formularios y tablas ----------
   Aún no se usan en la Fase 1; se dejan preparados para que
   las páginas de las fases siguientes tengan el mismo aspecto. */
.formulario {
  display: grid;
  gap: 0.9rem;
  max-width: 28rem;
}

.formulario label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.formulario input,
.formulario select,
.formulario textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  /* 1rem evita que iOS haga zoom al tocar el campo */
  font: inherit;
  font-size: 1rem;
}

.formulario input[type="checkbox"] {
  width: auto;
}

.mensaje {
  max-width: 36rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--verde);
  background: var(--verde-suave);
}

.enlace-formulario {
  margin-top: 1.5rem;
}

.boton-cabecera {
  border-color: #fff;
  background: transparent;
  padding: 0.4rem 0.75rem;
}

.boton-cabecera:hover {
  border-color: #fff;
}

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.filtros label {
  display: block;
  font-weight: 600;
}

.filtros select {
  max-width: 100%;
  padding: 0.5rem;
  font: inherit;
}

.boton-pequeno {
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.3rem;
}

.lista-turnos {
  display: grid;
  gap: 1rem;
}

/* En móvil la tabla se desplaza dentro de su caja en lugar de
   romper el ancho de toda la página. */
.tabla-scroll {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--borde);
  text-align: left;
}

th {
  background: var(--verde-suave);
}

/* ---------- Pie ---------- */
.pie {
  background: var(--texto);
  color: #e6ece8;
  padding: 1.5rem 0;
  font-size: 0.9rem;
}

.pie p {
  margin: 0 0 0.4rem;
}

/* ---------- Pantallas grandes (tablet y PC) ---------- */
@media (min-width: 48rem) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 1.75rem; }

  .portada {
    padding: 4rem 0;
  }

  .seccion {
    padding: 3rem 0;
  }

  .rejilla {
    grid-template-columns: repeat(3, 1fr);
  }
}