/* OXIRA Base — Sistema de color de marca BestTV Play y base visual.
   Se carga en Front, Cliente y Admin antes del CSS específico de cada área. */

/* ==========================================================================
   1. TOKENS DE MARCA (medidos sobre el logo oficial besttvplay-marca.png)
   Único bloque :root en todo el archivo. Sin duplicados ni valores inventados.
   ========================================================================== */
:root {
  /* Colores de marca en estado puro */
  --btv-azul: #0074FF;         /* punta azul de la "b" */
  --btv-turquesa: #33BECA;     /* paso intermedio de la "b" */
  --btv-verde: #26F240;        /* punta verde de la "b" */

  /* Versiones para FONDO con texto blanco (los vivos no aguantan texto blanco):
     - blanco sobre azul-fondo  = 7.24:1 (accesible AAA)
     - blanco sobre verde-fondo = 5.02:1 (accesible AA)
     - para turquesa se usa carbón sobre turquesa = 8.42:1 (accesible AAA) */
  --btv-azul-fondo: #0052B8;
  --btv-azul-hover: #004396;
  --btv-azul-active: #003578;

  --btv-verde-fondo: #15803D;
  --btv-verde-hover: #166534;
  --btv-verde-active: #14532D;

  /* Estados interactivos y variantes para turquesa */
  --btv-turquesa-hover: #2AABBA;
  --btv-turquesa-active: #2298A6;
  --btv-turquesa-oscuro: #065F68; /* variante legible sobre blanco (> 5.5:1) */

  /* Fondos suaves y bordes para cajas y alertas */
  --btv-azul-suave: #EBF4FC;
  --btv-azul-borde: rgba(0, 116, 255, .25);

  --btv-turquesa-suave: #E8FAFC;
  --btv-turquesa-borde: rgba(51, 190, 202, .35);

  --btv-verde-suave: #EAFCEC;
  --btv-verde-borde: rgba(21, 128, 61, .30);

  /* Oscuro neutro (nunca azul-noche #071A29 ni #0D2233) */
  --btv-carbon: #111111;
  --btv-carbon-2: #1C1C1C;
  --btv-texto: #111111;

  /* El único degradado de la marca: la "b" del logo oficial */
  --btv-degradado: linear-gradient(90deg, #0074FF 0%, #33BECA 55%, #26F240 100%);

  /* ------------------------------------------------------------------------
     BOOTSTRAP 5: Solo se calibra --bs-primary al azul institucional.
     success, warning, danger e info NO se tocan (se quedan nativos de Bootstrap).
     ------------------------------------------------------------------------ */
  --bs-primary: var(--btv-azul);
  --bs-primary-rgb: 0, 116, 255;
  --bs-link-color: var(--btv-azul);
  --bs-link-color-rgb: 0, 116, 255;
  --bs-link-hover-color: var(--btv-azul-fondo);
  --bs-link-hover-color-rgb: 0, 82, 184;

  /* Aliases de compatibilidad */
  --bc-azul: var(--btv-azul);
  --bc-azul-osc: var(--btv-azul-fondo);
  --bc-turquesa: var(--btv-turquesa);
  --bc-lima: var(--btv-turquesa);
  --bc-carbon: var(--btv-carbon);
  --bc-texto: var(--btv-texto);
  /* Estos cuatro se habían quedado sin definición y las vistas los siguen
     usando (133 referencias): --bc-navy en 110 títulos del panel y del portal,
     --bc-celeste en 10 fondos suaves, --bc-lima-osc en 9 acentos y --bc-gris
     en 4. Sin ellos, `color: var(--bc-navy)` no aplica nada y el texto hereda
     lo que venga. Apuntan a los tokens nuevos; el navy de antes (#0D2233) era
     el azul-noche que se sacó, así que ahora es carbón neutro. */
  --bc-navy: var(--btv-carbon);
  --bc-navy-2: var(--btv-carbon-2);
  --bc-celeste: var(--btv-azul-suave);
  --bc-lima-osc: var(--btv-turquesa-oscuro);
  --bc-gris: #F8FAFC;
  /* Todavía lo usan la nav del portal y la vista de dispositivos. */
  --btv-celeste: var(--btv-azul-suave);

  /* OxiraUI */
  --oxui-info: var(--btv-azul);
  --oxui-acento: var(--btv-turquesa);
  --oxui-texto: var(--btv-texto);
}

body {
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  color: var(--btv-texto);
}

/* ==========================================================================
   2. BOTONES BASE E INTERACTIVIDAD GLOBAL
   ========================================================================== */
.btn {
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  cursor: pointer;
  position: relative;
  font-weight: 700;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn > i.bi {
  vertical-align: -1px;
}

/* Botón Primario de Bootstrap (calibrado al azul de la marca) */
.btn-primary {
  --bs-btn-bg: var(--btv-azul-fondo);
  --bs-btn-border-color: var(--btv-azul-fondo);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-bg: var(--btv-azul-hover);
  --bs-btn-hover-border-color: var(--btv-azul-hover);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-bg: var(--btv-azul-active);
  --bs-btn-active-border-color: var(--btv-azul-active);
  box-shadow: 0 4px 12px rgba(0, 82, 184, .22);
}

.btn-primary:hover {
  box-shadow: 0 8px 22px rgba(0, 82, 184, .38) !important;
}

.btn-primary:focus-visible {
  outline: 2px solid var(--btv-azul) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(0, 116, 255, .35) !important;
}

.btn-outline-primary {
  --bs-btn-color: var(--btv-azul-fondo);
  --bs-btn-border-color: var(--btv-azul);
  --bs-btn-hover-bg: var(--btv-azul-fondo);
  --bs-btn-hover-border-color: var(--btv-azul-fondo);
  --bs-btn-hover-color: #FFFFFF;
}

.btn-outline-primary:hover {
  box-shadow: 0 6px 18px rgba(0, 82, 184, .25) !important;
}

.btn-outline-primary:focus-visible {
  outline: 2px solid var(--btv-azul) !important;
  outline-offset: 2px !important;
}

/* Otros botones estándar de Bootstrap */
.btn-outline-secondary {
  --bs-btn-color: #475569;
  --bs-btn-border-color: #CBD5E1;
  --bs-btn-hover-bg: #EBF4FC;
  --bs-btn-hover-color: var(--btv-azul-fondo);
  --bs-btn-hover-border-color: var(--btv-azul-fondo);
}

.btn-outline-danger,
.btn-outline-warning {
  font-weight: 600;
}

/* ==========================================================================
   3. SISTEMA DE COLOR DE MARCA BESTTV PLAY
   Completo, autocontenido y sin colisionar con Bootstrap (azul, turquesa, verde).
   ========================================================================== */

/* --------------------------------------------------------------------------
   COLOR: AZUL (Identidad institucional de marca)
   -------------------------------------------------------------------------- */

/* CUÁNDO USAR: Bloques de fondo institucional o cabeceras principales. Lleva texto blanco con contraste 7.24:1. */
.bg-azul {
  background-color: var(--btv-azul-fondo) !important;
  color: #FFFFFF !important;
}

/* CUÁNDO USAR: Fondos tenues en tarjetas de información de cuenta, tabs o cajas secundarias. */
.bg-azul-suave {
  background-color: var(--btv-azul-suave) !important;
  color: var(--btv-azul-fondo) !important;
}

/* CUÁNDO USAR: Títulos grandes (display), logotipos, acentos o íconos sobre fondo neutro u oscuro. */
.text-azul {
  color: var(--btv-azul) !important;
}

/* CUÁNDO USAR: Párrafos o textos regulares sobre fondo blanco que deban tener color azul con contraste accesible (7.24:1). */
.text-azul-oscuro {
  color: var(--btv-azul-fondo) !important;
}

/* CUÁNDO USAR: Enmarcar tarjetas activas, campos seleccionados o divisores primarios. */
.border-azul {
  border-color: var(--btv-azul) !important;
}

/* CUÁNDO USAR: Bordes sutiles en tarjetas o contenedores secundarios sin saturar la pantalla. */
.border-azul-suave {
  border-color: var(--btv-azul-borde) !important;
}

/* CUÁNDO USAR: Botón de acción principal institucional (login, iniciar sesión, submit base). Usa versión -fondo para contraste. */
.btn-azul {
  background-color: var(--btv-azul-fondo) !important;
  border-color: var(--btv-azul-fondo) !important;
  color: #FFFFFF !important;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(0, 82, 184, .25);
}

.btn-azul:hover {
  background-color: var(--btv-azul-hover) !important;
  border-color: var(--btv-azul-hover) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 82, 184, .38) !important;
}

.btn-azul:active {
  background-color: var(--btv-azul-active) !important;
  border-color: var(--btv-azul-active) !important;
  color: #FFFFFF !important;
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 82, 184, .20) !important;
}

