/* Panel autenticado — shell visual Benzax */
body.bz-app--panel {
  --panel-sidebar-w: 272px;
  --panel-topbar-h: 68px;
}

body.bz-app--panel .app-header {
  min-height: var(--panel-topbar-h);
  padding: 10px clamp(14px, 2vw, 28px);
  border-bottom: 1px solid var(--border-soft);
  /* Mismo fondo que el resto de la página (antes mezclaba con --surface,
     un tono visiblemente distinto a --bg que se notaba como una costura de
     color justo debajo del header). */
  background: var(--bg);
  box-shadow: 0 1px 12px rgb(16 21 18 / 0.05);
}

body.bz-app--panel .panel-topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: -0.025em;
  text-decoration: none;
}

body.bz-app--panel .panel-topbar-brand img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

body.bz-app--panel .panel-topbar-divider {
  width: 1px;
  height: 30px;
  margin-inline: clamp(4px, 1vw, 10px);
  background: var(--border);
}

body.bz-app--panel .panel-topbar-context {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
  /* .app-header tiene justify-content:space-between (shared/styles.css) para
     repartir sus hijos directos — acá son 3 (marca, divisor, contexto), así
     que sin esto el divisor quedaba flotando solo en el medio del header, a
     mitad de camino entre el logo y "Comercio-Pruebas" (confirmado con
     captura real). margin-left:auto empuja el contexto al extremo derecho
     antes de que el space-between reparta nada, dejando marca+divisor
     pegados a la izquierda como un solo grupo. */
  margin-left: auto;
}

