/* branding.css.php — generado; no editar a mano */
:root {
  --b-primary: #6a2818;
  --b-secondary: #fbf7da;
  --b-accent: #ffdb4f;
  --rh-brand: var(--b-primary);
  --rh-accent: var(--b-accent);
  --rh-bg-soft: var(--b-secondary);
  --pub-glob-cuenta-barra-bg: var(--b-primary);
  --pub-glob-cuenta-barra-text: #f3dcc9;
  --pub-glob-cuenta-barra-activo: var(--b-accent);
  --pub-glob-cuenta-barra-centro-bg: var(--b-accent);
  --pub-glob-cuenta-barra-centro-text: #2c1810;
  --pub-glob-cuenta-saldo-bg: var(--b-primary);
  --pub-glob-cuenta-saldo-text: #ffffff;
  --pub-glob-cuenta-saldo-sub: #f3dcc9;
  --pub-glob-cuenta-titulo: #2c1810;
  --pub-glob-cuenta-texto-suave: #5c4a3d;
  --pub-glob-cuenta-borde: #e2cfa8;
  --pub-glob-cuenta-suave-bg: #fff4d6;
  --pub-glob-cuenta-entra: #1f7a3f;
  --pub-glob-cuenta-sale: #b42318;
  --pub-glob-sello-ok: #1f7a3f;
  --pub-glob-sello-error: #b42318;
  --pub-glob-sello-aviso: #b45309;
  --pub-glob-aviso-saldo-bg: var(--b-secondary);
  --pub-glob-aviso-saldo-borde: var(--b-accent);
  --pub-glob-aviso-saldo-texto: var(--b-primary);
  --pub-glob-aviso-saldo-boton-bg: var(--b-primary);
  --pub-glob-aviso-saldo-boton-texto: #ffffff;
  --pub-glob-carton-tuyo-bg: var(--b-primary);
  --pub-glob-carton-tuyo-texto: #ffffff;
  --pub-vd-atc-marco: #9b1919;
  --pub-vd-atc-acento: #8b0000;
  --pub-vd-atc-celda-bg: #fdf8e7;
  --pub-vd-atc-celda-hover: #f7ecc9;
  --pub-vd-atc-azar-bg: #ffc93c;
  --pub-vd-atc-azar-text: #5b3a00;
  --pub-vd-atc-estrella: #f3b31a;
  --pub-vd-atc-estrella-borde: #b8860b;
  --pub-vd-pb-bola-bg: #ffffff;
  --pub-vd-pb-bola-text: #000000;
  --pub-vd-pb-sel-bg: #000000;
  --pub-vd-pb-sel-text: #ffffff;
  --pub-vd-pb-fondo: #ffffff;
  --pub-vd-pb-titulo: #000000;
  --pub-vd-pb-texto: #333333;
  --pub-vd-pb-btn-bg: #ffdb4f;
  --pub-vd-pb-btn-text: #000000;
  --pub-vd-ruleta-compra-titulo: #6a2818;
  --pub-vd-ruleta-compra-texto: #212529;
  --pub-vd-ruleta-compra-gano-bg: #ffdb4f;
  --pub-vd-ruleta-compra-gano-text: #000000;
  --pub-vd-ruleta-compra-no-bg: #6a2818;
  --pub-vd-ruleta-compra-no-text: #ffffff;
  --pub-vd-ruleta-compra-borde: #ffffff;
  --pub-vd-ruleta-compra-puntero: #212529;
  --pub-vd-ruleta-compra-centro-bg: #ffffff;
  --pub-vd-ruleta-compra-centro-text: #6a2818;
  --pub-vd-ruleta-compra-btn-bg: #ffdb4f;
  --pub-vd-ruleta-compra-btn-text: #000000;
}

/* Frontend público (navbar / madera) */
.bg-madera,
.navbar-dark.bg-madera {
  background: var(--b-primary) !important;
}
.site-header .navbar-dark.bg-madera {
  background: var(--b-primary) !important;
}
.offcanvas-start {
  background: var(--b-primary) !important;
  color: #fff;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--b-accent) !important;
}
.offcanvas .nav-link:hover,
.offcanvas .nav-link.active {
  background: var(--b-accent) !important;
  color: #000 !important;
}
.offcanvas .vendedor-menu-mobile:has(a.nav-link-registro) {
  background: var(--b-accent) !important;
}

/* Caja detrás del logo (.brand-box): mismo color efectivo que el navbar */
.site-header .brand-box {
  background: var(--b-primary) !important;
}
body.page-brand-index .site-header .brand-box {
  background: var(--idx-header) !important;
}
body.page-brand-view-draw .site-header .brand-box,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .site-header .brand-box {
  background: var(--vd-header) !important;
}

