/* Compatibilidad con el CSS de marca anterior en payments/event.html.

   Solo se carga cuando la página imprime el custom_css de la firma o del
   evento que todavía no se convirtió a Estilo de marca (Fase 5), DESPUÉS de
   css/payments/event.css y ANTES de ese custom_css. Devuelve los valores de
   antes que la base Coccoa cambió (azul #007bff, pizarra #2f4858, Kanit,
   tarjeta blanca 92 % sobre el flyer desenfocado y body negro), para que el
   CSS anterior se vea igual que hoy.

   Reglas de la hoja:
   - Variables en :root (misma especificidad que el :root del CSS de marca, que
     va después y gana).
   - Las reglas globales viejas van con el mismo selector que tenían en
     event.css: el orden (esta hoja antes del custom_css) reproduce la cascada
     de antes. Nunca una clase en <html> ni más especificidad que antes.
   - Con CSS anterior el <body> no lleva cc-public, así que la base pública y
     las reglas :where(.cc-public) de event.css no aplican.

   Se borra cuando no quede ningún custom_css sin convertir. */

:root {
    --brand-primary:          #007bff;
    --brand-secondary:        #2f4858;
    --brand-gradient:         linear-gradient(90deg, #2f4858 60%, #007bff 100%);
    --brand-icon-gradient:    linear-gradient(135deg, #2f4858 60%, #007bff 100%);
    --brand-card-bg:          rgba(255,255,255,0.92);
    --brand-card-radius:      18px;
    --brand-card-shadow:      0 8px 32px 0 rgba(31,38,135,0.15);
    --brand-blur-brightness:  0.7;
    --brand-blur-amount:      12px;
    --brand-blur-opacity:     1;
    --brand-font-family:      'Kanit', sans-serif;
    --brand-button-radius:    8px;
    --brand-input-radius:     10px;
    --brand-input-border:     #d1d5db;
    --brand-input-bg:         #f8fafc;
    --brand-quantity-btn-bg:     #ffffff;
    --brand-quantity-btn-color:  #222222;
    --brand-quantity-btn-border: #d1d5db;
    --brand-mini-card-bg:        #ffffff;
    --brand-muted-color:         #6c757d;
    --brand-input-text:          #222222;
    --brand-text:                #111111;

    --ev-on-primary:          #ffffff;
    --ev-icon-ink:            #ffffff;
    --ev-icon-shadow:         0 2px 8px rgba(47,72,88,0.12);
    --ev-flyer-shadow:        2px 0 15px 5px rgba(1,6,33,.2);
    --ev-section-shadow:      2px 0 15px 5px rgba(1,6,33,.2);
    --ev-mini-shadow:         0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --ev-timing-bg:           hsla(0,0%,50%,.10);
    --ev-focus-shadow:        0 0 0 0.2rem rgba(0,123,255,.15);
    --ev-modal-bg:            #ffffff;
    --ev-modal-ink:           #212529;
    --ev-modal-head-bg:       var(--brand-gradient);
    --ev-modal-head-ink:      #ffffff;
    --ev-modal-close-filter:  brightness(0) invert(1);
    --ev-modal-text:          #212529;
    --ev-modal-intro:         #343a40;
    --ev-modal-item:          #495057;
    --ev-modal-muted:         #6c757d;
    --ev-support-yes-bg:      rgba(0, 123, 255, 0.07);
    --ev-support-yes-border:  rgba(0, 123, 255, 0.18);
    --ev-support-yes-ink:     var(--brand-primary);
    --ev-support-no-bg:       hsla(0, 0%, 50%, .06);
    --ev-support-no-border:   hsla(0, 0%, 50%, .14);
    --ev-confirm-cancel-ink:  #495057;
    --ev-confirm-cancel-line: #adb5bd;
    --ev-confirm-cancel-hover: #6c757d;
    --ev-confirm-cancel-hover-ink: #ffffff;
    --cc-hint-danger:         #dc3545;
    --cc-hint-warn:           #9a6700;
}

body {
    background-color: #000;
}