/* ==========================================================================
   BossBli WebTV - Sistema de Tema Claro / Oscuro Unificado
   Paleta 100% Cálida, Alto Contraste (WCAG AA/AAA), CERO Azul
   ========================================================================== */

/* ── Botón Toggle en Esquina Superior DERECHA (Auth / Standalone) ────────── */
.theme-toggle-corner {
  position: fixed;
  top: 18px;
  right: 18px;
  left: auto;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-2, #191510);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.12));
  color: var(--gold, #ee6844);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease,
              color 0.2s ease;
  outline: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.theme-toggle-corner:hover {
  transform: scale(1.08) translateY(-1px);
  border-color: var(--gold, #ee6844);
  box-shadow: 0 6px 20px rgba(238, 104, 68, 0.28);
  color: var(--gold-bright, #ff9166);
}

.theme-toggle-corner:active {
  transform: scale(0.95);
}

/* ── Botón Toggle para Menús y Topbars (Admin / SuperAdmin / Player / Web) ── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2, #191510);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  color: var(--gold, #ee6844);
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  flex-shrink: 0;
  margin-left: 6px;
}

.theme-toggle-btn:hover {
  transform: scale(1.06);
  border-color: var(--gold, #ee6844);
  color: var(--gold-bright, #ff9166);
  background: var(--surface-hover, #261f19);
}

.theme-toggle-btn svg,
.theme-toggle-corner svg {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-toggle-btn:hover svg,
.theme-toggle-corner:hover svg {
  transform: rotate(20deg);
}

/* ==========================================================================
   TEMA CLARO GLOBAL: VARIABLES DE MÁXIMA ESPECIFICIDAD
   Garantiza anular cualquier :root posterior en la cascada
   ========================================================================== */
:root[data-theme="light"],
html[data-theme="light"],
html[data-theme="light"] :root {
  color-scheme: light !important;

  /* Fondos Cálidos */
  --bg: #fbf8f4 !important;
  --surface: #ffffff !important;
  --surface-2: #f4ede2 !important;
  --surface-3: #eae0d2 !important;
  --surface-hover: #f0e6d8 !important;
  --bg-raised: #ffffff !important;
  --bg-card: #ffffff !important;

  /* Líneas y Bordes Cálidos */
  --line: rgba(40, 30, 20, 0.12) !important;
  --line-light: rgba(40, 30, 20, 0.08) !important;

  /* Tipografía de Alto Contraste (Carbón y Grafito Cálido) */
  --text: #1c1611 !important;
  --ink: #1c1611 !important;
  --muted: #5c4e40 !important;
  --ink-faint: #5c4e40 !important;
  --muted-light: #3d3329 !important;
  --ink-dim: #3d3329 !important;

  /* Acentos de Marca Cálidos (Naranja y Oro Cálido sin azul) */
  --primary: #ee6844 !important;
  --primary-glow: rgba(238, 104, 68, 0.25) !important;
  --accent: #ee6844 !important;
  --accent-glow: rgba(238, 104, 68, 0.25) !important;
  --gold: #b8621b !important;
  --gold-bright: #ee6844 !important;
  --gold-glow: rgba(184, 98, 27, 0.2) !important;
  --teal: #a83e28 !important;
  --teal-bright: #ee6844 !important;

  /* Semánticos */
  --green: #15803d !important;
  --green-glow: rgba(21, 128, 61, 0.2) !important;
  --red: #b91c1c !important;
  --red-glow: rgba(185, 28, 28, 0.2) !important;
  --danger: #b91c1c !important;
  --blue: #b8621b !important;
  --blue-glow: rgba(184, 98, 27, 0.2) !important;
}

/* ── Estilos de Botones de Tema en Modo Claro ────────────────────────────── */
html[data-theme="light"] .theme-toggle-corner,
html[data-theme="light"] .theme-toggle-btn {
  background: #ffffff !important;
  border-color: rgba(40, 30, 20, 0.15) !important;
  color: #ee6844 !important;
  box-shadow: 0 3px 10px rgba(40, 30, 20, 0.08) !important;
}

html[data-theme="light"] .theme-toggle-corner:hover,
html[data-theme="light"] .theme-toggle-btn:hover {
  background: #f4ede2 !important;
  border-color: #ee6844 !important;
  color: #b8621b !important;
}

/* ── Reglas Globales de Base en Tema Claro ───────────────────────────────── */
html[data-theme="light"] body {
  background-color: #fbf8f4 !important;
  color: #1c1611 !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
  color: #1c1611 !important;
}

html[data-theme="light"] a {
  color: inherit;
}


/* ── Modales Base en Tema Claro ─────────────────────────────────────────── */
html[data-theme="light"] .card-sub {
  color: #5c4e40 !important;
}

html[data-theme="light"] .btn-webtv-player {
  background: #f4ede2 !important;
  border: 1px solid rgba(40, 30, 20, 0.14) !important;
  color: #1c1611 !important;
}

html[data-theme="light"] .btn-webtv-player:hover {
  background: #eae0d2 !important;
  border-color: #ee6844 !important;
  color: #ee6844 !important;
}

/* Tablas Admin y SuperAdmin */
html[data-theme="light"] table,
html[data-theme="light"] .data-table,
html[data-theme="light"] .admin-table {
  background: #ffffff !important;
}

html[data-theme="light"] table thead th,
html[data-theme="light"] .data-table thead th,
html[data-theme="light"] .admin-table thead th {
  background: #f4ede2 !important;
  color: #1c1611 !important;
  border-bottom: 1px solid rgba(40, 30, 20, 0.12) !important;
  font-weight: 700 !important;
}

html[data-theme="light"] table tbody td,
html[data-theme="light"] .data-table tbody td,
html[data-theme="light"] .admin-table tbody td {
  color: #1c1611 !important;
  border-bottom: 1px solid rgba(40, 30, 20, 0.08) !important;
}

html[data-theme="light"] table tbody tr:hover,
html[data-theme="light"] .data-table tbody tr:hover,
html[data-theme="light"] .admin-table tbody tr:hover {
  background: #fbf5ee !important;
}

/* Modales Refinados y Profesionales */
html[data-theme="light"] .modal-backdrop {
  background: rgba(20, 15, 10, 0.45) !important;
  backdrop-filter: blur(8px) !important;
}

html[data-theme="light"] .modal-dialog,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .boss-modal-box,
html[data-theme="light"] .modal-box {
  background: #ffffff !important;
  border: 1px solid rgba(40, 30, 20, 0.16) !important;
  color: #1c1611 !important;
  box-shadow: 0 25px 60px rgba(40, 30, 20, 0.16), 0 4px 16px rgba(40, 30, 20, 0.06) !important;
}

html[data-theme="light"] .modal-header,
html[data-theme="light"] .boss-modal-header {
  background: #fbf8f4 !important;
  border-bottom: 1px solid rgba(40, 30, 20, 0.1) !important;
}

html[data-theme="light"] .modal-title {
  color: #1c1611 !important;
}


/* ── Salvaguarda: NUNCA mostrar botón de esquina en páginas con header ───── */
.player-app-body .theme-toggle-corner,
.webtv-page .theme-toggle-corner,
.admin-layout .theme-toggle-corner,
.superadmin-layout .theme-toggle-corner {
  display: none !important;
}


/* ── Corrección Global de Letras Blancas en Tema Claro ──────────────────── */
html[data-theme="light"] .text-white,
html[data-theme="light"] .tc-white,
html[data-theme="light"] .tc-white-14,
html[data-theme="light"] .c-white,
html[data-theme="light"] .txt-white,
html[data-theme="light"] .txt-white-h3,
html[data-theme="light"] .txt-white-15,
html[data-theme="light"] .txt-white-12,
html[data-theme="light"] .txt-h4-16,
html[data-theme="light"] .font-white,
html[data-theme="light"] .white-text,
html[data-theme="light"] .modal-hdr-title,
html[data-theme="light"] .vod-server-val-white,
html[data-theme="light"] .ub-name,
html[data-theme="light"] .stat-chip-val,
html[data-theme="light"] .account-username,
html[data-theme="light"] .vip-plan-title,
html[data-theme="light"] .series-modal-title,
html[data-theme="light"] .series-episodes-title,
html[data-theme="light"] .ep-title,
html[data-theme="light"] .rows-empty h3,
html[data-theme="light"] .live-epg-now-title,
html[data-theme="light"] .channel-card-title,
html[data-theme="light"] .player-channel-thumb-fallback,
html[data-theme="light"] .player-channel-thumb-fallback .player-channel-initials,
html[data-theme="light"] .chk-page-title,
html[data-theme="light"] .chk-step-title,
html[data-theme="light"] .chk-plan-name,
html[data-theme="light"] .chk-summary-title,
html[data-theme="light"] .chk-summary-box-title,
html[data-theme="light"] .chk-input,
html[data-theme="light"] .checkout-form-control,
html[data-theme="light"] .player-faq-summary,
html[data-theme="light"] .tickets-hero-title,
html[data-theme="light"] .support-sidebar-title,
html[data-theme="light"] .support-chat-subject,
html[data-theme="light"] .ticket-modal-title,
html[data-theme="light"] .ck-heading,
html[data-theme="light"] .ck-card-title,
html[data-theme="light"] .checkout-input,
html[data-theme="light"] .period-btn,
html[data-theme="light"] .gateway-opt-title,
html[data-theme="light"] .summary-title,
html[data-theme="light"] .confirm-title,
html[data-theme="light"] .order-spec-val,
html[data-theme="light"] [style*="color:#fff" i],
html[data-theme="light"] [style*="color: #fff" i],
html[data-theme="light"] [style*="color:#ffffff" i],
html[data-theme="light"] [style*="color: #ffffff" i],
html[data-theme="light"] [style*="color:white" i],
html[data-theme="light"] [style*="color: white" i],
html[data-theme="light"] [style*="color:rgb(255" i],
html[data-theme="light"] [style*="color: rgb(255" i],
html[data-theme="light"] [style*="color:rgba(255" i],
html[data-theme="light"] [style*="color: rgba(255" i] {
  color: #1c1611 !important;
}

/* Forzar color oscuro en inputs y selects para evitar texto blanco en campos */
html[data-theme="light"] input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not(.btn),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  color: #1c1611 !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #9e8f80 !important;
}

/* Adaptación de fondos semitransparentes oscuros a tema claro */
html[data-theme="light"] [style*="background:rgba(255,255,255" i],
html[data-theme="light"] [style*="background: rgba(255,255,255" i],
html[data-theme="light"] [style*="background:rgba(255, 255, 255" i],
html[data-theme="light"] [style*="background: rgba(255, 255, 255" i] {
  background: rgba(40, 30, 20, 0.06) !important;
}

/* Excepciones donde el texto blanco es intencional sobre fondos de acento o de color primario */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-primary *,
html[data-theme="light"] .btn-primary .text-white,
html[data-theme="light"] .btn-primary .tc-white,
html[data-theme="light"] .btn-primary [style*="color" i],
html[data-theme="light"] .btn-gold,
html[data-theme="light"] .btn-gold *,
html[data-theme="light"] .btn-danger,
html[data-theme="light"] .btn-danger *,
html[data-theme="light"] .btn-checkout,
html[data-theme="light"] .btn-checkout *,
html[data-theme="light"] .btn-checkout [style*="color" i],
html[data-theme="light"] .badge-danger,
html[data-theme="light"] .badge-danger *,
html[data-theme="light"] .badge-primary,
html[data-theme="light"] .badge-primary *,
html[data-theme="light"] .badge-active,
html[data-theme="light"] .badge-active *,
html[data-theme="light"] .badge-spotlight,
html[data-theme="light"] .badge-spotlight *,
html[data-theme="light"] .player-popular-tag,
html[data-theme="light"] .player-popular-tag *,
html[data-theme="light"] .player-popular-tag [style*="color" i],
html[data-theme="light"] .billing-btn.active,
html[data-theme="light"] .billing-btn.active *,
html[data-theme="light"] .billing-btn.active [style*="color" i],
html[data-theme="light"] .chk-cycle-btn.active,
html[data-theme="light"] .chk-cycle-btn.active *,
html[data-theme="light"] .chk-cycle-btn.active [style*="color" i],
html[data-theme="light"] .invoices-filter-btn.active,
html[data-theme="light"] .invoices-filter-btn.active *,
html[data-theme="light"] .expiry-banner-renew,
html[data-theme="light"] .expiry-banner-renew *,
html[data-theme="light"] .expiry-banner-renew [style*="color" i],
html[data-theme="light"] .lang-opt-btn.active,
html[data-theme="light"] .lang-opt-btn.active *,
html[data-theme="light"] .wc-tab.active,
html[data-theme="light"] .wc-tab.active *,
html[data-theme="light"] .wc-maintab.active,
html[data-theme="light"] .wc-maintab.active *,
html[data-theme="light"] .promo-btn,
html[data-theme="light"] .promo-btn * {
  color: #ffffff !important;
}