/* Base a 18px y contraste alto desde el primer día: el cartel lo hereda la
   asociación de discapacitados (criterio de éxito nº9). La auditoría formal es
   la Fase 6, pero no se construye para quien lo necesita menos. */

:root {
  --principal: #1f3a5f;
  --acento: #c9a227;
  --texto: #1a1a1a;
  --fondo: #ffffff;
  --tenue: #f2f2f2;
  --borde: #d4d4d4;
  --secundario: #4a4a4a;
}

* { box-sizing: border-box; }

html { font-size: 18px; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  max-width: 42rem;
  margin-inline: auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
}

.oculto { display: none !important; }

.cabecera {
  padding: 1.5rem 0 1rem;
  border-bottom: 4px solid var(--acento);
  margin-bottom: 1.5rem;
}

.cabecera h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--principal);
}

.descripcion {
  margin: 0.5rem 0 0;
  color: var(--secundario);
}

.seccion { margin-bottom: 2.5rem; }

.seccion h2 {
  font-size: 1.35rem;
  color: var(--principal);
  border-bottom: 2px solid var(--borde);
  padding-bottom: 0.35rem;
  margin-bottom: 1rem;
}

.aviso {
  background: var(--tenue);
  border-left: 5px solid var(--acento);
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  border-radius: 4px;
}

.aviso .meta,
.actividad .meta {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  color: var(--secundario);
}

.actividad {
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.actividad.proxima { border-left: 5px solid var(--principal); }
.actividad.pasada { opacity: 0.85; }

.actividad h3 {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
  color: var(--principal);
}

.actividad p { margin: 0 0 0.5rem; }

.actividad .fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.actividad .fotos img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

/* Objetivo táctil cómodo y foco siempre visible: teclado y dedo, no solo ratón. */
a {
  color: var(--principal);
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}

a:focus-visible,
:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

.aviso-vacio,
.aviso-error {
  padding: 1rem;
  border-radius: 4px;
  background: var(--tenue);
}

.aviso-error {
  background: #fdecea;
  color: #7a1c12;
}

.pie {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
  font-size: 0.9rem;
  color: var(--secundario);
}

/* Acceso al tablón. Va al pie y sin adornos: la parte pública es la que
   importa, y quien tiene PIN solo lo teclea una vez en su vida. */
.acceso {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
}

.acceso h2 {
  font-size: 1.1rem;
  color: var(--secundario);
  margin: 0 0 0.75rem;
}

.form-acceso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.form-acceso label {
  flex-basis: 100%;
  font-size: 0.9rem;
  color: var(--secundario);
}

.form-acceso input,
.form-acceso button,
.acceso-estado button {
  font: inherit;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
}

.form-acceso input { flex: 1 1 8rem; }

.form-acceso button,
.acceso-estado button {
  background: var(--principal);
  color: #fff;
  border-color: var(--principal);
  cursor: pointer;
}

.acceso-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.acceso-mensaje {
  margin: 0.5rem 0 0;
  min-height: 1.5rem;
  color: #7a1c12;
}

/* Distintivo de lo que no es público. Lo ve quien ha entrado con PIN, y sobre
   todo lo ve la junta: es la única forma de saber, mirando la página, qué está
   publicado para todo el pueblo y qué no. */
.etiqueta-socios {
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--principal);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Controles de cada tarjeta, solo visibles en modo edición. Van dentro de la
   propia tarjeta y no en un panel aparte: quien edita ve exactamente lo que ve
   el pueblo, con los botones encima. */
.controles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.controles button {
  font: inherit;
  font-size: 0.9rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background: var(--tenue);
  color: var(--texto);
  cursor: pointer;
}

.controles .peligro {
  border-color: #7a1c12;
  color: #7a1c12;
}

/* Modo edición. Cuelga de la misma página, debajo de lo publicado: la junta ve
   el resultado y el formulario a la vez, sin panel aparte. */
.edicion {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
}

.form-edicion {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 2rem;
}

.form-edicion h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  color: var(--secundario);
}

.form-edicion label {
  font-size: 0.9rem;
  color: var(--secundario);
}

.form-edicion input[type="text"],
.form-edicion input[type="date"],
.form-edicion textarea,
.form-edicion button {
  font: inherit;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
}

.form-edicion textarea { min-height: 5rem; }

.form-edicion button {
  margin-top: 0.75rem;
  background: var(--principal);
  color: #fff;
  border-color: var(--principal);
  cursor: pointer;
}

/* El interruptor público/socios. Casilla grande: se pulsa con el pulgar. */
.interruptor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.interruptor input { width: 24px; height: 24px; }

.interruptor label {
  font-size: 1rem;
  color: var(--texto);
}

.ayuda {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--secundario);
}

.opcional { color: var(--secundario); }