/* Compatibilidad con el CSS de marca anterior en
   payments/event-multiple-stages.html (misma idea que event-legacy.css).

   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-multiple-stages.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-multiple-stages.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-multiple-stages.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 rgba(31,38,135,.12);
    --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;

    --ev-stage-shadow:        2px 0 15px 5px rgba(1,6,33,.1);
    --ev-soldout-shadow:      2px 0 15px 5px rgba(78,78,78,.1);
    --ev-soldout-badge-bg:    #555;
    --ev-soldout-badge-ink:   #fff;
    --ev-switch-shadow:       inset 0 1px 4px rgba(0,0,0,0.08), 0 6px 14px rgba(0,0,0,0.08);
    --ev-switch-thumb:        white;
    --ev-switch-thumb-shadow: 0 4px 12px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    --ev-mesa-badge-bg:       #28a745;
    --ev-mesa-badge-ink:      white;
    --ev-mesa-help:           #444;
    --ev-mesa-line:           rgba(0,0,0,.07);
    --ev-mesa-desc:           #374151;
    --ev-sheet-bg:            #fff;
    --ev-sheet-ink:           #111;
    --ev-sheet-shadow:        0 -8px 30px rgba(0, 0, 0, .25);
    --ev-bar-shadow:          0 -6px 24px rgba(0, 0, 0, .18);
}

body {
    background-color: #000;
}