.btn-azul:focus-visible {
  outline: 2px solid var(--btv-azul) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(0, 116, 255, .35) !important;
}

/* CUÁNDO USAR: Acción secundaria institucional cuando compite con un .btn-azul o en barras de navegación. */
.btn-outline-azul {
  background-color: transparent !important;
  border: 2px solid var(--btv-azul) !important;
  color: var(--btv-azul-fondo) !important;
  font-weight: 800;
}

.btn-outline-azul:hover {
  background-color: var(--btv-azul-fondo) !important;
  border-color: var(--btv-azul-fondo) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 82, 184, .25) !important;
}

.btn-outline-azul:active {
  background-color: var(--btv-azul-active) !important;
  border-color: var(--btv-azul-active) !important;
  color: #FFFFFF !important;
  transform: translateY(0);
}

.btn-outline-azul:focus-visible {
  outline: 2px solid var(--btv-azul) !important;
  outline-offset: 2px !important;
}

/* CUÁNDO USAR: Pastilla de estado o etiqueta institucional para categorizar servicios. */
.badge-azul {
  background-color: var(--btv-azul-fondo) !important;
  color: #FFFFFF !important;
  font-weight: 800;
}

/* CUÁNDO USAR: Avisos y notificaciones generales sobre el servicio de televisión. */
.alert-azul {
  background-color: var(--btv-azul-suave) !important;
  border: 1px solid var(--btv-azul-borde) !important;
  color: var(--btv-azul-fondo) !important;
}