/* Panel administrativo + cuenta (sidebar / fondo) */
body.app-brand-area {
  background-color: var(--b-secondary) !important;
}
.sidebar,
.sidebar ul li {
  border-color: color-mix(in srgb, var(--b-primary) 85%, #000) !important;
}
.sidebar,
.sidebar.active {
  background-color: var(--b-primary) !important;
}
.sidebar ul li a:focus,
.sidebar ul li a:hover {
  background-color: var(--b-accent) !important;
  color: #000 !important;
}
.sidebar .nav-link.active {
  background-color: var(--b-accent) !important;
  color: var(--b-primary) !important;
}
.admin-layout .btn-primary,
.app-brand-area .btn-primary,
body.app-brand-area .btn-comprar-header {
  background-color: var(--b-accent) !important;
  border-color: transparent !important;
  color: #000 !important;
}
.admin-layout .btn-primary:hover,
.app-brand-area .btn-primary:hover {
  filter: brightness(0.95);
}
/* (C1) Columna Vendedor del panel: la venta directa y el aviso de "sin comisión" son etiquetas como la del vendedor,
   en tonos del tema: Directo con el primario; Sin comisión en ámbar (mezcla del acento con el primario). */
.admin-layout .badge.badge-directo {
  background-color: var(--b-primary) !important;
  color: var(--bs-white) !important;
}
.admin-layout .badge.badge-sin-comision {
  background-color: color-mix(in srgb, var(--b-accent) 70%, var(--b-primary)) !important;
  color: var(--bs-black) !important;
}
.admin-layout h1,
.admin-layout h2,
.admin-layout h3,
.content-wrapper h1,
.cuenta-content-wrapper h1 {
  color: var(--b-primary) !important;
}

/* Cuenta portal: encabezados y sidebar */
.cuenta-layout .sidebar,
.cuenta-sidebar {
  background-color: var(--b-primary) !important;
}
.cuenta-layout .sidebar a:hover,
.cuenta-layout .sidebar a:focus,
.cuenta-layout .sidebar .nav-link.active {
  background-color: var(--b-accent) !important;
}

/* Admin + cuenta — cabecera fija (Bootstrap navbar-light/bg-light) */
body.app-brand-area > header.navbar.navbar-light.bg-light,
body.app-brand-area > header.navbar.fixed-top {
  background-color: var(--b-primary) !important;
  color: #fff !important;
  border-bottom: 1px solid color-mix(in srgb, var(--b-primary) 78%, #000) !important;
}
body.app-brand-area > header.navbar .navbar-brand {
  color: var(--b-accent) !important;
}
body.app-brand-area > header.navbar .navbar-toggler {
  background-color: var(--b-accent) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
body.app-brand-area > header.navbar .navbar-toggler-icon {
  filter: brightness(0.15);
}
body.app-brand-area .side-top {
  background: var(--b-accent) !important;
}
body.app-brand-area .side-top h5,
body.app-brand-area .side-top .username {
  color: #111 !important;
}

/* Reportes hub (variables ya definidas en reports.css) */
.reports-hub {
  --rh-brand: var(--b-primary);
  --rh-accent: var(--b-accent);
  --rh-bg-soft: var(--b-secondary);
}

/* Ámbito global: páginas públicas con body.bg-light que no son compra (index), sorteo (view_draw) ni app canto */
body.bg-light:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module) {  --pub-glob-body-text: #333333;
  --pub-glob-link: #ffffff;
  --pub-glob-link-hover: #ffffff;
  --pub-glob-body-bg: #fbf7da;
  --pub-glob-card-bg: #ffffff;
  --pub-glob-card-border: rgba(0, 0, 0, 0.175);
  --pub-glob-input-bg: #ffffff;
  --pub-glob-input-text: #212529;
  --pub-glob-input-border: #ced4da;
  --pub-glob-input-focus-border: #86b7fe;
  --pub-glob-input-focus-shadow: rgba(13, 110, 253, 0.25);
  --pub-glob-legal-body-text: #000000;
  --pub-glob-registro-terminos-link: #000000;
  --pub-glob-login-iti-dial-text: #000000;
  --pub-glob-cuenta-sidebar-code-text: #000000;
  --pub-glob-cuenta-barra-bg: var(--b-primary);
  --pub-glob-cuenta-barra-text: #f3dcc9;
  --pub-glob-cuenta-barra-activo: var(--b-accent);
  --pub-glob-cuenta-barra-centro-bg: var(--b-accent);
  --pub-glob-cuenta-barra-centro-text: #2c1810;
  --pub-glob-cuenta-saldo-bg: var(--b-primary);
  --pub-glob-cuenta-saldo-text: #ffffff;
  --pub-glob-cuenta-saldo-sub: #f3dcc9;
  --pub-glob-cuenta-titulo: #2c1810;
  --pub-glob-cuenta-texto-suave: #5c4a3d;
  --pub-glob-cuenta-borde: #e2cfa8;
  --pub-glob-cuenta-suave-bg: #fff4d6;
  --pub-glob-cuenta-entra: #1f7a3f;
  --pub-glob-cuenta-sale: #b42318;
  --pub-glob-sello-ok: #1f7a3f;
  --pub-glob-sello-error: #b42318;
  --pub-glob-sello-aviso: #b45309;
  --pub-glob-aviso-saldo-bg: var(--b-secondary);
  --pub-glob-aviso-saldo-borde: var(--b-accent);
  --pub-glob-aviso-saldo-texto: var(--b-primary);
  --pub-glob-aviso-saldo-boton-bg: var(--b-primary);
  --pub-glob-aviso-saldo-boton-texto: #ffffff;
  --pub-glob-carton-tuyo-bg: var(--b-primary);
  --pub-glob-carton-tuyo-texto: #ffffff;
}

/* Cobertura extra (tema del sitio activo): solo logins de cuenta y de bingo: cards + cabeceras de popup/modales ligadas a primario */
body.bg-light.bingo-module.background-dollar .card,
body.bg-light.login-page .card {
  background-color: var(--b-primary) !important;
  border-color: color-mix(in srgb, var(--b-primary) 85%, #000) !important;
}
body.bg-light.bingo-module.background-dollar .card-body,
body.bg-light.login-page .card-body {
  color: #fff !important;
}
body.bg-light.bingo-module.background-dollar .card-title,
body.bg-light.bingo-module.background-dollar .card-text,
body.bg-light.bingo-module.background-dollar .paragraph,
body.bg-light.login-page .card-title,
body.bg-light.login-page .form-label,
body.bg-light.bingo-module.background-dollar .form-label {
  color: #fff !important;
}
body.bg-light.bingo-module.background-dollar .card-header,
body.bg-light.bingo-module.background-dollar .modal-header,
body.bg-light.bingo-module.background-dollar .bg-success,
body.bg-light.bingo-module.background-dollar .bg-dark,
body.bg-light.login-page .modal-header {
  background-color: var(--b-primary) !important;
  color: #fff !important;
  border-color: color-mix(in srgb, var(--b-primary) 80%, #000) !important;
}
body.bg-light.bingo-module.background-dollar .bg-warning {
  background-color: var(--b-accent) !important;
  color: #111 !important;
}

/* Páginas legales: el contenido usa .paragraph; más abajo el tema bg-light fuerza .paragraph en blanco — debe ir DESPUÉS de esa regla */
body.page-brand-legal.bg-light .terminos-y-condiciones > h1,
body.page-brand-legal.bg-light .terminos-y-condiciones .content,
body.page-brand-legal.bg-light .terminos-y-condiciones .content .paragraph,
body.page-brand-legal.bg-light .terminos-y-condiciones .content p,
body.page-brand-legal.bg-light .terminos-y-condiciones .content li,
body.page-brand-legal.bg-light .terminos-y-condiciones .content h2,
body.page-brand-legal.bg-light .terminos-y-condiciones .content h3,
body.page-brand-legal.bg-light .terminos-y-condiciones .content h4,
body.page-brand-legal.bg-light .terminos-y-condiciones .content td,
body.page-brand-legal.bg-light .terminos-y-condiciones .content th,
body.page-brand-legal.bg-light .terminos-y-condiciones .content .card-body,
body.page-brand-legal.bg-light .terminos-y-condiciones .content .card-text {
  color: var(--pub-glob-legal-body-text, #000000) !important;
}

body.page-brand-legal.bg-light .terminos-y-condiciones .content a:not(.btn),
body.page-brand-legal.bg-light .terminos-y-condiciones .content a:not(.btn):hover,
body.page-brand-legal.bg-light .terminos-y-condiciones .content a:not(.btn):focus,
body.page-brand-legal.bg-light .terminos-y-condiciones .content a:not(.btn):focus-visible,
body.page-brand-legal.bg-light .terminos-y-condiciones .content a:not(.btn):visited {
  color: var(--pub-glob-legal-body-text, #000000) !important;
}

/* Registro (vendedores): enlaces del texto de aceptación T&C / privacidad / afiliados */
body.page-brand-registro.bg-light .registro-legal-aceptacion a:not(.btn),
body.page-brand-registro.bg-light .registro-legal-aceptacion a:not(.btn):hover,
body.page-brand-registro.bg-light .registro-legal-aceptacion a:not(.btn):focus,
body.page-brand-registro.bg-light .registro-legal-aceptacion a:not(.btn):focus-visible,
body.page-brand-registro.bg-light .registro-legal-aceptacion a:not(.btn):visited {
  color: var(--pub-glob-registro-terminos-link, #000000) !important;
}

body.bg-light.login-page .form-control,
body.bg-light.bingo-module.background-dollar .form-control {
  border-color: color-mix(in srgb, var(--b-primary) 35%, #ffffff) !important;
}
body.bg-light.login-page .btn-primary,
body.bg-light.bingo-module.background-dollar .btn-primary {
  background-color: var(--b-accent) !important;
  color: #000 !important;
  border-color: transparent !important;
}

/* Login cuenta: prefijo telefónico (+58, …) — hereda color blanco del .card-body del tema */
body.bg-light.login-page .iti__selected-dial-code,
body.bg-light.login-page .iti__country-list .iti__country-name,
body.bg-light.login-page .iti__country-list .iti__dial-code {
  color: var(--pub-glob-login-iti-dial-text, #000000) !important;
}

/* Login admin (reutiliza .btn-primary) */
.logo-login .logo { max-height: 200px; width: auto; }

/* Y23 (2026-10-21): aviso de la compra «Tienes saldo guardado en tu cuenta» con su botón INGRESAR. Llama la atención
   sin bloquear: va dentro de la sección de pago, en su sitio, y no tapa nada. */
.aviso-saldo-cuenta {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .75rem 0 .25rem;
  padding: .75rem .85rem;
  border: 2px solid var(--pub-glob-aviso-saldo-borde);
  border-radius: 12px;
  background: var(--pub-glob-aviso-saldo-bg);
  color: var(--pub-glob-aviso-saldo-texto);
  line-height: 1.3;
  animation: avisoSaldoEntra .35s ease-out;
}
.aviso-saldo-cuenta.d-none { display: none !important; }
.aviso-saldo-cuenta__icono { font-size: 1.7rem; line-height: 1; flex: 0 0 auto; }
.aviso-saldo-cuenta__texto { flex: 1 1 auto; min-width: 0; font-size: .92rem; }
.aviso-saldo-cuenta__texto strong { display: block; font-size: .98rem; }
.aviso-saldo-cuenta__boton,
.aviso-saldo-cuenta__boton:visited {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .9rem;
  border-radius: 8px;
  background: var(--pub-glob-aviso-saldo-boton-bg);
  color: var(--pub-glob-aviso-saldo-boton-texto) !important;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .02em;
  text-decoration: none !important;
  white-space: nowrap;
}
.aviso-saldo-cuenta__boton:hover,
.aviso-saldo-cuenta__boton:focus-visible {
  background: color-mix(in srgb, var(--pub-glob-aviso-saldo-boton-bg) 85%, #000);
  color: var(--pub-glob-aviso-saldo-boton-texto) !important;
}
@media (max-width: 400px) {
  .aviso-saldo-cuenta { flex-wrap: wrap; }
  .aviso-saldo-cuenta__texto { flex-basis: calc(100% - 2.6rem); }
  .aviso-saldo-cuenta__boton { width: 100%; justify-content: center; }
}
@keyframes avisoSaldoEntra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aviso-saldo-cuenta { animation: none; } }

/* Y23: el cartón que esta persona ya tiene apartado lleva una marca pequeña «TUYO» en la cuadrícula */
#grid-cartones .bubble-wrap.es-tuyo { position: relative; }
#grid-cartones .bubble-wrap.es-tuyo::before {
  content: "TUYO";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--pub-glob-carton-tuyo-bg);
  color: var(--pub-glob-carton-tuyo-texto);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  letter-spacing: .03em;
  pointer-events: none;
}
.cartones-tuyos-nota { font-size: .85rem; color: var(--pub-glob-aviso-saldo-texto); }

/* Variables de marca por página (index / vista previa sorteo) */
:root {
  --idx-header: #ac0001;
  --idx-page-bg: #fbf7da;
  --idx-form-bg: #ac0001;
  --idx-highlight: #ffdb4f;
  --idx-footer: #750b0b;
  --vd-header: #6a2818;
  --vd-page-bg: #fbf7da;
  --vd-form-bg: #6a2818;
  --vd-highlight: #ffdb4f;
  --vd-footer: #15463b;
}

/*
 * index.php — body.page-brand-index
 * Cabecera: .site-header .navbar | Fondo: body | Tarjeta formulario: .main-index .card
 * Destacados: franja "Disponibles" (.alert-cartons), bola ALEATORIO, resumen precio/hora (.vd-preview-summary)
 * Footer: footer.grass-footer
 */
body.page-brand-index {
  --pub-idx-heading: #ffdb4f;
  --pub-idx-paragraph: #ffffff;
  --pub-idx-card-inner-text: #ffffff;
  --pub-idx-btn-primary-bg: #ffdb4f;
  --pub-idx-btn-primary-text: #000000;
  --pub-idx-btn-primary-hover: #f9cf26;
  --pub-idx-btn-secondary-bg: #ac0001;
  --pub-idx-btn-secondary-text: #ffffff;
  --pub-idx-btn-secondary-hover: #581d0f;
  --pub-idx-label-cantidad: #ffffff;
  --pub-idx-btn-operador-bg: #fff4ca;
  --pub-idx-btn-operador-text: #000000;
  --pub-idx-btn-operador-hover: #fad282;
  --pub-idx-bubble-bg: #ffffff;
  --pub-idx-bubble-text: #000000;
  --pub-idx-bubble-active-bg: #000000;
  --pub-idx-bubble-active-text: #ffffff;
  --pub-idx-modal-backdrop: rgb(0 0 0 / 60%);
  --pub-idx-promo-ribbon-bg: #ffcc4d;
  --pub-idx-promo-ribbon-text: #3a2a00;
  --pub-idx-meta-muted: #6b5b48;
  --pub-idx-meta-value: #2c1f14;
  --pub-idx-meta-accent-icon: #6a2818;
  --pub-idx-promo-saving-text: #0b3c74;
  --pub-idx-promo-saving-strong: #ffd74a;
  --pub-idx-payment-border: #ffdb4f;
  --pub-idx-cedula-bg: #ffffff;
  --pub-idx-cedula-border: #ced4da;
  --pub-idx-cedula-tipo-bg: #fbf7da;
  --pub-idx-cedula-focus-border: #86b7fe;
  --pub-idx-cedula-focus-shadow: rgba(13, 110, 253, 0.25);
  --pub-idx-whatsapp-bg: #25d366;
  --pub-idx-whatsapp-hover: #20b958;
  --pub-idx-whatsapp-icon: #ffffff;
  --pub-idx-link-wsp: #ac0001;
  --pub-idx-preview-summary-row1: #2c1f14;
  --pub-idx-alert-cartons-text: #111111;
  --pub-idx-btn-processing-bg: #000000;
  --pub-idx-btn-processing-text: #ffffff;
  --pub-idx-btn-black2-bg: #000000;
  --pub-idx-btn-black2-text: #ffffff;
  --pub-idx-btn-black2-hover-bg: #000000;
  --pub-idx-btn-black2-hover-text: #ffffff;
  background: radial-gradient(circle at center, #273750 40%, #0f1221 70%) !important;
}
body.page-brand-index .site-header .navbar.navbar-dark.bg-madera,
body.page-brand-index .site-header .navbar-dark.bg-madera {
  background: var(--idx-header) !important;
}
body.page-brand-index .offcanvas-start {
  background: var(--idx-header) !important;
}
body.page-brand-index .main-index .card {
  background-color: var(--idx-form-bg) !important;
}
body.page-brand-index .main-index .alert-cartons {
  background-color: var(--idx-highlight) !important;
  color: var(--pub-idx-alert-cartons-text) !important;
}
body.page-brand-index .main-index .bubble-random {
  background: var(--idx-highlight) !important;
  color: #1c1c1c !important;
}
body.page-brand-index .main-index .vd-preview-summary {
  border-color: color-mix(in srgb, var(--idx-highlight) 45%, #e8dcc4);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--idx-highlight) 18%, #fff) 0%,
    color-mix(in srgb, var(--idx-highlight) 28%, #fff9ee) 100%
  ) !important;
}
body.page-brand-index .main-index .vd-preview-summary__row1 {
  color: var(--pub-idx-preview-summary-row1);
}
body.page-brand-index footer.grass-footer {
  background-color: var(--idx-footer) !important;
}

/* Tema extendido — index.php (variables en body.page-brand-index + reglas) */
body.page-brand-index .font-1 {
  color: var(--pub-idx-heading) !important;
  text-shadow: 2px 3px 7px black !important;
}
body.page-brand-index .paragraph {
  color: var(--pub-idx-paragraph);
}
body.page-brand-index .card-bd p,
body.page-brand-index .card-body p {
  color: var(--pub-idx-card-inner-text) !important;
}
body.page-brand-index .btn-primary,
body.page-brand-index a.btn-primary,
body.page-brand-index button.btn-primary {
  background-color: var(--pub-idx-btn-primary-bg) !important;
  color: var(--pub-idx-btn-primary-text) !important;
  border-color: transparent !important;
}
body.page-brand-index .btn-primary:hover,
body.page-brand-index a.btn-primary:hover,
body.page-brand-index button.btn-primary:hover {
  background-color: var(--pub-idx-btn-primary-hover) !important;
}
body.page-brand-index .btn:focus-visible,
body.page-brand-index a.btn:focus-visible,
body.page-brand-index button.btn:focus-visible {
  background-color: var(--pub-idx-btn-primary-bg) !important;
}
body.page-brand-index .btn-secondary,
body.page-brand-index a.btn-secondary,
body.page-brand-index button.btn-secondary {
  background-color: var(--pub-idx-btn-secondary-bg) !important;
  color: var(--pub-idx-btn-secondary-text) !important;
  border-color: transparent !important;
}
body.page-brand-index .btn-secondary:hover,
body.page-brand-index a.btn-secondary:hover,
body.page-brand-index button.btn-secondary:hover {
  background-color: var(--pub-idx-btn-secondary-hover) !important;
}
body.page-brand-index .btn-secondary:focus-visible,
body.page-brand-index a.btn-secondary:focus-visible,
body.page-brand-index button.btn-secondary:focus-visible {
  background-color: var(--pub-idx-btn-secondary-bg) !important;
}
body.page-brand-index .label-cantidad {
  color: var(--pub-idx-label-cantidad) !important;
}
body.page-brand-index .btn-operador {
  background-color: var(--pub-idx-btn-operador-bg);
  color: var(--pub-idx-btn-operador-text);
}
body.page-brand-index .btn-operador:hover {
  background-color: var(--pub-idx-btn-operador-hover);
}
body.page-brand-index #grid-cartones .bubble {
  background: var(--pub-idx-bubble-bg);
  color: var(--pub-idx-bubble-text);
}
body.page-brand-index #grid-cartones .bubble.active {
  background: var(--pub-idx-bubble-active-bg) !important;
  color: var(--pub-idx-bubble-active-text) !important;
}
body.page-brand-index #modalSelectorSorteo {
  background: var(--pub-idx-modal-backdrop) !important;
}
body.page-brand-index .promo-ribbon {
  background: var(--pub-idx-promo-ribbon-bg);
  color: var(--pub-idx-promo-ribbon-text);
}
body.page-brand-index #promoStrip .sorteo-meta-bar__item--promo .sorteo-meta-bar__label {
  color: var(--pub-idx-meta-muted);
}
body.page-brand-index #promoStrip .sorteo-meta-bar__item--promo .sorteo-meta-bar__value {
  color: var(--pub-idx-meta-value);
}
body.page-brand-index #promoStrip .sorteo-meta-bar__item--promo .sorteo-meta-bar__value i {
  color: var(--pub-idx-meta-accent-icon);
}
body.page-brand-index .vd-preview-promo-chip {
  color: var(--pub-idx-meta-value);
}
body.page-brand-index .promo-saving {
  color: var(--pub-idx-promo-saving-text);
}
body.page-brand-index .promo-saving strong {
  color: var(--pub-idx-promo-saving-strong);
}
body.page-brand-index .payment-method-card {
  border-color: var(--pub-idx-payment-border) !important;
}
body.page-brand-index .cedula-input-wrapper {
  background: var(--pub-idx-cedula-bg);
  border-color: var(--pub-idx-cedula-border);
}
body.page-brand-index .cedula-input-wrapper:focus-within {
  border-color: var(--pub-idx-cedula-focus-border);
  box-shadow: 0 0 0 0.25rem var(--pub-idx-cedula-focus-shadow);
}
body.page-brand-index .cedula-tipo {
  background-color: var(--pub-idx-cedula-tipo-bg) !important;
}
body.page-brand-index .whatsapp-float {
  background-color: var(--pub-idx-whatsapp-bg);
  color: var(--pub-idx-whatsapp-icon) !important;
}
body.page-brand-index .whatsapp-float:hover {
  background-color: var(--pub-idx-whatsapp-hover);
  color: var(--pub-idx-whatsapp-icon) !important;
}
body.page-brand-index .whatsapp-float i {
  color: var(--pub-idx-whatsapp-icon) !important;
}
body.page-brand-index .link-wsp {
  color: var(--pub-idx-link-wsp);
}
body.page-brand-index .btn-processing,
body.page-brand-index .btn-processing:disabled,
body.page-brand-index .btn-processing.btn-secondary:disabled {
  background-color: var(--pub-idx-btn-processing-bg) !important;
  color: var(--pub-idx-btn-processing-text) !important;
}
body.page-brand-index .iti__selected-dial-code,
body.page-brand-index .iti__country-name {
  color: inherit;
}
body.page-brand-index button.btn-black-2,
body.page-brand-index a.btn-black-2 {
  background-color: var(--pub-idx-btn-black2-bg) !important;
  color: var(--pub-idx-btn-black2-text) !important;
  border-color: transparent !important;
}
body.page-brand-index button.btn-black-2:hover,
body.page-brand-index a.btn-black-2:hover {
  background-color: var(--pub-idx-btn-black2-hover-bg) !important;
  color: var(--pub-idx-btn-black2-hover-text) !important;
}
body.page-brand-index button.btn-black-2:focus-visible,
body.page-brand-index a.btn-black-2:focus-visible {
  background-color: var(--pub-idx-btn-black2-bg) !important;
  color: var(--pub-idx-btn-black2-text) !important;
}


/* view_draw.php — body.page-brand-view-draw (misma estructura de bloques que index) */
body.page-brand-view-draw,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) {
  --pub-vd-heading: #000000;
  --pub-vd-paragraph: #444444;
  --pub-vd-card-inner-text: #ffffff;
  --pub-vd-btn-primary-bg: #ffdb4f;
  --pub-vd-btn-primary-text: #000000;
  --pub-vd-btn-primary-hover: #f9cf26;
  --pub-vd-btn-secondary-bg: #6a2818;
  --pub-vd-btn-secondary-text: #ffffff;
  --pub-vd-btn-secondary-hover: #581d0f;
  --pub-vd-label-cantidad: #ffffff;
  --pub-vd-btn-operador-bg: #fff4ca;
  --pub-vd-btn-operador-text: #000000;
  --pub-vd-btn-operador-hover: #fad282;
  --pub-vd-bubble-bg: #ffffff;
  --pub-vd-bubble-text: #000000;
  --pub-vd-bubble-active-bg: #000000;
  --pub-vd-bubble-active-text: #ffffff;
  --pub-vd-modal-backdrop: rgb(0 0 0 / 60%);
  --pub-vd-promo-ribbon-bg: #ffcc4d;
  --pub-vd-promo-ribbon-text: #3a2a00;
  --pub-vd-meta-muted: #6b5b48;
  --pub-vd-meta-value: #2c1f14;
  --pub-vd-meta-accent-icon: #6a2818;
  --pub-vd-promo-saving-text: #0b3c74;
  --pub-vd-promo-saving-strong: #ffd74a;
  --pub-vd-payment-border: #ffdb4f;
  --pub-vd-cedula-bg: #ffffff;
  --pub-vd-cedula-border: #ced4da;
  --pub-vd-cedula-tipo-bg: #fbf7da;
  --pub-vd-cedula-focus-border: #86b7fe;
  --pub-vd-cedula-focus-shadow: rgba(13, 110, 253, 0.25);
  --pub-vd-whatsapp-bg: #25d366;
  --pub-vd-whatsapp-hover: #20b958;
  --pub-vd-whatsapp-icon: #ffffff;
  --pub-vd-link-wsp: #ac0001;
  --pub-vd-preview-summary-row1: #2c1f14;
  --pub-vd-alert-cartons-text: #111111;
  --pub-vd-btn-processing-bg: #000000;
  --pub-vd-btn-processing-text: #ffffff;
  --pub-vd-nav-link-active: var(--b-accent);
  --pub-vd-footer-text: #ffffff;
  --pub-vd-iti-dial-text: #212529;
  --pub-vd-iti-list-bg: #ffffff;
  --pub-vd-channel-bar-text: #ffffff;
  --pub-vd-account-btn-hover-text: #000000;
  --pub-vd-atc-marco: #9b1919;
  --pub-vd-atc-acento: #8b0000;
  --pub-vd-atc-celda-bg: #fdf8e7;
  --pub-vd-atc-celda-hover: #f7ecc9;
  --pub-vd-atc-azar-bg: #ffc93c;
  --pub-vd-atc-azar-text: #5b3a00;
  --pub-vd-atc-estrella: #f3b31a;
  --pub-vd-atc-estrella-borde: #b8860b;
  --pub-vd-pb-bola-bg: #ffffff;
  --pub-vd-pb-bola-text: #000000;
  --pub-vd-pb-sel-bg: #000000;
  --pub-vd-pb-sel-text: #ffffff;
  --pub-vd-pb-fondo: #ffffff;
  --pub-vd-pb-titulo: #000000;
  --pub-vd-pb-texto: #333333;
  --pub-vd-pb-btn-bg: #ffdb4f;
  --pub-vd-pb-btn-text: #000000;
  --pub-vd-ruleta-compra-titulo: #6a2818;
  --pub-vd-ruleta-compra-texto: #212529;
  --pub-vd-ruleta-compra-gano-bg: #ffdb4f;
  --pub-vd-ruleta-compra-gano-text: #000000;
  --pub-vd-ruleta-compra-no-bg: #6a2818;
  --pub-vd-ruleta-compra-no-text: #ffffff;
  --pub-vd-ruleta-compra-borde: #ffffff;
  --pub-vd-ruleta-compra-puntero: #212529;
  --pub-vd-ruleta-compra-centro-bg: #ffffff;
  --pub-vd-ruleta-compra-centro-text: #6a2818;
  --pub-vd-ruleta-compra-btn-bg: #ffdb4f;
  --pub-vd-ruleta-compra-btn-text: #000000;
  --pub-vd-modal-header-bg: #6a2818;
  --pub-vd-modal-header-text: #ffffff;
  --pub-vd-modal-body-bg: #ffffff;
  --pub-vd-modal-body-text: #212529;
  --pub-vd-modal-label: #000000;
  --pub-vd-site-body-text: #333333;
  --pub-vd-site-link: #0d6efd;
  --pub-vd-site-link-hover: #0a58ca;
  --pub-vd-site-card-bg: var(--b-primary);
  --pub-vd-site-card-text: #ffffff;
  --pub-vd-site-panel-header-bg: var(--b-primary);
  --pub-vd-site-panel-header-text: #ffffff;
  --pub-vd-site-panel-warning-bg: var(--b-accent);
  --pub-vd-site-panel-warning-text: #111111;
  --pub-vd-site-input-bg: #ffffff;
  --pub-vd-site-input-text: #212529;
  --pub-vd-site-input-border: #ced4da;
  --pub-vd-site-input-focus-border: #86b7fe;
  --pub-vd-site-input-focus-shadow: rgba(13, 110, 253, 0.25);
  background: #fbf7da !important;
}
body.page-brand-view-draw .site-header .navbar.navbar-dark.bg-madera,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .site-header .navbar.navbar-dark.bg-madera,
body.page-brand-view-draw .site-header .navbar-dark.bg-madera,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .site-header .navbar-dark.bg-madera {
  background: var(--vd-header) !important;
}
body.page-brand-view-draw .offcanvas-start,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .offcanvas-start {
  background: var(--vd-header) !important;
}
body.page-brand-view-draw .main-index .card,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .main-index .card {
  background-color: var(--vd-form-bg) !important;
}
body.page-brand-view-draw .main-index .alert-cartons,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .main-index .alert-cartons {
  background-color: var(--vd-highlight) !important;
  color: var(--pub-vd-alert-cartons-text) !important;
}
body.page-brand-view-draw .main-index .bubble-random,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .main-index .bubble-random {
  background: var(--vd-highlight) !important;
  color: #1c1c1c !important;
}
body.page-brand-view-draw .main-index .vd-preview-summary,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .main-index .vd-preview-summary {
  border-color: color-mix(in srgb, var(--vd-highlight) 45%, #e8dcc4);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--vd-highlight) 18%, #fff) 0%,
    color-mix(in srgb, var(--vd-highlight) 28%, #fff9ee) 100%
  ) !important;
}
body.page-brand-view-draw .main-index .vd-preview-summary__row1,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .main-index .vd-preview-summary__row1 {
  color: var(--pub-vd-preview-summary-row1);
}
body.page-brand-view-draw footer.grass-footer,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) footer.grass-footer {
  background-color: var(--vd-footer) !important;
}

/* Tema extendido — view_draw.php */
body.page-brand-view-draw .font-1,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .font-1 {
  color: var(--pub-vd-heading) !important;
}
body.page-brand-view-draw .paragraph,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .paragraph {
  color: var(--pub-vd-paragraph);
}
body.page-brand-view-draw .card-bd p,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .card-bd p,
body.page-brand-view-draw .card-body p,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .card-body p {
  color: var(--pub-vd-card-inner-text) !important;
}
body.page-brand-view-draw,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) {
    background-size: cover !important;
}
body.page-brand-view-draw .btn-primary,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .btn-primary,
body.page-brand-view-draw a.btn-primary,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) a.btn-primary,
body.page-brand-view-draw button.btn-primary,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) button.btn-primary {
  background-color: var(--pub-vd-btn-primary-bg) !important;
  color: var(--pub-vd-btn-primary-text) !important;
  border-color: transparent !important;
}
body.page-brand-view-draw .btn-primary:hover,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .btn-primary:hover,
body.page-brand-view-draw a.btn-primary:hover,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) a.btn-primary:hover,
body.page-brand-view-draw button.btn-primary:hover,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) button.btn-primary:hover {
  background-color: var(--pub-vd-btn-primary-hover) !important;
}
body.page-brand-view-draw .btn:focus-visible,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .btn:focus-visible,
body.page-brand-view-draw a.btn:focus-visible,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) a.btn:focus-visible,
body.page-brand-view-draw button.btn:focus-visible,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) button.btn:focus-visible {
  background-color: var(--pub-vd-btn-primary-bg) !important;
}
body.page-brand-view-draw .btn-secondary,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .btn-secondary,
body.page-brand-view-draw a.btn-secondary,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) a.btn-secondary,
body.page-brand-view-draw button.btn-secondary,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) button.btn-secondary {
  background-color: var(--pub-vd-btn-secondary-bg) !important;
  color: var(--pub-vd-btn-secondary-text) !important;
  border-color: transparent !important;
}
body.page-brand-view-draw .btn-secondary:hover,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .btn-secondary:hover,
body.page-brand-view-draw a.btn-secondary:hover,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) a.btn-secondary:hover,
body.page-brand-view-draw button.btn-secondary:hover,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) button.btn-secondary:hover {
  background-color: var(--pub-vd-btn-secondary-hover) !important;
}
body.page-brand-view-draw .btn-secondary:focus-visible,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .btn-secondary:focus-visible,
body.page-brand-view-draw a.btn-secondary:focus-visible,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) a.btn-secondary:focus-visible,
body.page-brand-view-draw button.btn-secondary:focus-visible,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) button.btn-secondary:focus-visible {
  background-color: var(--pub-vd-btn-secondary-bg) !important;
}
body.page-brand-view-draw .label-cantidad,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .label-cantidad {
  color: var(--pub-vd-label-cantidad) !important;
}
body.page-brand-view-draw .btn-operador,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .btn-operador {
  background-color: var(--pub-vd-btn-operador-bg);
  color: var(--pub-vd-btn-operador-text);
}
body.page-brand-view-draw .btn-operador:hover,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .btn-operador:hover {
  background-color: var(--pub-vd-btn-operador-hover);
}
body.page-brand-view-draw #grid-cartones .bubble,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) #grid-cartones .bubble {
  background: var(--pub-vd-bubble-bg);
  color: var(--pub-vd-bubble-text);
}
body.page-brand-view-draw #grid-cartones .bubble.active,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) #grid-cartones .bubble.active {
  background: var(--pub-vd-bubble-active-bg) !important;
  color: var(--pub-vd-bubble-active-text) !important;
}
body.page-brand-view-draw #modalSelectorSorteo,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) #modalSelectorSorteo {
  background: var(--pub-vd-modal-backdrop) !important;
}
body.page-brand-view-draw .promo-ribbon,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .promo-ribbon {
  background: var(--pub-vd-promo-ribbon-bg);
  color: var(--pub-vd-promo-ribbon-text);
}
body.page-brand-view-draw #promoStrip .sorteo-meta-bar__item--promo .sorteo-meta-bar__label,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) #promoStrip .sorteo-meta-bar__item--promo .sorteo-meta-bar__label {
  color: var(--pub-vd-meta-muted);
}
body.page-brand-view-draw #promoStrip .sorteo-meta-bar__item--promo .sorteo-meta-bar__value,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) #promoStrip .sorteo-meta-bar__item--promo .sorteo-meta-bar__value {
  color: var(--pub-vd-meta-value);
}
body.page-brand-view-draw #promoStrip .sorteo-meta-bar__item--promo .sorteo-meta-bar__value i,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) #promoStrip .sorteo-meta-bar__item--promo .sorteo-meta-bar__value i {
  color: var(--pub-vd-meta-accent-icon);
}
body.page-brand-view-draw .vd-preview-promo-chip,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .vd-preview-promo-chip {
  color: var(--pub-vd-meta-value);
}
body.page-brand-view-draw .promo-saving,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .promo-saving {
  color: var(--pub-vd-promo-saving-text);
}
body.page-brand-view-draw .promo-saving strong,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .promo-saving strong {
  color: var(--pub-vd-promo-saving-strong);
}
body.page-brand-view-draw .payment-method-card,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .payment-method-card {
  border-color: var(--pub-vd-payment-border) !important;
}
body.page-brand-view-draw .cedula-input-wrapper,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .cedula-input-wrapper {
  background: var(--pub-vd-cedula-bg);
  border-color: var(--pub-vd-cedula-border);
}
body.page-brand-view-draw .cedula-input-wrapper:focus-within,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .cedula-input-wrapper:focus-within {
  border-color: var(--pub-vd-cedula-focus-border);
  box-shadow: 0 0 0 0.25rem var(--pub-vd-cedula-focus-shadow);
}
body.page-brand-view-draw .cedula-tipo,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .cedula-tipo {
  background-color: var(--pub-vd-cedula-tipo-bg) !important;
}
body.page-brand-view-draw .whatsapp-float,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .whatsapp-float {
  background-color: var(--pub-vd-whatsapp-bg);
  color: var(--pub-vd-whatsapp-icon) !important;
}
body.page-brand-view-draw .whatsapp-float:hover,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .whatsapp-float:hover {
  background-color: var(--pub-vd-whatsapp-hover);
  color: var(--pub-vd-whatsapp-icon) !important;
}
body.page-brand-view-draw .whatsapp-float i,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .whatsapp-float i {
  color: var(--pub-vd-whatsapp-icon) !important;
}
body.page-brand-view-draw .link-wsp,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .link-wsp {
  color: var(--pub-vd-link-wsp);
}
body.page-brand-view-draw .btn-processing,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .btn-processing,
body.page-brand-view-draw .btn-processing:disabled,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .btn-processing:disabled,
body.page-brand-view-draw .btn-processing.btn-secondary:disabled,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .btn-processing.btn-secondary:disabled {
  background-color: var(--pub-vd-btn-processing-bg) !important;
  color: var(--pub-vd-btn-processing-text) !important;
}
body.page-brand-view-draw .iti__selected-dial-code,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .iti__selected-dial-code,
body.page-brand-view-draw .iti__country-name,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .iti__country-name {
  color: inherit;
}

