/* =========================
   LASBOLETAS — NOIR LUXE v1
   (rediseño total, sin tocar Blade)
========================= */

/* ——— Paleta & base ——— */


@layer lb-theme {


:root{
  --bg-1:#0b1220;           /* fondo profundo */
  --bg-2:#121a2b;           /* secciones */
  --glass:rgba(255,255,255,.06);
  --card:#141d31;
  --border:#1f2b44;
  --text:#e6edf7;
  --muted:#9fb0c9;
  --brand:#5aa9ff;          /* azul eléctrico elegante */
  --brand-600:#3f8fe4;
  --accent:#ffb347;         /* ámbar suave */
  --radius:14px;
  --radius-lg:20px;
  --shadow:0 18px 50px rgba(0,0,0,.35);
  --shadow-sm:0 10px 28px rgba(0,0,0,.25);
}

/* ——— Fondo con gradiente cinematográfico ——— */
html,body{
  background:
    radial-gradient(70% 60% at 80% 10%, rgba(90,169,255,.20), transparent 60%),
    radial-gradient(60% 60% at 10% 90%, rgba(255,179,71,.18), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2)) !important;
  color:var(--text) !important;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ——— Contenedores ——— */
.container{ max-width:1180px }

/* ——— Header estilo glass ——— */
#header,.header,.header-bottom,.menu-area{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)) !important;
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  box-shadow:var(--shadow-sm) !important;
}
.menu li a,.menu .menu-link,.nav-menu a{
  color:var(--muted) !important;
  font-weight:700 !important;
  padding:10px 14px !important;
  border-radius:10px !important;
}
.menu li a:hover,.menu li.active>a{
  color:#0b1220 !important;
  background:var(--brand) !important;
}

/* buscador píldora */
.header .search-form input[type="text"], [type="search"], .searchbar input{
  height:44px !important; border-radius:999px !important;
  background:#0f1728 !important; color:var(--text) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  padding:0 46px 0 16px !important;
}

/* ——— Hero/slider ——— */
.banner,.banner-slider,.swiper,.swiper-container{
  border-radius:var(--radius-lg) !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.1) !important;
  box-shadow:var(--shadow) !important;
}

/* paginación del slider */
.swiper-pagination-bullet{
  width:30px !important; height:6px !important; border-radius:999px !important;
  background:rgba(255,255,255,.25) !important; opacity:1 !important;
}
.swiper-pagination-bullet-active{ background:var(--brand) !important }