/* --------------------------------------------------------------------------
   COLOR: TURQUESA (Acento principal OTT / Streaming de BestTV Play)
   -------------------------------------------------------------------------- */

/* CUÁNDO USAR: Banners o bloques OTT de alta atracción. Lleva texto carbón para lograr contraste 8.42:1. */
.bg-turquesa {
  background-color: var(--btv-turquesa) !important;
  color: var(--btv-carbon) !important;
}

/* CUÁNDO USAR: Fondos claros de tarjetas destacadas, chips de categoría o bloques de beneficios OTT. */
.bg-turquesa-suave {
  background-color: var(--btv-turquesa-suave) !important;
  color: var(--btv-turquesa-oscuro) !important;
}

/* CUÁNDO USAR: Resaltar palabras clave sobre fondo oscuro (cinema/hero), íconos o badges sobre carbón. */
.text-turquesa {
  color: var(--btv-turquesa) !important;
}

/* CUÁNDO USAR: Textos sobre fondo blanco o gris claro que deban ser turquesa con lectura garantizada (> 5.5:1). */
.text-turquesa-oscuro {
  color: var(--btv-turquesa-oscuro) !important;
}

/* CUÁNDO USAR: Borde del plan más elegido o tarjeta de reproducción OTT seleccionada. */
.border-turquesa {
  border-color: var(--btv-turquesa) !important;
}

/* CUÁNDO USAR: Borde sutil para cajas con fondo .bg-turquesa-suave. */
.border-turquesa-suave {
  border-color: var(--btv-turquesa-borde) !important;
}

