/* ============================================================
   Tema claro para las páginas de tickets (accesibilidad / alto contraste).
   El tema base está tokenizado en :root; aquí redefinimos esos tokens a
   una paleta clara y sobre-escribimos los pocos valores oscuros que estaban
   hardcodeados. Este archivo debe cargarse DESPUÉS del CSS de cada página
   para ganar en la cascada.
   ============================================================ */

:root {
  --bg-base:        #eef2f8;   /* fondo gris-azulado muy claro (no blanco puro) */
  --bg-glow-a:      #dde8fb;
  --card-bg:        #ffffff;   /* tarjetas blancas sólidas */
  --card-border:    #d8e0ec;
  --card-shadow:    0 10px 30px rgba(20,40,80,0.08), 0 0 0 1px rgba(20,40,80,0.05);
  --section-border: rgba(20,40,80,0.10);
  --accent:         #2f7ae0;
  --accent-hover:   #1f63c4;
  --green:          #15a566;
  --green-dark:     #0f8350;
  --green-glow:     rgba(21,165,102,0.20);
  --text-primary:   #14223c;   /* texto principal oscuro, alto contraste */
  --text-secondary: #45556f;
  --text-muted:     #62718a;   /* aún legible sobre fondo claro */
  --input-bg:       #ffffff;
  --input-border:   #c3cfdf;
  --input-focus:    rgba(21,165,102,0.12);
  --red:            #d23b3b;
}

/* Fondo de escena claro (reemplaza los radiales oscuros) */
.bg-scene {
  background:
    radial-gradient(ellipse 70% 50% at 10% 15%, var(--bg-glow-a) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 85%, #e6f6ed 0%, transparent 60%),
    var(--bg-base) !important;
}

/* Orbes decorativos: tintes claros y sutiles */
.orb-1 { background: #cfe0ff !important; opacity: 0.5 !important; }
.orb-2 { background: #cdeed9 !important; opacity: 0.5 !important; }

/* Barra de marca clara */
.brand-bar {
  background: linear-gradient(to bottom, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.72) 100%) !important;
  border-bottom: 1px solid rgba(20,40,80,0.08) !important;
}

/* Opciones de <select> y autocompletado en claro */
.form-select option,
.cont-form .form-select option,
select option { background: #ffffff !important; color: var(--text-primary) !important; }

.ui-autocomplete {
  background: #ffffff !important;
  color: var(--text-primary) !important;
  box-shadow: 0 16px 40px rgba(20,40,80,0.18) !important;
}