/* Popup Bantokens — implementación de "Pestañas y Popup Bantokens v2.dc.html":
   fila de pestañas (Inicio + accesos al panel), pestaña Mascota con los ajustes
   de visualización de Luma, y dos temas (dark/light) tomados literalmente de
   THEMES del diseño; se conmutan con data-theme en <html> y se persisten en
   chrome.storage.local ("bt_theme"). */

:root,
:root[data-theme="dark"] {
  /* Deep Navy Scale */
  --bg-shell: #080E18;
  --card: #162338;
  --bd: #223654;
  --bd2: #2D4870;
  --chip: #162338;
  --well: #0E1726;
  --track: rgba(255, 255, 255, .09);
  --tx: #F4F6FB;
  --tx2: #94A3B8;
  --tx3: #64748B;
  --tx4: #475569;
  --accent-tx: #4DA5FF;
  --accent-soft: rgba(0, 125, 255, .10);
  --gold-tx: #FFE089;
  --gold-soft: rgba(253, 186, 2, .16);
  --sh: 0 26px 70px rgba(0, 0, 0, .52);
  --ok: #57BD7D;
  --ok-soft: rgba(87, 189, 125, .12);
  --ok-bd: rgba(87, 189, 125, .35);
  --err-tx: #E96C75;
  --focus-ring: rgba(0, 125, 255, .18);
  --glass-highlight: rgba(255, 255, 255, .06);
  --glass-fallback: #080E18;
  --glass-blur: none;
  --gradient-brand: linear-gradient(135deg, #4DA5FF 0%, #007DFF 100%);
  /* Tipografía de marca: Segoe UI vía Adobe Fonts (kit uhv0ghs, <link> en
     popup.html). El kit solo trae 400 y 700 — no usar otros pesos. */
  /* Misma escala de 6 pasos que el drawer (--bt-text-*), suelo 11px. */
  --fs-xs: 11px;
  --fs-sm: 11px;
  --fs-md: 12px;
  --fs-lg: 13px;
  --fs-xl: 14px;
  --fs-2xl: 16px;
  --font-sans: 'segoe-ui', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Roboto Mono', 'Cascadia Mono', Consolas, 'SF Mono', Menlo, ui-monospace, monospace;

  /* Semantic Tokens Aliases */
  --bt-bg: #080E18;
  --bt-surface: #0E1726;
  --bt-surface-card: #162338;
  --bt-border: #223654;
  --bt-header-bg: #101D31;
  --bt-header-border: #007DFF;
  --bt-text: #F4F6FB;
  --bt-text-primary: #F4F6FB;
  --bt-text-secondary: #94A3B8;
  --bt-text-muted: #64748B;
  --bt-cta-bg: #007DFF;
  --bt-cta-bg-hover: #4DA5FF;
  --bt-active-state: #1D3557;
  --bt-active-border: #007DFF;
  --bt-token-amber: #FDBA02;
}

:root[data-theme="light"] {
  --bg-shell: #F4F6FB;
  --card: #ffffff;
  --bd: #E2E8F0;
  --bd2: #CBD5E1;
  --chip: #E9EDF8;
  --well: #F2F5FC;
  --track: rgba(13, 40, 68, .12);
  --tx: #212529;
  --tx2: #495057;
  --tx3: #868E96;
  --tx4: #868E96;
  /* #007DFF sobre blanco da 3.91:1 (Manual de Marca §7) — texto normal usa el
     tono más oscuro que recomienda el propio manual, #0069DB (5.19:1, AA). */
  --accent-tx: #0069DB;
  --accent-soft: rgba(0, 125, 255, .08);
  --gold-tx: #664B00;
  --gold-soft: rgba(253, 186, 2, .16);
  --sh: 0 26px 70px rgba(28, 36, 74, .16);
  --ok: #16A34A;
  --ok-soft: rgba(22, 163, 74, .12);
  --ok-bd: rgba(22, 163, 74, .38);
  --err-tx: #E0333F;
  --focus-ring: rgba(0, 125, 255, .18);
  --glass-highlight: rgba(255, 255, 255, .7);
  --glass-fallback: #ffffff;
  --glass-blur: none;

  /* Semantic Tokens Aliases */
  --bt-bg: #F4F6FB;
  --bt-surface: #FFFFFF;
  --bt-surface-card: #FFFFFF;
  --bt-border: #E2E8F0;
  --bt-header-bg: #00356F;
  --bt-header-border: rgba(13, 40, 68, 0.15);
  --bt-text: #212529;
  --bt-text-primary: #212529;
  --bt-text-secondary: #495057;
  --bt-text-muted: #868E96;
  --bt-cta-bg: linear-gradient(135deg, #4DA5FF, #007DFF);
  --bt-cta-bg-hover: linear-gradient(135deg, #66B3FF, #0069DB);
  --bt-active-state: #E5F1FF;
  --bt-active-border: #007DFF;
  --bt-token-amber: #FDBA02;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  width: 372px;
  min-height: 420px;
  max-height: 600px;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--tx);
  font: 400 var(--fs-lg)/1.45 var(--font-sans);
  font-kerning: normal;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  background: var(--bg-shell);
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: var(--bd) transparent;
}

.bt-shell { position: relative; display: flex; flex-direction: column; min-height: 100%; isolation: isolate; }

/* Cifras en monoespaciada — firma de la Propuesta 03 para tokens e importes.
   `tabular-nums` evita que los dígitos bailen al actualizarse en vivo. */
.bt-mono, .bt-kpi-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Vista Side Panel (popup.html?view=panel vía sidepanel.html): mismo markup,
   pero a ancho fluido del panel y alto completo — el panel es fijo, no flotante. */
body.bt-view-panel {
  width: auto;
  min-width: 300px;
  min-height: 100vh;
  max-height: none;
}
body.bt-view-panel .bt-window-bar { display: none; }

/* Propuesta 03: el fondo es plano, sin halos. Se conserva un realce lineal muy
   tenue para que el borde superior no quede muerto; los radiales de v2 se
   retiran porque competían con las tarjetas de bajo contraste. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--glass-highlight), transparent 22%);
  z-index: -1;
}

/* Barra de ventana */
.bt-window-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: var(--well);
  border-bottom: 1px solid var(--bd2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.bt-dots { display: flex; gap: 5px; }
.bt-dot-mini { width: 9px; height: 9px; border-radius: 50%; }
.bt-dot-red { background: #ff5f57; }
.bt-dot-yellow { background: #febc2e; }
.bt-dot-green { background: #28c840; }
.bt-window-title { font: 400 var(--fs-xs)/1 'Roboto Mono', ui-monospace, monospace; color: var(--tx3); }

/* Cuerpo */
.bt-body { flex: 1; display: flex; flex-direction: column; gap: 11px; padding: 12px 16px 14px; }
.bt-pane { display: none; }
.bt-pane.active { display: flex; }

/* Fila de pestañas del popup (diseño v2): iconos 30×30, scroll horizontal */
.bt-rail {
  display: flex; align-items: center; gap: 4px;
  padding: 12px 16px 10px;
  overflow-x: auto;
  border-bottom: 1px solid var(--bd2);
  flex: none;
  scrollbar-width: none;
}
.bt-rail::-webkit-scrollbar { height: 0; }
.bt-rail-btn {
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--bd2);
  background: var(--chip);
  color: var(--tx3);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.bt-rail-btn:hover { color: var(--tx); }
.bt-rail-btn.active {
  border-color: #007DFF;
  background: linear-gradient(135deg, #4DA5FF, #007DFF);
  color: #fff;
}
.bt-rail-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bt-rail-btn:disabled { cursor: not-allowed; opacity: .38; }
.bt-rail-sep { width: 1px; height: 20px; flex: none; margin: 0 3px; background: var(--bd2); }

/* Cabecera interna de cada pestaña */
.bt-pane-head { display: flex; flex-direction: column; line-height: 1.25; gap: 1px; }
.bt-pane-title { font-size: var(--fs-lg); font-weight: 700; color: var(--tx); }
.bt-pane-sub { font-size: var(--fs-xs); color: var(--tx3); }

/* Fila etiqueta + valor y chips (tamaño de Luma) */
.bt-row-inline { display: flex; align-items: center; justify-content: space-between; }
.bt-mono-accent { font: 700 var(--fs-sm)/1 'Roboto Mono', ui-monospace, monospace; color: var(--accent-tx); }
.bt-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.bt-chip {
  flex: 1; text-align: center;
  padding: 6px 0; min-width: 44px;
  border-radius: 9999px;
  border: 1px solid var(--bd);
  background: var(--chip); color: var(--tx2);
  font: 700 var(--fs-xs)/1 var(--font-sans); cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.bt-chip:hover { color: var(--tx); }
.bt-chip.active {
  border-color: #007DFF;
  background: linear-gradient(135deg, #4DA5FF, #007DFF);
  color: #fff;
}
.bt-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Diagnóstico del asistente */
.bt-diag-rows { display: flex; flex-direction: column; gap: 7px; }
.bt-diag-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bt-diag-label { font-size: var(--fs-sm); color: var(--tx2); }
.bt-diag-pill {
  flex: none;
  padding: 2px 8px; border-radius: 6px;
  font-size: var(--fs-xs); font-weight: 700;
  background: var(--gold-soft); color: var(--gold-tx);
}
.bt-diag-pill.ok { background: var(--ok-soft); color: var(--ok); }

.bt-footnote { font-size: var(--fs-xs); line-height: 1.55; color: var(--tx3); }

/* Cabecera de marca — logo oficial (assets/bantokens-logo-*.svg) por tema */
.bt-header { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 8px; }
.bt-header-top { display: flex; align-items: center; gap: 7px; width: 100%; }
.bt-logo-full { height: 28px; width: auto; margin-right: auto; }
[data-theme="dark"] .bt-logo-on-light { display: none; }
[data-theme="light"] .bt-logo-on-dark { display: none; }
.bt-panel-actions,
.bt-panel-room-row { display: none; }
.bt-status-badge {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 9999px;
  background: var(--chip); border: 1px solid var(--bd);
  font-size: var(--fs-xs); font-weight: 700; color: var(--tx2);
}
.bt-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tx3); }
.bt-status-badge.active { background: var(--ok-soft); border-color: var(--ok-bd); color: var(--ok); }
.bt-status-badge.active .bt-status-dot { background: var(--ok); box-shadow: 0 0 8px var(--ok-bd); }

.bt-header-icon-btn,
.bt-inline-link {
  display: grid;
  width: 28px;
  height: 28px;
  flex: none;
  place-items: center;
  padding: 0;
  border: 1px solid var(--bd);
  border-radius: 9px;
  background: var(--chip);
  color: var(--tx2);
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.bt-header-icon-btn:hover,
.bt-inline-link:hover { background: var(--accent-soft); color: var(--accent-tx); }
.bt-header-icon-btn:active,
.bt-inline-link:active { transform: scale(.95); }
.bt-header-icon-btn:focus-visible,
.bt-inline-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bt-logout-btn { color: var(--err-tx); }
.bt-theme-icon-sun { display: none; }
:root[data-theme="light"] .bt-theme-icon-moon { display: none; }
:root[data-theme="light"] .bt-theme-icon-sun { display: block; }

/* Estado de plan: informativo, nunca bloquea funciones. */
.bt-plan-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid var(--bd);
  border-radius: 16px;
  background: var(--card);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.bt-plan-banner.premium {
  border-color: rgba(253, 186, 2, .48);
  background:
    linear-gradient(110deg, rgba(253, 186, 2, .18), transparent 54%),
    var(--card);
}
.bt-plan-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-tx);
  font-size: var(--fs-2xl);
}
.bt-plan-banner.premium .bt-plan-mark { background: var(--gold-soft); color: var(--gold-tx); }
.bt-plan-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.bt-plan-title { font-size: var(--fs-md); font-weight: 700; color: var(--tx); }
.bt-plan-detail { font-size: var(--fs-xs); line-height: 1.45; color: var(--tx2); }
.bt-plan-badge {
  flex: none;
  padding: 4px 7px;
  border: 1px solid var(--bd);
  border-radius: 9999px;
  background: var(--chip);
  color: var(--tx2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
}
.bt-plan-banner.premium .bt-plan-badge { border-color: rgba(253, 186, 2, .48); background: var(--gold-soft); color: var(--gold-tx); }
.bt-plan-banner.trial .bt-plan-badge { border-color: rgba(77, 165, 255, .42); background: var(--accent-soft); color: var(--accent-tx); }

/* Héroe con Bantip (sprite de producción, celda fila 4 · col 1 como en el diseño) */
.bt-hero {
  border-radius: 16px; padding: 12px;
  background: linear-gradient(135deg, #4DA5FF, #007DFF);
  display: flex; align-items: center; gap: 13px;
  box-shadow: var(--sh);
}
.bt-toki-sprite { width: 54px; height: 59px; overflow: hidden; flex: none; }
.bt-toki-sprite::before {
  content: '';
  display: block; width: 192px; height: 208px;
  transform: scale(.282); transform-origin: top left;
  background-image: url('../assets/toki/spritesheet.webp');
  background-repeat: no-repeat;
  /* Geometría del atlas REAL (ATLAS_CONFIG en toki-atlas.ts: 8×11 celdas de
     192×208 = 1536×2288). Con la rejilla vieja (2080) la imagen se aplastaba y
     la celda enseñaba un gajo de la vecina — el mismo bug que tuvo la mascota
     en vivo el 2026-08-28. Primer frame de "idle" (fila 0, columna 0). */
  background-size: 1536px 2288px;
  background-position: 0 0;
  image-rendering: pixelated;
}
.bt-hero-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bt-toki-status { font: 400 var(--fs-xs)/1.7 'Press Start 2P', 'Roboto Mono', monospace; color: #fff; }
.bt-room-title { font-size: var(--fs-lg); font-weight: 700; color: #fff; }
.bt-room-desc { font-size: var(--fs-sm); line-height: 1.45; color: rgba(255, 255, 255, .8); }
.bt-connection-label { margin-top: 2px; font-size: var(--fs-xs); font-weight: 700; color: rgba(255, 255, 255, .62); }

/* Tarjetas */
.bt-card {
  border-radius: 16px; padding: 13px;
  background: var(--chip); border: 1px solid var(--bd2);
  display: flex; flex-direction: column; gap: 9px;
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.bt-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; }
.bt-setting-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bt-setting-label { font-size: var(--fs-md); font-weight: 700; color: var(--tx); }
.bt-setting-desc { font-size: var(--fs-xs); line-height: 1.5; color: var(--tx3); }

/* Switch */
.bt-switch { position: relative; flex: none; width: 44px; height: 26px; }
.bt-switch input { position: absolute; opacity: 0; pointer-events: none; }
.bt-slider {
  position: absolute; inset: 0; cursor: pointer;
  border: 1px solid var(--bd); border-radius: 9999px;
  background: var(--track); transition: 160ms ease;
}
.bt-slider::before {
  content: ''; position: absolute; left: 3px; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .32);
  transition: 180ms cubic-bezier(.16, 1, .3, 1);
}
.bt-switch input:checked + .bt-slider {
  background: linear-gradient(135deg, #4DA5FF, #007DFF);
  border-color: rgba(77, 165, 255, .7);
}
.bt-switch input:checked + .bt-slider::before { transform: translateX(18px); }
.bt-switch input:focus-visible + .bt-slider { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.bt-switch input:disabled + .bt-slider { cursor: not-allowed; opacity: .42; filter: saturate(.35); }

/* Selector de tema (segmentado, estilo chip del diseño) */
.bt-seg {
  display: flex; gap: 6px; flex: none;
  padding: 5px; border-radius: 9999px;
  background: var(--chip); border: 1px solid var(--bd);
}
.bt-seg-btn {
  padding: 6px 14px; border-radius: 9999px;
  border: 1px solid transparent;
  background: transparent; color: var(--tx2);
  font: 700 var(--fs-sm)/1 var(--font-sans); cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.bt-seg-btn:hover { color: var(--tx); }
.bt-seg-btn.active {
  border-color: var(--bt-active-border, #007DFF);
  background: var(--bt-active-state, #1D3557);
  color: var(--tx);
}
:root[data-theme="light"] .bt-seg-btn.active {
  border-color: #007DFF;
  background: #E5F1FF;
  color: #00356F;
}
.bt-seg-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Licencia */
.bt-input {
  width: 100%; padding: 10px 12px;
  border-radius: 12px; border: 1px solid var(--bd2);
  background: var(--well); color: var(--tx);
  font: inherit; font-size: var(--fs-md);
}
.bt-input::placeholder { color: var(--tx3); }
.bt-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.bt-btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 10px;
  border: 0; border-radius: 9999px;
  background: var(--bt-cta-bg, #007DFF);
  color: #fff; font: 700 var(--fs-md)/1.2 var(--font-sans);
  cursor: pointer; transition: filter 140ms ease, transform 140ms ease, background 140ms ease;
}
.bt-btn-primary:hover {
  background: var(--bt-cta-bg-hover, #4DA5FF);
}
:root[data-theme="light"] .bt-btn-primary {
  background: linear-gradient(135deg, #4DA5FF, #007DFF);
}
:root[data-theme="light"] .bt-btn-primary:hover {
  filter: brightness(1.08);
}
.bt-btn-primary:active { transform: scale(.98); }
.bt-btn-primary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.bt-btn-primary:disabled { cursor: wait; opacity: .6; filter: saturate(.5); transform: none; }
.bt-license-status { font: 400 var(--fs-xs)/1.5 var(--font-mono); color: var(--tx3); }
.bt-license-status.bt-license-ok { color: var(--ok); }
.bt-license-status.bt-license-error { color: var(--err-tx); }

.bt-access-card { gap: 8px; }
.bt-access-heading { display: flex; align-items: center; gap: 10px; }
.bt-access-heading .bt-setting-text { flex: 1; }
.bt-connect-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; }
.bt-connect-row .bt-input,
.bt-connect-row .bt-btn-primary { min-width: 0; }
.bt-connect-row .bt-btn-primary { padding-inline: 12px; }

/* Botón fantasma (Portal) */
.bt-btn-ghost {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 12px;
  border: 1px solid var(--bd); border-radius: 9999px;
  background: var(--chip); color: var(--tx);
  font: 700 var(--fs-md)/1.2 var(--font-sans); text-decoration: none;
  cursor: pointer; transition: filter 140ms ease;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.bt-btn-ghost:hover { filter: brightness(1.12); }
.bt-btn-ghost:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* Pie */
.bt-footer {
  padding: 4px 16px 14px; text-align: center;
  font: 400 var(--fs-xs)/1 'Roboto Mono', ui-monospace, monospace;
  color: var(--tx3);
}

/* Hoja de preferencias del Side Panel. En popup permanece fuera del flujo. */
.bt-panel-settings[hidden] { display: none; }
.bt-panel-settings {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
}
.bt-panel-settings-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(3, 6, 24, .7);
  cursor: pointer;
}
.bt-panel-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  max-height: 72vh;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: #131a3d;
  box-shadow: 0 -18px 44px rgba(0, 0, 0, .48);
  color: #fff;
  animation: bt-sheet-in 180ms cubic-bezier(.16, 1, .3, 1) both;
}
.bt-panel-sheet-handle {
  width: 36px;
  height: 4px;
  margin: 9px auto 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
}
.bt-panel-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 10px;
}
.bt-panel-sheet-head strong { flex: 1; font-size: var(--fs-lg); }
.bt-panel-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 0 14px 18px;
}
.bt-panel-sheet-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: #151a3f;
}
.bt-panel-sheet-note { color: #9ba4ce; font-size: var(--fs-sm); line-height: 1.5; }
@keyframes bt-sheet-in {
  from { clip-path: inset(100% 0 0); transform: translateY(12px); }
  to { clip-path: inset(0 0 0); transform: translateY(0); }
}

/* Implementación del handoff "Panel Lateral Unificado": en esta vista la
   cabecera, el rail y el contenido forman una sola superficie anclada. */
body.bt-view-panel {
  --bg-shell: #0b1030;
  --card: #151a3f;
  --chip: rgba(255, 255, 255, .055);
  --well: rgba(255, 255, 255, .055);
  --bd: rgba(255, 255, 255, .13);
  --bd2: rgba(255, 255, 255, .075);
  --tx2: #b6bcd8;
  --tx3: #8b93b8;
  min-width: 320px;
  overflow: hidden;
  background: #0b1030;
}
body.bt-view-panel::before { display: none; }
body.bt-view-panel .bt-shell {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  background: #0b1030;
}
body.bt-view-panel .bt-header {
  flex: 0 0 auto;
  gap: 9px;
  padding: 11px 12px 12px;
  background: linear-gradient(135deg, #4da5ff 0%, #007dff 100%);
  color: #fff;
}
body.bt-view-panel .bt-logo-full {
  width: auto;
  height: 20px;
  max-width: 132px;
  filter: brightness(0) invert(1);
}
body.bt-view-panel .bt-logo-on-light { display: none; }
body.bt-view-panel .bt-logo-on-dark { display: block; }
body.bt-view-panel .bt-status-badge { display: none; }
body.bt-view-panel .bt-panel-actions { display: flex; gap: 6px; }
.bt-panel-icon-btn {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
}
.bt-panel-icon-btn:hover { background: rgba(255, 255, 255, .27); }
.bt-panel-icon-btn:active { transform: scale(.95); }
.bt-panel-icon-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.bt-view-panel .bt-panel-room-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.bt-panel-room-context {
  flex: 1;
  overflow: hidden;
  color: rgba(255, 255, 255, .93);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bt-panel-plan {
  flex: none;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(11, 16, 48, .42);
  color: rgba(255, 255, 255, .9);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
}
.bt-panel-plan.premium { background: #ffe089; color: #4a3400; }
.bt-panel-plan.trial { background: rgba(255, 255, 255, .2); color: #fff; }

body.bt-view-panel .bt-rail {
  flex: 0 0 auto;
  gap: 5px;
  padding: 8px 7px;
  border-color: rgba(255, 255, 255, .06);
  background: #0d1236;
  scroll-padding-inline: 7px;
}
body.bt-view-panel .bt-rail-btn {
  width: 32px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .055);
  color: #8b93b8;
}
body.bt-view-panel .bt-rail-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .1); color: #fff; }
body.bt-view-panel .bt-rail-btn.active {
  background: #007dff;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 125, 255, .38);
}
body.bt-view-panel .bt-rail-btn:disabled { opacity: .42; }
body.bt-view-panel .bt-body {
  min-height: 0;
  flex: 1 1 auto;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .14) transparent;
}
body.bt-view-panel .bt-pane-title { font-size: var(--fs-xl); font-weight: 700; }
body.bt-view-panel .bt-pane-sub { color: #8b93b8; font-size: var(--fs-sm); }
body.bt-view-panel .bt-plan-banner,
body.bt-view-panel .bt-card {
  border-color: rgba(255, 255, 255, .075);
  border-radius: 14px;
  background: #151a3f;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.bt-view-panel .bt-plan-banner { min-height: 52px; padding: 10px 12px; }
body.bt-view-panel .bt-plan-banner.premium {
  border-color: rgba(255, 233, 163, .24);
  background: rgba(255, 233, 163, .08);
}
body.bt-view-panel .bt-plan-title { font-size: var(--fs-lg); }
body.bt-view-panel .bt-plan-detail { color: #8b93b8; font-size: var(--fs-sm); }
body.bt-view-panel .bt-plan-badge { border-radius: 6px; }
body.bt-view-panel .bt-hero {
  min-height: 78px;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 14px;
  background: #151a3f;
  box-shadow: none;
}
body.bt-view-panel .bt-toki-sprite { width: 50px; height: 54px; border-radius: 12px; background: linear-gradient(160deg, #4da5ff, #007dff); }
body.bt-view-panel .bt-toki-sprite::before { transform: scale(.26); }
body.bt-view-panel .bt-toki-status { color: #7ff0a8; font-size: var(--fs-xs); }
body.bt-view-panel .bt-room-title { font-size: var(--fs-lg); }
body.bt-view-panel .bt-room-desc { color: #b6bcd8; font-size: var(--fs-sm); }
body.bt-view-panel .bt-connection-label { color: #8b93b8; }
body.bt-view-panel .bt-card { gap: 9px; padding: 12px; }
body.bt-view-panel .bt-row { padding: 12px; }
body.bt-view-panel .bt-setting-label { font-size: var(--fs-lg); }
body.bt-view-panel .bt-setting-desc { color: #8b93b8; font-size: var(--fs-sm); }
body.bt-view-panel .bt-switch { width: 42px; height: 24px; }
body.bt-view-panel .bt-slider::before { top: 2px; left: 2px; }
body.bt-view-panel .bt-switch input:checked + .bt-slider::before { transform: translateX(18px); }
body.bt-view-panel .bt-seg { gap: 3px; padding: 3px; border: 0; border-radius: 9px; }
body.bt-view-panel .bt-seg-btn { padding: 6px 10px; border-radius: 7px; font-size: var(--fs-sm); }
body.bt-view-panel .bt-chip { border-radius: 9px; }
body.bt-view-panel .bt-input { border-radius: 10px; background: rgba(255, 255, 255, .06); }
body.bt-view-panel .bt-btn-primary,
body.bt-view-panel .bt-btn-ghost { border-radius: 11px; }
body.bt-view-panel .bt-footer {
  flex: 0 0 auto;
  padding: 6px 12px 13px;
  color: #6f769c;
  background: #0b1030;
}
body.bt-view-panel .bt-panel-settings { display: block; }
body.bt-view-panel .bt-panel-settings[hidden] { display: none; }
body.bt-view-panel.bt-panel-collapsed .bt-rail,
body.bt-view-panel.bt-panel-collapsed .bt-body,
body.bt-view-panel.bt-panel-collapsed .bt-footer { display: none; }
body.bt-view-panel.bt-panel-collapsed .bt-header { min-height: 78px; }
body.bt-view-panel.bt-panel-collapsed .bt-panel-chevron { transform: rotate(180deg); }
.bt-panel-chevron { transition: transform 180ms cubic-bezier(.16, 1, .3, 1); }

:root[data-theme="light"] body.bt-view-panel {
  --bg-shell: #f4f6fb;
  --card: #fff;
  --chip: #eef1f9;
  --well: #eef1f9;
  --bd: rgba(13, 40, 68, .15);
  --bd2: rgba(13, 40, 68, .09);
  --tx: #0d2844;
  --tx2: #495057;
  --tx3: #667085;
  background: #f4f6fb;
}
:root[data-theme="light"] body.bt-view-panel .bt-shell,
:root[data-theme="light"] body.bt-view-panel .bt-footer { background: #f4f6fb; }
:root[data-theme="light"] body.bt-view-panel .bt-rail { background: #eef1f9; border-color: rgba(13, 40, 68, .08); }
:root[data-theme="light"] body.bt-view-panel .bt-rail-btn { background: rgba(13, 40, 68, .055); color: #667085; }
:root[data-theme="light"] body.bt-view-panel .bt-rail-btn:hover:not(:disabled) { background: rgba(0, 125, 255, .1); color: #0069db; }
:root[data-theme="light"] body.bt-view-panel .bt-plan-banner,
:root[data-theme="light"] body.bt-view-panel .bt-card,
:root[data-theme="light"] body.bt-view-panel .bt-hero { border-color: rgba(13, 40, 68, .09); background: #fff; }
:root[data-theme="light"] body.bt-view-panel .bt-plan-banner.premium { border-color: rgba(146, 98, 10, .22); background: #fff9e8; }
:root[data-theme="light"] body.bt-view-panel .bt-room-desc,
:root[data-theme="light"] body.bt-view-panel .bt-setting-desc,
:root[data-theme="light"] body.bt-view-panel .bt-plan-detail { color: #667085; }
:root[data-theme="light"] body.bt-view-panel .bt-panel-sheet { border-color: rgba(13, 40, 68, .12); background: #f4f6fb; color: #0d2844; }
:root[data-theme="light"] body.bt-view-panel .bt-panel-sheet-handle { background: rgba(13, 40, 68, .22); }
:root[data-theme="light"] body.bt-view-panel .bt-panel-sheet-row { border-color: rgba(13, 40, 68, .09); background: #fff; }
:root[data-theme="light"] body.bt-view-panel .bt-panel-sheet .bt-panel-icon-btn { background: rgba(13, 40, 68, .08); color: #0d2844; }
:root[data-theme="light"] body.bt-view-panel .bt-panel-sheet-note { color: #667085; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bt-window-bar, .bt-plan-banner, .bt-card, .bt-btn-ghost { background-color: var(--glass-fallback); }
}

/* Títulos equilibrados y párrafos sin viudas (Chrome ≥117 / ≥128). */
.bt-pane-title, .bt-room-title, .bt-plan-title, .bt-setting-label { text-wrap: balance; }
.bt-pane-sub, .bt-room-desc, .bt-plan-detail, .bt-setting-desc, .bt-footnote, .bt-panel-sheet-note { text-wrap: pretty; }