/* CUÁNDO USAR: Botón de conversión estrella ("Lo quiero", "Ver canales", "Verificar beneficio"). Texto carbón por contraste. */
.btn-turquesa {
  background-color: var(--btv-turquesa) !important;
  border-color: var(--btv-turquesa) !important;
  color: var(--btv-carbon) !important;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(51, 190, 202, .32);
}

.btn-turquesa:hover {
  background-color: var(--btv-turquesa-hover) !important;
  border-color: var(--btv-turquesa-hover) !important;
  color: var(--btv-carbon) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(51, 190, 202, .48) !important;
}

.btn-turquesa:active {
  background-color: var(--btv-turquesa-active) !important;
  border-color: var(--btv-turquesa-active) !important;
  color: var(--btv-carbon) !important;
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(51, 190, 202, .20) !important;
}

.btn-turquesa:focus-visible {
  outline: 2px solid var(--btv-turquesa) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(51, 190, 202, .35) !important;
}

/* CUÁNDO USAR: Botón de contorno en bloques oscuros o como alternativa táctica a .btn-turquesa. */
.btn-outline-turquesa {
  background-color: transparent !important;
  border: 2px solid var(--btv-turquesa) !important;
  color: var(--btv-turquesa-oscuro) !important;
  font-weight: 800;
}

.btn-outline-turquesa:hover {
  background-color: var(--btv-turquesa) !important;
  border-color: var(--btv-turquesa) !important;
  color: var(--btv-carbon) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(51, 190, 202, .35) !important;
}

.btn-outline-turquesa:active {
  background-color: var(--btv-turquesa-active) !important;
  border-color: var(--btv-turquesa-active) !important;
  color: var(--btv-carbon) !important;
  transform: translateY(0);
}

.btn-outline-turquesa:focus-visible {
  outline: 2px solid var(--btv-turquesa) !important;
  outline-offset: 2px !important;
}

/* CUÁNDO USAR: Pastilla de destaque comercial ("Más elegido", "Novedad OTT"). */
.badge-turquesa {
  background-color: var(--btv-turquesa) !important;
  color: var(--btv-carbon) !important;
  font-weight: 800;
}

/* CUÁNDO USAR: Mensajes promocionales de nuevos estrenos, series o ventajas del plan OTT. */
.alert-turquesa {
  background-color: var(--btv-turquesa-suave) !important;
  border: 1px solid var(--btv-turquesa-borde) !important;
  color: var(--btv-turquesa-oscuro) !important;
}

/* --------------------------------------------------------------------------
   COLOR: VERDE (Acento secundario de marca / punta inferior de la "b")
   -------------------------------------------------------------------------- */

/* CUÁNDO USAR: Bloques con el verde de marca. Usa --btv-verde-fondo con texto blanco para lograr contraste 5.02:1. */
.bg-verde {
  background-color: var(--btv-verde-fondo) !important;
  color: #FFFFFF !important;
}

/* CUÁNDO USAR: Cajas de verificación de clientes o comprobaciones de beneficios con descuento. */
.bg-verde-suave {
  background-color: var(--btv-verde-suave) !important;
  color: var(--btv-verde-fondo) !important;
}

/* CUÁNDO USAR: Íconos de comprobación o acentos de marca sobre fondo oscuro. Sobre blanco no se usa por contraste insuficiente. */
.text-verde {
  color: var(--btv-verde) !important;
}

/* CUÁNDO USAR: Textos legibles sobre fondo blanco que requieran tono verde de marca (contraste 5.02:1). */
.text-verde-oscuro {
  color: var(--btv-verde-fondo) !important;
}

/* CUÁNDO USAR: Bordes o divisores con el verde puro de la marca (#26F240). */
.border-verde {
  border-color: var(--btv-verde) !important;
}

/* CUÁNDO USAR: Bordes sutiles en tarjetas o recuadros verdes tenues. */
.border-verde-suave {
  border-color: var(--btv-verde-borde) !important;
}