body.bz-app--panel .panel-topbar-store {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bz-app--panel .panel-topbar-page {
  overflow: hidden;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.bz-app--panel .panel-shell {
  min-height: calc(100dvh - var(--app-header-h, var(--panel-topbar-h)));
  background: var(--bg);
}

/* <main> trae un padding-top/bottom:28px genérico (shared/styles.css,
   pensado para páginas simples de una sola columna) que acá se sumaba al
   padding propio de .panel-contenido, duplicando el espacio vertical arriba
   y abajo de cada pestaña del panel (confirmado con captura real: ~46px de
   negro antes de llegar al contenido, cuando .panel-contenido ya da 18px).
   El horizontal se deja: .panel-shell lo escapa con márgenes negativos para
   quedar full-bleed, y #errorBox/#avisoSesion (los únicos hijos directos de
   <main> fuera de #contenido) siguen necesitándolo para no pegarse al borde. */
body.bz-app--panel main {
  padding-top: 0;
  padding-bottom: 0;
}

body.bz-app--panel .sidebar {
  width: var(--panel-sidebar-w);
  padding: 0;
  border-right: 1px solid var(--bz-cabecera-borde);
  background: var(--bz-cabecera);
  box-shadow: none;
}

body.bz-app--panel .sidebar-nav {
  padding: 18px 12px 12px;
  gap: 18px;
}

body.bz-app--panel .bz-cajon-grupo {
  gap: 3px;
}

body.bz-app--panel .bz-cajon-grupo > .bz-micro {
  padding: 0 12px 7px;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

body.bz-app--panel .bz-cajon-item {
  min-height: 42px;
  border-radius: 11px;
}

body.bz-app--panel .bz-cajon-item:hover {
  background: var(--bz-sup-2);
  color: var(--bz-tx);
}

body.bz-app--panel .bz-cajon-item[aria-current="page"],
body.bz-app--panel .bz-cajon-item.activo {
  position: relative;
  background: var(--bz-sup);
  color: var(--bz-tx);
  box-shadow: none;
}

body.bz-app--panel .bz-cajon-item[aria-current="page"]::before,
body.bz-app--panel .bz-cajon-item.activo::before {
  position: absolute;
  inset: 9px auto 9px 0;
  width: 3px;
  border-radius: 99px;
  background: var(--bz-brand-gradient);
  content: "";
}

body.bz-app--panel .bz-cajon-item[aria-current="page"] .ic,
body.bz-app--panel .bz-cajon-item.activo .ic {
  color: var(--bz-brand-teal-300);
}

body.bz-app--panel #btnSalir {
  min-height: 42px;
  margin: auto 12px 16px;
  border-color: var(--bz-borde-fuerte);
  background: var(--bz-sup-2);
  color: var(--bz-tx-2);
}

body.bz-app--panel .panel-contenido {
  min-width: 0;
  padding: clamp(10px, 1.5vw, 18px) clamp(14px, 3vw, 40px) 48px;
}

body.bz-app--panel .panel-contenido > .tab:not([hidden]) {
  width: min(100%, 1400px);
  margin-inline: auto;
}

body.bz-app--panel .panel-contenido h1,
body.bz-app--panel .panel-contenido h2 {
  letter-spacing: -0.03em;
}

body.bz-app--panel .panel-contenido .card,
body.bz-app--panel .panel-contenido .bz-tarjeta,
body.bz-app--panel .panel-contenido .bz-resumen {
  border-color: var(--border-soft);
  box-shadow: var(--bz-shadow-sm);
}

body.bz-app--panel .panel-contenido :where(input, select, textarea) {
  border-radius: var(--bz-radius-sm);
}

body.bz-app--panel .panel-contenido table {
  border-collapse: separate;
  border-spacing: 0;
}

body.bz-app--panel .panel-contenido thead th {
  position: sticky;
  top: var(--app-header-h, var(--panel-topbar-h));
  z-index: 3;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.73rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.bz-app--panel .panel-contenido tbody tr {
  transition: background-color var(--bz-duration-fast) var(--bz-ease-standard);
}

body.bz-app--panel .panel-contenido tbody tr:hover {
  background: color-mix(in srgb, var(--primary-soft) 46%, transparent);
}

@media (min-width: 1001px) {
  body.bz-app--panel {
    --panel-sidebar-w-colapsado: 68px;
  }

  /* El contenido reserva permanentemente el ancho angosto (franja de solo
     íconos) y nunca se anima: el sidebar, que ya es position:fixed, se
     expande ENCIMA de él como un panel flotante al pasar el mouse — así no
     hay reflow del contenido cada vez que el usuario lo bordea. */
  body.bz-app--panel .panel-shell:not([hidden]) {
    position: relative;
    display: block;
    padding-left: var(--panel-sidebar-w-colapsado);
  }

  body.bz-app--panel .sidebar {
    position: fixed;
    top: var(--app-header-h, var(--panel-topbar-h));
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 20;
    box-sizing: border-box;
    width: var(--panel-sidebar-w-colapsado);
    max-width: none;
    height: auto;
    transform: none;
    transition: width var(--bz-duration-normal) var(--bz-ease-standard), box-shadow var(--bz-duration-normal) var(--bz-ease-standard);
  }

  body.bz-app--panel .panel-contenido {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  body.bz-app--panel .fondo-sidebar {
    display: none;
  }

  body.bz-app--panel .bz-nav-inf {
    display: none;
  }

  /* ---------- Sidebar hover-expand ---------- */
  /* En reposo el sidebar queda angosto (solo íconos); al pasar el mouse o
     al enfocar algo adentro con el teclado (:focus-within, para que la
     navegación por teclado también vea las etiquetas) se expande a su
     ancho completo, flotando con sombra sobre el contenido. */
  body.bz-app--panel .bz-cajon-item,
  body.bz-app--panel #btnSalir {
    gap: 0;
    justify-content: center;
  }

  body.bz-app--panel .bz-cajon-item span:not(.ic),
  body.bz-app--panel #btnSalir span:not(.ic) {
    width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity var(--bz-duration-fast) var(--bz-ease-standard);
  }

  body.bz-app--panel .bz-cajon-grupo > .bz-micro {
    height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity var(--bz-duration-fast) var(--bz-ease-standard);
  }

  body.bz-app--panel .sidebar:hover,
  body.bz-app--panel .sidebar:focus-within {
    width: var(--panel-sidebar-w);
    box-shadow: var(--bz-shadow-md);
  }

  body.bz-app--panel .sidebar:hover .bz-cajon-item,
  body.bz-app--panel .sidebar:focus-within .bz-cajon-item,
  body.bz-app--panel .sidebar:hover #btnSalir,
  body.bz-app--panel .sidebar:focus-within #btnSalir {
    gap: 12px;
    justify-content: flex-start;
  }

  body.bz-app--panel .sidebar:hover .bz-cajon-item span:not(.ic),
  body.bz-app--panel .sidebar:focus-within .bz-cajon-item span:not(.ic),
  body.bz-app--panel .sidebar:hover #btnSalir span:not(.ic),
  body.bz-app--panel .sidebar:focus-within #btnSalir span:not(.ic) {
    width: auto;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
  }

  body.bz-app--panel .sidebar:hover .bz-cajon-grupo > .bz-micro,
  body.bz-app--panel .sidebar:focus-within .bz-cajon-grupo > .bz-micro {
    height: auto;
    padding: 0 12px 7px;
    margin: 0;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
  }

  /* Al elegir una pestaña el mouse sigue físicamente sobre el sidebar (el
     click no lo mueve), así que sin esto el :hover de arriba lo mantendría
     expandido tapando contenido. app.js agrega esta clase al navegar y la
     saca recién cuando el mouse realmente se va del sidebar (mouseleave). */
  body.bz-app--panel .sidebar.bz-sidebar-recien-navegado {
    width: var(--panel-sidebar-w-colapsado);
    box-shadow: none;
  }

  body.bz-app--panel .sidebar.bz-sidebar-recien-navegado .bz-cajon-item {
    gap: 0;
    justify-content: center;
  }

  body.bz-app--panel .sidebar.bz-sidebar-recien-navegado .bz-cajon-item span:not(.ic),
  body.bz-app--panel .sidebar.bz-sidebar-recien-navegado .bz-cajon-grupo > .bz-micro {
    width: 0;
    height: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    body.bz-app--panel .sidebar,
    body.bz-app--panel .bz-cajon-item span:not(.ic),
    body.bz-app--panel .bz-cajon-grupo > .bz-micro {
      transition: none;
    }
  }
}