body.page-brand-view-draw footer.grass-footer::before,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) footer.grass-footer::before {background:url("https://www.bingoelgocho.com/uploads/system/grass_border.png?v=1741759726") repeat-x center!important;}

/* Borde decorativo superior del footer (imagen repetible por vista) */
body.page-brand-index footer.grass-footer::before{background:url("https://www.bingoelgocho.com/uploads/system/footer_special.png?v=1754969530") repeat-x center!important;}
/* Tema del sitio: menú, footer, teléfono (intl-tel-input) y popups.
 * Popups con diseño propio quedan fuera: añade la clase modal-own-style al .modal (o su id aquí). */
body.page-brand-view-draw .navbar .nav-link:not(.vendedor-menu *):hover,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .navbar .nav-link:not(.vendedor-menu *):hover,
body.page-brand-view-draw .navbar .nav-link:not(.vendedor-menu *).active,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .navbar .nav-link:not(.vendedor-menu *).active {
  color: var(--pub-vd-nav-link-active) !important;
}
body.page-brand-view-draw .offcanvas .nav-link:not(.vendedor-menu-mobile *):hover,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .offcanvas .nav-link:not(.vendedor-menu-mobile *):hover,
body.page-brand-view-draw .offcanvas .nav-link:not(.vendedor-menu-mobile *).active,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .offcanvas .nav-link:not(.vendedor-menu-mobile *).active,
body.page-brand-view-draw .offcanvas .vendedor-menu-mobile:has(a.nav-link-registro),
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .offcanvas .vendedor-menu-mobile:has(a.nav-link-registro) {
  background: var(--pub-vd-nav-link-active) !important;
}
/* Botones Mi cuenta / Ingresar (li.vendedor-menu): su propio color al pasar el mouse, no el del menú */
body.page-brand-view-draw .navbar .vendedor-menu a.nav-link:hover,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .navbar .vendedor-menu a.nav-link:hover,
body.page-brand-view-draw .offcanvas .vendedor-menu-mobile a.nav-link:hover,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .offcanvas .vendedor-menu-mobile a.nav-link:hover {
  color: var(--pub-vd-account-btn-hover-text) !important;
}
body.page-brand-view-draw footer.grass-footer,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) footer.grass-footer {
  color: var(--pub-vd-footer-text) !important;
}
body.page-brand-view-draw .iti__selected-dial-code,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .iti__selected-dial-code,
body.page-brand-view-draw .iti__selected-country,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .iti__selected-country,
body.page-brand-view-draw .iti__country-list .iti__country-name,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .iti__country-list .iti__country-name,
body.page-brand-view-draw .iti__country-list .iti__dial-code,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .iti__country-list .iti__dial-code {
  color: var(--pub-vd-iti-dial-text) !important;
}
body.page-brand-view-draw .iti__dropdown-content,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .iti__dropdown-content,
body.page-brand-view-draw .iti__country-list,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .iti__country-list {
  background: var(--pub-vd-iti-list-bg) !important;
  color: var(--pub-vd-iti-dial-text) !important;
}
body.page-brand-view-draw .iti__country.iti__highlight,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .iti__country.iti__highlight {
  background: color-mix(in srgb, var(--pub-vd-iti-list-bg) 92%, #000) !important;
}
body.page-brand-view-draw .modal:not(.modal-own-style):not(#promoDiaModal):not(#solidarioFondosModal):not(.wa-channel-modal):not(#premioModal):not(#modalCertificadoCnc) .modal-header,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .modal:not(.modal-own-style):not(#promoDiaModal):not(#solidarioFondosModal):not(.wa-channel-modal):not(#premioModal):not(#modalCertificadoCnc) .modal-header {
  background: var(--pub-vd-modal-header-bg) !important;
  color: var(--pub-vd-modal-header-text) !important;
  border-bottom-color: color-mix(in srgb, var(--pub-vd-modal-header-bg) 80%, #000) !important;
}
body.page-brand-view-draw .modal:not(.modal-own-style):not(#promoDiaModal):not(#solidarioFondosModal):not(.wa-channel-modal):not(#premioModal):not(#modalCertificadoCnc) .modal-header .modal-title,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .modal:not(.modal-own-style):not(#promoDiaModal):not(#solidarioFondosModal):not(.wa-channel-modal):not(#premioModal):not(#modalCertificadoCnc) .modal-header .modal-title,
body.page-brand-view-draw .modal:not(.modal-own-style):not(#promoDiaModal):not(#solidarioFondosModal):not(.wa-channel-modal):not(#premioModal):not(#modalCertificadoCnc) .modal-header h5,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .modal:not(.modal-own-style):not(#promoDiaModal):not(#solidarioFondosModal):not(.wa-channel-modal):not(#premioModal):not(#modalCertificadoCnc) .modal-header h5 {
  color: var(--pub-vd-modal-header-text) !important;
}
body.page-brand-view-draw .modal:not(.modal-own-style):not(#promoDiaModal):not(#solidarioFondosModal):not(.wa-channel-modal):not(#premioModal):not(#modalCertificadoCnc) .modal-header .btn-close,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .modal:not(.modal-own-style):not(#promoDiaModal):not(#solidarioFondosModal):not(.wa-channel-modal):not(#premioModal):not(#modalCertificadoCnc) .modal-header .btn-close {
  --bs-btn-close-color: var(--pub-vd-modal-header-text);
}
body.page-brand-view-draw .modal:not(.modal-own-style):not(#promoDiaModal):not(#solidarioFondosModal):not(.wa-channel-modal):not(#premioModal):not(#modalCertificadoCnc) .modal-content,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .modal:not(.modal-own-style):not(#promoDiaModal):not(#solidarioFondosModal):not(.wa-channel-modal):not(#premioModal):not(#modalCertificadoCnc) .modal-content,
body.page-brand-view-draw .modal:not(.modal-own-style):not(#promoDiaModal):not(#solidarioFondosModal):not(.wa-channel-modal):not(#premioModal):not(#modalCertificadoCnc) .modal-body,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .modal:not(.modal-own-style):not(#promoDiaModal):not(#solidarioFondosModal):not(.wa-channel-modal):not(#premioModal):not(#modalCertificadoCnc) .modal-body {
  background-color: var(--pub-vd-modal-body-bg);
  color: var(--pub-vd-modal-body-text);
}
body.page-brand-view-draw .modal:not(.modal-own-style):not(#promoDiaModal):not(#solidarioFondosModal):not(.wa-channel-modal):not(#premioModal):not(#modalCertificadoCnc) .modal-body label,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .modal:not(.modal-own-style):not(#promoDiaModal):not(#solidarioFondosModal):not(.wa-channel-modal):not(#premioModal):not(#modalCertificadoCnc) .modal-body label {
  color: var(--pub-vd-modal-label) !important;
}
.site-header a.subheader-canal,
.site-header a.subheader-canal:hover,
.site-header a.subheader-canal:focus,
.site-header a.subheader-canal * {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* Mi cuenta: código de afiliado sobre la franja de acento del menú lateral (cuenta.css lo pinta en blanco) */
body.app-brand-area .side-top .username-code {
  color: #000000 !important;
}

/* Tema del sitio: páginas públicas que no son el diario */
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)).background-dollar {
  background-image: url("https://www.bingoelgocho.com/uploads/system/background_dollar.png?v=1742757254") !important;
  background-size: cover !important;
}
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) {
  color: var(--pub-vd-site-body-text) !important;
}
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) a:not(.btn):not(.navbar-brand):not(.nav-link):not(.whatsapp-float) {
  color: var(--pub-vd-site-link);
}
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) a:not(.btn):not(.navbar-brand):not(.nav-link):not(.whatsapp-float):hover {
  color: var(--pub-vd-site-link-hover);
}
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .card {
  background-color: var(--pub-vd-site-card-bg) !important;
  border-color: color-mix(in srgb, var(--pub-vd-site-card-bg) 85%, #000) !important;
}
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .card-body {
  color: var(--pub-vd-site-card-text) !important;
}
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .card-title,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .card-text,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .paragraph {
  color: var(--pub-vd-site-card-text) !important;
}
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .card-header,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .bg-success,
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .bg-dark {
  background-color: var(--pub-vd-site-panel-header-bg) !important;
  color: var(--pub-vd-site-panel-header-text) !important;
  border-color: color-mix(in srgb, var(--pub-vd-site-panel-header-bg) 80%, #000) !important;
}
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .bg-warning {
  background-color: var(--pub-vd-site-panel-warning-bg) !important;
  color: var(--pub-vd-site-panel-warning-text) !important;
}
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .form-control {
  background-color: var(--pub-vd-site-input-bg);
  color: var(--pub-vd-site-input-text);
  border-color: var(--pub-vd-site-input-border);
}
body.bg-light:where(:not(.page-brand-index):not(.page-brand-view-draw):not(.bingo-module):not(.login-page):not(.app-brand-area)) .form-control:focus {
  border-color: var(--pub-vd-site-input-focus-border);
  box-shadow: 0 0 0 0.25rem var(--pub-vd-site-input-focus-shadow);
}


/* Módulo Bingo (bingo.css + tablero.css): variables solo bajo body.bingo-module */
body.bingo-module {
  --color-bg: #fbf7da;
  --color-primary: #6b2818;
  --color-primary-dark: #5a2115;
  --color-primary-light: #7d3020;
  --color-accent: #ffd402;
  --color-accent-dark: #e6bf00;
  --color-text-light: #fbf7da;
  --color-text-dark: #1a1a1a;
  --color-danger: #ef4444;
  --color-danger-hover: #dc2626;
  --color-success: #22c55e;
  --color-info: #3b82f6;
  --tablero-bg: #fbf7da;
  --tablero-primary: #6a2818;
  --tablero-accent: #ffd74a;
  --tablero-white: #ffffff;
  --tablero-dark: #1d1d1b;
  --tablero-green: #124723;
  --color-b: #3b82f6;
  --color-i: #ef4444;
  --color-n: #6b7280;
  --color-g: #22c55e;
  --color-o: #ffd74a;
  --ultimas-oro: #fdd85d;
  --ultimas-marron: #5d2117;
  --ball-called-bg: #ff0000;
  --ball-last-bg: #ef1400;
  --ball-last-ring: #ffb74d;
  --grid-surface: #ffffff;
  --soporte-ganadores-bar-bg: #1a1a1a;
  --sello-franja-texto: #6a2818;
  --sello-ok: #124723;
  --sello-error: #dc2626;
  --primera-bola-acento: #ffd74a;
  --sello-ensayo: #b45309;
  --modal-config-surface: #e8e8e8;

}