/* ============================================================
   SEPA Club Fuencarral — Identidad visual del club
   Sobreescribe los tokens de A LA PAR para las páginas
   PÚBLICAS (formulario, confirmación, subida de firma).
   El panel de gestión sigue usando los tokens de A LA PAR.
   ============================================================
   Colores extraídos del sitio web oficial clubfuencarral.es:
     Azul principal: #009FE3
     Amarillo acento: #F5C400
     Azul oscuro:    #0077B3
   ============================================================ */

/* ── Fuente del club ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700;800&display=swap');

/* ── Sobreescritura de tokens para páginas públicas ─────────── */
:root {
  /* Colores de marca Club Fuencarral */
  --color-primary:       #009FE3;
  --color-primary-dark:  #0077B3;
  --color-primary-light: #e0f4fd;
  --color-primary-bg:    #f0faff;

  /* Amarillo acento — para CTAs y destacados */
  --color-accent:        #F5C400;
  --color-accent-dark:   #d4a900;
  --color-accent-text:   #1e2a3a;  /* Texto oscuro sobre amarillo (contraste AAA) */

  /* Fondo de página — más neutro que el teal de A LA PAR */
  --color-bg-page:       #f4f8fb;
  --color-border:        #c2dff0;
  --color-primary-light: #e0f4fd;

  /* Tokens de componentes — heredan los nuevos primarios */
  --btn-primary-bg:      var(--color-accent);
  --btn-primary-text:    var(--color-accent-text);
  --btn-primary-hover:   var(--color-accent-dark);

  --input-focus-border:  var(--color-primary);
  --wizard-step-active:  var(--color-primary);

  /* Fuente Raleway para las páginas del club */
  --font-family: 'Raleway', 'Segoe UI', Arial, sans-serif;
}

/* Modo oscuro — ajustado a la paleta del club */
[data-theme="dark"] {
  --color-bg:            #0a1a2a;
  --color-bg-surface:    #0f2336;
  --color-bg-page:       #071525;
  --color-border:        #1a3a55;
  --color-primary-light: #0d2a40;
  --color-primary-bg:    #081e30;
}


/* ── Header público — estilo del club ───────────────────────── */
.sepa-header {
  background: var(--color-primary);
  /* Línea amarilla inferior como en la web del club */
  border-bottom: 4px solid var(--color-accent);
}

.sepa-header__texto h1 {
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-size: 1.3rem;
}


/* ── Botón primario — amarillo del club ─────────────────────── */
.btn--primary {
  background:   var(--color-accent);
  color:        var(--color-accent-text);
  border-color: var(--color-accent);
  font-weight:  700;
}
.btn--primary:hover {
  background:   var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color:        var(--color-accent-text);
}

/* Botón secundario — azul outline */
.btn--secondary {
  color:        var(--color-primary);
  border-color: var(--color-primary);
}
.btn--secondary:hover {
  background:   var(--color-primary-light);
}


/* ── Wizard — indicador de pasos ────────────────────────────── */
.wizard-step.active .wizard-step__num {
  background:   var(--color-primary);
  border-color: var(--color-primary);
  box-shadow:   0 0 0 4px rgba(0, 159, 227, 0.18);
}

.wizard-step.active .wizard-step__label {
  color: var(--color-primary);
}

.wizard-step.done .wizard-step__num {
  background:   var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Línea conectora completada */
.wizard-step.done:not(:last-child)::after {
  background: var(--color-primary);
}


/* ── Título de sección ──────────────────────────────────────── */
.form-section-title {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary-light);
}

.form-section-title svg {
  color: var(--color-primary);
}


/* ── Info box SEPA ──────────────────────────────────────────── */
.sepa-info-box {
  background:   var(--color-primary-light);
  border-color: var(--color-primary);
  color:        var(--color-primary-dark);
}


/* ── Foco visible — azul del club ───────────────────────────── */
:focus-visible {
  outline-color: var(--color-primary);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px rgba(0, 159, 227, 0.18);
}


/* ── IBAN — color de validación ─────────────────────────────── */
.iban-banco:not(.error) {
  color: var(--color-primary-dark);
}


/* ── Badges de consentimiento ───────────────────────────────── */
.form-check-input:checked {
  background-color: var(--color-primary);
  border-color:     var(--color-primary);
}


/* ── Separador de sección del resumen ───────────────────────── */
.resumen-seccion {
  background:   var(--color-primary-light);
  color:        var(--color-primary-dark);
  border-color: var(--color-border);
}


/* ── Alerta info ────────────────────────────────────────────── */
.alert--info {
  background:   var(--color-primary-light);
  border-color: var(--color-primary);
  color:        var(--color-primary-dark);
}


/* ── Footer — azul del club ─────────────────────────────────── */
.footer-alapar {
  background: #0077B3;
}

.footer-alapar__links a:hover,
.footer-alapar__links a:focus-visible {
  color: var(--color-accent);
}

[data-theme="dark"] .footer-alapar {
  background: #00304d;
}


/* ── Tarjeta del formulario ─────────────────────────────────── */
.sepa-card {
  box-shadow: 0 4px 24px rgba(0, 119, 179, 0.12);
}


/* ── Decoración — línea azul en campo required note ─────────── */
.form-required-note span {
  color: var(--color-primary);
}


/* ── Link corporativo ───────────────────────────────────────── */
a {
  color: var(--color-primary);
}
a:hover {
  color: var(--color-primary-dark);
}


/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .sepa-header__texto h1 {
    font-size: 1rem;
    text-transform: none;
  }
}