@media (max-width: 1000px) {
  body.bz-app--panel .panel-topbar-brand span {
    display: none;
  }

  body.bz-app--panel .panel-topbar-divider {
    margin-inline: 2px 8px;
  }

  body.bz-app--panel .sidebar {
    top: 0;
    z-index: 40;
    box-shadow: 18px 0 48px rgb(0 0 0 / 0.28);
  }

  body.bz-app--panel .panel-contenido {
    padding-bottom: calc(92px + env(safe-area-inset-bottom));
  }

  body.bz-app--panel .bz-nav-inf {
    box-shadow: 0 -8px 28px rgb(0 0 0 / 0.16);
  }
}

/* .tabla-wrap es un <div> que envuelve una <table> ancha (ver stock.js,
   catalogo.js, ventaRapida.js). El overflow-x tiene que ir en ese wrapper:
   un <table> no respeta max-width/overflow-x puestos directamente sobre
   él (lo confirma Chromium — el navegador igual lo agranda al ancho del
   contenido), así que `[class*="tabla"]` solo no alcanza para las tablas
   que no estén envueltas. El borde redondeado es la señal visual de que
   se puede arrastrar para ver más columnas, igual que en operador.css
   (.op-scroll-x). Para sumar otra tabla a este patrón: envolverla en
   `<div class="tabla-wrap" tabindex="0" role="region" aria-label="...">`.
   Fuera de cualquier @media a propósito: con 6-7 columnas (imagen, inputs,
   selects) la tabla puede ser más ancha que la tarjeta incluso en desktop
   si la ventana no está maximizada — antes esto solo scrolleaba hasta
   1000px y arriba de eso se cortaba sin ninguna forma de verlo completo. */
body.bz-app--panel .panel-contenido .tabla-wrap,
body.bz-app--panel .panel-contenido [class*="tabla"] {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

body.bz-app--panel .panel-contenido .tabla-wrap {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}

body.bz-app--panel .panel-contenido .tabla-wrap table {
  width: max-content;
  min-width: 100%;
}

/* El overflow-x del wrapper lo convierte en su propio contenedor de scroll,
   así que el thead sticky (pensado para la página completa) se pega mal y
   tapa filas. */
body.bz-app--panel .panel-contenido .tabla-wrap thead th {
  position: static;
}

@media (max-width: 700px) {
  body.bz-app--panel .app-header {
    min-height: 60px;
    padding: 8px 10px;
  }

  body.bz-app--panel .panel-topbar-store {
    max-width: 150px;
  }

  body.bz-app--panel .panel-contenido {
    padding-inline: 10px;
  }

  body.bz-app--panel .panel-contenido .card,
  body.bz-app--panel .panel-contenido .bz-tarjeta {
    padding: 16px;
    border-radius: 15px;
  }

  body.bz-app--panel .panel-contenido :where(button, input, select) {
    min-height: 44px;
  }
}


/* El acceso mantiene su composición original y adopta la firma cromática del logo. */
body.bz-app--panel .bz-login {
  --bz-green: var(--bz-brand-teal-500);
  --bz-green-ink: var(--bz-brand-teal-700);
}

body.bz-app--panel .bz-login .bz-seg-ind {
  background: var(--bz-brand-gradient);
}

body.bz-app--panel .bz-login .bz-submit {
  position: relative;
  overflow: hidden;
}

body.bz-app--panel .bz-login .bz-submit::after {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--bz-brand-gradient);
  content: "";
}

body.bz-app--panel .bz-login .bz-mark {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 12px 30px rgb(34 203 164 / 0.14);
}

body.bz-app--panel .login-visual-glow {
  background:
    radial-gradient(circle at 28% 30%, rgb(34 203 164 / 0.18), transparent 38%),
    radial-gradient(circle at 72% 68%, rgb(122 73 232 / 0.2), transparent 42%);
}