/* =====================================================================
   BS93 · Paneles internos Versión Lujo (solo estética)
   Usuario y administrador. Todo va bajo html.bs93 (lo activa
   assets/bs93-paneles.js). ?lujo=0 muestra el diseño anterior.
   No cambia lógica, datos ni permisos.

   ⚠️ NO ELIMINAR la línea que carga este archivo en index.html.
   ===================================================================== */
html.bs93 {
  --p-night: #050F33;
  --p-night-2: #0B1A4A;
  --p-night-3: #132661;
  --p-brand: #062889;
  --p-sky: #7FA2FF;
  --p-red: #D60000;
  --p-ok: #0E9F62;
  --p-paper: #F4F6FB;
  --p-line: #E3E8F4;
  --p-ink: #0B1A4A;
  --p-muted: #5B6789;
  --p-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --p-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --p-shadow: 0 1px 2px rgba(11, 26, 74, .04), 0 18px 40px -30px rgba(6, 40, 137, .35);
  --p-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Fondo general ---------- */
html.bs93 body.bs-authenticated { background: var(--p-paper) !important; font-family: var(--p-sans); }
html.bs93 .billtool-app { background:
  radial-gradient(1200px 380px at 70% -120px, rgba(127, 162, 255, .18), transparent 70%),
  var(--p-paper) !important; min-height: 100vh; }

/* ---------- Menú lateral ---------- */
html.bs93 .bt-sidebar {
  position: relative; overflow: hidden;
  background:
    radial-gradient(420px 260px at 20% -60px, rgba(40, 90, 230, .45), transparent 70%),
    linear-gradient(180deg, #0A1A52 0%, var(--p-night) 55%, #040B27 100%) !important;
  border-right: 1px solid rgba(160, 178, 235, .14) !important;
  box-shadow: 10px 0 40px -20px rgba(5, 15, 51, .6) !important;
}
html.bs93 .bt-sidebar::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(160, 178, 235, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(160, 178, 235, .07) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 45%); mask-image: linear-gradient(180deg, #000, transparent 45%); }
html.bs93 .bt-sidebar > * { position: relative; }
html.bs93 .bt-sidebar-logo-wrap { padding-top: 6px !important; margin-bottom: 6px !important; }
html.bs93 .bt-side-divider { height: 1px !important; background: linear-gradient(90deg, transparent, rgba(160, 178, 235, .28), transparent) !important; border: 0 !important; margin: 6px 4px 14px !important; }

html.bs93 .bt-sidebar .space-y-3 { scrollbar-width: thin; scrollbar-color: rgba(160, 178, 235, .25) transparent; }
html.bs93 .bt-side-group-head {
  padding: 9px 12px !important; border-radius: 12px !important;
  font-family: var(--p-mono) !important; font-size: 10.5px !important; font-weight: 500 !important;
  letter-spacing: .16em !important; text-transform: uppercase !important;
  color: #A9B6DD !important; background: transparent !important; border: 0 !important;
  transition: color .25s, background .25s;
}
html.bs93 .bt-side-group-head:hover { color: #fff !important; background: rgba(255, 255, 255, .05) !important; }
html.bs93 .bt-side-chevron { color: rgba(169, 182, 221, .7) !important; font-family: var(--p-sans); }

html.bs93 .bt-sidebar .bt-side-nav {
  position: relative; padding: 10px 14px !important; border-radius: 12px !important;
  font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: #DCE3FA !important; background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important;
  transition: background .25s, color .25s, transform .25s var(--p-ease);
}
html.bs93 .bt-sidebar .bt-side-nav:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; transform: translateX(2px); }
html.bs93 .bt-sidebar .bt-side-group .bt-side-nav { padding-left: 22px !important; font-size: 13px !important; font-weight: 500 !important; }
html.bs93 .bt-sidebar .bt-side-group .bt-side-nav::before { content: ""; position: absolute; left: 11px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: rgba(169, 182, 221, .5); }
/* Sección activa: blanca y luminosa; el rojo queda solo como marca */
html.bs93 .bt-sidebar .bt-nav-active, html.bs93 .bt-sidebar .bt-side-nav.bt-nav-active {
  background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)) !important;
  border-color: rgba(255, 255, 255, .16) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 24px -14px rgba(0, 0, 0, .6) !important;
}
html.bs93 .bt-sidebar .bt-nav-active::after { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--p-red); box-shadow: 0 0 12px rgba(214, 0, 0, .8); }
html.bs93 .bt-sidebar .bt-side-group .bt-nav-active::before { background: #fff; }

html.bs93 .bt-side-account { padding-top: 14px; border-top: 1px solid rgba(160, 178, 235, .14); }
html.bs93 .bt-side-account > button { background: rgba(255, 255, 255, .04) !important; border: 1px solid rgba(255, 255, 255, .22) !important; color: #fff !important; border-radius: 12px !important; transition: background .25s, border-color .25s; }
html.bs93 .bt-side-account > button:hover { background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .45) !important; }
html.bs93 .bt-side-social a { border-color: rgba(160, 178, 235, .2) !important; color: #C7D2F2 !important; border-radius: 10px !important; transition: background .25s, color .25s, border-color .25s; }
html.bs93 .bt-side-social a:hover { background: rgba(255, 255, 255, .08) !important; color: #fff !important; border-color: rgba(255, 255, 255, .4) !important; }

/* ---------- Barra superior ---------- */
html.bs93 .bt-topbar {
  background: rgba(255, 255, 255, .82) !important; backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--p-line) !important; box-shadow: 0 10px 30px -28px rgba(6, 40, 137, .5) !important;
}
html.bs93 .bt-topbar .text-\[10px\] { font-family: var(--p-mono); font-size: 10px !important; letter-spacing: .14em; text-transform: uppercase; color: #7B88AD !important; }
html.bs93 .bt-topbar .font-semibold.text-slate-900 { font-size: 1.05rem !important; font-weight: 800 !important; letter-spacing: -0.02em; color: var(--p-ink) !important; }
html.bs93 .bt-topbar button.w-10.h-10, html.bs93 .bt-topbar .bt-mobile-toggle { border-radius: 12px !important; border: 1px solid var(--p-line) !important; background: #fff !important; color: var(--p-ink) !important; transition: border-color .25s, box-shadow .25s, transform .25s; }
html.bs93 .bt-topbar button.w-10.h-10:hover { border-color: #C9D4EE !important; box-shadow: 0 8px 18px -12px rgba(6, 40, 137, .5); transform: translateY(-1px); }
html.bs93 .bt-topbar input { border-radius: 12px !important; border-color: var(--p-line) !important; background: #F7F9FD !important; }

/* ---------- Ruta (breadcrumb) ---------- */
html.bs93 .bt-breadcrumbs { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 14px !important; min-height: 0 !important; }
html.bs93 .bt-breadcrumb-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px !important; border-radius: 999px !important; background: #fff !important; border: 1px solid var(--p-line) !important; font-family: var(--p-mono); font-size: 10.5px !important; letter-spacing: .1em; text-transform: uppercase; color: var(--p-brand) !important; }

/* ---------- Títulos ---------- */
html.bs93 .bt-content h1 { font-family: var(--p-sans) !important; font-weight: 800 !important; letter-spacing: -0.035em !important; line-height: 1.08 !important; }
html.bs93 .bt-content h2 { font-family: var(--p-sans) !important; font-weight: 800 !important; letter-spacing: -0.02em !important; }
html.bs93 .bt-content h3 { font-family: var(--p-sans) !important; font-weight: 800 !important; letter-spacing: -0.01em !important; }
/* Solo los títulos oscuros toman el azul noche; los blancos de los encabezados se respetan */
html.bs93 .bt-content :is(h1, h2, h3)[class*="text-slate-9"] { color: var(--p-ink) !important; }
html.bs93 .bt-dashboard > div:first-child h1 { font-size: clamp(1.9rem, 2.6vw, 2.5rem) !important; }
html.bs93 .bt-dashboard > div:first-child p { color: var(--p-muted) !important; }

/* ---------- Tarjetas ---------- */
html.bs93 .bt-content .rounded-2xl.border, html.bs93 .bt-content .bt-visual-panel, html.bs93 .bt-content .bt-kpi {
  border-radius: 20px !important; border-color: var(--p-line) !important; box-shadow: var(--p-shadow) !important;
}
html.bs93 .bt-content .rounded-2xl.border.bg-white { background: #fff !important; }
html.bs93 .bt-content .grid > .rounded-2xl.border.bg-white { transition: transform .35s var(--p-ease), box-shadow .35s var(--p-ease), border-color .35s; }
html.bs93 .bt-content .grid > .rounded-2xl.border.bg-white:hover { transform: translateY(-3px); border-color: #CFD9F1 !important; box-shadow: 0 1px 2px rgba(11, 26, 74, .05), 0 26px 50px -30px rgba(6, 40, 137, .5) !important; }

/* Tarjetas de resumen (KPI): etiqueta, cifra e ícono */
html.bs93 .bt-content .rounded-2xl .text-\[11px\].font-semibold.truncate { font-family: var(--p-mono) !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .1em; text-transform: uppercase; color: #6B78A0 !important; }
html.bs93 .bt-content .text-2xl.font-extrabold { font-family: var(--p-sans) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; font-variant-numeric: tabular-nums; }
html.bs93 .bt-content .text-2xl.font-extrabold.text-slate-950 { color: var(--p-ink) !important; }
html.bs93 .bt-content span.w-9.h-9.rounded-xl { display: grid !important; place-items: center; border-radius: 12px !important; box-shadow: inset 0 0 0 1px rgba(6, 40, 137, .06); }
html.bs93 .bt-content .bs93-ico svg { display: block; }

/* Avisos y bloques informativos (azules) */
html.bs93 .bt-content .bg-blue-50, html.bs93 .bt-content .bg-blue-50\/60 {
  background: linear-gradient(120deg, #EEF3FF 0%, #F8FAFF 60%, #fff 100%) !important; border-color: #DCE5FB !important; border-radius: 20px !important;
}
html.bs93 .bt-content .text-amber-700 { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #FFF7E8; border: 1px solid #F8E2B5; }

/* ---------- Controles ---------- */
html.bs93 .bt-content select, html.bs93 .bt-content input[type=text], html.bs93 .bt-content input[type=search], html.bs93 .bt-content input[type=email], html.bs93 .bt-content input[type=number], html.bs93 .bt-content input[type=date], html.bs93 .bt-content input:not([type]), html.bs93 .bt-content textarea, html.bs93 .bt-dash-select {
  border-radius: 12px !important; border: 1px solid #DCE3F1 !important; background-color: #fff !important; color: var(--p-ink) !important;
  font-family: var(--p-sans) !important; transition: border-color .2s, box-shadow .2s;
}
html.bs93 .bt-content select:focus, html.bs93 .bt-content input:focus, html.bs93 .bt-content textarea:focus, html.bs93 .bt-dash-select:focus {
  outline: none !important; border-color: var(--p-sky) !important; box-shadow: 0 0 0 4px rgba(127, 162, 255, .22) !important;
}
html.bs93 .bt-content button.bg-\[\#062889\], html.bs93 .bt-content a.bg-\[\#062889\] {
  background: linear-gradient(180deg, #0A33A8, var(--p-brand)) !important; border-radius: 12px !important;
  box-shadow: 0 10px 22px -14px rgba(6, 40, 137, .9) !important; transition: transform .25s var(--p-ease), box-shadow .25s;
}
html.bs93 .bt-content button.bg-\[\#062889\]:hover, html.bs93 .bt-content a.bg-\[\#062889\]:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -14px rgba(6, 40, 137, 1) !important; }
html.bs93 .bt-chart-action { border-radius: 999px !important; border: 1px solid var(--p-line) !important; background: #fff !important; color: var(--p-ink) !important; font-weight: 600 !important; transition: border-color .2s, background .2s; }
html.bs93 .bt-chart-action:hover { border-color: #C9D4EE !important; background: #F7F9FD !important; }

/* ---------- Gráficas y progreso ---------- */
html.bs93 .bt-content .h-48.rounded-xl.border { border-style: dashed !important; border-color: #D5DDF0 !important; background: repeating-linear-gradient(135deg, #FAFBFE 0 10px, #F5F7FC 10px 20px) !important; color: #7B88AD !important; font-size: 13px; }
html.bs93 .bt-progress-fill { background: linear-gradient(90deg, var(--p-brand), var(--p-sky)) !important; }
html.bs93 .bt-donut > div { box-shadow: inset 0 0 0 1px var(--p-line); }

/* ---------- Tablas ---------- */
html.bs93 .bt-content table { border-collapse: separate; border-spacing: 0; }
html.bs93 .bt-content thead th { font-family: var(--p-mono) !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: #6B78A0 !important; background: #F7F9FD !important; border-bottom: 1px solid var(--p-line) !important; }
html.bs93 .bt-content tbody tr { transition: background .2s; }
html.bs93 .bt-content tbody tr:hover { background: #F7F9FF !important; }
html.bs93 .bt-content tbody td { border-color: #EDF1F8 !important; }

/* ---------- Ventanas emergentes del encabezado ---------- */
html.bs93 .bt-notice-popover, html.bs93 .bt-settings-popover { border-radius: 18px !important; border-color: var(--p-line) !important; box-shadow: 0 30px 70px -30px rgba(5, 15, 51, .55) !important; }

/* ---------- Celular ---------- */
html.bs93 .bt-mobile-drawer .bt-sidebar { border-radius: 0 22px 22px 0; }
@media (max-width: 767px) {
  html.bs93 .bt-content .grid > .rounded-2xl.border.bg-white:hover { transform: none; }
  html.bs93 .bt-dashboard > div:first-child h1 { font-size: 1.7rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  html.bs93 .bt-sidebar .bt-side-nav, html.bs93 .bt-content .grid > .rounded-2xl.border.bg-white { transition: none !important; }
}

/* Ajustes finos */
html.bs93 .bt-side-group-head > span:first-child { font: inherit !important; color: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; }
html.bs93 .bt-breadcrumb-link { font-weight: 500 !important; }
html.bs93 .bt-content label { white-space: nowrap; }

/* Botones bt23 (Marketplace interno): el principal no tenía fondo y no se leía */
html.bs93 .bt23-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 18px; border-radius: 12px; font-weight: 700; font-size: 13px; text-decoration: none; transition: transform .25s var(--p-ease), box-shadow .25s; }
html.bs93 .bt23-btn.primary { background: var(--p-red) !important; color: #fff !important; box-shadow: 0 12px 24px -14px rgba(214, 0, 0, .8); }
html.bs93 .bt23-btn.primary:hover { transform: translateY(-1px); background: #B00000 !important; }
html.bs93 .bt23-market-hero { border-radius: 18px !important; }

/* Audios: el aviso "Aún no hay audios" ocupaba solo la columna de la carátula */
html.bs93 .bs22-now-playing > .bs22-empty:only-child, html.bs93 .bs22-now-playing > .bs22-empty:first-child:last-child { grid-column: 1 / -1; width: auto; }
html.bs93 .bs22-now-playing:has(> .bs22-empty) { grid-template-columns: 1fr !important; }
html.bs93 .bs22-empty { text-align: center; padding: 34px 16px; color: #7B88AD; }

/* Menú en celular: queda por encima de la barra superior (antes tapaba el logo) */
html.bs93 .fixed.inset-0:has(> .bt-mobile-drawer) { z-index: 200050 !important; }
html.bs93 .bt-side-group-head { color: #BAC6EA !important; }