/* =============================================================================
   GIVING / giving.css
   Punto de entrada del módulo de formularios de donación.

   ORDEN DE CARGA RECOMENDADO EN EL HTML:
     1. bootstrap.css
     2. _forms.css          (sistema global de formularios)
     3. _buttons.css        (sistema global de botones)
     4. giving/giving.css   ← este archivo

   Los módulos se importan en el orden correcto:
     _tokens      → variables propias y hooks de scope vacíos para skins
     _utilities   → clases de utilidad de color (.bg-, .color-, .bd-, .shadow-)
     _reset       → neutraliza influencias de _forms.css y _buttons.css dentro del widget
     _layout      → estructura: card, header, body, footer, toggle, modal activo
     _amounts     → selector de importes y campo "otro importe"
     _methods     → botones de método de pago (tarjeta, PayPal, Bizum…)
     _fields      → campos del donante, bordes colapsados en grid g-0
     _validation  → campos inválidos y mensajes de error
   ============================================================================= */


/* ============================================================================
   CONVENCIÓN js-* — CLASES COMO GANCHOS DE COMPORTAMIENTO
   ============================================================================

   REGLA: las clases que donate.js (u otro JS) usa como SELECTOR nunca deben
   compartir nombre con clases que aportan estilos. Si una clase tiene ambos
   roles, se separan: la clase CSS conserva su nombre; se añade una clase
   js-* exclusiva para el JS.

   ESTADO ACTUAL
   ─────────────
   ✓ Ya conformes (prefijo js-):
     .js-next-trigger      → botón "Continuar" (paso 1 → paso 2)
     .js-process-trigger   → botón "Siguiente paso" (submit AJAX)
     .js-toggle-once       → botón frecuencia "Una vez"        [renombrado de .btn-toggle-once]
     .js-toggle-monthly    → botón frecuencia "Mensual"        [renombrado de .btn-toggle-monthly]
     .js-edit-once         → enlace "Cambia la cantidad" (once) [renombrado de .edit-amount-once]
     .js-edit-monthly      → enlace "Cambia la cantidad" (monthly) [renombrado de .edit-amount-monthly]
     .js-submit-done       → clase de estado añadida al widget tras submit exitoso

   ✓ Renombrados (esta iteración):
     .btn-method           → CSS conservado + .js-btn-method añadido como hook JS
     .donate-form-card     → CSS conservado + .js-donate-step añadido como hook JS
     .bank-account-control → CSS conservado + .js-bank-control añadido como hook JS
     .region-select        → CSS conservado + .js-region-select (solo donate.js; forms.js sigue usando .region-select)
     .donate-form-other-radio/text → CSS conservado + .js-other-btn / .js-other-input añadidos

   ⚠ Fuera de scope (no gestionados por donate.js):
     .btn-other-amount     → styled + JS, pero el JS lo usa como label—no como hook activo
     .amount-other         → filtro ":not(.amount-other)" en JS — no es un hook directo
     .amount-buttons-wrapper → scope estructural, no hook de evento
     .country-select       → forms.js exclusivo, fuera del scope de donate.js
     .collapse-slide       → Bootstrap collapse + forms.js, fuera del scope de donate.js
   ============================================================================ */
@import '_tokens.css';
@import '_utilities.css';
@import '_reset.css';
@import '_layout.css';
@import '_amounts.css';
@import '_methods.css';
@import '_validation.css';