/* =========================================================================
   inscripcion.css — Hoja de estilo de marca para el flujo público de
   inscripciones (catequesis y grupos) de la Parroquia Santa Teresa.

   Capa que se carga DESPUÉS de Bootstrap 5 y reescribe colores, tipografía
   y componentes para alinearlos con el NUEVO diseño de la web principal
   (construido con Elementor: paleta crema + terracota, campos tostados
   redondeados y tipografía condensada).

   Los valores están tomados de los tokens globales reales de la web:
     primario/acento #B33D26 · secundario #C06B4F · texto #5C5550
     fondo #F5F0EB · tarjeta #FCFAF7 · campos #DDD7D0 · radios 16px

   Tipografía: la web usa fuentes propias (Segment A Key / TT Interphase).
   Aquí se APROXIMAN con Google Fonts: Oswald (títulos) + Source Sans 3.

   Cambiar el tema = tocar solo las variables de :root de aquí.
   ========================================================================= */

:root {
  /* Paleta real de la web nueva */
  --stj-primario:        #b33d26;   /* terracota — acento, botones, títulos */
  --stj-primario-oscuro: #9f2912;   /* hover / activo */
  --stj-secundario:      #c06b4f;   /* terracota claro */
  --stj-texto:           #5c5550;   /* texto (el "negro" cálido de la web) */
  --stj-texto-suave:     #8a817a;   /* texto secundario / ayudas */
  --stj-fondo:           #ffffff;   /* fondo de página (blanco) */
  --stj-cabecera-bg:     #f2e7df;   /* fondo de la cabecera (beige) */
  --stj-tarjeta:         #fcfaf7;   /* fondo del panel/tarjeta (crema) */
  --stj-campo:           #f5f0eb;   /* fondo de los campos (crema) */
  --stj-campo-activo:    #efe7dc;   /* campo al enfocar */
  --stj-borde:           rgba(92, 85, 80, .12);

  --stj-radio:        20px;         /* radio de tarjetas / secciones */
  --stj-radio-campo:  16px;         /* radio de campos y botones */
  --stj-sombra:       0 18px 40px -22px rgba(92, 85, 80, .45),
                      0 6px 18px -12px rgba(92, 85, 80, .18);

  /* Enganchamos las variables de Bootstrap a nuestra paleta */
  --bs-primary:      #b33d26;
  --bs-primary-rgb:  179, 61, 38;
  --bs-body-color:   #5c5550;
  --bs-body-bg:      #ffffff;
  --bs-link-color:        #b33d26;
  --bs-link-color-rgb:    179, 61, 38;
  --bs-link-hover-color:  #9f2912;
  --bs-border-radius:     16px;
}

/* ------------------------------------------------------------------ base */
body {
  background-color: var(--stj-fondo);
  font-family: "Source Sans 3", -apple-system, "Segoe UI", sans-serif;
  color: var(--stj-texto);
}

h1, h2, h3, h4, h5, h6,
.card-title, legend, .stj-titulo {
  font-family: "Oswald", "Source Sans 3", -apple-system, sans-serif;
  color: var(--stj-secundario);
  letter-spacing: .01em;
}

a { color: var(--stj-primario); text-decoration: none; }
a:hover { color: var(--stj-primario-oscuro); text-decoration: underline; }

.form-text { color: var(--stj-texto-suave); }

/* ----------------------------------------------------------- cabecera */
/* Cabecera sencilla de marca sobre crema, sin menú de navegación. */
.stj-cabecera {
  background: var(--stj-cabecera-bg);
  border-bottom: 1px solid var(--stj-borde);
  padding: 1.1rem 1rem;
}
.stj-cabecera .stj-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.75rem;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}
.stj-cabecera img { display: block; }
.stj-cabecera .logo-archi     { height: 66px; width: auto; }
.stj-cabecera .logo-parroquia { height: 74px; width: auto; }
.stj-cabecera .stj-datos { line-height: 1.3; }
.stj-cabecera .stj-datos .stj-nombre {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--stj-primario);
  font-size: 1.2rem;
  margin-bottom: .1rem;
}
.stj-cabecera .stj-datos p {
  margin: 0;
  font-size: .82rem;
  color: var(--stj-texto-suave);
}

/* Título de la actividad, sobre el panel */
.stj-titulo {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--stj-primario);
  text-align: center;
  line-height: 1.1;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  margin: 0 0 1.75rem;
}

/* ------------------------------------------------------ panel / tarjeta */
.stj-panel {
  background: var(--stj-tarjeta);
  border-radius: var(--stj-radio);
  box-shadow: var(--stj-sombra);
  padding: 2.5rem;
  margin: 2.5rem auto 3rem;
  max-width: 900px;
}
.stj-panel--estrecho { max-width: 540px; }