/* ——— Secciones como “tarjetas” grandes ——— */
.shows-section,.recommended-section,.about-section,.blog-section{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:18px !important;
  box-shadow:var(--shadow-sm) !important;
  padding:22px 18px !important; margin-top:18px !important;
}
.section-heading__subtitle{ color:var(--brand) !important; font-weight:800 !important; letter-spacing:.06em }
.section-heading__title{ color:#ffffff !important; font-weight:900 !important }

/* ——— GRID de shows (sin tocar Blade) ——— */
.show-card-wrapper{
  display:grid !important; gap:22px !important;
  grid-template-columns:repeat(auto-fill, minmax(300px,1fr)) !important;
}
.show-card{ width:auto !important; min-width:0 !important; flex:1 1 auto !important }

/* Tarjeta */
.show-item{
  background:var(--card) !important;
  border:1px solid var(--border) !important;
  border-radius:16px !important; overflow:hidden !important;
  box-shadow:var(--shadow) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.show-item:hover{ transform:translateY(-4px) !important; box-shadow:0 24px 64px rgba(0,0,0,.45) !important }
.show-item__thumb{ position:relative !important; background:#0f1728 }
.show-item__thumb img{ width:100% !important; aspect-ratio:16/9 !important; object-fit:cover !important; display:block !important }

/* botón trailer */
.show-item__thumb .video-btn{
  position:absolute !important; right:14px; bottom:14px; z-index:2;
  width:46px; height:46px; display:grid; place-items:center;
  border-radius:50%; background:rgba(0,0,0,.55); color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  transition:transform .2s ease, background .2s ease;
}
.show-item__thumb .video-btn:hover{ transform:scale(1.08); background:rgba(0,0,0,.75) }

.show-item__content{ padding:16px 18px !important }
.show-item__title{
  color:#fff !important; font-weight:900 !important; font-size:1.08rem !important;
  white-space:normal !important; word-break:break-word !important;
}
.show-item__language{ color:var(--muted) !important; font-size:.93rem !important; margin-top:4px !important }
.show-item__list{
  display:flex !important; gap:10px !important; flex-wrap:wrap !important; margin:10px 0 0 !important;
  padding:0 !important; list-style:none !important;
}
.show-item__list-item{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:#d9e3f1 !important;
  padding:.34rem .7rem !important; border-radius:999px !important; font-weight:700 !important; font-size:.83rem !important;
  box-shadow:0 8px 20px rgba(0,0,0,.25) !important;
}

/* ——— Botones ——— */
.btn,.cmn--btn,.btn--base,.btn-primary{
  background:linear-gradient(90deg, var(--brand), #82c2ff) !important;
  border:0 !important; color:#0b1220 !important;
  border-radius:12px !important; padding:.85rem 1.1rem !important;
  font-weight:900 !important; letter-spacing:.25px;
  box-shadow:0 18px 36px rgba(90,169,255,.28) !important;
}
.btn:hover,.btn--base:hover,.btn-primary:hover{
  filter:saturate(110%) brightness(1.03); transform:translateY(-1px);
}
.btn--outline,.btn-outline-primary{
  background:transparent !important; color:var(--brand) !important; border:1.6px solid var(--brand) !important; border-radius:12px !important;
}
.btn--outline:hover,.btn-outline-primary:hover{ background:var(--brand) !important; color:#0b1220 !important }

/* ——— Inputs / tablas / paginación ——— */
input,select,textarea,.form-control{
  border:1px solid rgba(255,255,255,.14) !important; background:#0f1728 !important; color:var(--text) !important;
  border-radius:12px !important; padding:.75rem .95rem !important;
}
input::placeholder,textarea::placeholder{ color:#7d8aa3 !important }
input:focus,select:focus,textarea:focus{
  border-color:var(--brand) !important; box-shadow:0 0 0 3px rgba(90,169,255,.25) !important; outline:0 !important;
}
.table{ background:#0f1728; border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm) }
.table th{ color:#9fb0c9; text-transform:uppercase; font-size:.78rem }
.table td,.table th{ border-color:rgba(255,255,255,.1) !important }
.pagination{ gap:10px }
.page-item .page-link{
  border:1px solid rgba(255,255,255,.14) !important; background:#0f1728 !important; color:#cbd5e1 !important; border-radius:10px !important;
}
.page-item.active .page-link{ background:var(--brand) !important; border:0 !important; color:#0b1220 !important }

/* ——— Checkout / métodos de pago ——— */
.gateway-option,.payment-item,.method-item{
  background:#0f1728 !important; border:1.6px solid rgba(255,255,255,.12) !important; border-radius:16px !important;
  box-shadow:var(--shadow-sm) !important; transition:all .2s ease !important;
}
.gateway-option:hover,.payment-item:hover{
  border-color:var(--brand) !important; box-shadow:0 0 0 4px rgba(90,169,255,.15) !important;
}
.gateway-option input[type="radio"],.payment-item input[type="radio"]{ accent-color:var(--brand) }
.checkout-sticky{ position:sticky; bottom:0; background:#0f1728; border-top:1px solid rgba(255,255,255,.12); padding:12px; box-shadow:0 -12px 28px rgba(0,0,0,.35) }

/* ——— Footer ——— */
.footer,.site-footer{ background:#0a0f1d !important; color:#cbd5e1 !important; border-top:1px solid rgba(255,255,255,.08) }
.footer a{ color:#e5e7eb !important } .footer a:hover{ color:#fff !important; text-decoration:underline !important }

/* ——— Tabs/Chips ——— */
.nav-tabs{ border:0 !important; gap:12px }
.nav-tabs .nav-link{
  background:#0f1728 !important; border:1px solid rgba(255,255,255,.12) !important; color:#cbd5e1 !important;
  border-radius:999px !important; padding:.55rem 1rem !important; font-weight:800 !important;
  box-shadow:var(--shadow-sm) !important;
}
.nav-tabs .nav-link.active{
  background:var(--brand) !important; color:#0b1220 !important; border-color:transparent !important;
  box-shadow:0 16px 32px rgba(90,169,255,.28) !important;
}

/* ——— Responsive ——— */
@media (max-width:992px){
  .header-bottom{ position:sticky; top:0; z-index:100 }
  .show-card-wrapper{ grid-template-columns:repeat(2, minmax(260px,1fr)) !important }
  .btn,.btn-primary,.cmn--btn{ width:100% }
}
@media (max-width:576px){
  .show-card-wrapper{ grid-template-columns:1fr !important }
  .show-item__title{ font-size:1.02rem !important }
}




/* ===== NOIR LUXE – FIX PACK v1.2 (fondos, newsletter, cards) ===== */

/* 1) Quitar barras/islotes blancos: forzamos wrapper a transparente */
.root, main, .page-wrapper, .content-wrapper, .content, .container,
.container-fluid, section, .section, .body-overlay, .sidebar-overlay {
  background: transparent !important;
}

/* Si algún elemento trae bg blanco inline o por clase común, se oscurece */
*[style*="background:#fff"], *[style*="background: #fff"], .bg-white, .white-bg {
  background:#0f1728 !important;
}

/* 2) Header consistente (sin brillo rojizo ni cortes) */
.header-top, .header-area, .header, .header-bottom, .header.fixed-header, #header {
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}

/* 3) Cards/widgets/tablas: oscurecer y unificar */
.card, .blog-item, .event-item, .post-item, .single-item, .feature-box,
.stats-card, .widget, .widget-body, .pricing-card {
  background: #0f1728 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.25) !important;
}
.table, .table tr, .table td, .table th {
  background:#0f1728 !important; color:var(--text) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.table th { color:#9fb0c9 !important; text-transform: uppercase; font-size:.78rem }

/* 4) Títulos y textos para contraste correcto */
h1,h2,h3,h4,h5,h6,.title,.widget-title,.section-heading__title,.show-item__title {
  color:#F5FAFF !important;
}
.section-heading__subtitle { color: var(--brand) !important }

/* 5) Chips/badges en oscuro */
.badge, .tag, .show-item__list-item {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #dbe7ff !important;
}

/* 6) Newsletter / suscripción (footer) — normalización fuerte */
.footer .input-group, .newsletter .input-group, .subscribe-form, .subscribe-box {
  display:flex; gap:10px; align-items:center; background: transparent !important;
}
.footer .input-group-prepend, .footer .input-group-text,
.newsletter .input-group-text, .subscribe-form .input-group-prepend {
  display:none !important;
}
.footer input[type="email"], .newsletter input[type="email"],
.subscribe-form input[type="email"], .footer .form-control[type="email"]{
  background:#0f1728 !important; color:#e6edf7 !important;
  border:1px solid rgba(255,255,255,.16) !important;
  height:48px !important; border-radius:12px !important; padding:0 14px !important;
}
.footer input[type="email"]::placeholder{ color:#8ea0bb !important }
.footer .subscribe-form .btn, .footer .input-group .btn, .newsletter .btn{
  background: linear-gradient(90deg, var(--brand), #82c2ff) !important;
  border:0 !important; color:#0b1220 !important;
  height:48px !important; border-radius:12px !important; padding:0 18px !important;
  box-shadow: 0 12px 26px rgba(90,169,255,.25) !important;
}

/* 7) Tabs/Chips (por si algún set quedó claro) */
.nav-tabs .nav-link{
  background:#0f1728 !important; border:1px solid rgba(255,255,255,.12) !important; color:#cbd5e1 !important;
  border-radius:999px !important; box-shadow:0 8px 20px rgba(0,0,0,.25) !important;
}
.nav-tabs .nav-link.active{
  background: var(--brand) !important; color:#0b1220 !important; border-color: transparent !important;
  box-shadow: 0 16px 32px rgba(90,169,255,.28) !important;
}

/* 8) Paddings / grid de shows para aire y consistencia */
.shows-section, .recommended-section, .about-section, .blog-section { padding:22px 20px !important }
.show-card-wrapper{ display:grid !important; gap:22px !important; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important }
.show-card{ width:auto !important; min-width:0 !important; flex:1 1 auto !important }
.show-item__btn{ display:flex; gap:10px; margin-top:10px !important }

/* 9) Enlaces en oscuro */
a{ color:#9cc7ff } a:hover{ color:#cfe4ff }

/* 10) Social icons del footer */
.footer .social-icons a, .footer .social-links a{
  background: rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.16) !important;
  width:42px; height:42px; display:inline-grid; place-items:center; border-radius:10px; color:#e6edf7 !important;
}
.footer .social-icons a:hover{ background: var(--brand) !important; color:#0b1220 !important }




/* === FIX PACK v1.3 — menú móvil, fondos y newsletter === */

/* 0) Fondos globales: nada blanco suelto */
.root, main, .page-wrapper, .content-wrapper, .content, section, .section,
.container, .container-fluid, .tab-content, .tab-pane {
  background: transparent !important;
}
.bg-white, .white-bg, *[style*="background:#fff"], *[style*="background: #fff"]{
  background:#0f1728 !important;
}

/* 1) Menú móvil / sidebar (forzamos drawer) */
.sidebar, .sidebar-menu, .mobile-menu, .menu-sidebar,
.offcanvas, .offcanvas-start, .offcanvas-end, .navbar-collapse.show {
  position: fixed !important;
  top: 0 !important; right: 0 !important;
  height: 100vh !important;
  width: min(92vw, 420px) !important; max-width: 420px !important;
  overflow-y: auto !important; overscroll-behavior: contain;
  background:#0f1728 !important; color:#e6edf7 !important;
  border-left: 1px solid rgba(255,255,255,.12) !important;
  z-index: 10010 !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.45) !important;
}
.sidebar-overlay, .body-overlay, .offcanvas-backdrop {
  background: rgba(0,0,0,.55) !important; opacity: 1 !important;
  backdrop-filter: blur(2px);
}
.sidebar .menu, .sidebar-menu .menu, .mobile-menu .menu, .navbar-collapse .menu {
  display:block !important; padding: 18px 14px !important;
}
.sidebar .menu a, .mobile-menu .menu a, .navbar-collapse .menu a{
  color:#e6edf7 !important; font-weight:700 !important; padding:10px 12px !important; border-radius:10px !important;
}
.sidebar .menu a:hover{ background:rgba(255,255,255,.08) !important }

/* 2) Sección de eventos/tabs: quitar “tarjeta” blanca del contenedor */
.show-tab, .shows-section .tab-content, .shows-section .tab-pane,
.shows-section .tab, .tab-area, .tab-container {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}

/* 3) Cards/widgets/tablas: oscurecer y unificar (por si alguna quedó clara) */
.card, .blog-item, .event-item, .post-item, .feature-box, .widget, .widget-body,
.single-item, .pricing-card, .stats-card {
  background:#0f1728 !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.25) !important;
}
.table, .table tr, .table td, .table th{
  background:#0f1728 !important; color:#e6edf7 !important;
  border-color:rgba(255,255,255,.10) !important;
}

/* 4) Newsletter footer: normalización fuerte */
.footer .input-group, .newsletter .input-group, .subscribe-form, .subscribe-box{
  display:flex !important; align-items:center !important; gap: 10px !important;
  background: transparent !important; border:0 !important; box-shadow:none !important;
}
.footer .input-group-prepend, .footer .input-group-append, .footer .input-group .input-group-text,
.newsletter .input-group-prepend, .newsletter .input-group-append, .newsletter .input-group .input-group-text{
  display:none !important;
}
.footer input[type="email"], .newsletter input[type="email"], .subscribe-form input[type="email"]{
  flex:1 1 auto !important; height:48px !important;
  background:#0f1728 !important; color:#e6edf7 !important;
  border:1px solid rgba(255,255,255,.16) !important; border-radius:12px !important;
  padding:0 14px !important;
}
.footer input[type="email"]::placeholder{ color:#8ea0bb !important }
.footer .subscribe-form .btn, .footer .input-group .btn, .newsletter .btn{
  height:48px !important; border-radius:12px !important;
  background:linear-gradient(90deg, var(--brand), #82c2ff) !important;
  border:0 !important; color:#0b1220 !important;
  padding:0 18px !important; box-shadow:0 12px 26px rgba(90,169,255,.25) !important;
}

/* 5) Tabs/Chips coherentes en oscuro */
.nav-tabs{ border:0 !important; gap:12px }
.nav-tabs .nav-link{
  background:#0f1728 !important; border:1px solid rgba(255,255,255,.12) !important;
  color:#cbd5e1 !important; border-radius:999px !important;
  box-shadow:0 8px 20px rgba(0,0,0,.25) !important;
}
.nav-tabs .nav-link.active{
  background:var(--brand) !important; color:#0b1220 !important; border-color:transparent !important;
  box-shadow:0 16px 32px rgba(90,169,255,.28) !important;
}




/* ===== NOIR LUXE — FIX v1.4 (contraste + newsletter + tabs) ===== */

/* Fondo: nada blanco en wrappers/tabs */
.root, main, .page-wrapper, .content-wrapper, .content, section, .section,
.container, .container-fluid, .tab-content, .tab-pane { background: transparent !important; }
.bg-white, .white-bg, *[style*="background:#fff"], *[style*="background: #fff"]{ background:#0f1728 !important; }

/* Contraste general en superficies oscuras */
.header, .shows-section, .recommended-section, .blog-section, .about-section,
.footer, .mobile-menu, .sidebar, .card, .event-item, .post-item, .widget {
  color:#dfe7f5 !important;
}
.header a, .shows-section a, .recommended-section a, .blog-section a, .about-section a,
.footer a, .mobile-menu a, .card a, .event-item a, .widget a {
  color:#a9cbff !important;
}
.header a:hover, .shows-section a:hover, .recommended-section a:hover, .blog-section a:hover,
.footer a:hover, .mobile-menu a:hover, .card a:hover, .event-item a:hover, .widget a:hover {
  color:#d8e8ff !important;
}
/* Títulos fuertes */
h1,h2,h3,h4,h5,h6,.title,.widget-title,.section-heading__title,.show-item__title{ color:#ffffff !important }

/* Tabs/Chips coherentes */
.nav-tabs{ border:0 !important; gap:12px }
.nav-tabs .nav-link{
  background:#0f1728 !important; border:1px solid rgba(255,255,255,.12) !important;
  color:#dfe7f5 !important; border-radius:999px !important;
  box-shadow:0 8px 20px rgba(0,0,0,.25) !important;
}
.nav-tabs .nav-link.active{
  background:var(--brand) !important; color:#0b1220 !important; border-color:transparent !important;
  box-shadow:0 16px 32px rgba(90,169,255,.28) !important;
}

/* Cards uniformes por si queda alguna clara */
.card, .blog-item, .event-item, .post-item, .feature-box, .widget, .widget-body,
.single-item, .pricing-card, .stats-card{
  background:#0f1728 !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.25) !important;
}

/* Tabla en oscuro */
.table, .table tr, .table td, .table th{
  background:#0f1728 !important; color:#e6edf7 !important;
  border-color:rgba(255,255,255,.10) !important;
}
.table th{ color:#9fb0c9 !important }

/* Newsletter: eliminar “bloque izquierdo” y alinear input+botón */
.footer .input-group,
.newsletter .input-group,
.subscribe-form, .subscribe-box{
  display:flex !important; align-items:center !important; gap:10px !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
/* Mata cualquier prepended icon/text que quede */
.footer .input-group > :first-child:not(input),
.newsletter .input-group > :first-child:not(input),
.subscribe-form > :first-child:not(input){
  display:none !important;
}
.footer .input-group-prepend, .footer .input-group-append, .footer .input-group .input-group-text,
.newsletter .input-group-prepend, .newsletter .input-group-append, .newsletter .input-group .input-group-text{
  display:none !important;
}
.footer input[type="email"], .newsletter input[type="email"], .subscribe-form input[type="email"]{
  flex:1 1 auto !important; min-width:0 !important;
  height:48px !important; background:#0f1728 !important; color:#e6edf7 !important;
  border:1px solid rgba(255,255,255,.16) !important; border-radius:12px !important;
  padding:0 14px !important;
}
.footer input[type="email"]::placeholder{ color:#8ea0bb !important }
.footer .subscribe-form .btn, .footer .input-group .btn, .newsletter .btn{
  height:48px !important; border-radius:12px !important;
  background:linear-gradient(90deg, var(--brand), #82c2ff) !important;
  border:0 !important; color:#0b1220 !important; padding:0 18px !important;
  box-shadow:0 12px 26px rgba(90,169,255,.25) !important;
}

/* Menú móvil / drawer estable */
.sidebar, .mobile-menu, .menu-sidebar, .offcanvas, .offcanvas-start, .offcanvas-end, .navbar-collapse.show{
  position:fixed !important; top:0 !important; right:0 !important; height:100vh !important;
  width:min(92vw,420px) !important; max-width:420px !important; overflow-y:auto !important;
  background:#0f1728 !important; color:#e6edf7 !important; border-left:1px solid rgba(255,255,255,.12) !important;
  z-index:10010 !important; box-shadow:0 20px 60px rgba(0,0,0,.45) !important;
}
.sidebar-overlay, .body-overlay, .offcanvas-backdrop{ background:rgba(0,0,0,.55) !important; opacity:1 !important }

/* Chips/badges */
.badge, .tag, .show-item__list-item{
  background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; color:#dbe7ff !important;
}





/* ===== NOIR LUXE — FIX v1.5 ===== */

/* 1) Menú móvil por encima de TODO */
.header, #header, .header.fixed-header { z-index: 1000 !important; }
.banner, .banner-section, .swiper, .swiper-container { z-index: 1 !important; }
.sidebar, .mobile-menu, .menu-sidebar, .offcanvas, .navbar-collapse.show {
  position: fixed !important; top:0 !important; right:0 !important; height:100vh !important;
  width:min(92vw,420px) !important; max-width:420px !important; overflow-y:auto !important;
  background:#0f1728 !important; color:#e6edf7 !important; border-left:1px solid rgba(255,255,255,.12) !important;
  z-index: 100000 !important; box-shadow:0 20px 60px rgba(0,0,0,.5) !important;
}
.sidebar-overlay, .body-overlay, .offcanvas-backdrop { z-index: 99990 !important; background:rgba(0,0,0,.55) !important; }

/* 2) Logo más grande (desktop y móvil) */
.site-logo img, .header .logo img, .header .navbar-brand img {
  height: 26px !important;
}
@media (min-width: 768px){
  .site-logo img, .header .logo img, .header .navbar-brand img { height: 40px !important; }
}
@media (min-width: 1200px){
  .site-logo img, .header .logo img, .header .navbar-brand img { height: 48px !important; }
}

/* 3) Tabs de eventos: eliminar cualquier “panel”/card blanco que los envuelve */
.shows-section .show-tab,
.shows-section .show-tab .container,
.shows-section .tab-content,
.shows-section .tab-pane,
.shows-section .tab-header,
.shows-section .tab-controls,
.shows-section .tab-menu {
  background: transparent !important;
  border: 0 !important; box-shadow: none !important;
}

/* Botones de tabs coherentes en oscuro */
.shows-section .nav-tabs { border:0 !important; gap:12px !important; }
.shows-section .nav-tabs .nav-link{
  background:#0f1728 !important; border:1px solid rgba(255,255,255,.12) !important;
  color:#dfe7f5 !important; border-radius:999px !important;
  box-shadow:0 8px 20px rgba(0,0,0,.25) !important;
}
.shows-section .nav-tabs .nav-link.active{
  background:var(--brand) !important; color:#0b1220 !important; border-color:transparent !important;
  box-shadow:0 16px 32px rgba(90,169,255,.28) !important;
}

/* Contenedor debajo de tabs (donde se veían “islas” claras) */
.shows-section, .shows-section .container > div {
  background: transparent !important; border:0 !important; box-shadow:none !important;
}

/* 4) Cards uniformes (por si algo se seguía colando claro) */
.card, .event-item, .post-item, .widget, .widget-body, .single-item, .stats-card {
  background:#0f1728 !important; border:1px solid rgba(255,255,255,.12) !important; border-radius:16px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.25) !important;
}

/* 5) Texto/links con buen contraste en superficies oscuras */
.shows-section, .recommended-section, .blog-section, .about-section, .footer, .sidebar, .mobile-menu {
  color:#dfe7f5 !important;
}
.shows-section a, .recommended-section a, .blog-section a, .about-section a, .footer a, .sidebar a {
  color:#a9cbff !important;
}
.shows-section a:hover, .recommended-section a:hover, .blog-section a:hover, .about-section a:hover, .footer a:hover, .sidebar a:hover {
  color:#d8e8ff !important;
}
h1,h2,h3,h4,h5,h6,.section-heading__title,.show-item__title { color:#fff !important; }

/* 6) Newsletter footer: elimina cualquier “bloque” inicial y alinea input+botón */
.footer .input-group,
.newsletter .input-group,
.subscribe-form, .subscribe-box {
  display:flex !important; align-items:center !important; gap:10px !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
.footer .input-group > :first-child:not(input),
.newsletter .input-group > :first-child:not(input),
.subscribe-form > :first-child:not(input),
.footer .input-group-prepend, .footer .input-group-append,
.footer .input-group .input-group-text,
.newsletter .input-group-prepend, .newsletter .input-group-append,
.newsletter .input-group .input-group-text {
  display:none !important;
}
.footer input[type="email"], .newsletter input[type="email"], .subscribe-form input[type="email"]{
  flex:1 1 auto !important; min-width:0 !important; height:48px !important;
  background:#0f1728 !important; color:#e6edf7 !important;
  border:1px solid rgba(255,255,255,.16) !important; border-radius:12px !important; padding:0 14px !important;
}
.footer input[type="email"]::placeholder{ color:#8ea0bb !important }
.footer .subscribe-form .btn, .footer .input-group .btn, .newsletter .btn{
  height:48px !important; border-radius:12px !important;
  background:linear-gradient(90deg, var(--brand), #82c2ff) !important;
  border:0 !important; color:#0b1220 !important; padding:0 18px !important;
  box-shadow:0 12px 26px rgba(90,169,255,.25) !important;
}




/* Logo más grande en todo el sitio */
.site-logo img,
.header .logo img,
.header .navbar-brand img {
  height: 40px !important; /* tamaño en móvil */
}

@media (min-width: 768px) {
  .site-logo img,
  .header .logo img,
  .header .navbar-brand img {
    height: 60px !important; /* tamaño en tablet */
  }
}

@media (min-width: 1200px) {
  .site-logo img,
  .header .logo img,
  .header .navbar-brand img {
    height: 80px !important; /* tamaño en desktop grande */
  }
}





/* Header más alto para permitir un logo grande */
.header,
.header .navbar {
  min-height: 90px !important;
  padding: 10px 0 !important;
}

/* Logo grande y proporcionado */
.header .logo img,
.site-logo img,
.navbar-brand img {
  height: 70px !important; /* Ajusta el tamaño */
  width: auto !important;  /* Mantiene proporción */
}



/* --- Ajustar logo del header --- */
.header .logo img {
    max-height: 70px; /* Incrementa altura del logo */
    margin-top: 10px; /* Espacio arriba */
    margin-bottom: 10px; /* Espacio abajo */
}

/* --- Ajustar altura del slider --- */
.banner-section {
    padding-top: 0; /* Quita espacio arriba */
    padding-bottom: 0; /* Quita espacio abajo */
}

.banner-section img {
    height: auto;
    max-height: 280px; /* Más alto */
    object-fit: cover; /* Ajusta imagen sin deformar */
}

/* --- Reducir espacio entre slider y Próximamente --- */
.shows-section {
    margin-top: 5px; /* Más pegado */
}



/* Estilo para los botones "Próximamente" */
.tab-pane .nav-link {
    background-color: #0d1b2a !important; /* Fondo oscuro acorde al tema */
    color: #ffffff !important; /* Texto blanco */
    border: none !important;
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: bold;
    box-shadow: 0px 2px 8px rgba(0,0,0,0.3); /* Sombra suave */
    transition: all 0.3s ease-in-out;
}

.tab-pane .nav-link.active {
    background-color: #ffcc00 !important; /* Fondo dorado cuando está activo */
    color: #000 !important; /* Texto oscuro para contraste */
}



/* ================== Drawer / Mobile menu buttons ================== */

/* Texto y links del menú: buen contraste */
.sidebar, .mobile-menu, .menu-sidebar, .offcanvas, .navbar-collapse.show { color:#E9F1FF !important; }
.sidebar .nav-item > a,
.mobile-menu .nav-item > a {
  color:#E9F1FF !important;
  font-weight:700 !important;
  font-size:15px !important;
}
.sidebar .nav-item > a:hover { color:#FFFFFF !important; }

/* Botones full-width, tipografía y espaciado */
.sidebar .btn, .mobile-menu .btn, .menu-sidebar .btn, .navbar-nav .btn{
  display:block !important;
  width:100% !important;
  padding:12px 16px !important;
  border-radius:12px !important;
  font-weight:800 !important;
  font-size:16px !important;
  text-align:center !important;
  letter-spacing:.2px !important;
  box-shadow: none !important;
  margin:8px 0 !important;
}

/* Botón principal: Crear cuenta (btn--base) */
.sidebar .btn--base, .mobile-menu .btn--base, .menu-sidebar .btn--base, .navbar-nav .btn--base{
  background: linear-gradient(90deg, var(--brand), #82c2ff) !important;
  border:0 !important;
  color:#0b1220 !important;
  box-shadow: 0 12px 26px rgba(90,169,255,.25) !important;
}
.sidebar .btn--base:hover{ filter: brightness(1.06) !important; }

/* Botón outline: Iniciar sesión (btn-outline--base) */
.sidebar .btn-outline--base, .mobile-menu .btn-outline--base,
.menu-sidebar .btn-outline--base, .navbar-nav .btn-outline--base{
  background: transparent !important;
  border:1.6px solid #A9CBFF !important;
  color:#A9CBFF !important;
}
.sidebar .btn-outline--base:hover{
  background:#A9CBFF !important;
  color:#0b1220 !important;
}

/* Accesibilidad al foco: borde visible */
.sidebar .btn:focus-visible, .mobile-menu .btn:focus-visible{
  outline:2px solid #ffffff !important;
  outline-offset:2px !important;
}

/* Separación del contenido inferior del drawer */
.sidebar .nav-item:last-child { margin-bottom:8px !important; }

/* Opcional: iconos del menú un poco más visibles */
.sidebar .nav-item i, .mobile-menu .nav-item i { color:#A9CBFF !important; }



/* ===================== MENU LATERAL (OFFCANVAS / DRAWER) v2 ===================== */
/* Fondo y color base del panel */
.header .offcanvas,
.offcanvas,
.offcanvas.show,
.navbar-collapse.offcanvas,
.navbar-collapse.show {
  background:#0f1728 !important;
  color:#EAF2FF !important;
}

/* --------- FILA IDIOMA (bandera + texto) --------- */
.header .offcanvas .language,
.offcanvas .language,
.offcanvas .language-box,
.offcanvas .lang,
.offcanvas .nav-language,
.offcanvas .menu-language {
  display:flex !important; align-items:center !important; gap:12px !important;
  color:#EAF2FF !important; font-weight:800 !important; font-size:16px !important;
  padding:12px 14px !important; border-radius:10px !important;
}
.offcanvas .language img,
.offcanvas .lang img,
.offcanvas .language i,
.offcanvas .language svg {
  width:20px; height:20px; border-radius:3px; opacity:1 !important; filter:none !important;
}
.offcanvas .language:hover,
.offcanvas .lang:hover { background:rgba(255,255,255,.07) !important; }

/* --------- ÍTEMS DEL MENÚ --------- */
.header .offcanvas .navbar-nav.nav-menu .nav-item > a,
.offcanvas .navbar-nav.nav-menu .nav-item > a,
.header .offcanvas .nav-item > a,
.offcanvas .nav-item > a {
  display:flex !important; align-items:center !important; gap:12px !important;
  color:#EAF2FF !important;
  font-weight:800 !important;
  font-size:16px !important;
  letter-spacing:.2px !important;
  padding:12px 14px !important;
  border-radius:10px !important;
  transition:background .15s ease,color .15s ease !important;
}

/* Iconos dentro de los enlaces */
.header .offcanvas .nav-item > a i,
.header .offcanvas .nav-item > a svg,
.offcanvas .nav-item > a i,
.offcanvas .nav-item > a svg {
  color:#9cc6ff !important; fill:currentColor !important; stroke:currentColor !important;
  width:18px; min-width:18px; opacity:1 !important;
}

/* Hover / enfoque / activo */
.header .offcanvas .nav-item > a:hover,
.header .offcanvas .nav-item > a:focus,
.header .offcanvas .nav-item.active > a,
.offcanvas .nav-item > a:hover,
.offcanvas .nav-item > a:focus,
.offcanvas .nav-item.active > a {
  background:rgba(169,203,255,.10) !important;
  color:#ffffff !important;
}
.header .offcanvas .nav-item > a:hover i,
.header .offcanvas .nav-item > a:hover svg,
.offcanvas .nav-item > a:hover i,
.offcanvas .nav-item > a:hover svg {
  color:#ffffff !important;
}

/* Separadores sutiles entre grupos */
.header .offcanvas .navbar-nav.nav-menu .nav-item,
.offcanvas .navbar-nav.nav-menu .nav-item {
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.header .offcanvas .navbar-nav.nav-menu .nav-item:last-child,
.offcanvas .navbar-nav.nav-menu .nav-item:last-child {
  border-bottom:0 !important;
}

/* Botones inferiores (ya existían, aseguramos contraste) */
.header .offcanvas .btn--base,
.offcanvas .btn--base {
  background: linear-gradient(90deg, var(--brand), #82c2ff) !important;
  border:0 !important; color:#0b1220 !important;
  font-weight:800 !important; border-radius:12px !important;
}
.header .offcanvas .btn-outline--base,
.offcanvas .btn-outline--base {
  background:transparent !important; color:#A9CBFF !important;
  border:1.6px solid #A9CBFF !important; border-radius:12px !important;
}
.header .offcanvas .btn-outline--base:hover,
.offcanvas .btn-outline--base:hover { background:#A9CBFF !important; color:#0b1220 !important; }

/* X de cerrar visible en oscuro */
.header .offcanvas .btn-close,
.offcanvas .btn-close,
.header .offcanvas .offcanvas-header .btn-close,
.offcanvas .offcanvas-header .btn-close {
  filter: invert(1) brightness(1.8) !important; opacity:1 !important;
}

/* Foco de accesibilidad */
.header .offcanvas a:focus-visible,
.offcanvas a:focus-visible {
  outline:2px solid #ffffff !important;
  outline-offset:2px !important;
  border-radius:10px !important;
}




.language_switcher .text {
    color: #ffffff !important; /* texto blanco */
    font-weight: 600;          /* igual que los demás ítems */
    font-size: 15px;           /* ajusta al tamaño que uses */
}
.language_switcher .text:hover {
    color: #A9CBFF !important; /* azul claro igual al hover */
}



/* ====== NAV SUPERIOR – ARREGLO DESKTOP vs MÓVIL ====== */

/* Estado por defecto (desktop): sin scroll, usando flex “normal” */
.header .navbar-collapse,
.navbar-collapse {
  overflow: visible !important;
}

.header .navbar-nav.nav-menu,
.navbar-nav.nav-menu {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px !important;
  overflow: visible !important;
  white-space: normal !important;   /* evita el largo en una sola línea */
}

/* Asegurar que cada item no quede en modo “caja scrolleable” */
.header .navbar-nav.nav-menu .nav-item,
.navbar-nav.nav-menu .nav-item {
  display: block !important;
}

/* Links del menú con padding sano en desktop */
.header .navbar-nav.nav-menu > .nav-item > a,
.navbar-nav.nav-menu > .nav-item > a {
  padding: 10px 14px !important;
}

/* ------ Solo en MÓVIL: scroll horizontal (si quieres mantenerlo) ------ */
@media (max-width: 991px) {
  .header .navbar-nav.nav-menu,
  .navbar-nav.nav-menu {
    overflow-x: auto !important;    /* scrollea en móvil */
    white-space: nowrap !important; /* para que se vean tipo “chips” */
    -webkit-overflow-scrolling: touch;
  }
}



/* ===== FIX MENÚ SUPERIOR EN DESKTOP (barra con scroll) ===== */

/* 1) Quitar overflow-x en los contenedores habituales del menú */
@media (min-width: 992px){
  .header-bottom,
  .menu-area,
  .menu-area .container,
  .menu-area .menu,
  .menu-area .menu-wrapper,
  .menu-area .menu-inner,
  .menu-area .nav-scroller,
  .menu-area .menu-horizontal,
  .menu-area .menu-scroll {
    overflow: visible !important;
    white-space: normal !important;
  }

  /* 2) El ul que contiene los links debe ser flex normal, sin scroll */
  .menu-area .navbar-nav,
  .menu-area .nav,
  .menu-area .nav-menu,
  .menu-area .menu-list {
    display: flex !important;
    flex-wrap: wrap !important;   /* si no cabe, que baje a segunda línea */
    gap: 14px !important;
    overflow: visible !important;
    white-space: normal !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* 3) Cada item como bloque normal; los links sin nowrap forzado */
  .menu-area .navbar-nav .nav-item,
  .menu-area .nav .nav-item,
  .menu-area .nav-menu .nav-item,
  .menu-area .menu-list .nav-item {
    display: block !important;
  }
  .menu-area .nav-link {
    white-space: normal !important;
    padding: 10px 14px !important;
  }

  /* 4) Si algún contenedor insiste en mostrar scrollbar, lo escondemos */
  .menu-area::-webkit-scrollbar,
  .menu-area .menu::-webkit-scrollbar,
  .menu-area .menu-wrapper::-webkit-scrollbar,
  .menu-area .nav-scroller::-webkit-scrollbar,
  .menu-area .menu-scroll::-webkit-scrollbar {
    height: 0 !important; display: none !important;
  }
}

/* 5) Mantener scroll horizontal SOLO en móvil (si lo quieres así) */
@media (max-width: 991px){
  .menu-area .navbar-nav,
  .menu-area .nav,
  .menu-area .nav-menu,
  .menu-area .menu-list {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
}



/* ===== FIX MENÚ SUPERIOR EN DESKTOP (barra con scroll) ===== */

/* 1) Quitar overflow-x en los contenedores habituales del menú */
@media (min-width: 992px){
  .header-bottom,
  .menu-area,
  .menu-area .container,
  .menu-area .menu,
  .menu-area .menu-wrapper,
  .menu-area .menu-inner,
  .menu-area .nav-scroller,
  .menu-area .menu-horizontal,
  .menu-area .menu-scroll {
    overflow: visible !important;
    white-space: normal !important;
  }

  /* 2) El ul que contiene los links debe ser flex normal, sin scroll */
  .menu-area .navbar-nav,
  .menu-area .nav,
  .menu-area .nav-menu,
  .menu-area .menu-list {
    display: flex !important;
    flex-wrap: wrap !important;   /* si no cabe, que baje a segunda línea */
    gap: 14px !important;
    overflow: visible !important;
    white-space: normal !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* 3) Cada item como bloque normal; los links sin nowrap forzado */
  .menu-area .navbar-nav .nav-item,
  .menu-area .nav .nav-item,
  .menu-area .nav-menu .nav-item,
  .menu-area .menu-list .nav-item {
    display: block !important;
  }
  .menu-area .nav-link {
    white-space: normal !important;
    padding: 10px 14px !important;
  }

  /* 4) Si algún contenedor insiste en mostrar scrollbar, lo escondemos */
  .menu-area::-webkit-scrollbar,
  .menu-area .menu::-webkit-scrollbar,
  .menu-area .menu-wrapper::-webkit-scrollbar,
  .menu-area .nav-scroller::-webkit-scrollbar,
  .menu-area .menu-scroll::-webkit-scrollbar {
    height: 0 !important; display: none !important;
  }
}

/* 5) Mantener scroll horizontal SOLO en móvil (si lo quieres así) */
@media (max-width: 991px){
  .menu-area .navbar-nav,
  .menu-area .nav,
  .menu-area .nav-menu,
  .menu-area .menu-list {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
}




/* === FIX definitivo: quitar scroll horizontal del menú en DESKTOP === */
@media (min-width: 992px){
  /* El <nav> nunca debe scrollear en desktop */
  nav.navbar.navbar-expand-lg.navbar-light {
    overflow: visible !important;
    white-space: normal !important;
    scrollbar-width: none !important;     /* Firefox */
  }
  nav.navbar.navbar-expand-lg.navbar-light::-webkit-scrollbar {
    display: none !important;              /* WebKit */
  }

  /* La zona plegable del menú no scrollea en desktop */
  nav.navbar.navbar-expand-lg.navbar-light .navbar-collapse {
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
  }

  /* El <ul> que contiene los enlaces: menú normal sin barras */
  nav.navbar.navbar-expand-lg.navbar-light .navbar-nav {
    display: flex !important;
    flex-wrap: wrap !important;         /* si no cabe, baja a segunda línea */
    gap: 14px !important;
    overflow: visible !important;
    white-space: normal !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* Cada item como bloque normal */
  nav.navbar.navbar-expand-lg.navbar-light .navbar-nav .nav-item {
    display: block !important;
  }

  /* Enlaces con padding sano en desktop */
  nav.navbar.navbar-expand-lg.navbar-light .navbar-nav .nav-link {
    padding: 10px 14px !important;
    white-space: nowrap !important;     /* evita cortar palabras largas */
  }
}

/* === Mantener el desplazamiento SOLO en móvil (si lo quieres) === */
@media (max-width: 991px){
  nav.navbar.navbar-expand-lg.navbar-light .navbar-nav {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
}



/* =========================
   NAV DESKTOP (>= 992px)
   ========================= */
@media (min-width: 992px){

  /* El offcanvas no debe “vivir” en desktop */
  .offcanvas,
  .offcanvas-start,
  .offcanvas.show,
  .offcanvas .offcanvas-body {
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    background: transparent !important;
    height: auto !important;
    overflow: visible !important;
  }
  .offcanvas-header{ display:none !important; }

  /* Navbar sin barras ni scroll en desktop */
  nav.navbar.navbar-expand-lg.navbar-light{
    overflow: visible !important;
    white-space: normal !important;
  }

  /* El UL del menú vuelve a ser una fila normal */
  .navbar-nav.nav-menu{
    display: flex !important;
    flex-direction: row !important;   /* clave: fila, no columna */
    flex-wrap: nowrap !important;     /* no se parte en varias líneas */
    align-items: center !important;
    justify-content: flex-start !important;  /* o center/space-between si prefieres */
    gap: 18px !important;
    overflow: visible !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .navbar-nav.nav-menu .nav-item{
    display: inline-flex !important;
  }

  .navbar-nav.nav-menu .nav-link{
    padding: 10px 14px !important;
  }
}

/* MÓVIL: dejamos el comportamiento actual con scroll horizontal si hay overflow */
@media (max-width: 991px){
  .navbar-nav.nav-menu{
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
}



/* ================================
   FIX MENÚ DESKTOP (≥992px)
   ================================ */
@media (min-width: 992px){

  /* El contenedor del UL del menú no debe recortar ni forzar alturas */
  .header .container,
  .navbar,
  .navbar .container {
    overflow: visible !important;
  }

  /* Vuelve el UL de menú a fila, sin wraps ni scrolls raros */
  .navbar-nav.nav-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 28px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    width: auto !important;
  }

  /* Cada item en línea, sin márgenes “de botón” que lo empujen a otra fila */
  .navbar-nav.nav-menu > .nav-item {
    display: inline-flex !important;
    margin: 0 !important;
  }

  /* En desktop QUITAMOS estilo “pastilla/botón” que usamos en mobile */
  .navbar-nav.nav-menu > .nav-item > .nav-link {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #eaf1ff !important;        /* texto claro */
    padding: 10px 6px !important;      /* espaciamiento discreto */
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .navbar-nav.nav-menu > .nav-item > .nav-link:hover,
  .navbar-nav.nav-menu > .nav-item > .nav-link:focus {
    color: #ffffff !important;
    background: rgba(255,255,255,.08) !important;
  }

  /* Iconitos del menú en desktop más nítidos */
  .navbar-nav.nav-menu .nav-link .icon,
  .navbar-nav.nav-menu .nav-link i,
  .navbar-nav.nav-menu .nav-link svg {
    filter: none !important;
    opacity: .95 !important;
  }

  /* Selector de idioma: texto e icono legibles */
  .language_switcher__caption .text,
  .navbar-nav .language_switcher__caption .text {
    color: #eaf1ff !important;
  }
  .language_switcher__caption .icon img,
  .language_switcher__caption .icon svg {
    filter: none !important;
    opacity: 1 !important;
  }

  /* Evitar cualquier “grid/stack” accidental del menú */
  .navbar-nav.nav-menu.align-items-lg-center {
    display: flex !important;
  }
}

/* ================================
   Píldoras "Próximamente / Eventos" (tabs de shows)
   Eliminar fondo blanco que “chilla”
   ================================ */
.show-tab .nav-tabs { border: 0 !important; }
.show-tab .nav-tabs .nav-link{
  background: rgba(255,255,255,.06) !important;
  color: #e9eef7 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
}
.show-tab .nav-tabs .nav-link.active{
  background: #0d47a1 !important;
  color: #fff !important;
  border-color: #0d47a1 !important;
}

/* (opcional) Asegurar que el header no recorte el nav en desktop */
@media (min-width: 992px){
  header .offcanvas,
  .offcanvas-header,
  .offcanvas-body {
    overflow: visible !important;
  }
}




/* -----------------------------------------
   LASBOLETAS – PATCH SOLO MENÚ DESKTOP (≥992px)
   No toca nada más del sitio.
----------------------------------------- */
@media (min-width: 992px){

  /* 0) Nada de offcanvas en desktop */
  .offcanvas,
  .offcanvas-start,
  .offcanvas.show,
  .offcanvas .offcanvas-body {
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    background: transparent !important;
    height: auto !important;
    overflow: visible !important;
  }
  .offcanvas-header{ display:none !important; }

  /* 1) El nav/collapse nunca debe scrollear en desktop */
  nav.navbar,
  nav.navbar .container,
  nav.navbar .navbar-collapse {
    overflow: visible !important;
    white-space: normal !important;
  }
  /* por si algún WebKit insiste con barra */
  nav.navbar::-webkit-scrollbar,
  nav.navbar .navbar-collapse::-webkit-scrollbar { display:none !important; }

  /* 2) El UL del menú: fila normal, sin wraps ni barras */
  .navbar-nav.nav-menu{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;         /* clave: no partir a 2 líneas */
    align-items:center !important;
    justify-content:flex-start !important;
    gap:28px !important;
    overflow:visible !important;
    white-space:nowrap !important;
    width:auto !important;
    max-width:100% !important;
  }

  /* 3) Cada item en línea, sin márgenes “de botón” heredados */
  .navbar-nav.nav-menu > .nav-item{
    display:inline-flex !important;
    margin:0 !important;
  }

  /* 4) En desktop quitamos el look de “pastilla” (se queda solo en móvil) */
  .navbar-nav.nav-menu > .nav-item > .nav-link{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    color:#eaf1ff !important;
    padding:10px 8px !important;
    border-radius:8px !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    white-space:nowrap !important;
  }
  .navbar-nav.nav-menu > .nav-item > .nav-link:hover,
  .navbar-nav.nav-menu > .nav-item > .nav-link:focus{
    color:#ffffff !important;
    background:rgba(255,255,255,.08) !important;
  }

  /* 5) Iconos nítidos en desktop */
  .navbar-nav.nav-menu .nav-link i,
  .navbar-nav.nav-menu .nav-link svg,
  .navbar-nav.nav-menu .nav-link .icon{
    filter:none !important;
    opacity:.95 !important;
  }

  /* 6) Selector de idioma legible */
  .language_switcher__caption .text,
  .language_switcher .text{
    color:#eaf1ff !important;
  }
  .language_switcher__caption .icon img,
  .language_switcher__caption .icon svg{
    filter:none !important; opacity:1 !important;
  }

  /* 7) Si alguna clase fuerza “grid/stack” en el UL, la anulamos */
  .navbar-nav.nav-menu.align-items-lg-center{ display:flex !important; }
}

/* --- Comportamiento en móvil se mantiene con chips y scroll --- */
@media (max-width: 991px){
  .navbar-nav.nav-menu{
    overflow-x:auto !important;
    white-space:nowrap !important;
    -webkit-overflow-scrolling:touch;
  }
}




/* ====== MENÚ DESKTOP: matar offcanvas y volver a barra normal ====== */
@media (min-width: 992px){

  /* 1) El contenedor offcanvas NO debe comportarse como panel en desktop */
  .header .offcanvas,
  .offcanvas,
  .offcanvas-start,
  .navbar-collapse.offcanvas,
  .navbar-collapse {
    position: static !important;
    display: block !important;
    transform: none !important;
    translate: none !important;
    visibility: visible !important;
    pointer-events: auto !important;

    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    height: auto !important; width: auto !important; max-width: none !important;

    background: transparent !important;
    border: 0 !important; box-shadow: none !important;
    overflow: visible !important; z-index: auto !important;
  }

  /* 2) Nada de backdrop en desktop */
  .offcanvas-backdrop,
  .modal-backdrop { display: none !important; }

  /* 3) Cerrar/encabezado del panel, fuera de desktop */
  .offcanvas-header,
  .offcanvas .btn-close { display: none !important; }

  /* 4) Cuerpo del panel = contenedor inline del menú */
  .offcanvas-body {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* 5) El <ul> del menú: fila, sin scroll ni wraps raros */
  .navbar-nav.nav-menu,
  .header .navbar-nav.nav-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;         /* no saltar a 2 líneas */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    overflow: visible !important;
    white-space: nowrap !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* 6) Cada item en línea, sin estilo “pastilla” de móvil */
  .navbar-nav.nav-menu > .nav-item { display: inline-flex !important; margin: 0 !important; }

  .navbar-nav.nav-menu > .nav-item > .nav-link {
    background: transparent !important;
    border: 0 !important; box-shadow: none !important;
    color: #eaf1ff !important;
    padding: 10px 8px !important;
    border-radius: 8px !important;
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
  }
  .navbar-nav.nav-menu > .nav-item > .nav-link:hover,
  .navbar-nav.nav-menu > .nav-item > .nav-link:focus {
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
  }

  /* 7) Iconos nítidos */
  .navbar-nav.nav-menu .nav-link i,
  .navbar-nav.nav-menu .nav-link svg,
  .navbar-nav.nav-menu .nav-link .icon { filter: none !important; opacity: .95 !important; }

  /* 8) Idioma legible en desktop */
  .language_switcher .text,
  .language_switcher__caption .text { color: #eaf1ff !important; }
  .language_switcher__caption .icon img,
  .language_switcher__caption .icon svg { filter: none !important; opacity: 1 !important; }
}

/* MÓVIL: mantenemos tu comportamiento actual con scroll horizontal si hace falta */
@media (max-width: 991px){
  .navbar-nav.nav-menu{
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
}




/* ========== NAV DESKTOP – PARCHE FINAL (v1.6) ========== */

/* Contenedor superior: logo + nav + acciones a la derecha */
@media (min-width: 992px){
  .header .navbar,
  .header .navbar .container,
  .navbar,
  .navbar .container{
    display:flex !important;
    align-items:center !important;
    gap:18px !important;
    overflow:visible !important;
  }

  /* El UL del menú: fila normal, sin scroll ni wraps raros */
  .navbar-nav.nav-menu{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:28px !important;
    flex:1 1 auto !important;   /* ocupa el ancho central */
    min-width:0 !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }

  /* Cada item como inline, sin “pastilla” de móvil */
  .navbar-nav.nav-menu > .nav-item{
    display:inline-flex !important;
    margin:0 !important;
  }
  .navbar-nav.nav-menu > .nav-item > .nav-link{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:10px 6px !important;
    color:#eaf1ff !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    white-space:nowrap !important;
  }
  .navbar-nav.nav-menu > .nav-item > .nav-link:hover,
  .navbar-nav.nav-menu > .nav-item > .nav-link:focus{
    color:#ffffff !important;
    background:rgba(255,255,255,.08) !important;
    border-radius:8px !important;
  }

  /* Quitar el “chip” de idioma que se cuela dentro del menú (el primero del UL) */
  .navbar-nav.nav-menu > li:first-child{
    display:none !important;
  }

  /* Acciones a la derecha (idioma, Iniciar Sesión, Crear Cuenta) */
  .header-right,
  .header .header-right,
  .navbar .header-right{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    gap:14px !important;
  }

  /* El contenedor del nav nunca debe scrollear en desktop */
  nav.navbar.navbar-expand-lg.navbar-light,
  nav.navbar.navbar-expand-lg.navbar-light .navbar-collapse{
    overflow:visible !important;
  }

  /* Si algún wrapper insiste en mostrar scrollbar, lo apagamos */
  .menu-area,
  .menu-area .menu,
  .menu-area .menu-wrapper,
  .menu-area .menu-scroll{
    overflow:visible !important;
    white-space:normal !important;
  }
  .menu-area::-webkit-scrollbar,
  .menu-area .menu::-webkit-scrollbar,
  .navbar-nav.nav-menu::-webkit-scrollbar{ display:none !important; }
}

/* Mantener el scroll horizontal SOLO en móvil (por si hay overflow) */
@media (max-width: 991px){
  .navbar-nav.nav-menu{
    overflow-x:auto !important;
    white-space:nowrap !important;
    -webkit-overflow-scrolling:touch;
  }
}

/* Iconos del menú más nítidos en desktop */
@media (min-width: 992px){
  .navbar-nav.nav-menu .nav-link i,
  .navbar-nav.nav-menu .nav-link svg{
    opacity:.95 !important;
    filter:none !important;
  }
}

/* Idioma (chip de la barra derecha): texto e icono legibles */
.language_switcher .text,
.navbar-nav .language_switcher__caption .text{
  color:#eaf1ff !important;
}
.language_switcher .icon img,
.language_switcher .icon svg{
  opacity:1 !important; filter:none !important;
}




/* ============ FIX DUPLICADO: OFFCANVAS MÓVIL EN DESKTOP ============ */
@media (min-width: 992px){
  /* Nada de offcanvas en desktop (para que no “aparezca la segunda fila”) */
  .offcanvas,
  .offcanvas-start,
  .offcanvas-end,
  .offcanvas.show,
  .offcanvas-header,
  .offcanvas-body {
    display: none !important;
    visibility: hidden !important;
    position: static !important;
    transform: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* ============ NAV DESKTOP – FILA ÚNICA, SIN SCROLL ============ */
@media (min-width: 992px){
  /* El contenedor de navegación no debe recortar ni scrollear */
  nav.navbar.navbar-expand-lg.navbar-light,
  nav.navbar.navbar-expand-lg.navbar-light .navbar-collapse {
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
  }

  /* El UL del menú, fila normal y sin wraps raros */
  .navbar-nav.nav-menu,
  .header .navbar-nav.nav-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 24px !important;          /* puedes ajustar si quieres más/menos aire */
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  /* Cada item inline, sin estilo “pastilla” de móvil */
  .navbar-nav.nav-menu > .nav-item {
    display: inline-flex !important;
    margin: 0 !important;
  }
  .navbar-nav.nav-menu > .nav-item > .nav-link {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #eaf1ff !important;
    padding: 10px 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
  }
  .navbar-nav.nav-menu > .nav-item > .nav-link:hover,
  .navbar-nav.nav-menu > .nav-item > .nav-link:focus {
    color: #ffffff !important;
    background: rgba(255,255,255,.08) !important;
  }

  /* Quitar el “Spanish” que aparece dentro del UL del menú */
  .navbar-nav.nav-menu .language_switcher,
  .navbar-nav.nav-menu .language_switcher__caption,
  .navbar-nav.nav-menu li.language_switcher,
  .navbar-nav.nav-menu > li:first-child:has(.language_switcher__caption) {
    display: none !important;
  }

  /* Acciones de la derecha (idioma principal + login + registro) alineadas a la derecha */
  .header-right,
  .header .header-right,
  .navbar .header-right {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
  }
}

/* Mantener comportamiento actual en móvil: scroll si hay overflow */
@media (max-width: 991px){
  .navbar-nav.nav-menu{
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
}


/* === RESTAURAR MENÚ DE PÁGINAS EN DESKTOP (≥992px) === */
@media (min-width: 992px){
  /* El contenedor del menú (el mismo offcanvas) vuelve a ser estático y visible */
  .header .offcanvas,
  .offcanvas,
  .navbar-collapse.offcanvas,
  .navbar-collapse {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: auto !important;
  }
  .offcanvas-header{ display: none !important; }
  .offcanvas-body{ display: block !important; overflow: visible !important; }

  /* El UL del menú en fila, sin scroll ni wraps raros */
  .navbar-nav.nav-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 24px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: visible !important;
    width: auto !important;
  }

  /* Ítems y enlaces con estilo de desktop */
  .navbar-nav.nav-menu > .nav-item { display: inline-flex !important; margin: 0 !important; }
  .navbar-nav.nav-menu > .nav-item > .nav-link{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #eaf1ff !important;
    padding: 10px 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 8px !important;
  }
  .navbar-nav.nav-menu > .nav-item > .nav-link:hover{
    color:#fff !important; background:rgba(255,255,255,.08) !important;
  }

  /* Si el chip de idioma estaba dentro del UL, ocúltalo ahí */
  .navbar-nav.nav-menu .language_switcher,
  .navbar-nav.nav-menu .language_switcher__caption { display:none !important; }

  /* Botonera/idioma a la derecha */
  .header-right { margin-left:auto !important; display:flex !important; gap:14px !important; }
}

/* Móvil: el drawer sigue normal */
@media (max-width: 991px){
  .navbar-nav.nav-menu{
    overflow-x:auto !important; white-space:nowrap !important; -webkit-overflow-scrolling:touch;
  }
}




/* ===== NAV INFERIOR (DESKTOP) — solo páginas + centrado ===== */
@media (min-width: 992px){

  /* El UL del menú ocupa todo el ancho y se centra */
  .navbar-nav.nav-menu{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;   /* << centrado */
    gap:28px !important;
    width:100% !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }

  /* Enlaces con estilo limpio (sin pastilla) */
  .navbar-nav.nav-menu > .nav-item > .nav-link{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    color:#eaf1ff !important;
    padding:10px 6px !important;
    border-radius:8px !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
  }
  .navbar-nav.nav-menu > .nav-item > .nav-link:hover{
    color:#fff !important;
    background:rgba(255,255,255,.08) !important;
  }

  /* Quitar de este menú inferior: idioma + auth buttons */
  .navbar-nav.nav-menu .language_switcher,
  .navbar-nav.nav-menu .language,
  .navbar-nav.nav-menu .language_switcher__caption{
    display:none !important;
  }
  .navbar-nav.nav-menu > .nav-item > .btn{
    display:none !important;
  }
  /* Por si vienen como <a> normales con rutas de auth */
  .navbar-nav.nav-menu > .nav-item > a[href*="/user/sign"],
  .navbar-nav.nav-menu > .nav-item > a[href*="/user/login"],
  .navbar-nav.nav-menu > .nav-item > a[href*="/user/sign-in"],
  .navbar-nav.nav-menu > .nav-item > a[href*="/user/signin"],
  .navbar-nav.nav-menu > .nav-item > a[href*="/user/sign-up"],
  .navbar-nav.nav-menu > .nav-item > a[href*="/user/signup"]{
    display:none !important;
  }
}



/* ====== NAV INFERIOR (DESKTOP) — ocultar auth y centrar ====== */
@media (min-width: 992px){

  /* 1) Ocultar cualquier botón de auth que aparezca dentro del UL del menú */
  .navbar-nav.nav-menu .btn,
  .navbar-nav.nav-menu a.btn,
  .navbar-nav.nav-menu a[href*="/user/sign"],
  .navbar-nav.nav-menu a[href*="/user/login"],
  .navbar-nav.nav-menu a[href*="/user/signin"],
  .navbar-nav.nav-menu a[href*="/user/sign-in"],
  .navbar-nav.nav-menu a[href*="/user/signup"],
  .navbar-nav.nav-menu a[href*="/user/sign-up"],
  .navbar-nav.nav-menu .nav-item.d-block.d-lg-none,
  .navbar-nav.nav-menu .nav-item.mt-3 {
    display: none !important;
  }

  /* 2) Centrar el menú de páginas y mantenerlo en una fila */
  .navbar-nav.nav-menu{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;   /* <— centrado */
    gap: 28px !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  /* 3) Estilo limpio de los enlaces del menú inferior */
  .navbar-nav.nav-menu > .nav-item > .nav-link{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #eaf1ff !important;
    padding: 10px 6px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .navbar-nav.nav-menu > .nav-item > .nav-link:hover{
    color:#fff !important;
    background: rgba(255,255,255,.08) !important;
  }
}



/* ===== PARCHE DURO: menú inferior limpio y centrado (desktop) ===== */
@media (min-width: 992px){

  /* 1) Centrar el UL y forzar una sola fila */
  .menu-area .navbar-nav.nav-menu,
  nav .navbar-nav.nav-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;   /* centrado */
    gap: 28px !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  /* 2) OCULTAR cualquier auth/idioma que aparezca dentro del UL (sin importar clases) */
  .navbar-nav.nav-menu > li > a.btn,
  .navbar-nav.nav-menu > li > a[href*="/user/"],
  .navbar-nav.nav-menu > li > a[href*="/login"],
  .navbar-nav.nav-menu > li > a[href*="/signin"],
  .navbar-nav.nav-menu > li > a[href*="/sign-in"],
  .navbar-nav.nav-menu > li > a[href*="/signup"],
  .navbar-nav.nav-menu > li > a[href*="/sign-up"],
  .navbar-nav.nav-menu > li.language_switcher,
  .navbar-nav.nav-menu > li .language_switcher,
  .navbar-nav.nav-menu > li.d-lg-none,
  .navbar-nav.nav-menu > li.mt-3 {
    display: none !important;
  }
  /* por si vienen sueltos, sin <li> envolvente */
  .navbar-nav.nav-menu > a.btn,
  .navbar-nav.nav-menu > a[href*="/user/"],
  .navbar-nav.nav-menu > a[href*="/login"],
  .navbar-nav.nav-menu > a[href*="/signin"],
  .navbar-nav.nav-menu > a[href*="/sign-in"],
  .navbar-nav.nav-menu > a[href*="/signup"],
  .navbar-nav.nav-menu > a[href*="/sign-up"]{
    display: none !important;
  }

  /* 3) Estilo de enlace “limpio” para los items del menú de páginas */
  .navbar-nav.nav-menu > .nav-item > .nav-link{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #eaf1ff !important;
    padding: 10px 6px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .navbar-nav.nav-menu > .nav-item > .nav-link:hover{
    color:#fff !important;
    background: rgba(255,255,255,.08) !important;
  }
}




/* ===== PARCHE FINAL — MENÚ DESKTOP LIMPIO, CENTRADO ===== */
@media (min-width: 992px){

  /* 0) Apaga por completo el offcanvas en desktop (evita duplicados) */
  .offcanvas,
  .offcanvas-start,
  .offcanvas-end,
  .offcanvas.show,
  .offcanvas-header,
  .offcanvas-body {
    display: none !important;
    visibility: hidden !important;
    position: static !important;
    transform: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* 1) Asegura que el collapse normal esté visible (fuente real del menú) */
  .navbar-collapse {
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
  }

  /* 2) Menú de páginas centrado en una sola fila */
  .navbar-nav.nav-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;   /* centrado */
    gap: 28px !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  /* 3) Limpia cualquier botón o chip “colado” dentro del UL */
  .navbar-nav.nav-menu > li > a.btn,
  .navbar-nav.nav-menu > a.btn,
  .navbar-nav.nav-menu > li > a[href*="/user/"],
  .navbar-nav.nav-menu > li > a[href*="/login"],
  .navbar-nav.nav-menu > li > a[href*="/signin"],
  .navbar-nav.nav-menu > li > a[href*="/sign-in"],
  .navbar-nav.nav-menu > li > a[href*="/signup"],
  .navbar-nav.nav-menu > li > a[href*="/sign-up"],
  .navbar-nav.nav-menu > a[href*="/user/"],
  .navbar-nav.nav-menu > a[href*="/login"],
  .navbar-nav.nav-menu > a[href*="/signin"],
  .navbar-nav.nav-menu > a[href*="/sign-in"],
  .navbar-nav.nav-menu > a[href*="/signup"],
  .navbar-nav.nav-menu > a[href*="/sign-up"],
  .navbar-nav.nav-menu > li.d-block.d-lg-none,
  .navbar-nav.nav-menu > li.mt-3,
  .navbar-nav.nav-menu > li.language_switcher,
  .navbar-nav.nav-menu > li .language_switcher,
  .navbar-nav.nav-menu > li .language_switcher__caption {
    display: none !important;
  }

  /* 4) Enlaces del menú con estilo limpio */
  .navbar-nav.nav-menu > .nav-item > .nav-link{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #eaf1ff !important;
    padding: 10px 6px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .navbar-nav.nav-menu > .nav-item > .nav-link:hover{
    color:#fff !important;
    background: rgba(255,255,255,.08) !important;
  }
}



/* ===== MENÚ DESKTOP – restaurar contenedor y mostrar páginas centradas ===== */
@media (min-width: 992px){

  /* 1) El offcanvas del HEADER se comporta como contenedor inline (no panel) */
  .header .offcanvas,
  .header .navbar-collapse {
    display: block !important;
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: auto !important;
  }
  .header .offcanvas-header { display: none !important; }
  .header .offcanvas-body {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* 2) El UL con las páginas en una fila, CENTRADO */
  .header .offcanvas-body .navbar-nav.nav-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;   /* << centrado */
    gap: 28px !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  /* 3) Enlaces con estilo limpio (sin “pastilla” móvil) */
  .header .offcanvas-body .navbar-nav.nav-menu > .nav-item > .nav-link {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #eaf1ff !important;
    padding: 10px 6px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .header .offcanvas-body .navbar-nav.nav-menu > .nav-item > .nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
  }

  /* 4) Ocultar lo que NO debe ir en este UL (login/registro/idioma si se cuelan) */
  .header .offcanvas-body .navbar-nav.nav-menu > li > a.btn,
  .header .offcanvas-body .navbar-nav.nav-menu > a.btn,
  .header .offcanvas-body .navbar-nav.nav-menu > li > a[href*="/user/"],
  .header .offcanvas-body .navbar-nav.nav-menu > li > a[href*="/login"],
  .header .offcanvas-body .navbar-nav.nav-menu > li > a[href*="/signin"],
  .header .offcanvas-body .navbar-nav.nav-menu > li > a[href*="/signup"],
  .header .offcanvas-body .navbar-nav.nav-menu > li.d-block.d-lg-none,
  .header .offcanvas-body .navbar-nav.nav-menu > li.mt-3,
  .header .offcanvas-body .navbar-nav.nav-menu > li.language_switcher,
  .header .offcanvas-body .navbar-nav.nav-menu > li .language_switcher,
  .header .offcanvas-body .navbar-nav.nav-menu > li .language_switcher__caption {
    display: none !important;
  }
}



/* Evitar que el logo se corte en PC */
@media (min-width: 992px){
  .header-top__logo img {
    max-height: 60px !important;   /* alto del logo en escritorio */
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
  }
  .header-top__logo {
    min-height: 70px !important;   /* asegura espacio para el logo */
    display: flex;
    align-items: center;
  }
}


/* === Cartelera (right-nav-link) — píldora pro, sin cortes === */
.right-nav-item .right-nav-link,
a.right-nav-link[href*="show-times"]{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 12px 16px !important;
  min-height: 40px !important;
  border-radius: 14px !important;

  background: rgba(15,23,40,.92) !important;               /* oscuro “glass” */
  color: #EAF1FF !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.40) !important;
  backdrop-filter: saturate(140%) blur(4px);

  font-weight: 800 !important;
  font-size: 15px !important;
  line-height: 1 !important;

  white-space: nowrap !important;                           /* NO romper línea */
  width: auto !important;
  max-width: none !important;                                /* por si alguien lo limita */
  text-decoration: none !important;
}

.right-nav-item .right-nav-link i,
.right-nav-item .right-nav-link svg,
.right-nav-item .right-nav-link img{
  width: 18px; height: 18px;
  flex: 0 0 18px;
  opacity: .95; filter: none !important;
}

/* Hover / Focus: gradiente de marca y contraste correcto */
.right-nav-item .right-nav-link:hover,
.right-nav-item .right-nav-link:focus{
  background: linear-gradient(90deg, var(--brand), #82c2ff) !important;
  color: #0b1220 !important;
  border-color: transparent !important;
  transform: translateY(-1px);
}

.right-nav-item .right-nav-link:focus-visible{
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
}

/* Si algún estilo forzó background/blanco, lo anulamos sí o sí */
.right-nav-link[style*="background"],
.right-nav-link[class*="bg-"]{
  background: rgba(15,23,40,.92) !important;
  color: #EAF1FF !important;
}





/* Mantener el menú en una sola línea */
.navbar-nav {
    flex-wrap: nowrap !important;   /* Evita que se rompa la línea */
    white-space: nowrap !important; /* Evita salto de texto */
}

/* Ajustar tamaño y espaciado de los elementos para que entren */
.navbar-nav > li {
    flex: 0 0 auto !important;
    margin: 0 10px;
}




/* ===== MENÚ DESKTOP: UNA SOLA LÍNEA, CENTRADO ===== */
@media (min-width: 992px){

  /* El offcanvas NO actúa como panel en desktop */
  .header .offcanvas,
  .offcanvas,
  .navbar-collapse {
    position: static !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    visibility: visible !important;
  }
  .offcanvas-header { display: none !important; }
  .offcanvas-body  { display: flex !important; flex: 1 1 auto !important; padding: 0 !important; overflow: visible !important; }

  /* El UL del menú: fila, sin saltos, centrado y ocupando el ancho */
  .offcanvas-body .navbar-nav.nav-menu,
  .navbar-nav.nav-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;       /* <- NO romper línea */
    white-space: nowrap !important;      /* <- NO partir el texto */
    justify-content: center !important;  /* <- Centrado */
    align-items: center !important;
    gap: 24px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }

  /* Cada item en línea, sin márgenes raros */
  .navbar-nav.nav-menu > .nav-item {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* Enlaces con estilo limpio (sin “pastillas” de móvil) */
  .navbar-nav.nav-menu > .nav-item > .nav-link {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 10px 8px !important;
    border-radius: 8px !important;
    color: #eaf1ff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .navbar-nav.nav-menu > .nav-item > .nav-link:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
  }

  /* Por si se cuelan botones dentro del UL del menú de páginas */
  .navbar-nav.nav-menu .btn,
  .navbar-nav.nav-menu a[href*="/user/sign"],
  .navbar-nav.nav-menu a[href*="/user/login"],
  .navbar-nav.nav-menu a[href*="/user/signin"],
  .navbar-nav.nav-menu a[href*="/user/signup"] {
    display: none !important;
  }
}



/* ====== Alinear icono + texto en cada item del menú (desktop) ====== */
@media (min-width: 992px) {
  /* El <li> no deforma la altura y centra su contenido */
  .navbar-nav.nav-menu > li {
    display: flex;
    align-items: center;
  }

  /* Cada enlace se comporta como fila: icono + texto centrados */
  .navbar-nav.nav-menu .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem;                  /* espacio entre icono y texto */
    line-height: 1 !important;   /* evita que el texto “empuje” hacia abajo */
    padding: .75rem .9rem !important; /* altura consistente */
    white-space: nowrap;
  }

  /* Normaliza los iconos (i/svg/img) para que no “bailen” */
  .navbar-nav.nav-menu .nav-link > i,
  .navbar-nav.nav-menu .nav-link > svg,
  .navbar-nav.nav-menu .nav-link > img,
  .navbar-nav.nav-menu .nav-link .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle; /* por si algún icono queda inline */
  }

  /* Si tu tema usa una “línea” decorativa con ::after/::before que desbalancea,
     la mantenemos pero sin que empuje la caja del enlace */
  .navbar-nav.nav-menu .nav-link::before,
  .navbar-nav.nav-menu .nav-link::after {
    position: absolute;
  }
  .navbar-nav.nav-menu .nav-link { position: relative; }
}





/* ===== NAV DESKTOP (≥992px): centrar menú y ocultar botón derecho ===== */
@media (min-width: 992px){

  /* 0) El offcanvas actúa como contenedor normal en desktop */
  .offcanvas,
  .offcanvas.offcanvas-end,
  .offcanvas .offcanvas-body{
    position: static !important;
    transform: none !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    visibility: visible !important;
    overflow: visible !important;
  }

  /* 1) OCULTAR el botón/área de la derecha */
  .header-right,
  .right-nav-item,
  .right-nav-link{
    display: none !important;
  }

  /* 2) La fila del menú centrada y en una sola línea */
  .offcanvas-body{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .navbar-nav.nav-menu{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;           /* no salta a 2 líneas */
    white-space: nowrap !important;
    justify-content: center !important;     /* CENTRADO */
    align-items: center !important;
    gap: 20px !important;                   /* ajusta si hace falta espacio */
    width: 100% !important;
    overflow: visible !important;
  }

  .navbar-nav.nav-menu > li{ flex: 0 0 auto !important; }

  /* 3) Alinear icono + texto y quitar “líneas” decorativas */
  .navbar-nav.nav-menu > li > a.nav-link{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 8px !important;
    line-height: 1 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .navbar-nav.nav-menu > li > a.nav-link::before,
  .navbar-nav.nav-menu > li > a.nav-link::after,
  .navbar-nav.nav-menu > li::before,
  .navbar-nav.nav-menu > li::after{
    content: none !important;
  }

  /* (opcional) compactar un poco si todavía no cabe */
  /* .navbar-nav.nav-menu > li > a.nav-link{ font-size: .95rem; }
     .navbar-nav.nav-menu{ gap: 16px; } */
}




/* === Shows grid: oscuro/transparente, sin "tarjeta" blanca === */
.shows-section .tab-content,
.shows-section .tab-pane,
.show-tab + .container .tab-content,
.show-tab + .container .tab-pane,
.show-card-wrapper{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* El wrapper del grid NO debe tener padding blanco alrededor */
.show-card-wrapper{
  padding: 0 !important;
}

/* Asegura el grid bonito y aire correcto (por si el theme lo pisa) */
.show-card-wrapper{
  display: grid !important;
  gap: 22px !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
}

/* Si algún contenedor directo le pone fondo claro, lo apagamos también */
.shows-section .container > .tab-content > .tab-pane > div,
.shows-section .container > .tab-content > .tab-pane{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Por si el theme aplica utilidades tipo .bg-white o inline #fff ahí */
.show-card-wrapper[class*="bg-"],
.show-card-wrapper[style*="background:#fff"],
.show-card-wrapper[style*="background: #fff"]{
  background: transparent !important;
}







/* === Tabs de Eventos / Próximos Eventos === */
ul#myTab.nav {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Ajuste visual de los botones de tab */
ul#myTab.nav .nav-link {
    background: rgba(0,0,0,0.3) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease-in-out;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

/* Hover */
ul#myTab.nav .nav-link:hover {
    background: rgba(0,0,0,0.5) !important;
}

/* Activo */
ul#myTab.nav .nav-link.active {
    background: linear-gradient(135deg, #00aaff, #0066ff) !important;
    color: #fff !important;
    border: none !important;
}



/* ===== Newsletter (footer) – desktop ===== */
form.newslatter-form{
  display:flex !important;
  gap:10px !important;
  align-items:center !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
}
form.newslatter-form input[type="email"],
form.newslatter-form input[type="text"]{
  height:48px !important;
  border-radius:12px !important;
  background:#0f1728 !important;
  color:#e6edf7 !important;
  border:1px solid rgba(255,255,255,.16) !important;
  padding:0 14px !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}
form.newslatter-form input::placeholder{ color:#8ea0bb !important; }
form.newslatter-form .btn{
  height:48px !important;
  border-radius:12px !important;
  padding:0 18px !important;
  background:linear-gradient(90deg, var(--brand,#5aa9ff), #82c2ff) !important;
  border:0 !important; color:#0b1220 !important; font-weight:800 !important;
}

/* ===== Newsletter – móvil ===== */
@media (max-width: 576px){
  form.newslatter-form{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  form.newslatter-form input[type="email"],
  form.newslatter-form input[type="text"],
  form.newslatter-form .btn{
    width:100% !important;
  }
}

/* Por si algún tema le mete fondo claro/borde raro */
form.newslatter-form[style*="background"],
.top-footer .container .newslatter-form{
  background:transparent !important; border:0 !important; box-shadow:none !important;
}



/* ===== Asegurar visibilidad de texto en TODOS los botones ===== */
button,
.btn,
a.btn,
input[type="submit"],
input[type="button"] {
  color: #ffffff !important; /* Blanco sólido */
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important; /* Contraste extra */
}

/* Si el botón es claro, ajustar fondo para que siga resaltando el texto */
.btn-light,
button.btn-light,
a.btn-light {
  background-color: #007bff !important; /* Ajusta según color de marca */
  border-color: #007bff !important;
  color: #ffffff !important;
}

/* Hover para que no pierda contraste */
button:hover,
.btn:hover,
a.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}



/* ======= OFFCANVAS / MENÚ MÓVIL: scroll 100% y botones accesibles ======= */

/* El panel ocupa toda la altura del viewport (corrige iOS vh) */
.offcanvas,
.offcanvas-start,
.offcanvas-end,
.navbar-collapse.show {
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 100dvh !important;              /* usa d*vh para móviles modernos */
  max-height: 100dvh !important;
  width: min(92vw, 420px) !important;
  display: flex !important;
  flex-direction: column !important;
  overscroll-behavior: contain;
}

/* Cabecera no crece; cuerpo scrollea */
.offcanvas-header { flex: 0 0 auto !important; }
.offcanvas-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px) !important; /* deja espacio para botones */
}

/* Footer/acciones abajo: siempre visible sin tapar el scroll */
.offcanvas-footer,
.header .offcanvas .btn-group-bottom,
.header .offcanvas .auth-actions {
  position: sticky !important;
  bottom: 0 !important;
  background: rgba(15,23,40,.92) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  padding: 12px !important;
  display: grid !important;
  gap: 10px !important;
}

/* Por si los botones estaban fixed/absolute: quítalo */
.header .offcanvas .btn--base,
.header .offcanvas .btn-outline--base,
.header .offcanvas .btn {
  position: static !important;
  width: 100% !important;
}

/* Lista del menú: no cortar, sin márgenes gigantes */
.header .offcanvas .navbar-nav.nav-menu {
  flex: 0 0 auto !important;
  margin-bottom: 12px !important;
}




/* ===== Language switcher (dropdown) – dark mode y legible ===== */
.language_switcher,
.language_switcher * { box-sizing: border-box; }

.header .offcanvas-body,
.language_switcher { overflow: visible !important; }  /* evita que se corte */
.language_switcher { position: relative; z-index: 10020; }

/* Lista desplegada */
.language_switcher__list{
  background:#0f1728 !important;
  color:#EAF1FF !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:12px !important;
  box-shadow:0 20px 50px rgba(0,0,0,.55) !important;
  padding:6px !important;
  min-width: 200px !important;
  max-height: 50vh !important;
  overflow:auto !important;
  z-index:10030 !important;
}

/* Ítems dentro del dropdown */
.language_switcher__list a,
.language_switcher__list button,
.language_switcher__list .lang-item{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:10px 12px !important;
  border-radius:10px !important;
  color:#EAF1FF !important;
  text-decoration:none !important;
}
.language_switcher__list a:hover,
.language_switcher__list button:hover,
.language_switcher__list .lang-item:hover{
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
}

/* Banderas/íconos */
.language_switcher__list img,
.language_switcher__caption img{
  width:18px; height:18px; border-radius:3px; flex:0 0 18px; opacity:1 !important; filter:none !important;
}

/* Caput: matar fondos blancos heredados */
.language_switcher__list.bg-white,
.language_switcher__list[style*="background:#fff"],
.language_switcher__list[style*="background: #fff"]{
  background:#0f1728 !important;
}



/* ==== Tarjetas de eventos: mostrar imagen COMPLETA ==== */
.show-item__thumb{
  position: relative !important;
  background:#0f1728 !important;          /* “letterbox” oscuro */
  border-radius: 12px !important;
  overflow: hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  aspect-ratio: 16/9 !important;          /* mantiene proporción de la caja */
}

.show-item__thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;          /* << NO recorta, muestra completa */
  object-position: center center !important;
  display: block !important;
}

/* En móvil, si quieres un poco más de alto para que no queden muy “letterbox” */
@media (max-width: 576px){
  .show-item__thumb{ aspect-ratio: 4/3 !important; } /* opcional, más alto */
}



/* ===== CONTRASTE GLOBAL – SAFETY NET v2 ===== */

/* Texto base y muteds */
body { color: var(--text, #e6edf7) !important; }
small, .small, .text-muted, .muted, .help-block { color:#a9b8cf !important; }

/* Superficies oscuras: texto claro */
.header, #header, .header-top, .header-bottom,
.offcanvas, .navbar-collapse.show, .sidebar, .mobile-menu,
.shows-section, .recommended-section, .about-section, .blog-section,
.footer, .card, .widget, .event-item, .post-item, .show-item,
.banner, .banner-section, .show-details-banner,
.table, .dropdown-menu.show, .language_switcher__list {
  color:#eaf1ff !important;
}

/* Enlaces sobre oscuro (y hover) */
.header a, .offcanvas a, .sidebar a, .mobile-menu a,
.shows-section a, .recommended-section a, .about-section a,
.blog-section a, .footer a, .card a, .widget a, .show-item a,
.language_switcher__list a {
  color:#cfe1ff !important;
}
.header a:hover, .offcanvas a:hover, .sidebar a:hover, .mobile-menu a:hover,
.shows-section a:hover, .recommended-section a:hover, .about-section a:hover,
.blog-section a:hover, .footer a:hover, .card a:hover, .widget a:hover, .show-item a:hover,
.language_switcher__list a:hover {
  color:#ffffff !important;
}

/* Títulos SIEMPRE legibles */
h1,h2,h3,h4,h5,h6,.title,.section-heading__title,.widget-title,
.show-item__title,.show-details__title { color:#ffffff !important; }

/* Placeholders */
input::placeholder, textarea::placeholder { color:#8ea0bb !important; }

/* Chips/badges/tags */
.badge, .tag, .show-item__list-item, .nav-tabs .nav-link {
  color:#dbe7ff !important;
}

/* Tabs activas */
.nav-tabs .nav-link.active { color:#0b1220 !important; }

/* Botones: texto visible SIEMPRE */
button, .btn, a.btn, input[type="submit"], input[type="button"]{
  color:#ffffff !important;
  font-weight:700 !important;
  text-shadow:0 1px 2px rgba(0,0,0,.45) !important;
}
.btn-light, .btn-outline-light { color:#0b1220 !important; text-shadow:none !important; }

/* Iconos SVG/LA/FA heredan color (para que no “desaparezcan”) */
i, .la, .las, .lab, .fa, .fas, .far, .fal, .fab,
svg, svg *, .icon {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Listas/links dentro de dropdowns y menús */
.dropdown-menu, .dropdown-menu.show {
  background:#0f1728 !important; color:#eaf1ff !important;
  border:1px solid rgba(255,255,255,.14) !important;
}
.dropdown-item { color:#eaf1ff !important; }
.dropdown-item:hover { background:rgba(255,255,255,.08) !important; color:#fff !important; }

/* Cuadros que suelen colar fondo claro – forzar contraste */
.bg-white, .white-bg, *[style*="background:#fff"], *[style*="background: #fff"] {
  background:#0f1728 !important; color:#eaf1ff !important;
}

/* Contenido HTML libre (plot/description) en detalles de show */
.show-details-desc, .show-details-desc * { color:#e6edf7 !important; }
.show-details-desc a { color:#cfe1ff !important; }
.show-details-desc a:hover { color:#fff !important; }



/* --- Legibilidad en metadatos de tarjetas (idioma, etc.) --- */
.show-item__language,
.show-item__language *,
.show-item__list,
.show-item__list *,
.show-item__meta,
.show-item__meta *{
  color:#eaf1ff !important;           /* texto claro */
  text-shadow:0 1px 1px rgba(0,0,0,.35); /* un pelín de contraste */
}

/* Si algún theme mete !important con negro semitransparente */
div.show-item__language span{
  color:#eaf1ff !important;
}

/* Extra: los “chips”/píldoras de la lista que a veces quedan grises */
.show-item__list-item{
  color:#dbe7ff !important;
  border-color:rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.06) !important;
}



/* Oculta el segundo botón duplicado en la sección de eventos */
.show-item__btn a + a,
.show-item__btn button + button {
    display: none !important;
}




/* ——— Eventos: dejar un solo botón "Comprar" ——— */

/* 1) Oculta el enlace de info (el circulito) */
.show-item__btn .info-btn{
  display:none !important;
}

/* 2) Mata el texto suelto "Comprar" que aparece como nodo de texto */
.show-item__btn{
  font-size:0 !important;          /* oculta cualquier texto suelto */
  gap:10px !important;
}

/* 3) Restituye el tamaño al botón bueno (izquierda) */
.show-item__btn .btn{
  font-size:15px !important;
  line-height:1.1 !important;
}



/* ========= Ticket Booking (oscuro como el home) ========= */

/* Quita el fondo claro del breadcrumb de esta página */
.breadcrumb.bg-img,
.breadcrumb.bg-img::before{
  background: none !important;
}

/* Panel izquierdo (selector de teatro/fecha/lista de shows) */
.book-ticket-section .book-ticket-wrapper,
.book-ticket-section .book-ticket-wrapper .card,
.book-ticket-section .book-ticket-wrapper .list-group,
.book-ticket-section .book-ticket-wrapper .list-group-item{
  background: rgba(10,16,28,.75) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--text) !important;
}

/* Etiquetas, textos y “chips” de fechas */
.book-ticket-section .book-ticket-wrapper .form-label,
.book-ticket-section .book-ticket-wrapper .title,
.book-ticket-section .book-ticket-wrapper .text,
.book-ticket-section .book-ticket-wrapper .badge,
.book-ticket-section .book-ticket-wrapper .chip,
.book-ticket-section .book-ticket-wrapper [class*="date"],
.book-ticket-section .book-ticket-wrapper [class*="time"]{
  color: var(--text) !important;
}

/* Inputs / selects */
.book-ticket-section .form-control,
.book-ticket-section .select2-container--default .select2-selection--single{
  background: #0b1324 !important;
  border: 1px solid #223049 !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.book-ticket-section .form-control::placeholder{
  color: rgba(230,237,247,.75) !important; /* que se lea el placeholder */
}

/* Botones “base” y secundarios */
.book-ticket-section .btn{
  color: #fff !important; /* texto siempre visible */
}
.book-ticket-section .btn--base{
  background: linear-gradient(180deg,#2cb3ff,#0ea5e9) !important;
  border: 0 !important;
}
.book-ticket-section .btn--light{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}

/* Tarjeta de resumen/derecha (total, inputs de nombre/teléfono/correo) */
.ticket-summary,
.ticket-summary .card,
.ticket-summary .summary-body{
  background: rgba(10,16,28,.85) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--text) !important;
}
.ticket-summary .form-control{
  background: #0b1324 !important;
  border: 1px solid #223049 !important;
  color: var(--text) !important;
}
.ticket-summary .form-control::placeholder{
  color: rgba(230,237,247,.75) !important;
}

/* Línea/horario (columna con las marcas de hora a la derecha) */
.book-ticket-section .ticket-price,
.book-ticket-section .ticket-price *{
  color: var(--text) !important;
}
.book-ticket-section .ticket-price,
.book-ticket-section .timeline,
.book-ticket-section .timeline::before,
.book-ticket-section .timeline [class*="line"]{
  background: transparent !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Imagen del póster dentro del listado: mantener proporción y bordes redondeados */
.book-ticket-section .show-thumb img{
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

/* Mobile: que las columnas se apilen bien sin fondos claros por default */
@media (max-width: 991px){
  .book-ticket-section .col-lg-8,
  .book-ticket-section .col-lg-4{
    width: 100% !important;
  }
  .ticket-summary{ margin-top: 16px; }
}




/* ===== Modals (oscuro y legible) ===== */
#theaterLocateModal .modal-content,
#guestModeModal     .modal-content{
  background: #0b1324 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.65) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
}

#theaterLocateModal .modal-header,
#guestModeModal     .modal-header{
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  background: transparent !important;
  color: var(--text) !important;
}

#theaterLocateModal .modal-title,
#guestModeModal     .modal-title{
  color: var(--text) !important;
  font-weight: 700;
}

#theaterLocateModal .modal-body,
#guestModeModal     .modal-body{
  color: var(--text) !important;
}

/* Botón cerrar (X) visible en fondo oscuro) */
#theaterLocateModal .btn-close,
#guestModeModal     .btn-close{
  filter: invert(1) grayscale(1) brightness(180%) !important;
  opacity: .9 !important;
}

/* Inputs dentro del modal */
#theaterLocateModal .form-control,
#guestModeModal     .form-control{
  background: #091225 !important;
  border: 1px solid #223049 !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
#theaterLocateModal .form-control::placeholder,
#guestModeModal     .form-control::placeholder{
  color: rgba(230,237,247,.75) !important;
}

/* Listas/ítems que aparecen en el modal */
#theaterLocateModal .list-group-item,
#guestModeModal     .list-group-item{
  background: transparent !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Botones del modal */
#theaterLocateModal .btn,
#guestModeModal     .btn{ color:#fff !important; }
#theaterLocateModal .btn--base,
#guestModeModal     .btn--base{
  background: linear-gradient(180deg,#2cb3ff,#0ea5e9) !important;
  border: 0 !important;
}
#theaterLocateModal .btn--light,
#guestModeModal     .btn--light{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}

/* Imagen/afiche que cargas dentro del modal */
#theaterLocateModal .theater-modal-body img,
#guestModeModal     .theater-modal-body img{
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

/* Backdrop más oscuro */
.modal-backdrop.show{
  background: #000 !important;
  opacity: .65 !important;
}

/* Medidas y responsive */
#theaterLocateModal .modal-dialog,
#guestModeModal     .modal-dialog{
  max-width: 720px;
}
@media (max-width: 575px){
  #theaterLocateModal .modal-dialog,
  #guestModeModal     .modal-dialog{ margin: 12px; }
}



/* ====== Ticket Booking – contraste y dark theme ====== */

/* Quita el velo claro del breadcrumb */
.breadcrumb.bg-img::before{
  background: linear-gradient(180deg, rgba(4,10,20,.85), rgba(4,10,20,.65)) !important;
}

/* Contenedor principal */
.book-ticket-section,
.book-ticket-wrapper,
.ticket-summary{
  color: var(--text) !important;
}

/* Titulares y textos */
.book-ticket-section h1,
.book-ticket-section h2,
.book-ticket-section h3,
.book-ticket-section h4,
.book-ticket-section h5,
.book-ticket-section .title,
.ticket-summary h4,
.ticket-summary .title{
  color: var(--text) !important;
}

/* Labels y textos “muted” que estaban muy pálidos */
.book-ticket-section label,
.book-ticket-section .form-label,
.book-ticket-section .text-muted,
.ticket-summary .text-muted{
  color: rgba(230,237,247,.85) !important;
}

/* Inputs, selects, selects2 */
.book-ticket-section .form-control,
.book-ticket-section .form-select,
.select2-container .select2-selection--single{
  background: #0b1426 !important;
  border: 1px solid #223049 !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.book-ticket-section .form-control::placeholder{
  color: rgba(230,237,247,.65) !important;
}

/* Badges/pastillas de fecha */
.book-ticket-section .badge,
.book-ticket-section .btn.badge,
.book-ticket-section .date-badge{
  background: #0f1b34 !important;
  color: var(--text) !important;
  border: 1px solid #223049 !important;
}

/* Listas/ítems del resumen derecha */
.ticket-summary .list-group-item{
  background: transparent !important;
  border-color: rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}
.ticket-summary .list-group-item .label,
.ticket-summary .list-group-item span,
.ticket-summary .list-group-item b,
.ticket-summary .list-group-item strong{
  color: var(--text) !important;
}

/* Divisores y líneas */
.book-ticket-section hr,
.ticket-summary hr{
  border-color: rgba(255,255,255,.12) !important;
}

/* Íconos (line-awesome / la-*) que quedaban opacos */
.book-ticket-section i,
.ticket-summary i,
.book-ticket-section .las,
.ticket-summary .las{
  color: var(--text) !important;
  opacity: .95 !important;
}

/* Botón principal Comprar: siempre legible */
.book-ticket-section .btn--base,
.ticket-summary     .btn--base{
  color:#fff !important;
  background: linear-gradient(180deg,#2cb3ff,#0ea5e9) !important;
  border:0 !important;
}
.book-ticket-section .btn--light,
.ticket-summary     .btn--light{
  background: rgba(255,255,255,.08) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

/* Tarjeta selecciona tu teatro (evitar cajas claras) */
.book-ticket-section .card,
.book-ticket-section .card-body{
  background: transparent !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* Tooltips/ayudas si los usan */
.tooltip .tooltip-inner{
  background: #0b1426 !important;
  color: var(--text) !important;
  border: 1px solid #223049 !important;
}

/* Imágenes/afiches dentro de la vista */
.book-ticket-section .poster img{
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

/* Estados deshabilitados */
.book-ticket-section .form-control:disabled,
.book-ticket-section .form-select:disabled{
  background: #0b1426 !important;
  color: rgba(230,237,247,.55) !important;
  opacity: .7 !important;
}

/* Resumen: filas clave en negrita */
.ticket-summary .total,
.ticket-summary .grand-total,
.ticket-summary .amount,
.ticket-summary .price{
  color: #fff !important;
  font-weight: 700;
}

/* Backdrop global */
.modal-backdrop.show{
  background: #000 !important;
  opacity: .65 !important;
}



/* ===== Ticket Booking – selector de teatro ===== */
.book-ticket-item__location{
  background:#0b1426 !important;              /* fondo oscuro */
  border:1px solid #223049 !important;        /* borde consistente */
  color:var(--text) !important;
  box-shadow:none !important;
}
.book-ticket-item__location *{
  color:var(--text) !important;               /* fuerza texto e iconos dentro */
}

/* iconos (ubicación y caret) */
.book-ticket-item__location .las,
.book-ticket-item__location i{
  color:var(--text) !important;
  opacity:.95 !important;
}

/* estados */
.book-ticket-item__location:hover,
.book-ticket-item__location:focus-within{
  border-color:#2b74ff !important;
  background:#0f1b34 !important;
}

/* si el título/label va dentro del bloque */
.book-ticket-item__location .title,
.book-ticket-item__location .caption{
  color:var(--text) !important;
  font-weight:600;
}

/* si abre un <select> o input interno, hereda el tema */
.book-ticket-item__location .form-control,
.book-ticket-item__location .form-select{
  background:#0b1426 !important;
  border:1px solid #223049 !important;
  color:var(--text) !important;
}
.book-ticket-item__location .form-control::placeholder{
  color:rgba(230,237,247,.65) !important;
}




/* ===== Estilo oscuro para selección de mostrar (radios) ===== */

/* Elimina fondo blanco del radio */
.form-check-input {
  background-color: #0b1426 !important;
  border: 2px solid #223049 !important;
  box-shadow: none !important;
}
.form-check-input:checked {
  background-color: #2b74ff !important; /* color de acento cuando está seleccionado */
  border-color: #2b74ff !important;
}

/* Elimina el halo blanco al hacer focus */
.form-check-input:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(43, 116, 255, 0.4) !important;
}

/* Label de la película */
.form-check-label {
  color: var(--text) !important;
  font-weight: 600;
  display: block;
  text-align: center;
  margin-top: 8px;
}

/* Imagen de la película */
.form-radio img {
  border-radius: 6px;
  border: 2px solid transparent;
}
.form-check-input:checked + .form-check-label img {
  border-color: #2b74ff;
}



/* ====== BOOKING: Seleccionar Mostrar (oscuro y sin blancos) ====== */

/* Oculta el radio nativo: usaremos el póster como botón */
.book-ticket-section .form--radio .form-check-input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Contenedor y label sin fondo blanco */
.book-ticket-section .form--radio,
.book-ticket-section .form--radio .form-check,
.book-ticket-section .form--radio .form-check-label {
  background: transparent !important;
}

/* Estilo del "card" (label) del póster */
.book-ticket-section .form--radio .form-check-label {
  display: block !important;
  border: 1.5px solid #283550 !important;     /* borde discreto */
  border-radius: 12px !important;
  padding: 10px 10px 8px !important;
  color: var(--text) !important;
  box-shadow: none !important;
  transition: border-color .2s, box-shadow .2s, transform .08s;
}

/* Póster */
.book-ticket-section .form--radio .form-check-label img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px !important;
}

/* Título bajo el póster */
.book-ticket-section .form--radio .form-check-label span,
.book-ticket-section .form--radio .form-check-label .movie-title,
.book-ticket-section .form--radio .form-check-label small {
  color: var(--text) !important;
}

/* Hover / focus */
.book-ticket-section .form--radio .form-check-label:hover {
  border-color: #3569ff !important;
  box-shadow: 0 0 0 3px rgba(53,105,255,.18) !important;
}

/* Estado checked: marco azul */
.book-ticket-section .form--radio .form-check-input:checked + .form-check-label {
  border-color: #2b74ff !important;
  box-shadow: 0 0 0 3px rgba(43,116,255,.25) !important;
  transform: translateY(-1px);
}

/* Quita cualquier borde/fondo residual en la tarjeta del grid */
.book-ticket-section .movie-selection,
.book-ticket-section .movie-selection * {
  background: transparent !important;
  box-shadow: none !important;
}



/* ====== BOOKING: lista de horas (oscuro) ====== */
.book-ticket-section .select-time-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Quita el fondo claro del item y dale estilo de pastilla */
.book-ticket-section .select-time-list__item {
  background: transparent !important;
  border: 1.5px solid #283550 !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  color: var(--text) !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .08s;
}

/* Si dentro del li hay un link/botón/span, hereda color y sin fondo */
.book-ticket-section .select-time-list__item *,
.book-ticket-section .select-time-list__item a,
.book-ticket-section .select-time-list__item button {
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Hover */
.book-ticket-section .select-time-list__item:hover {
  border-color: #3569ff !important;
  box-shadow: 0 0 0 3px rgba(53,105,255,.18) !important;
}

/* Activo/seleccionado (cubre varias variantes comunes) */
.book-ticket-section .select-time-list__item.active,
.book-ticket-section .select-time-list__item[aria-selected="true"],
.book-ticket-section .select-time-list__item.is-active,
.book-ticket-section .select-time-list__item.selected {
  background: #13233f !important;
  border-color: #2b74ff !important;
  color: #e6edf7 !important;
  transform: translateY(-1px);
}

/* Si las horas son radios con label (algunos themes lo hacen así) */
.book-ticket-section .select-time-list input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.book-ticket-section .select-time-list input[type="radio"] + label {
  display: inline-block !important;
  background: transparent !important;
  border: 1.5px solid #283550 !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  color: var(--text) !important;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .08s;
}
.book-ticket-section .select-time-list input[type="radio"] + label:hover {
  border-color: #3569ff !important;
  box-shadow: 0 0 0 3px rgba(53,105,255,.18) !important;
}
.book-ticket-section .select-time-list input[type="radio"]:checked + label {
  background: #13233f !important;
  border-color: #2b74ff !important;
  color: #e6edf7 !important;
  transform: translateY(-1px);
}



.cabin-list__item .seats {
    display: flex;
    justify-content: center;
    padding-left: var(--row-pad-left);
    padding-right: var(--row-pad-right);
    gap: 5px; /* espacio entre asientos, ajusta si quieres */
}






/* === Booking: fijar colores legibles en el resumen (panel derecho) === */
.book-ticket-section .ticket-summary {
  --ts-text: #E6EDF7;              /* texto principal */
  --ts-subtext: #9FB2CC;           /* etiquetas/ayudas */
  --ts-icon: #9CC1FF;              /* iconos */
  --ts-input-bg: #0f172a;          /* fondo inputs */
  --ts-input-bd: rgba(255,255,255,.14);
}

/* textos de valores (los que se veían negros) */
.book-ticket-section .ticket-summary .ticket-summary__list .info {
  color: var(--ts-text) !important;
}

/* títulos/etiquetas de cada fila */
.book-ticket-section .ticket-summary .ticket-summary__list .title,
.book-ticket-section .ticket-summary .ticket-summary__list .title .text {
  color: var(--ts-subtext) !important;
}
.book-ticket-section .ticket-summary .ticket-summary__list .title .icon {
  color: var(--ts-icon) !important;
}

/* bloque de película (si está visible) */
.book-ticket-section .ticket-summary .content__title,
.book-ticket-section .ticket-summary .content__duration,
.book-ticket-section .ticket-summary .content__category {
  color: var(--ts-text) !important;
}

/* texto del párrafo legal y links */
.book-ticket-section .ticket-summary .ticket-summary__desc {
  color: var(--ts-subtext) !important;
}
.book-ticket-section .ticket-summary .ticket-summary__desc-link {
  color: var(--ts-text) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* inputs del titular del billete */
.book-ticket-section .ticket-summary .form--control {
  background: var(--ts-input-bg) !important;
  border: 1px solid var(--ts-input-bd) !important;
  color: var(--ts-text) !important;
}
.book-ticket-section .ticket-summary .form--control::placeholder {
  color: var(--ts-subtext) !important;
  opacity: .9;
}



}


/* ELIMINAR ESTA REGLA (o comentarla) */
@layer lb-theme {
  #svgSeatRoot, #svgSeatRoot * { all: revert-layer !important; }
}




/* Mapa — solo posicionamiento, sin tocar su CSS/JS de origen */
#svgSeatRoot,
#svgMapInline {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-overflow-scrolling: touch;
}

#svgMapInline { width: max-content; }
#svgSeatRoot svg { display: block; margin: 0; }








/* ===== Ajuste sutil del mapa: pequeño margen a la izquierda (solo layout) ===== */

/* Espaciado por defecto (móvil casi pegado, desktop un poco más) */
#svgSeatRoot {
  --lb-map-gutter-left: clamp(10px, 2vw, 28px);
  padding-left: var(--lb-map-gutter-left) !important; /* solo desplazamiento visual */
}

/* Si prefieres aplicar el empujoncito al wrapper interno en vez del contenedor: */
#svgMapInline {
  margin-left: clamp(6px, 1.5vw, 20px) !important;
}

/* En pantallas grandes lo movemos un pelín más, sin exagerar */
@media (min-width: 992px) {
  #svgSeatRoot { --lb-map-gutter-left: clamp(14px, 2.5vw, 36px); }
}




/* ==== MAPA: empuje grande hacia la derecha con padding (solo layout) ==== */
#svgSeatRoot {
  /* Ajusta este “knob”: 40–220px según ancho de pantalla */
  --lb-map-offset: clamp(40px, 8vw, 140px);
  padding-left: var(--lb-map-offset) !important;
}

@media (min-width: 1400px) {
  #svgSeatRoot { --lb-map-offset: clamp(80px, 12vw, 220px); }
}




/* ==== MAPA: empuje grande hacia la derecha con margin (solo layout) ==== */
#svgMapInline {
  --lb-map-offset: clamp(40px, 8vw, 140px);
  margin-left: var(--lb-map-offset) !important;
}

@media (min-width: 1400px) {
  #svgMapInline { --lb-map-offset: clamp(80px, 12vw, 220px); }
}



/* Bloque de pantalla (solo en el selector del mapa de asientos) */
.theatre__screen {
  background: #222222 !important;  /* oscuro para que combine con el tema */
  color: #F5C518 !important;       /* texto dorado */
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
}


/* Reemplazar texto "Pantalla" por "Selecciona tu asiento" en el bloque de pantalla */
.theatre__screen {
  background: #222222 !important; /* fondo oscuro */
  color: #F5C518 !important;      /* texto dorado */
  font-weight: 600;
  font-size: 18px;
  text-transform: none;           /* quitamos uppercase forzado */
  text-align: center;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);

  /* Ocultar el texto original sin quitar el div */
  font-size: 0 !important;
}

/* Insertamos el nuevo texto */
.theatre__screen::after {
  content: "Selecciona tu asiento";
  font-size: 18px !important;
  color: #F5C518 !important;
}




/* Ocultar todas las pestañas de navegación excepto "Hogar" y "Contacto" */
header.header .navbar-nav.nav-menu > li {
  display: none !important;
}

/* Mostrar solo Hogar y Contacto */
header.header .navbar-nav.nav-menu > li:nth-child(1),   /* Hogar */
header.header .navbar-nav.nav-menu > li:last-child {    /* Contacto */
  display: block !important;
}
/* ===== Mostrar solo "Hogar" y "Contacto" en el menú principal ===== */

/* 1) Oculta TODOS los <li> del menú principal (desktop y mobile/offcanvas) */
header.header nav.navbar.navbar-expand-lg .navbar-nav.nav-menu > li,
header.header .offcanvas .navbar-nav.nav-menu > li {
  display: none !important;
}

/* 2) Muestra siempre el PRIMERO (Hogar) */
header.header nav.navbar.navbar-expand-lg .navbar-nav.nav-menu > li:first-child,
header.header .offcanvas .navbar-nav.nav-menu > li:first-child {
  display: block !important;
}

/* 3) Muestra el que tenga enlace a contacto (soporta /contact o /contacto) */
header.header nav.navbar.navbar-expand-lg .navbar-nav.nav-menu > li:has(a[href*="contact"]),
header.header nav.navbar.navbar-expand-lg .navbar-nav.nav-menu > li:has(a[href*="contacto"]),
header.header .offcanvas .navbar-nav.nav-menu > li:has(a[href*="contact"]),
header.header .offcanvas .navbar-nav.nav-menu > li:has(a[href*="contacto"]) {
  display: block !important;
}

/* (Opcional) pequeño espacio entre los dos visibles */
header.header nav.navbar.navbar-expand-lg .navbar-nav.nav-menu { gap: 12px; }







/* === Mostrar solo "Hogar" y "Contacto" juntos en el menú === */

/* Oculta todos los ítems */
header.header nav.navbar.navbar-expand-lg .navbar-nav.nav-menu > li {
  display: none !important;
}

/* Muestra Hogar (el primero) */
header.header nav.navbar.navbar-expand-lg .navbar-nav.nav-menu > li:first-child {
  display: inline-block !important;
  order: 1; /* será el primero */
}

/* Muestra Contacto (forzamos el último <li> que contiene contacto) */
header.header nav.navbar.navbar-expand-lg .navbar-nav.nav-menu > li a[href*="contact"] {
  display: inline-block !important;
}
header.header nav.navbar.navbar-expand-lg .navbar-nav.nav-menu > li a[href*="contact"]::parent {
  display: inline-block !important;
  order: 2; /* será el segundo */
}

/* Aseguramos que el contenedor del menú respete el orden */
header.header nav.navbar.navbar-expand-lg .navbar-nav.nav-menu {
  display: flex !important;
  gap: 20px; /* espacio entre Hogar y Contacto */
}


/* Forzar los ítems de la navbar a la izquierda */
.navbar-nav {
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
}



/* ===== CONTACTO – FIX DURO, SOLO EN ESTA PÁGINA ===== */

/* 0) Vars de color del tema oscuro (ajústalas si hace falta) */
:root{
  --ct-panel:#121826;      /* panel oscuro */
  --ct-field:#0f1623;      /* fondo inputs */
  --ct-text:#eaf1ff;       /* texto/labels */
  --ct-muted:#a7b0bf;      /* placeholders/ayuda */
  --ct-bd:rgba(255,255,255,.14); /* borde suave */
  --ct-ac:#F5C518;         /* acento dorado */
}

/* 1) Panel del formulario: forzamos oscuro y eliminamos cualquier fondo blanco interno */
.contact-section .contact-form,
.contact-section .contact-form::before,
.contact-section .contact-form::after,
.contact-section .contact-form .card,
.contact-section .contact-form .card::before,
.contact-section .contact-form .card::after,
.contact-section .contact-form .section-wrapper,
.contact-section .contact-form .bg-white,
.contact-section .contact-form .bg--white {
  background: var(--ct-panel) !important;
  border: 1px solid var(--ct-bd) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
}

/* A veces el contenedor padre mete blanco. Lo neutralizamos. */
.contact-section .col-lg-6, 
.contact-section .col-md-12, 
.contact-section .col-12 {
  background: transparent !important;
}

/* 2) Textos */
.contact-section .contact-form__title,
.contact-section .form--label,
.contact-section .contact-info-wrapper__title,
.contact-section .contact-info__title { color: var(--ct-text) !important; }

.contact-section .contact-info-wrapper__desc,
.contact-section .contact-info__desc { color: var(--ct-muted) !important; }

/* 3) Inputs/textarea visibles */
.contact-section .form--control,
.contact-section .form-control,
.contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section input[type="tel"],
.contact-section textarea,
.contact-section select{
  background: var(--ct-field) !important;
  color: var(--ct-text) !important;
  caret-color: var(--ct-text) !important;
  border: 1px solid var(--ct-bd) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  outline: none !important;
}
.contact-section .form--control::placeholder,
.contact-section .form-control::placeholder,
.contact-section textarea::placeholder{
  color: var(--ct-muted) !important;
  opacity: 1 !important;
}

/* Focus accesible */
.contact-section .form--control:focus,
.contact-section .form-control:focus,
.contact-section textarea:focus,
.contact-section select:focus{
  border-color: var(--ct-ac) !important;
  box-shadow: 0 0 0 4px rgba(245,197,24,.18) !important;
  background: #132035 !important;
}

/* 4) Botón enviar */
.contact-section .btn.btn--base{
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
  box-shadow: 0 10px 24px rgba(245,197,24,.25) !important;
}
.contact-section .btn.btn--base:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(245,197,24,.35) !important;
}

/* 5) Tarjetas de la columna izquierda */
.contact-section .contact-info{
  background: var(--ct-panel) !important;
  border: 1px solid var(--ct-bd) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  color: var(--ct-text) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25) !important;
}
.contact-section .contact-info + .contact-info{ margin-top: 16px; }
.contact-section .contact-info__icon{
  background: rgba(245,197,24,.16) !important;
  color: var(--ct-ac) !important;
  border-radius: 10px !important;
  display: inline-flex; align-items:center; justify-content:center;
  width: 44px; height: 44px; margin-right: 12px;
}


/* ============================
   LOGIN PAGE — FIX OSCURO
   Scope: solo páginas con <form action="...sign-in...">
   ============================ */
:root{
  --auth-panel:#121826;          /* panel del card */
  --auth-field:#0f1623;          /* inputs */
  --auth-text:#eaf1ff;           /* texto base */
  --auth-muted:#a7b0bf;          /* placeholders/ayuda */
  --auth-bd:rgba(255,255,255,.16);
  --auth-ac:#F5C518;             /* acento dorado */
}

/* 1) Quitar cualquier “caja blanca” que envuelva al login */
.section:has(form[action*="sign-in"]),
.container:has(form[action*="sign-in"]),
.row:has(form[action*="sign-in"]),
.card:has(form[action*="sign-in"]),
[class*="login"]:has(form[action*="sign-in"]),
[class*="auth"]:has(form[action*="sign-in"]),
[class*="account"]:has(form[action*="sign-in"]) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 2) El propio formulario se convierte en el panel oscuro */
form[action*="sign-in"]{
  background: var(--auth-panel) !important;
  border: 1px solid var(--auth-bd) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
  color: var(--auth-text) !important;
}

/* 3) Labels y enlaces dentro del form */
form[action*="sign-in"] label{ color: var(--auth-text) !important; }
form[action*="sign-in"] a{
  color: var(--auth-ac) !important;
  text-decoration: none !important;
}
form[action*="sign-in"] a:hover{ color:#ffe178 !important; }

/* 4) Inputs y placeholders legibles */
form[action*="sign-in"] .form-control,
form[action*="sign-in"] .form--control,
form[action*="sign-in"] input[type="text"],
form[action*="sign-in"] input[type="email"],
form[action*="sign-in"] input[type="password"],
form[action*="sign-in"] textarea,
form[action*="sign-in"] select{
  background: var(--auth-field) !important;
  color: var(--auth-text) !important;
  border: 1px solid var(--auth-bd) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  outline: none !important;
}
form[action*="sign-in"] .form-control::placeholder,
form[action*="sign-in"] .form--control::placeholder,
form[action*="sign-in"] input::placeholder,
form[action*="sign-in"] textarea::placeholder{
  color: var(--auth-muted) !important; opacity: 1 !important;
}

/* Focus accesible */
form[action*="sign-in"] .form-control:focus,
form[action*="sign-in"] .form--control:focus,
form[action*="sign-in"] input:focus,
form[action*="sign-in"] textarea:focus,
form[action*="sign-in"] select:focus{
  border-color: var(--auth-ac) !important;
  box-shadow: 0 0 0 4px rgba(245,197,24,.18) !important;
  background:#132035 !important;
}

/* 5) Checkbox “Acuérdate de mí” en dorado */
form[action*="sign-in"] input[type="checkbox"]{ accent-color: var(--auth-ac) !important; }

/* 6) Botón submit coherente con el tema */
form[action*="sign-in"] .btn,
form[action*="sign-in"] .btn.btn--base,
form[action*="sign-in"] button[type="submit"]{
  background: var(--auth-ac) !important;
  color: #111 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(245,197,24,.25) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
form[action*="sign-in"] .btn:hover,
form[action*="sign-in"] .btn.btn--base:hover,
form[action*="sign-in"] button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(245,197,24,.35) !important;
}

/* 7) Mensajes de error/validación visibles */
form[action*="sign-in"] .text-danger,
form[action*="sign-in"] .invalid-feedback{ color:#ff6b6b !important; }

/* 8) Evitar halos blancos por clases genéricas del tema dentro del login */
form[action*="sign-in"] .bg-white,
form[action*="sign-in"] .bg--white,
form[action*="sign-in"] .card,
form[action*="sign-in"] .section-wrapper{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}



/* =======================================================
   LOGIN (user/sign-in) – Arreglo solo de TIPOGRAFÍA
   Objetivo: cualquier texto negro ⇒ blanco (o legible)
   Sin tocar fondos, cajas ni estructura.
   ======================================================= */

/* Color base de texto dentro del formulario de login */
form[action*="sign-in"]{
  color:#eaf1ff !important; /* texto general legible */
}

/* Títulos, labels y textos principales en blanco */
form[action*="sign-in"] h1,
form[action*="sign-in"] h2,
form[action*="sign-in"] h3,
form[action*="sign-in"] h4,
form[action*="sign-in"] h5,
form[action*="sign-in"] h6,
form[action*="sign-in"] label,
form[action*="sign-in"] .form-label,
form[action*="sign-in"] .form-check-label,
form[action*="sign-in"] .have-account__text,
form[action*="sign-in"] .have-account__text *,
form[action*="sign-in"] .forgot-pass,
form[action*="sign-in"] .forgot-pass *{
  color:#eaf1ff !important;
}

/* Textos secundarios que podrían estar en gris oscuro/negro */
form[action*="sign-in"] p,
form[action*="sign-in"] small,
form[action*="sign-in"] .text-muted,
form[action*="sign-in"] .help-text,
form[action*="sign-in"] .form-text{
  color:#c9d6ea !important; /* secundario claro, sigue siendo legible */
}

/* Enlaces (Olvidaste tu contraseña?, Regístrate ahora) */
form[action*="sign-in"] a{
  color:#F5C518 !important;        /* dorado del tema */
  text-decoration:none !important;
  font-weight:600;
}
form[action*="sign-in"] a:hover{
  color:#ffe178 !important;
  text-decoration:underline !important;
}

/* Placeholders dentro de inputs (no blancos al 100% para distinguirlos) */
form[action*="sign-in"] .form-control::placeholder,
form[action*="sign-in"] .form--control::placeholder,
form[action*="sign-in"] input::placeholder,
form[action*="sign-in"] textarea::placeholder{
  color:#a7b0bf !important;
  opacity:1 !important;
}

/* Iconos dentro de input-group (ojo/usuario) y textos de addons */
form[action*="sign-in"] .input-group-text,
form[action*="sign-in"] .input-group-text *{
  color:#eaf1ff !important;
}

/* Por si el “Acuérdate de mí” queda oscuro/invisible */
form[action*="sign-in"] .form-check-label{
  color:#eaf1ff !important;
}




/* =======================================================
   REGISTER (/user/sign-up) — Apagar tarjetas blancas
   y dejar SOLO el form como panel oscuro del tema
   ======================================================= */
:root{
  --auth-panel:#121826;          /* panel del card */
  --auth-field:#0f1623;          /* inputs */
  --auth-text:#eaf1ff;           /* texto base */
  --auth-muted:#a7b0bf;          /* placeholders/ayuda */
  --auth-bd:rgba(255,255,255,.16);
  --auth-ac:#F5C518;             /* dorado */
}

/* 0) Todo wrapper del bloque de registro SIN fondos/sombras */
section.account:has(form[action*="sign-up"]) .container,
section.account:has(form[action*="sign-up"]) .container > .row,
section.account:has(form[action*="sign-up"]) .container > .row > *,
section.account:has(form[action*="sign-up"]) .card,
section.account:has(form[action*="sign-up"]) .card-body,
section.account:has(form[action*="sign-up"]) [class*="wrapper"],
section.account:has(form[action*="sign-up"]) [class*="box"],
section.account:has(form[action*="sign-up"]) [class*="content"],
section.account:has(form[action*="sign-up"]) [class*="panel"]{
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 0.1) Kill backgrounds genéricos (solo en este section), 
       excluyendo el propio form para no pisarlo */
section.account:has(form[action*="sign-up"]) *:not(form[action*="sign-up"]):not(form[action*="sign-up"] *){
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 1) El FORM es el único panel (oscuro) */
form[action*="sign-up"]{
  background: var(--auth-panel) !important;
  color: var(--auth-text) !important;
  border: 1px solid var(--auth-bd) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
}

/* 2) Tipos y enlaces */
form[action*="sign-up"] label,
form[action*="sign-up"] .form-label,
form[action*="sign-up"] .form--label{ color: var(--auth-text) !important; }

form[action*="sign-up"] a{
  color: var(--auth-ac) !important; text-decoration: none !important; font-weight: 600;
}
form[action*="sign-up"] a:hover{ color:#ffe178 !important; text-decoration: underline !important; }

/* 3) Inputs oscuros + placeholder legible + focus accesible */
form[action*="sign-up"] .form-control,
form[action*="sign-up"] .form--control,
form[action*="sign-up"] input[type="text"],
form[action*="sign-up"] input[type="email"],
form[action*="sign-up"] input[type="password"],
form[action*="sign-up"] textarea,
form[action*="sign-up"] select{
  background: var(--auth-field) !important;
  color: var(--auth-text) !important;
  border: 1px solid var(--auth-bd) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  outline: none !important;
}
form[action*="sign-up"] .form-control::placeholder,
form[action*="sign-up"] .form--control::placeholder,
form[action*="sign-up"] input::placeholder{ color: var(--auth-muted) !important; opacity: 1 !important; }

form[action*="sign-up"] .form-control:focus,
form[action*="sign-up"] .form--control:focus,
form[action*="sign-up"] input:focus{
  border-color: var(--auth-ac) !important;
  box-shadow: 0 0 0 4px rgba(245,197,24,.18) !important;
  background:#132035 !important;
}

/* 4) Checkbox y ayudas */
form[action*="sign-up"] input[type="checkbox"]{ accent-color: var(--auth-ac) !important; }
form[action*="sign-up"] .text-muted,
form[action*="sign-up"] .form-text,
form[action*="sign-up"] small{ color:#c9d6ea !important; }

/* 5) Validación visible */
form[action*="sign-up"] .text-danger,
form[action*="sign-up"] .invalid-feedback{ color:#ff6b6b !important; }

/* 6) (Opcional) Botón dorado – deja tu azul si prefieres
form[action*="sign-up"] .btn, 
form[action*="sign-up"] button[type="submit"]{
  background:var(--auth-ac) !important; color:#111 !important; border:none !important;
  border-radius:12px !important; font-weight:700 !important; padding:12px 18px !important;
  box-shadow:0 10px 24px rgba(245,197,24,.25) !important;
}
form[action*="sign-up"] .btn:hover,
form[action*="sign-up"] button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow:0 12px 28px rgba(245,197,24,.35) !important;
}
*/

/* ===== Estilo general de textos ===== */
body,
body * {
  color: #ffffff !important; /* Forzamos blanco en todo */
}

/* ===== Botones ===== */
button,
.btn {
  background: #F5C518 !important;
  color: #111111 !important;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  transition: all 0.3s ease;
}

button:hover,
.btn:hover {
  background: #d4a80f !important; /* dorado más oscuro */
  color: #111111 !important;
}

/* ===== Inputs ===== */
input,
select,
textarea {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #333 !important;
  border-radius: 6px !important;
}

input::placeholder,
textarea::placeholder {
  color: #bbbbbb !important;
}

/* ===== Links ===== */
a {
  color: #ffffff !important;
  font-weight: 500;
  transition: color 0.3s ease;
}

a:hover {
  color: #F5C518 !important;
  text-decoration: underline;
}

/* ===== Footer texto (ej. "¿Ya tienes cuenta?") ===== */
.card-footer,
.card-footer * {
  color: #ffffff !important;
}

/* ===== Tarjetas ===== */
.card {
  background: #111111 !important;
  border-radius: 12px;
  border: 1px solid #333 !important;
}

/* ===== Registro: "¿Ya tienes una cuenta? / Iniciar sesión ahora" ===== */
.have-account__text,
.have-account__text * {
  color: #ffffff !important;         /* texto blanco */
  opacity: 1 !important;
}

/* por si el contenedor es .account */
.account .have-account__text,
.account .have-account__text * {
  color: #ffffff !important;
}

/* Enlace "Iniciar sesión ahora" en dorado */
.have-account__text a,
.account .have-account__text a,
.account a[href*="user/login"] {
  color: #F5C518 !important;
  text-decoration: none !important;
}
.have-account__text a:hover,
.account .have-account__text a:hover {
  color: #ffe178 !important;
}


/* ==========================================================
   USER DATA (perfil) — Tema oscuro coherente con Login/Register
   Scope MUY ACOTADO: solo el formulario que envía a /user-data
   ========================================================== */

/* 0) Normaliza cualquier “card” blanca que envuelve el form */
.account:has(form[action*="user-data"]),
.container:has(form[action*="user-data"]),
.row:has(form[action*="user-data"]),
[class*="card"]:has(form[action*="user-data"]) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 1) Panel del formulario */
form[action*="user-data"]{
  --panel:#121826;
  --field:#0f1623;
  --text:#eaf1ff;
  --muted:#a7b0bf;
  --bd:rgba(255,255,255,.16);
  --ac:#F5C518;
  background: var(--panel) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 16px !important;
  padding: clamp(18px, 3vw, 28px) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
  color: var(--text) !important;
}

/* 2) Títulos dentro/arriba del panel */
form[action*="user-data"] h1,
form[action*="user-data"] h2,
form[action*="user-data"] h3,
form[action*="user-data"] h4,
form[action*="user-data"] h5 {
  color: #fff !important;
}

/* 3) Labels y asteriscos */
form[action*="user-data"] label{ color: var(--text) !important; }
form[action*="user-data"] label .text-danger,
form[action*="user-data"] .required,
form[action*="user-data"] .asterisk {
  color: var(--ac) !important;
}

/* 4) Campos de texto / selects / textarea */
form[action*="user-data"] .form-control,
form[action*="user-data"] .form--control,
form[action*="user-data"] input[type="text"],
form[action*="user-data"] input[type="email"],
form[action*="user-data"] input[type="tel"],
form[action*="user-data"] input[type="number"],
form[action*="user-data"] input[type="date"],
form[action*="user-data"] textarea,
form[action*="user-data"] select{
  background: var(--field) !important;
  color: var(--text) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  outline: none !important;
}
form[action*="user-data"] .form-control::placeholder,
form[action*="user-data"] .form--control::placeholder,
form[action*="user-data"] input::placeholder,
form[action*="user-data"] textarea::placeholder{
  color: var(--muted) !important; opacity: 1 !important;
}

/* Focus accesible */
form[action*="user-data"] .form-control:focus,
form[action*="user-data"] .form--control:focus,
form[action*="user-data"] input:focus,
form[action*="user-data"] textarea:focus,
form[action*="user-data"] select:focus{
  border-color: var(--ac) !important;
  box-shadow: 0 0 0 4px rgba(245,197,24,.18) !important;
  background:#132035 !important;
}

/* 5) Select2 (país, etc.) en oscuro */
form[action*="user-data"] .select2-container .select2-selection{
  background: var(--field) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 12px !important;
  height: auto !important;
  min-height: 44px;
}
form[action*="user-data"] .select2-container .select2-selection__rendered{
  color: var(--text) !important;
  line-height: 1.35 !important;
  padding: 10px 12px !important;
}
form[action*="user-data"] .select2-container .select2-selection__arrow b{
  border-color: var(--text) transparent transparent transparent !important;
}
form[action*="user-data"] .select2-dropdown{
  background: var(--panel) !important;
  border: 1px solid var(--bd) !important;
  color: var(--text) !important;
}
form[action*="user-data"] .select2-results__option--selected{
  background: #182132 !important;
}

/* 6) intl-tel-input / dropdowns del teléfono si existieran */
form[action*="user-data"] .iti__country-list{
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--bd) !important;
}
form[action*="user-data"] .iti__country:hover{
  background: #182132 !important;
}

/* 7) Checkbox */
form[action*="user-data"] input[type="checkbox"]{ accent-color: var(--ac) !important; }
form[action*="user-data"] .form-check-label{ color: var(--text) !important; }
form[action*="user-data"] .form-check-label a{
  color: var(--ac) !important; text-decoration: none !important;
}
form[action*="user-data"] .form-check-label a:hover{ text-decoration: underline !important; }

/* 8) Botón “Entregar” */
form[action*="user-data"] .btn,
form[action*="user-data"] .btn.btn--base,
form[action*="user-data"] button[type="submit"]{
  background: var(--ac) !important;
  color: #111 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(245,197,24,.25) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
form[action*="user-data"] .btn:hover,
form[action*="user-data"] .btn.btn--base:hover,
form[action*="user-data"] button[type="submit"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(245,197,24,.35) !important;
}

/* 9) Mensajes de error/validación */
form[action*="user-data"] .text-danger,
form[action*="user-data"] .invalid-feedback{ color:#ff6b6b !important; }

/* 10) Evitar “halos” blancos genéricos dentro del form */
form[action*="user-data"] .bg-white,
form[action*="user-data"] .bg--white,
form[action*="user-data"] .card,
form[action*="user-data"] .section-wrapper{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* ============================
   USER DATA — MODO OSCURO
   (bloque blanco del wrapper)
   ============================ */

/* 1) Apaga cualquier fondo/sombra del wrapper exterior */
.account.py-60,
.account .container,
.account .container > .row,
.account-form,
.account-form-lg {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 2) Algunos temas pintan el fondo en ::before/::after: los anulamos */
.account-form-lg::before,
.account-form-lg::after,
.account-form::before,
.account-form::after {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 3) El panel del formulario mantiene el estilo oscuro que venimos usando */
.account-form-lg .form-card,
.account-form-lg .card,
.account-form-lg .panel,
.account-form-lg .form-wrapper {
  background: #11161f !important;            /* panel oscuro */
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
  color: #eaf1ff !important;
}

/* 4) Inputs/labels/placers legibles dentro del user-data */
.account-form-lg input,
.account-form-lg select,
.account-form-lg textarea,
.account-form-lg .form-control,
.account-form-lg .form--control {
  background: #0f1623 !important;
  color: #eaf1ff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.account-form-lg .form-control::placeholder,
.account-form-lg .form--control::placeholder,
.account-form-lg input::placeholder,
.account-form-lg textarea::placeholder {
  color: #a7b0bf !important;
  opacity: 1 !important;
}
.account-form-lg label { color: #eaf1ff !important; }

/* 5) Focus accesible y coherente */
.account-form-lg .form-control:focus,
.account-form-lg .form--control:focus,
.account-form-lg input:focus,
.account-form-lg select:focus,
.account-form-lg textarea:focus {
  border-color: #F5C518 !important;
  box-shadow: 0 0 0 4px rgba(245,197,24,.18) !important;
  background: #132035 !important;
  outline: none !important;
}

/* 6) Botón submit consistente con el tema */
.account-form-lg .btn,
.account-form-lg button[type="submit"] {
  background: #F5C518 !important;
  color: #111 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(245,197,24,.25) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.account-form-lg .btn:hover,
.account-form-lg button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(245,197,24,.35) !important;
}

/* 7) Por si algún contenedor intermedio insistiera en fondo claro */
main.root,
main.root > .account,
main.root > .account > .container {
  background: transparent !important;
}


/* =========================================================
   PERFIL / DASHBOARD — MODO OSCURO COHERENTE CON EL TEMA
   Página: /user/profile-setting (sección .dashboard)
   ========================================================= */

/* Paleta (ya usada en login/register/user-data) */
:root{
  --panel:#11161f;         /* panel del card */
  --field:#0f1623;         /* inputs */
  --text:#eaf1ff;          /* texto base */
  --muted:#a7b0bf;         /* placeholders/ayuda */
  --bd:rgba(255,255,255,.12);
  --accent:#F5C518;        /* acento dorado */
}

/* 1) Apaga fondos/”tarjetas blancas” del wrapper del dashboard */
.dashboard,
.dashboard .container,
.dashboard .container > .row {
  background: transparent !important;
}

/* A veces el fondo claro viene del contenedor principal de contenido  */
.dashboard .dashboard-content,
.dashboard .content,
.dashboard .profile-content,
.dashboard .profile-setting,
.dashboard .profile-area,
.dashboard .account-form,
.dashboard .account-form-lg {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.dashboard .dashboard-content::before,
.dashboard .dashboard-content::after,
.dashboard .profile-setting::before,
.dashboard .profile-setting::after,
.dashboard .account-form-lg::before,
.dashboard .account-form-lg::after {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Panel derecho (el formulario) como card oscuro */
.dashboard .card,
.dashboard .panel,
.dashboard .profile-card,
.dashboard .profile-form,
.dashboard .form-wrapper {
  background: var(--panel) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
  color: var(--text) !important;
}

/* Si el formulario no está dentro de .card, aplica al bloque de inputs */
.dashboard form {
  color: var(--text) !important;
}

/* 3) Columna izquierda (sidebar) – sin blanco y legible */
.dashboard .sidebar,
.dashboard .dashboard-sidebar,
.dashboard .user-sidebar,
.dashboard .profile-sidebar {
  background: var(--panel) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.3) !important;
  color: var(--text) !important;
}
.dashboard .sidebar a,
.dashboard .dashboard-sidebar a {
  color: var(--text) !important;
}
.dashboard .sidebar a:hover,
.dashboard .dashboard-sidebar a:hover,
.dashboard .sidebar .active > a,
.dashboard .dashboard-sidebar .active > a {
  color: #111 !important;
  background: var(--accent) !important;
  border-radius: 10px !important;
}

/* 4) Inputs/labels/placeholder */
.dashboard label { color: var(--text) !important; }

.dashboard input,
.dashboard select,
.dashboard textarea,
.dashboard .form-control,
.dashboard .form--control {
  background: var(--field) !important;
  color: var(--text) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  outline: none !important;
}
.dashboard .form-control::placeholder,
.dashboard .form--control::placeholder,
.dashboard input::placeholder,
.dashboard textarea::placeholder {
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* 5) Focus accesible */
.dashboard .form-control:focus,
.dashboard .form--control:focus,
.dashboard input:focus,
.dashboard select:focus,
.dashboard textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(245,197,24,.18) !important;
  background: #132035 !important;
}

/* 6) Botón de enviar coherente */
.dashboard .btn,
.dashboard button[type="submit"] {
  background: var(--accent) !important;
  color: #111 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(245,197,24,.25) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dashboard .btn:hover,
.dashboard button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(245,197,24,.35) !important;
}

/* 7) Forzar legibilidad en textos que el tema pinte “negro” */
.dashboard .text-dark,
.dashboard .heading,
.dashboard .title,
.dashboard p,
.dashboard span {
  color: var(--text) !important;
}

/* 8) Ítems “pill”/badges en el sidebar o tabs */
.dashboard .nav-pills .nav-link {
  color: var(--text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}
.dashboard .nav-pills .nav-link.active,
.dashboard .nav-pills .nav-link:hover {
  background: var(--accent) !important;
  color: #111 !important;
  border-color: var(--accent) !important;
}

/* 9) Imágenes del perfil: marco sutil oscuro si existiera borde blanco */
.dashboard .profile-thumb,
.dashboard .avatar,
.dashboard .profile-image {
  border: 1px solid var(--bd) !important;
  background: transparent !important;
}



/* ==========================================
   PERFIL (profile-setting): mata blancos del
   wrapper real y deja solo el panel oscuro
   ========================================== */

/* 0) Paleta ya usada (por si este archivo carga solo) */
:root{
  --panel:#11161f;
  --field:#0f1623;
  --text:#eaf1ff;
  --muted:#a7b0bf;
  --bd:rgba(255,255,255,.12);
  --accent:#F5C518;
}

/* 1) Todo lo que envuelve el formulario en profile-setting */
.dashboard-body,
.dashboard-body .container,
.dashboard-body .container > .row,
.dashboard-body .container > .row > [class*="col-"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 2) Cualquier “form wrapper” claro típico del tema */
.dashboard-body .account-form,
.dashboard-body .account-form-lg,
.dashboard-body .content-body,
.dashboard-body .profile-content,
.dashboard-body .profile-wrapper,
.dashboard-body .dashboard-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 3) A veces el claro viene de card-header/body */
.dashboard-body .card,
.dashboard-body .card-header,
.dashboard-body .card-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 4) El “verdadero” panel del formulario en modo oscuro */
.dashboard-body form,
.dashboard-body .form-wrapper,
.dashboard-body .form-panel {
  background: var(--panel) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
  color: var(--text) !important;
  padding: 22px !important;
}

/* 5) Inputs/labels coherentes, por si aquí no se heredó */
.dashboard-body label { color: var(--text) !important; }

.dashboard-body input,
.dashboard-body select,
.dashboard-body textarea,
.dashboard-body .form-control,
.dashboard-body .form--control {
  background: var(--field) !important;
  color: var(--text) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  outline: none !important;
}
.dashboard-body .form-control::placeholder,
.dashboard-body .form--control::placeholder,
.dashboard-body input::placeholder,
.dashboard-body textarea::placeholder {
  color: var(--muted) !important;
  opacity: 1 !important;
}
.dashboard-body .form-control:focus,
.dashboard-body .form--control:focus,
.dashboard-body input:focus,
.dashboard-body select:focus,
.dashboard-body textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(245,197,24,.18) !important;
  background:#132035 !important;
}

/* 6) Botón enviar */
.dashboard-body .btn,
.dashboard-body button[type="submit"] {
  background: var(--accent) !important;
  color: #111 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(245,197,24,.25) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.dashboard-body .btn:hover,
.dashboard-body button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(245,197,24,.35) !important;
}

/* 7) Por si algún texto insiste en negro */
.dashboard-body .text-dark,
.dashboard-body .title,
.dashboard-body .heading,
.dashboard-body p,
.dashboard-body span {
  color: var(--text) !important;
}

/* 8) Sidebar del dashboard (asegura el look oscuro y activo) */
.dashboard .dashboard-sidebar,
.dashboard .sidebar {
  background: var(--panel) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 14px !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.3) !important;
  color: var(--text) !important;
}
.dashboard .dashboard-sidebar a { color: var(--text) !important; }
.dashboard .dashboard-sidebar .active > a,
.dashboard .dashboard-sidebar a:hover {
  background: var(--accent) !important;
  color: #111 !important;
  border-radius: 10px !important;
}

/* 9) Si hay migas o bandas superiores blancas, límpialas */
.dashboard .breadcrumb,
.dashboard .breadcrumb * {
  background: transparent !important;
  color: var(--text) !important;
}




/* ==========================================
   BOOKING (ticket) — unificar estilo oscuro
   ========================================== */

/* 0) Paleta (por si este archivo carga solo) */
:root{
  --panel:#11161f;
  --field:#0f1623;
  --text:#eaf1ff;
  --muted:#a7b0bf;
  --bd:rgba(255,255,255,.12);
  --accent:#F5C518;
}

/* 1) El contenedor que trae el fondo BLANCO */
.book-ticket-section .authorization-wrapper,
.book-ticket-section .authorization-wrapper.wow,
.book-ticket-section .authorization-wrapper[class*="fadeIn"] {
  background: var(--panel) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.35) !important;
  color: var(--text) !important;
}

/* 2) Cualquier “card”/envoltura clara dentro */
.book-ticket-section .card,
.book-ticket-section .card-header,
.book-ticket-section .card-body,
.book-ticket-section .form-wrapper,
.book-ticket-section .content-body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 3) Inputs/labels */
.book-ticket-section label { color: var(--text) !important; }

.book-ticket-section input,
.book-ticket-section select,
.book-ticket-section textarea,
.book-ticket-section .form-control,
.book-ticket-section .form--control {
  background: var(--field) !important;
  color: var(--text) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  outline: none !important;
}
.book-ticket-section .form-control::placeholder,
.book-ticket-section .form--control::placeholder,
.book-ticket-section input::placeholder,
.book-ticket-section textarea::placeholder{
  color: var(--muted) !important; opacity: 1 !important;
}
.book-ticket-section .form-control:focus,
.book-ticket-section .form--control:focus,
.book-ticket-section input:focus,
.book-ticket-section select:focus,
.book-ticket-section textarea:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(245,197,24,.18) !important;
  background:#132035 !important;
}

/* 4) Botones (login, continuar, etc.) */
.book-ticket-section .btn,
.book-ticket-section button[type="submit"],
.book-ticket-section .btn.btn--base {
  background: var(--accent) !important;
  color: #111 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(245,197,24,.25) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.book-ticket-section .btn:hover,
.book-ticket-section button[type="submit"]:hover,
.book-ticket-section .btn.btn--base:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(245,197,24,.35) !important;
}

/* 5) Textos que insistan en negro */
.book-ticket-section .text-dark,
.book-ticket-section p,
.book-ticket-section span,
.book-ticket-section .title,
.book-ticket-section .heading{
  color: var(--text) !important;
}

/* 6) Apaga fondos claros residuales del grid */
.book-ticket-section .container,
.book-ticket-section .row,
.book-ticket-section [class*="col-"]{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}



/* Centrado correcto del modal de reservas invitados */
.modal-dialog {
  margin: 0 auto !important;   /* fuerza centrado */
  max-width: 420px;            /* ancho máximo controlado */
  width: 90%;                  /* responsivo en móvil */
}

/* Ajuste del modal-body */
.modal-content {
  background: #0F1620;         /* fondo oscuro elegante */
  border-radius: 12px;
  border: none;
  padding: 20px;
  color: #fff;
}

/* Inputs mejor alineados */
.modal-content .form-control {
  background: #1c2533;
  border: 1px solid #2b3545;
  border-radius: 8px;
  color: #fff;
}

/* Botón */
.modal-content .btn {
  background: #F5C518;
  color: #111;
  border-radius: 8px;
  font-weight: 600;
}
.modal-content .btn:hover {
  background: #ffdb4d;
  color: #111;
}

/* Ajuste para móviles */
@media (max-width: 576px) {
  .modal-dialog {
    max-width: 95% !important;
    margin: 10px auto !important;
  }
}








/* === Ticket summary: mostrar el pill de Ticket Service sí o sí === */

/* El item entero alineado en fila y con espacio entre título y pill */
.ticket-summary .list-group-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: .75rem !important;
}

/* El bloque del título puede ocupar el espacio; que no tape el pill */
.ticket-summary .list-group-item .ms-2.me-auto {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* El pill NO debe encogerse ni perderse */
.ticket-summary .list-group-item > span.badge.badge--secondary.rounded-pill.serviceFee {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: .35rem .6rem !important;
  line-height: 1 !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;

  /* Colores fuertes (modo claro) */
  background: #eff4ff !important;      /* celeste claro */
  color: #0f2d6a !important;            /* azul oscuro */
  border: 1px solid #b9c7ff !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06) !important;

  /* por si alguien lo escondía */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Modo oscuro (si lo hay en el panel o body) */
.dark .ticket-summary .list-group-item > span.badge.badge--secondary.rounded-pill.serviceFee,
html[data-theme="dark"] .ticket-summary .list-group-item > span.badge.badge--secondary.rounded-pill.serviceFee,
body.dark .ticket-summary .list-group-item > span.badge.badge--secondary.rounded-pill.serviceFee {
  background: #1e2a44 !important;
  color: #e8f0ff !important;
  border-color: rgba(255,255,255,.16) !important;
}

/* Evitar recortes inesperados */
.ticket-summary,
.ticket-summary .list-group,
.ticket-summary .list-group-item {
  overflow: visible !important;
}






/* === Booking Success — estilo encapsulado === */
/* Usa .booking-success como wrapper del contenido de la página */
.booking-success {
  --bg: #0b1220;                 /* fondo base del sitio */
  --card-bg: #0e172b;            /* fondo tarjeta */
  --card-border: rgba(255,255,255,.06);
  --muted: rgba(255,255,255,.6);
  --text: #ffffff;
  --ok: #ffc107;                 /* badge éxito (amarillo) */
  --ok-deep: #ffb300;
  --ok-shadow: rgba(255,193,7,.35);
  --shadow: 0 20px 40px rgba(0,0,0,.45);
  --radius-lg: 20px;
  --radius-md: 14px;
  --gap: 16px;
  --gap-lg: 24px;
}

/* Fondo y espaciados de la sección */
.booking-success .section,
.booking-success .container {
  position: relative;
  z-index: 1;
}

.booking-success .container {
  max-width: 980px;
}

/* Card principal */
.booking-success .success-card {
  position: relative;
  margin: 56px auto 40px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
              var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  color: var(--text);
}

/* Badge de éxito centrado arriba */
.booking-success .success-badge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--ok), var(--ok-deep));
  display: grid;
  place-items: center;
  color: #0b1220; /* color del ícono (check) */
  box-shadow: 0 10px 20px var(--ok-shadow), 0 2px 6px rgba(0,0,0,.35);
  border: 6px solid var(--card-bg);
  font-size: 28px; /* si el check es un <i> */
}

/* Título */
.booking-success .success-title {
  margin-top: 18px;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: .3px;
}

/* Subtítulo / referencia */
.booking-success .success-subtitle {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: var(--gap-lg);
}

/* Grid de resumen (2 columnas desktop, 1 en mobile) */
.booking-success .summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--gap-lg) var(--gap);
  margin-bottom: var(--gap-lg);
}

@media (max-width: 680px) {
  .booking-success .summary {
    grid-template-columns: 1fr;
  }
}

/* Ítems del resumen */
.booking-success .summary-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px;
  align-items: start;
}

.booking-success .summary-label {
  color: var(--muted);
  font-size: 13px;
}

.booking-success .summary-value {
  font-weight: 600;
  font-size: 15px;
}

/* Separadores suaves */
.booking-success .divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-border), transparent);
  margin: var(--gap-lg) 0;
}

/* Totales */
.booking-success .totals {
  display: grid;
  gap: 6px;
}

.booking-success .totals .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
}

.booking-success .totals .row .label {
  color: var(--muted);
}

.booking-success .totals .row.total {
  margin-top: 8px;
  font-weight: 800;
  font-size: 18px;
}

/* Acciones */
.booking-success .actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: var(--gap-lg);
}

@media (max-width: 560px) {
  .booking-success .actions {
    grid-template-columns: 1fr;
  }
}

/* Pulido de botones existentes del sistema */
.booking-success .actions .btn,
.booking-success .actions .btn--base {
  width: 100%;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Botón secundario (por ejemplo, “Volver al inicio”) */
.booking-success .actions .btn--ghost {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text);
}

.booking-success .actions .btn--ghost:hover {
  background: rgba(255,255,255,.04);
}

/* Bloque de notas (si existe) */
.booking-success .note {
  margin-top: var(--gap);
  color: var(--muted);
  font-size: 13px;
}

/* Responsivo: más aire en móviles */
@media (max-width: 480px) {
  .booking-success .success-card {
    padding: 22px;
    margin-top: 64px;
  }
  .booking-success .success-badge {
    width: 66px; height: 66px; border-width: 5px;
  }
}

/* Modo impresión (para descargar o imprimir el comprobante limpio) */
@media print {
  header, .header, .breadcrumb, .footer, .sidebar, .scroll-top,
  .preloader, .countdown-wrapper { display: none !important; }

  body, html { background: #fff !important; }
  .booking-success .success-card {
    box-shadow: none !important;
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #e5e7eb !important;
  }
  .booking-success .success-badge {
    border-color: #fff !important;
  }
  .booking-success .actions { display: none !important; }
}