/* Paleta: guinda de Bomberos + rojo del logo del Reto 30. Contrastes (WCAG):
   blanco sobre --guinda 11.6:1 · blanco sobre --rojo 5.2:1 · --acento sobre --fondo 8.4:1 */
:root {
  --guinda: #691C32;
  --guinda-2: #7E2440;
  --guinda-oscuro: #4A1222;
  --acento: #8A1C3B;          /* enlaces, títulos de sección y detalles */
  --acento-oscuro: #691C32;
  --texto-claro: #F2D9DF;     /* texto secundario sobre guinda (8.7:1) */
  --rojo: #D7141A;          /* botones: el rojo del logo (#FD1717) no da contraste con texto blanco */
  --rojo-oscuro: #B01016;
  --rojo-logo: #FD1717;     /* solo para acentos decorativos */
  --texto: #1A2233;
  --texto-suave: #5A6478;
  --fondo: #F4F6FA;
  --borde: #DDE3EE;

  --bs-body-font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: var(--texto);
  --bs-body-bg: var(--fondo);
  --bs-link-color: var(--acento);
  --bs-link-color-rgb: 138, 28, 59;
  --bs-link-hover-color: var(--acento-oscuro);
  --bs-link-hover-color-rgb: 105, 28, 50;
  --bs-secondary-color: var(--texto-suave);
}

html { font-size: 16px; }

h1, h2, h3, .h1, .h2, .h3, .h4, .h5 { font-weight: 700; color: var(--guinda); }

.text-muted { color: var(--texto-suave) !important; }

/* Encabezado */
/* Franja con los logos del Ayuntamiento, SSPCM y Dirección de Bomberos (blanco y dorado, fondo transparente) */
.barra-institucional {
  background: var(--guinda-oscuro);
  padding: .45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.barra-institucional img {
  display: block;
  width: min(100%, 470px);   /* en celular ocupa el ancho disponible sin deformarse */
  height: auto;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .barra-institucional img { margin: 0; }
}
.barra-reto {
  background: var(--guinda);
  border-bottom: 4px solid var(--rojo-logo);
  padding-top: .4rem;
  padding-bottom: .4rem;
}
.barra-reto .marca { font-weight: 800; font-size: 1.15rem; line-height: 1.1; letter-spacing: .02em; }
.barra-reto .marca small { display: block; font-weight: 500; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-claro); }
.barra-reto .nav-link { color: #FFFFFF; font-weight: 600; }
.barra-reto .nav-link:hover, .barra-reto .nav-link:focus-visible { color: #fff; }

/* Portada de la página de inicio */
.portada {
  background: radial-gradient(circle at 50% 30%, var(--guinda-2) 0%, var(--guinda) 70%);
  color: #fff;
  text-align: center;
  padding: 2.5rem 1rem 3rem;
}
.portada img { width: min(320px, 80vw); height: auto; }
.portada .fecha { font-size: 1.35rem; font-weight: 700; margin: 1rem 0 .25rem; }
.portada .detalle { color: var(--texto-claro); margin-bottom: 1.5rem; }

/* Botones */
.btn { font-weight: 600; }
.btn-reto {
  --bs-btn-bg: var(--rojo);
  --bs-btn-border-color: var(--rojo);
  --bs-btn-hover-bg: var(--rojo-oscuro);
  --bs-btn-hover-border-color: var(--rojo-oscuro);
  --bs-btn-active-bg: var(--rojo-oscuro);
  --bs-btn-active-border-color: var(--rojo-oscuro);
  --bs-btn-disabled-bg: var(--rojo);
  --bs-btn-disabled-border-color: var(--rojo);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
}
.btn-acento {
  --bs-btn-color: var(--acento);
  --bs-btn-border-color: var(--acento);
  --bs-btn-hover-bg: var(--acento);
  --bs-btn-hover-border-color: var(--acento);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--acento-oscuro);
  --bs-btn-active-color: #fff;
}

/* Tarjetas y secciones */
.tarjeta {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: .75rem;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(74, 18, 34, .06);
}
.seccion {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acento);
  border-bottom: 2px solid var(--borde);
  padding-bottom: .4rem;
}
.form-label { font-weight: 600; font-size: .92rem; }

.numero-grande { font-size: 4.5rem; font-weight: 800; color: var(--rojo); line-height: 1; }

/* Pantalla de captura: pensada para usarse con una mano en el celular */
.captura-num { font-size: 2.5rem; font-weight: 800; text-align: center; letter-spacing: .1em; }
.captura .form-control, .captura .btn { min-height: 3.25rem; font-size: 1.2rem; }
.paso { border-left: .4rem solid var(--rojo); }

/* Estado de llegada */
.llegada-si { background: #D3F0DA; color: #145A2B; font-size: .8rem; font-weight: 600; }
.llegada-no { background: #E4E8F0; color: #333D4F; font-size: .8rem; font-weight: 600; }

.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }

/* Foco visible con el color de acento */
.form-control:focus, .form-select:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 .2rem rgba(138, 28, 59, .25);
}
.btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(138, 28, 59, .4); }

/* Pie */
.pie {
  background: var(--guinda);
  color: var(--texto-claro);
  font-size: .85rem;
  padding: 1rem 0;
  border-top: 4px solid var(--rojo-logo);
}

.numero-paso {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--acento); color: #fff; font-weight: 800;
  margin-bottom: .75rem;
}

/* Los campos en blanco sobre el fondo gris claro de la página */
.form-control, .form-select { background-color: #fff; border-color: #C5CEDD; }

/* En la portada (fondo guinda) el botón principal va en blanco para que resalte */
.portada .btn-reto {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-color: var(--guinda);
  --bs-btn-hover-bg: var(--texto-claro);
  --bs-btn-hover-border-color: var(--texto-claro);
  --bs-btn-hover-color: var(--guinda-oscuro);
  --bs-btn-active-bg: var(--texto-claro);
  --bs-btn-active-color: var(--guinda-oscuro);
}

/* Carta responsiva obligatoria */
.badge.obligatorio { background: var(--rojo); color: #fff; font-size: .7rem; vertical-align: middle; letter-spacing: .03em; }
.paso-obligatorio { border: 2px solid var(--rojo); }
.aviso-carta {
  background: #FDF1F2;
  border-left: .4rem solid var(--rojo);
  border-radius: .5rem;
  padding: 1rem 1.25rem;
}

/* Anuncio del periodo de inscripción (pre-registro / cerrado) */
.aviso-periodo { border-radius: .5rem; padding: .75rem 1rem; margin-bottom: 1rem; }
.aviso-abierto { background: #E7F5EC; border-left: .4rem solid #1E7A3D; color: #14532B; }
.aviso-cerrado { background: #FDF1F2; border-left: .4rem solid var(--rojo); color: var(--texto); }
.portada .aviso-periodo { max-width: 40rem; margin: 1.25rem auto 0; text-align: left; }