@media (max-width: 575.98px) {
  .stj-panel { padding: 1.5rem 1.15rem; margin-top: 1.5rem; }
  .stj-cabecera .logo-archi     { height: 54px; }
  .stj-cabecera .logo-parroquia { height: 60px; }
}

/* ---------------------------------------------------------------- botones */
.btn-primary {
  --bs-btn-bg: var(--stj-primario);
  --bs-btn-border-color: var(--stj-primario);
  --bs-btn-hover-bg: var(--stj-primario-oscuro);
  --bs-btn-hover-border-color: var(--stj-primario-oscuro);
  --bs-btn-active-bg: var(--stj-primario-oscuro);
  --bs-btn-active-border-color: var(--stj-primario-oscuro);
  --bs-btn-disabled-bg: var(--stj-primario);
  --bs-btn-disabled-border-color: var(--stj-primario);
  --bs-btn-color: #f5f0eb;
  --bs-btn-hover-color: #f5f0eb;
  --bs-btn-active-color: #f5f0eb;
  border-radius: var(--stj-radio-campo);
  padding: .75rem 2.2rem;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.btn-link { color: var(--stj-primario); }
.btn-link:hover { color: var(--stj-primario-oscuro); }

/* -------------------------------------------------------------- formularios */
.form-label {
  font-weight: 600;
  color: var(--stj-texto);
  margin-bottom: .35rem;
}

.form-control, .form-select {
  background-color: var(--stj-campo);
  border: 1px solid var(--stj-borde);
  border-radius: var(--stj-radio-campo);
  color: var(--stj-texto);
  padding: .65rem 1.1rem;
}
.form-control::placeholder { color: var(--stj-texto-suave); }
.form-control:focus, .form-select:focus {
  background-color: var(--stj-campo-activo);
  border-color: var(--stj-primario);
  color: var(--stj-texto);
  box-shadow: 0 0 0 .2rem rgba(179, 61, 38, .16);
}
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235c5550' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-check-input {
  border-color: var(--stj-texto-suave);
}
.form-check-input:checked {
  background-color: var(--stj-primario);
  border-color: var(--stj-primario);
}
.form-check-input:focus {
  border-color: var(--stj-primario);
  box-shadow: 0 0 0 .2rem rgba(179, 61, 38, .16);
}

/* Agrupaciones con fieldset/legend del formulario de datos */
fieldset {
  border: 1px solid var(--stj-borde) !important;
  border-radius: var(--stj-radio);
  background: #fff;
  padding: 1.25rem 1.5rem !important;
}
legend {
  float: none;
  width: auto;
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--stj-primario);
}

/* ------------------------------------------------------------------ tablas */
/* Cuadro del texto legal de protección de datos (aceptación) */
.tabla-rgpd {
  border-color: var(--stj-borde);
  --bs-table-bg: transparent;
}
.tabla-rgpd thead th {
  background-color: var(--stj-cabecera-bg);
  color: var(--stj-texto);
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  text-align: center;
  border-color: var(--stj-borde);
}
.tabla-rgpd th, .tabla-rgpd td {
  vertical-align: middle;
  padding: .75rem 1rem;
  border-color: var(--stj-borde);
  color: var(--stj-texto);
}

/* -------------------------------------------------------- cuadro informativo */
/* Aviso con información del grupo (días, etc.) bajo el título de inscripción.
   Va encerrado en un cuadro con barra superior coloreada, al estilo de la caja
   del texto legal, para diferenciarlo de las cajas de datos (fieldset). */
.stj-info {
  border: 1px solid var(--stj-borde);
  border-radius: var(--stj-radio);
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: #fff;
}
.stj-info-cab {
  background: var(--stj-cabecera-bg);   /* beige, como la banda superior */
  color: var(--stj-primario);
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: .6rem 1.35rem;
  border-bottom: 1px solid var(--stj-borde);
}
.stj-info-cuerpo {
  padding: 1.1rem 1.35rem;
  color: var(--stj-texto);
}
.stj-info-cuerpo > :last-child { margin-bottom: 0; }
.stj-info-cuerpo h1, .stj-info-cuerpo h2, .stj-info-cuerpo h3,
.stj-info-cuerpo h4, .stj-info-cuerpo h5, .stj-info-cuerpo h6 {
  font-size: 1.05rem;
  margin-top: 0;
  color: var(--stj-secundario);
}

/* ------------------------------------------------------------------ alerts */
.alert { border-radius: var(--stj-radio-campo); border: 0; }