/* CUÁNDO USAR: Botón de acción con el verde de marca (activar beneficio abonado, confirmar plan de cable). Usa versión -fondo con texto blanco. */
.btn-verde {
  background-color: var(--btv-verde-fondo) !important;
  border-color: var(--btv-verde-fondo) !important;
  color: #FFFFFF !important;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(21, 128, 61, .25);
}

.btn-verde:hover {
  background-color: var(--btv-verde-hover) !important;
  border-color: var(--btv-verde-hover) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(21, 128, 61, .38) !important;
}

.btn-verde:active {
  background-color: var(--btv-verde-active) !important;
  border-color: var(--btv-verde-active) !important;
  color: #FFFFFF !important;
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(21, 128, 61, .20) !important;
}

.btn-verde:focus-visible {
  outline: 2px solid var(--btv-verde) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(38, 242, 64, .35) !important;
}

/* CUÁNDO USAR: Botón secundario en pantallas de consulta o validación de abonados. */
.btn-outline-verde {
  background-color: transparent !important;
  border: 2px solid var(--btv-verde-fondo) !important;
  color: var(--btv-verde-fondo) !important;
  font-weight: 800;
}

.btn-outline-verde:hover {
  background-color: var(--btv-verde-fondo) !important;
  border-color: var(--btv-verde-fondo) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(21, 128, 61, .25) !important;
}

.btn-outline-verde:active {
  background-color: var(--btv-verde-active) !important;
  border-color: var(--btv-verde-active) !important;
  color: #FFFFFF !important;
  transform: translateY(0);
}

.btn-outline-verde:focus-visible {
  outline: 2px solid var(--btv-verde) !important;
  outline-offset: 2px !important;
}

/* CUÁNDO USAR: Distintivo de cliente verificado o beneficio de abonado aplicado. */
.badge-verde {
  background-color: var(--btv-verde-fondo) !important;
  color: #FFFFFF !important;
  font-weight: 800;
}

/* CUÁNDO USAR: Cajas de aviso con la confirmación de beneficio de cliente ("¡Eres cliente Best Cable!"). */
.alert-verde {
  background-color: var(--btv-verde-suave) !important;
  border: 1px solid var(--btv-verde-borde) !important;
  color: var(--btv-verde-fondo) !important;
}

/* ==========================================================================
   4. ACCESIBILIDAD — PREFERS-REDUCED-MOTION
   Anula transformaciones y transiciones cuando el usuario lo solicita en su SO.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn-azul,
  .btn-outline-azul,
  .btn-turquesa,
  .btn-outline-turquesa,
  .btn-verde,
  .btn-outline-verde {
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   5. COMPONENTES COMPARTIDOS ENTRE ÁREAS
   ========================================================================== */
.bc-header {
  background: #FFFFFF;
  border-bottom: 1px solid #E2E8F0;
}

.bc-header .navbar-brand img {
  height: 44px;
  width: auto;
}

.bc-header .nav-link {
  color: var(--btv-texto);
  font-weight: 700;
  padding: .5rem .9rem;
}

.bc-header .nav-link:hover {
  color: var(--btv-azul);
}

.bc-header .nav-link.active {
  color: var(--btv-azul);
  border-bottom: 3px solid var(--btv-azul);
}

.bc-form-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--btv-azul);
  box-shadow: 0 0 0 .2rem rgba(0, 116, 255, .15);
}

.bc-banda-abonado {
  background: var(--btv-carbon);
  border: 1px solid rgba(0, 116, 255, .25);
  color: #FFFFFF;
  border-radius: 1rem;
}

.bc-banda-abonado .lima {
  color: var(--btv-turquesa);
}

/* Un fondo azul siempre lleva texto blanco encima. Sobre azul no va verde ni turquesa directo. */
.bg-primary {
  background-color: var(--btv-azul-fondo) !important;
}

.bg-primary a:not(.btn) {
  color: #FFFFFF !important;
}

/* Utilidad que Bootstrap 5.3 no trae: deja que un hijo flex se encoja (evita desbordes con text-nowrap). */
.min-w-0 {
  min-width: 0 !important;
}