@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-var.woff2") format("woff2-variations"), url("/fonts/space-grotesk-var.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/montserrat-var.woff2") format("woff2-variations"), url("/fonts/montserrat-var.woff2") format("woff2");
}

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --surface-sunken: #ffffff;
  --border: #e4e7ec;
  --border-soft: #edeff3;
  --text: #10151f;
  --text-muted: #5f6879;
  --primary: #047857;
  --primary-hover: #065f46;
  --primary-soft: #ecfdf5;
  --primary-soft-text: #047857;
  --primary-contrast: #ffffff;
  --accent: #7c3aed;
  --info: #026aa2;
  --danger: #c81e1e;
  --danger-bg: #fef2f2;
  --danger-contrast: #ffffff;
  --warning: #b45309;
  --warning-bg: #fffbeb;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 21, 31, 0.04), 0 1px 3px rgba(16, 21, 31, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 21, 31, 0.06), 0 2px 4px rgba(16, 21, 31, 0.04);
  --ring: rgba(5, 150, 105, 0.25);
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0e14;
    --surface: #131722;
    --surface-2: #182029;
    --surface-sunken: #0d1017;
    --border: #232a3d;
    --border-soft: #1e2436;
    --text: #f2f4f8;
    --text-muted: #abb2c4;
    --primary: #22c55e;
    --primary-hover: #16a34a;
    --primary-soft: #12341f;
    --primary-soft-text: #4ade80;
    --primary-contrast: #05170c;
    --accent: #c4b5fd;
    --info: #7dd3fc;
    --danger: #f87171;
    --danger-bg: #2a1414;
    --danger-contrast: #1f0909;
    --warning: #fbbf24;
    --warning-bg: #2b2208;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
    --ring: rgba(34, 197, 94, 0.3);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0b0e14;
  --surface: #131722;
  --surface-2: #182029;
  --surface-sunken: #0d1017;
  --border: #232a3d;
  --border-soft: #1e2436;
  --text: #f2f4f8;
  --text-muted: #abb2c4;
  --primary: #22c55e;
  --primary-hover: #16a34a;
  --primary-soft: #12341f;
  --primary-soft-text: #4ade80;
  --primary-contrast: #05170c;
  --accent: #c4b5fd;
  --info: #7dd3fc;
  --danger: #f87171;
  --danger-bg: #2a1414;
  --danger-contrast: #1f0909;
  --warning: #fbbf24;
  --warning-bg: #2b2208;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --ring: rgba(34, 197, 94, 0.3);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  /* Reserva el ancho de la scrollbar siempre, aparezca o no — sin esto,
     cada vez que el contenido pasa de caber en la pantalla a necesitar
     scroll (típico al cambiar de paso en un asistente con pasos de alturas
     muy distintas, como "Tu tienda online") la scrollbar del navegador
     aparece/desaparece y todo el layout se corre unos pixels para el
     costado. No tiene efecto en navegadores con scrollbar superpuesta
     (Mac/GTK), que ya no tenían este problema. */
  scrollbar-gutter: stable;
  /* Nada en el panel necesita scroll horizontal de la página completa —
     si algún contenido angosto llegara a pasarse por unos pixels, que se
     recorte en vez de habilitar una scrollbar horizontal que corre todo
     el layout hacia el costado. */
  overflow-x: hidden;
  /* Sin esto, hacer overscroll arriba del todo (pull-to-refresh nativo del
     navegador/Android) muestra su indicador elástico — una franja ondulada
     que ocupa buena parte de la pantalla arriba de cualquier pestaña, nada
     que ver con nuestro layout. contain lo deja solo dentro del documento,
     sin disparar el gesto nativo del navegador. */
  overscroll-behavior-y: contain;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

header.app-header:not([hidden]) {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-soft);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 10;
}

header.app-header h1 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

header.app-header h1::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

header.app-header .subtitulo {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 2px;
}

main {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px;
}

/* Login/cambio de contraseña (páginas completas, sin relación con el resto
   del panel): sacan el padding vertical del <main> que sí necesitan las
   demás pestañas — el ancho ya lo resuelve .bz-login/.login-split por su
   cuenta. Clase aplicada desde JS en actualizarVista(). */
main.main-sin-padding {
  padding: 0;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px;
  margin-bottom: 20px;
  transition: box-shadow 0.15s ease;
}

.card h2 {
  font-family: var(--font-display);
  margin-top: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Título de página de las pestañas del panel (Caja, Fiados, Stock, etc.).
   Antes repetido como style="" inline e idéntico en cada pestaña. */
.titulo-pagina {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.grid:not([hidden]) {
  display: grid;
  gap: 14px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
}

input,
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  background: var(--surface-sunken);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.field {
  margin-bottom: 12px;
}

button {
  background: var(--primary);
  color: var(--primary-contrast);
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease, filter 0.15s ease;
  box-shadow: var(--shadow-sm);
}

button:not(:disabled):hover {
  background: var(--primary-hover);
  filter: brightness(1.05);
}

button:not(:disabled):active {
  transform: translateY(1px) scale(0.97);
  filter: brightness(0.95);
}

button.secundario {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}

button.secundario:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

.boton-enlace {
  display: inline-block;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.boton-enlace:hover {
  background: var(--surface-2);
}

button.peligro {
  background: var(--danger);
  color: var(--danger-contrast);
}

button.peligro:hover {
  filter: brightness(0.92);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

th,
td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
}

th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tbody tr {
  transition: background 0.1s ease;
}

tbody tr:hover {
  background: var(--surface-2);
}

.error-box {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  margin-bottom: 16px;
  font-size: 0.88rem;
  font-weight: 500;
}

/* Aviso no bloqueante de la sesión del panel (PANEL-010): el navegador no deja guardarla y queda solo en memoria. */
/* #envioDemorado (D17, tienda): misma idea que .aviso-venta-incierta — tarda, pero NO afirma que falló, así que es
   aviso (ámbar), no error (rojo). */
.aviso-sesion:not([hidden]),
.aviso-venta-incierta:not([hidden]),
#envioDemorado:not([hidden]) {
  color: var(--warning);
  background: var(--warning-bg);
  border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  margin-bottom: 16px;
  font-size: 0.88rem;
  font-weight: 500;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Auditoría UI/UX: un badge con su propio ícono (ej. "$ a favor", "⚠ en contra") no necesita además el punto de
   ::before — mostrar los dos a la vez (visto primero en los chips de Proveedores) se veía como dos marcadores
   compitiendo y corridos entre sí. Causa raíz, no por pantalla: cualquier badge con un .ic adentro cae acá. */
.badge:has(.ic)::before {
  display: none;
}

.badge-pendiente {
  background: var(--warning-bg);
  color: var(--warning);
}

.badge-confirmado {
  background: var(--primary-soft);
  color: var(--primary-soft-text);
}

.badge-cancelado {
  background: var(--danger-bg);
  color: var(--danger);
}

.badge-quiebre {
  background: var(--danger-bg);
  color: var(--danger);
}

/* ---------- Panel del comercio: menú desplegable (reemplaza los tabs horizontales) ---------- */
/* Siempre un menú que se despliega con el botón ☰, en cualquier tamaño de
   pantalla — no ocupa espacio fijo del layout ni en desktop. */
.panel-shell {
  display: block;
}

/* El shell del panel (cajón + contenido) ocupa todo el ancho de la ventana,
   igual que ya hacían #tab-venta y #tab-personalizacion por su cuenta —
   ahora es el shell entero el que escapa el max-width:980px de <main>, para
   que el cajón quede pegado al borde izquierdo como una app de verdad. */
.panel-shell:not([hidden]) {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.panel-contenido {
  --panel-pad-x: 16px;
  padding: 20px var(--panel-pad-x) 32px;
}
@media (min-width: 901px) {
  .panel-contenido {
    --panel-pad-x: 40px;
    padding: 28px var(--panel-pad-x) 40px;
  }
  .panel-contenido > .tab:not([hidden]) {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 260px;
  max-width: 82vw;
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
  padding: 18px 12px;
  z-index: 30;
  overflow-y: auto;
  /* El cajón scrollea si hace falta, pero sin la barra de scroll siempre
     visible del navegador (desentona con el resto del cajón, que no tiene
     ningún otro elemento de chrome nativo). */
  scrollbar-width: none;
  transform: translateX(-100%);
  transition: transform 0.2s ease;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar.abierto {
  transform: translateX(0);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav button {
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.sidebar-nav button:hover {
  background: var(--surface-2);
  color: var(--text);
}

.sidebar-nav button.activo {
  background: var(--primary-soft);
  color: var(--primary-soft-text);
}

.panel-contenido {
  min-width: 0;
}

.icono-solo {
  padding: 8px 11px;
  font-size: 1rem;
  line-height: 1;
}

.fondo-sidebar {
  display: none;
}

.fondo-sidebar.abierto {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 29;
}

.modal-overlay:not([hidden]) {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 40;
}

.modal-caja {
  width: 100%;
  max-width: 420px;
}

/* Editor de recorte cuadrado al subir una foto de producto (fase 31): el
   viewport es la ventana fija que se ve, la <img> adentro se mueve/escala
   con drag + el slider de zoom. touch-action:none evita que el navegador
   interprete el arrastre como scroll de la página en celular. */
.recorte-viewport {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  touch-action: none;
  cursor: grab;
}
.recorte-viewport:active {
  cursor: grabbing;
}
.recorte-viewport img {
  position: absolute;
  max-width: none;
  max-height: none;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.muted {
  color: var(--text-muted);
  font-size: 0.85rem;
}

kbd {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface-2);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}

.lista-resultados {
  position: relative;
  margin-top: -6px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  max-height: 220px;
  overflow-y: auto;
}

.lista-resultados-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--border-soft);
  box-shadow: none;
  padding: 10px 12px;
  font-weight: 500;
  cursor: pointer;
}

.lista-resultados-item:last-child {
  border-bottom: none;
}

.lista-resultados-item:hover {
  background: var(--surface-2);
}

.grid-medios-pago {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

/* Viven siempre sobre el panel oscuro .venta-resumen (fondo de "caja
   registradora", fijo en ambos temas del panel) — por eso los colores acá
   están hardcodeados y no usan las variables --surface-2/--text-muted. */
.medio-pago-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.04);
  color: #a3a6ac;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  padding: 9px 4px;
  text-align: center;
  font-size: 0.719rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.medio-pago-btn:hover {
  background: rgba(255, 255, 255, 0.09);
}

.medio-pago-btn.activo {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border-color: #22c55e;
  transform: scale(1.03);
}

.medio-pago-btn .punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot-color, currentColor);
  flex-shrink: 0;
  transition: background 0.18s ease;
}

.medio-pago-btn.activo .punto {
  background: #22c55e;
}

/* Segundo medio de pago (Venta Rápida, "Dividir el pago"): no puede repetir el medio principal ya elegido. */
.medio-pago-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.medio-pago-btn:disabled:hover {
  background: rgba(255, 255, 255, 0.04);
}

.acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.login-box {
  max-width: 400px;
  margin: 72px auto;
  box-shadow: var(--shadow-md);
}

/* ---------- Login split-screen (panel del comercio) ---------- */
.login-split:not([hidden]) {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 90px);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.login-panel-form {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
  background: var(--bg);
}

.login-panel-form-inner {
  width: 100%;
  max-width: 380px;
}

/* Entrada escalonada solo en los elementos estáticos del header (no en los
   grupos loginDueno/loginEmpleado: esos se ocultan con [hidden] al cambiar de
   tab, y re-animarlos en cada toggle los dejaba "trabados" a mitad de fade. */
.login-logo,
.login-heading,
.login-tabs {
  animation: login-fade-up 0.5s ease both;
}

.login-logo {
  animation-delay: 0s;
}
.login-heading {
  animation-delay: 0.08s;
}
.login-tabs {
  animation-delay: 0.16s;
}

@keyframes login-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-logo,
  .login-heading,
  .login-tabs {
    animation: none;
  }
}

.login-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 18px;
}

.login-heading {
  margin-bottom: 22px;
}

.login-title {
  margin: 0;
  font-size: 1.4rem;
}

.login-desc {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.login-tabs {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin-bottom: 20px;
}

.login-tab {
  flex: 1;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: none;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.login-tab:hover {
  background: transparent;
  color: var(--text);
}

.login-tab.activo {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.login-submit {
  width: 100%;
  margin-top: 4px;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.login-submit:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.login-panel-visual {
  flex: 1 1 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #0c7f6f 0%, #176e9c 50%, #8453ce 100%);
  color: #ffffff;
}

.login-visual-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 55%);
  pointer-events: none;
}

.login-visual-icon {
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25));
}

.login-visual-word {
  height: 28px;
}

.login-visual-word span {
  color: #ffd166;
}

.login-visual-tagline {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.85;
}

@media (max-width: 768px) {
  .login-split {
    min-height: 0;
  }
  .login-panel-form {
    align-items: flex-start;
    padding-top: 48px;
  }
  .login-panel-visual {
    display: none;
  }
}

.stack:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fila:not([hidden]) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* Un .fila que es celda directa de un .grid de formulario (el botón de
   "Agregar X" al final de la fila) se estira a la altura de la fila entera
   -label+input de sus hermanos .field- y por default queda centrado sobre
   esa altura, no sobre la altura del input. align-items en .fila alinea a
   SUS hijos, no a sí misma dentro del .grid padre — hace falta align-self
   para que el botón quede a la misma altura que el input de al lado. */
.grid > .fila {
  align-self: flex-end;
}

/* Calendario de agenda de pedidos programados (fase 23) — tienda pública */
.calendario-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.calendario-header button {
  padding: 4px 12px;
}

.calendario-grilla {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.dia-calendario {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  border: 1px solid transparent;
  background: none;
  box-shadow: none;
  padding: 0;
}

.dia-calendario.nombre-dia {
  font-weight: 600;
  color: var(--text-muted);
  cursor: default;
}

.dia-calendario.vacio {
  cursor: default;
}

.dia-calendario.disponible {
  background: var(--primary-soft);
  color: var(--primary-soft-text);
  cursor: pointer;
  font-weight: 600;
}

.dia-calendario.disponible:hover {
  background: var(--primary);
  color: white;
}

.dia-calendario.no-disponible {
  color: var(--text-muted);
  opacity: 0.4;
  cursor: not-allowed;
}

.dia-calendario.seleccionado {
  background: var(--primary);
  color: white;
}

/* ---------- Switch tipo pill (reemplaza los <input type="checkbox"> sueltos en ajustes on/off) ---------- */
.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: normal;
}

.toggle-switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch .toggle-pista {
  width: 44px;
  height: 25px;
  border-radius: var(--radius-pill);
  background: var(--border);
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.toggle-switch .toggle-pista::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: left 0.15s ease;
}

.toggle-switch input:checked + .toggle-pista {
  background: var(--primary);
}

.toggle-switch input:checked + .toggle-pista::after {
  left: 22px;
}

.toggle-switch input:focus-visible + .toggle-pista {
  box-shadow: 0 0 0 3px var(--ring);
}

/* ---------- Detalle de producto en el panel (fase 31: rediseño más prolijo) ---------- */
.detalle-producto-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.fotos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.foto-grid-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
}

.foto-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.foto-grid-quitar {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: none;
}

.foto-grid-quitar:hover {
  background: var(--danger);
}

.oferta-bloque {
  padding: 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}

.oferta-bloque:last-of-type {
  margin-bottom: 14px;
}

.oferta-bloque-titulo {
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  margin-bottom: 8px;
}

/* ---------- Paleta de colores rápida (presets junto a un <input type="color">) ---------- */
.swatch-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.swatch {
  width: 22px;
  height: 22px;
  /* Sin esto, el min-height:2.75rem genérico de los <button> del panel
     (benzax-design-system.css, :where(.bz-app) button) le gana al height
     acá declarado y el swatch queda ovalado en vez de circular (confirmado
     con captura real: 22px de ancho contra ~44px de alto). */
  min-height: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  padding: 0;
  box-shadow: none;
  transition: transform 0.1s ease;
}

.swatch:hover {
  transform: scale(1.15);
}

/* ---------- Botón de tema claro/oscuro (header) ---------- */
#btnTema {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
  padding: 8px 11px;
  font-size: 1rem;
  line-height: 1;
}

#btnTema:hover {
  background: var(--surface);
}

/* ---------- Confirmación breve tipo "Guardado ✓" en botones de guardar ---------- */
button.confirmado {
  background: var(--primary-soft) !important;
  color: var(--primary-soft-text) !important;
}

/* ---------- Venta rápida: botones en pastilla, panel de venta en línea ---------- */
button.pill {
  border-radius: var(--radius-pill);
  padding: 11px 20px;
}

/* ---------- Venta rápida: tokens exactos del mock (claude.ai/design), fijos
   para esta pantalla y ligados al toggle de tema existente del panel ---------- */
#tab-venta:not([hidden]) {
  /* Se escapa del padding horizontal de .panel-contenido (antes escapaba el
     max-width:980px de <main> con un truco en vw — dejó de servir al sumar
     el cajón de navegación fijo en desktop, que le resta ancho real al
     viewport; esta versión escapa el padding del contenedor inmediato en
     vez del viewport entero, así sigue llegando exactamente hasta el borde
     del cajón sin superponerse). */
  display: block;
  width: calc(100% + (2 * var(--panel-pad-x, 16px)));
  margin-left: calc(-1 * var(--panel-pad-x, 16px));
  margin-right: calc(-1 * var(--panel-pad-x, 16px));
  padding: 0 28px;
  box-sizing: border-box;
}

#tab-venta {
  --vr-text: #15161a;
  --vr-text-muted: #686b71;
  --vr-ok: #12733f;
  --vr-hairline: rgba(0, 0, 0, 0.07);
  --vr-card-bg: #ffffff;
  --vr-card-border: rgba(0, 0, 0, 0.08);
  --vr-input-bg: #fbfbf9;
  --vr-input-border: rgba(0, 0, 0, 0.08);
  --vr-dashed-border: rgba(0, 0, 0, 0.1);
  --vr-row-hover: #f7f6f2;
  --vr-qty-pill-bg: #f2f2ee;
  --vr-qty-dec-bg: rgba(0, 0, 0, 0.06);
  --vr-secondary-border: rgba(0, 0, 0, 0.14);
  --vr-secondary-text: #3a3d43;
  --vr-secondary-hover: rgba(0, 0, 0, 0.03);
  --vr-grid-line: rgba(0, 0, 0, 0.025);
  --vr-empty-bg: #fbfbf9;
  --vr-connector: rgba(0, 0, 0, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #tab-venta {
    --vr-text: #f0efe9;
    --vr-text-muted: #8a8d92;
    --vr-ok: #4ade80;
    --vr-hairline: rgba(255, 255, 255, 0.09);
    --vr-card-bg: #1a1a16;
    --vr-card-border: rgba(255, 255, 255, 0.08);
    --vr-input-bg: #111110;
    --vr-input-border: rgba(255, 255, 255, 0.1);
    --vr-dashed-border: rgba(255, 255, 255, 0.14);
    --vr-row-hover: rgba(255, 255, 255, 0.04);
    --vr-qty-pill-bg: rgba(255, 255, 255, 0.06);
    --vr-qty-dec-bg: rgba(255, 255, 255, 0.08);
    --vr-secondary-border: rgba(255, 255, 255, 0.16);
    --vr-secondary-text: #d8d9d6;
    --vr-secondary-hover: rgba(255, 255, 255, 0.05);
    --vr-grid-line: rgba(0, 0, 0, 0.025);
    --vr-empty-bg: #151512;
    --vr-connector: rgba(255, 255, 255, 0.22);
  }
}

:root[data-theme="dark"] #tab-venta {
  --vr-text: #f0efe9;
  --vr-text-muted: #8a8d92;
  --vr-ok: #4ade80;
  --vr-hairline: rgba(255, 255, 255, 0.09);
  --vr-card-bg: #1a1a16;
  --vr-card-border: rgba(255, 255, 255, 0.08);
  --vr-input-bg: #111110;
  --vr-input-border: rgba(255, 255, 255, 0.1);
  --vr-dashed-border: rgba(255, 255, 255, 0.14);
  --vr-row-hover: rgba(255, 255, 255, 0.04);
  --vr-qty-pill-bg: rgba(255, 255, 255, 0.06);
  --vr-qty-dec-bg: rgba(255, 255, 255, 0.08);
  --vr-secondary-border: rgba(255, 255, 255, 0.16);
  --vr-secondary-text: #d8d9d6;
  --vr-secondary-hover: rgba(255, 255, 255, 0.05);
  --vr-grid-line: rgba(0, 0, 0, 0.025);
  --vr-empty-bg: #151512;
  --vr-connector: rgba(255, 255, 255, 0.22);
}

@keyframes ventaPanelIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.venta-card {
  border-radius: 20px;
  padding: 32px;
  background: var(--vr-card-bg);
  border-color: var(--vr-card-border);
}

.venta-card-ventas {
  border-radius: 20px;
  padding: 18px 20px;
  background: var(--vr-card-bg);
  border-color: var(--vr-card-border);
}

.venta-titulo-lg {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--vr-text);
  margin: 0;
}

.venta-listo {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--vr-ok, #178a4c);
}

.venta-subtitulo {
  font-size: 13px;
  color: var(--vr-text-muted);
  margin: 4px 0 0;
  max-width: 440px;
  line-height: 1.5;
}

.venta-subtitulo kbd,
.venta-kbd {
  font: 700 10.5px ui-monospace, monospace;
  padding: 2px 6px;
  border-radius: 5px;
  background: #111214;
  color: #f4f3ee;
  border: none;
}

/* Botón "Modo dueño / <empleado>": estilo secundario translúcido, con
   punto verde, tanto en el header idle (grande) como en el activo (chico). */
.venta-btn-secundario,
.venta-btn-secundario-sm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--vr-secondary-border);
  color: var(--vr-secondary-text);
  box-shadow: none;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.2s ease, color 0.2s ease;
}
.venta-btn-secundario {
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 13px;
}
.venta-btn-secundario-sm {
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 12.5px;
  gap: 7px;
}
.venta-btn-secundario:hover,
.venta-btn-secundario-sm:hover {
  background: var(--vr-secondary-hover);
}
.venta-btn-secundario:active,
.venta-btn-secundario-sm:active {
  transform: scale(0.96);
}

.venta-dot-verde {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

/* Botón "Nueva venta": negro con acentos verdes, no el verde sólido del resto del panel. */
.venta-btn-nueva {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 10px;
  background: #111214;
  border: 1px solid #111214;
  color: #f4f3ee;
  font-size: 14px;
  font-weight: 700;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.venta-btn-nueva:hover {
  background: #111214;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(17, 18, 20, 0.22);
}
.venta-btn-nueva:active {
  transform: scale(0.96);
}
.venta-btn-nueva svg {
  flex-shrink: 0;
}
.venta-btn-nueva kbd {
  background: rgba(255, 255, 255, 0.1);
  color: #22c55e;
}

/* ---------- Estado inicial (sin venta en curso) ---------- */
#ventaIdleCard[hidden],
#ventaActivo[hidden] {
  display: none;
}

.venta-idle-box {
  margin-top: 28px;
  position: relative;
  border: 1px solid var(--vr-card-border);
  border-radius: 16px;
  background: repeating-linear-gradient(0deg, var(--vr-grid-line) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, var(--vr-grid-line) 0 1px, transparent 1px 28px), var(--vr-empty-bg);
  padding: 40px 24px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.venta-idle-icono {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #111214;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.venta-idle-icono-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #2dd4bf, #8b5cf6);
  position: relative;
  overflow: hidden;
}
.venta-idle-icono-mark .dot1,
.venta-idle-icono-mark .dot2 {
  position: absolute;
  border-radius: 50%;
}
.venta-idle-icono-mark .dot1 {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.85);
  left: 4px;
  top: 4px;
}
.venta-idle-icono-mark .dot2 {
  width: 6px;
  height: 6px;
  background: rgba(10, 10, 13, 0.5);
  right: 4px;
  bottom: 4px;
}

.venta-idle-connector {
  max-width: 100%;
  display: block;
  overflow: visible;
  stroke: var(--vr-connector);
  margin-top: -2px;
}

.venta-hint-pills {
  width: 300px;
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: -2px;
}

.venta-hint-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  background: #111214;
  font: 700 9.5px ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: #e7e7e3;
  text-transform: uppercase;
  white-space: nowrap;
}

.venta-hint-pill .punto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.venta-idle-titulo {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--vr-text);
  margin-top: 22px;
}

.venta-idle-sub {
  font-size: 13px;
  color: var(--vr-text-muted);
  margin: 4px 0 0;
}

/* ---------- Venta en curso: header propio + dos columnas, sin tarjeta contenedora ---------- */
.venta-activo {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 20px;
  animation: ventaPanelIn 0.2s ease;
}

.venta-dot-glow {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  flex-shrink: 0;
}

.venta-titulo-sm {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--vr-text);
}

.venta-badge-activa {
  font: 700 10.5px ui-monospace, monospace;
  color: var(--vr-ok, #178a4c);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.venta-btn-cancelar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(220, 38, 38, 0.28);
  color: #b91c1c;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease;
}
.venta-btn-cancelar:hover {
  background: rgba(220, 38, 38, 0.06);
}
.venta-btn-cancelar:active {
  transform: scale(0.96);
}
.venta-btn-cancelar kbd {
  font: 700 10px ui-monospace, monospace;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(220, 38, 38, 0.1);
  color: inherit;
}
:root[data-theme="dark"] .venta-btn-cancelar {
  border-color: rgba(248, 113, 113, 0.42);
  color: var(--danger);
}
:root[data-theme="dark"] .venta-btn-cancelar:hover,
:root[data-theme="dark"] .venta-btn-cancelar kbd {
  background: var(--danger-bg);
}

.venta-panel-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 760px) {
  .venta-panel-grid {
    grid-template-columns: 1fr;
  }
}

.venta-agregar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--vr-card-bg);
  border: 1px solid var(--vr-card-border);
  border-radius: 18px;
  padding: 24px;
  animation: ventaPanelIn 0.32s ease;
}

.venta-panel-titulo {
  font: 700 10.5px ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vr-text-muted);
  margin: 0;
}

.buscador-fila {
  display: flex;
  gap: 10px;
}

.buscador-caja {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.buscador-caja input {
  width: 100%;
  padding: 15px 14px 15px 42px;
  border-radius: 12px;
  background: var(--vr-input-bg);
  border: 1.5px solid var(--vr-input-border);
  color: var(--vr-text);
  font-size: 15px;
  font-weight: 600;
}

.buscador-caja input:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
}

.buscador-icono {
  position: absolute;
  left: 14px;
  color: var(--vr-ok, #178a4c);
  display: flex;
  pointer-events: none;
}

/* Igual que en el mock: no sigue el tema oscuro (siempre clara), a
   propósito — así está definida esta pantalla en el diseño original. */
.venta-btn-camara {
  flex-shrink: 0;
  padding: 0 18px;
  border-radius: 12px;
  background: #fbfbf9;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #54575e;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: transform 0.12s ease, background 0.15s ease;
}
.venta-btn-camara:hover {
  background: #f2f2ee;
}
.venta-btn-camara:active {
  transform: scale(0.95);
}

.venta-scan-feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 10px;
  color: var(--vr-ok, #178a4c);
  font-size: 13px;
  font-weight: 700;
  animation: ventaFieldIn 0.25s ease;
}

@keyframes ventaFieldIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.venta-scan-feedback[hidden] {
  display: none;
}

#ventaInputBuscar {
  background: var(--vr-input-bg);
  border: 1px solid var(--vr-input-border);
  color: var(--vr-secondary-text);
  font-size: 13.5px;
  font-weight: 500;
  padding: 12px 14px;
  border-radius: 10px;
}
#ventaInputBuscar:focus {
  border-color: var(--vr-secondary-border);
  box-shadow: none;
}

.venta-resultados {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.venta-resultados[hidden] {
  display: none;
}

/* Es un <button> (antes un <div> solo clickeable, inalcanzable con Tab): se le quita lo del botón genérico (texto blanco, relleno, sombra)
   y el hover verde del botón primario no le gana al propio. */
button.venta-resultados-item {
  width: 100%;
  font: inherit;
  text-align: left;
  color: var(--vr-text);
  box-shadow: none;
}
.venta-resultados-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--vr-input-bg);
  border: 1px solid var(--vr-input-border);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  animation: ventaFilaIn 0.2s ease;
}
button.venta-resultados-item:not(:disabled):hover,
.venta-resultados-item:hover {
  background: var(--vr-row-hover);
  border-color: rgba(34, 197, 94, 0.25);
  transform: translateX(2px);
}

.venta-resultados-nombre {
  font-size: 13.5px;
  color: var(--vr-text);
  font-weight: 600;
}

.venta-resultados-precio {
  font-size: 13px;
  color: var(--vr-ok, #178a4c);
  font-weight: 700;
}

.venta-resultados-vacio {
  font-size: 12.5px;
  color: var(--vr-text-muted);
  padding: 8px 2px;
}

.quickpicks {
  margin: 0;
}
.quickpicks-titulo {
  font-size: 0.76rem;
  color: var(--vr-text-muted);
  margin: 0 0 10px;
}
.quickpicks-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-producto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--vr-input-bg);
  color: var(--vr-text);
  border: 1px solid var(--vr-input-border);
  box-shadow: none;
  padding: 8px 13px;
  font-size: 0.82rem;
  font-weight: 600;
}
.chip-producto:hover {
  border-color: var(--vr-text-muted);
}
.chip-producto-precio {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--vr-text-muted);
}

.venta-carrito-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.venta-carrito-header span:first-child {
  font: 700 10.5px ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vr-text-muted);
}
.venta-carrito-header span:last-child {
  font-size: 12px;
  font-weight: 600;
  color: var(--vr-text-muted);
}

.carrito-lista {
  background: transparent;
  padding: 0;
  margin: 0;
}

.carrito-vacio {
  padding: 26px 10px;
  text-align: center;
  color: var(--vr-text-muted);
  font-size: 13px;
  border: 1px dashed var(--vr-dashed-border);
  border-radius: 12px;
  margin: 0;
}

.carrito-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px;
  border-top: 1px solid var(--vr-hairline);
  animation: ventaFilaIn 0.24s ease;
}
@keyframes ventaFilaIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.carrito-fila:first-child {
  border-top: none;
}

.carrito-fila-nombre-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.carrito-fila-nombre {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--vr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.carrito-fila-unitario {
  font-size: 11.5px;
  color: var(--vr-text-muted, #9a9da3);
}

.carrito-fila-derecha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Radar de pérdidas → "Ver en Stock": resalta un momento la fila del producto después del scroll, para que no haya que
   buscarla a ojo en una tabla larga. */
@keyframes fila-resaltada-flash {
  0%, 100% { background: transparent; }
  20%, 80% { background: color-mix(in srgb, var(--warning) 30%, transparent); }
}
.fila-resaltada {
  animation: fila-resaltada-flash 2.5s ease-in-out;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--vr-qty-pill-bg);
  border-radius: 8px;
  padding: 4px 6px;
}
.stepper-btn {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--vr-qty-dec-bg);
  border: none;
  color: var(--vr-secondary-text);
  box-shadow: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stepper-btn[data-sumar] {
  background: rgba(34, 197, 94, 0.14);
  color: var(--vr-ok, #178a4c);
}
.stepper-cantidad {
  font-size: 13px;
  font-weight: 700;
  color: var(--vr-text);
  min-width: 14px;
  text-align: center;
}

.carrito-fila-subtotal {
  font-size: 14px;
  font-weight: 800;
  color: var(--vr-text);
  min-width: 64px;
  text-align: right;
}

.carrito-fila-quitar {
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  box-shadow: none;
  color: #b0b2b8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s ease, transform 0.12s ease;
}
.carrito-fila-quitar:hover {
  color: #b91c1c;
}
.carrito-fila-quitar:active {
  transform: scale(0.85);
}

.ajuste-texto {
  font-size: 0.82rem;
  margin: 0;
}

/* ---------- Resumen de cobro: panel oscuro tipo "caja registradora",
   fijo en ambos temas del panel (a propósito: no sigue --surface/--bg) ---------- */
.venta-resumen {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #14140f;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 26px;
  color: #f4f3ee;
  box-shadow: 0 14px 34px -16px rgba(20, 20, 15, 0.4);
  animation: ventaCartIn 0.36s ease;
}
@keyframes ventaCartIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.venta-resumen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(34, 197, 94, 0.03) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(34, 197, 94, 0.03) 0 1px, transparent 1px 26px);
}

.venta-resumen > * {
  position: relative;
}

.venta-resumen-label {
  font: 700 10.5px ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #75787f;
}

.venta-resumen-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.venta-resumen-count {
  font-size: 11.5px;
  font-weight: 600;
  color: #75787f;
}

.venta-resumen-total-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.venta-resumen-total-fila .venta-resumen-label {
  font: 700 10px ui-monospace, monospace;
  letter-spacing: 0.06em;
}

.venta-total-numero {
  font-size: 34px;
  font-weight: 800;
  color: #f4f3ee;
  letter-spacing: -0.5px;
  transition: transform 0.2s ease;
}

.venta-resumen .field {
  margin: 0;
}
.venta-resumen label {
  display: block;
  font-size: 12px;
  color: #a3a6ac;
  font-weight: 600;
  margin-bottom: 6px;
}

.venta-resumen input {
  width: 100%;
  box-sizing: border-box;
  background: #1e1e17;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 11px 13px;
  color: #f4f3ee;
  font-size: 12.5px;
}

.venta-resumen input::placeholder {
  color: #75787f;
}

.venta-resumen input:focus {
  border-color: rgba(34, 197, 94, 0.4);
  box-shadow: none;
}

#cobroDni {
  border-color: rgba(255, 255, 255, 0.06);
  color: var(--vr-text-muted, #8a8d92);
  margin-top: 2px;
}

.venta-nota-medio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-size: 12.5px;
  color: #c7c9cd;
  animation: ventaFieldIn 0.22s ease;
}
.venta-nota-medio[hidden] {
  display: none;
}
.venta-nota-medio-punto {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  flex-shrink: 0;
}

.venta-cash-input {
  padding: 14px !important;
  border-radius: 10px;
  font-size: 18px !important;
  font-weight: 800;
}

.venta-change-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  margin-top: 6px;
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.28);
  animation: ventaFieldIn 0.22s ease;
}

.venta-change-box[hidden] {
  display: none;
}

.venta-change-box.negativo {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.3);
}

.venta-change-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #22c55e;
}

.venta-change-box.negativo .venta-change-label {
  color: #f87171;
}

.venta-change-numero {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #22c55e;
  transition: transform 0.15s ease;
}

.venta-change-box.negativo .venta-change-numero {
  color: #f87171;
}

.venta-btn-cobrar {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #22c55e;
  background: #14140f;
  color: #f4f3ee;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
  box-shadow: none;
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.venta-btn-cobrar:hover {
  background: #14140f;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.2);
}
.venta-btn-cobrar:active {
  transform: scale(0.98);
}
.venta-btn-cobrar svg {
  flex-shrink: 0;
}
.venta-btn-cobrar kbd {
  font: 700 10.5px ui-monospace, monospace;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(34, 197, 94, 0.14);
  color: #22c55e;
}

.venta-btn-cobrar:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.15);
}

/* ---------- Overlay de "Procesando..." / "Venta registrada" al cobrar ---------- */
.venta-estado-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 44px 56px;
  text-align: center;
  margin-bottom: 0;
}

.venta-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(34, 197, 94, 0.2);
  border-top-color: #22c55e;
  animation: ventaGirar 0.7s linear infinite;
}

@keyframes ventaGirar {
  to {
    transform: rotate(360deg);
  }
}

.venta-exito-icono {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  color: var(--vr-ok, #178a4c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin-bottom: 6px;
}

.venta-exito-titulo {
  font-size: 17px;
  font-weight: 800;
  color: var(--vr-text);
  margin: 0;
}

.venta-exito-total {
  font-family: inherit;
  font-size: 28px;
  font-weight: 800;
  color: var(--vr-ok, #178a4c);
  margin: 0;
}

.venta-exito-detalle {
  font-size: 13px;
  color: var(--vr-text-muted, #8a8d92);
  margin: 0;
}

.venta-exito-stock {
  font-size: 11.5px;
  color: #b0b2b8;
  margin: 8px 0 0;
}

/* ---------- "Últimas ventas": eyebrow monoespaciado + tabla en el mismo estilo ---------- */
.venta-ventas-titulo {
  font: 700 10.5px ui-monospace, monospace;
  letter-spacing: 0.06em;
  color: var(--vr-text-muted);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
}

#tab-venta .venta-card-ventas table {
  font-size: 12.5px;
}
#tab-venta .venta-card-ventas th {
  font: 700 10.5px ui-monospace, monospace;
  letter-spacing: 0.04em;
  color: var(--vr-text-muted);
  text-transform: uppercase;
}
#tab-venta .venta-card-ventas td {
  color: var(--vr-secondary-text);
}
#tab-venta .venta-card-ventas td:last-child {
  color: var(--vr-text);
  font-weight: 700;
}

/* ---------- Medios de pago: una tarjeta por medio con pestañas sin/descuento/recargo ---------- */
.medio-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.medio-card-titulo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.medio-icono {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.medio-icono svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.medio-nombre {
  font-weight: 700;
  font-size: 1rem;
}

.medio-card-controles {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.segmentado {
  display: inline-flex;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}

.segmento-btn {
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
}

.segmento-btn:not(:disabled):hover {
  background: var(--border-soft);
  color: var(--text);
}

.segmento-btn.activo {
  background: var(--border-soft);
  color: var(--text);
}

.segmento-btn.activo.descuento {
  background: var(--primary);
  color: var(--primary-contrast);
}

.segmento-btn.activo.recargo {
  background: var(--warning);
  color: var(--primary-contrast);
}

.medio-input-pct:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--surface-sunken);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}

.medio-input-pct.recargo {
  border-color: var(--warning);
}

.medio-input-pct input {
  width: 34px;
  padding: 0;
  background: transparent;
  border: none;
  font-weight: 700;
  font-size: 0.88rem;
  text-align: center;
}

.medio-input-pct input:focus {
  box-shadow: none;
}

/* ---------- Catálogo: rubros, categorías, filtro por categoría, filas de producto ---------- */
.rubro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.rubro-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  background: var(--surface-sunken);
  color: var(--text);
  border: 1.5px solid var(--border);
  box-shadow: none;
  border-radius: var(--radius-sm);
  padding: 12px;
  font-weight: 700;
  font-size: 0.8rem;
}

.rubro-card:hover {
  border-color: var(--primary);
}

.rubro-card-icono {
  font-size: 1.1rem;
}

.categoria-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 600;
}

.categoria-filtro-pill {
  background: var(--surface-sunken);
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  box-shadow: none;
  border-radius: var(--radius-pill);
  padding: 7px 15px;
  font-size: 0.8rem;
  font-weight: 600;
}

.categoria-filtro-pill:hover {
  border-color: var(--text-muted);
}

.categoria-filtro-pill.activo {
  border-color: var(--color-pill, var(--primary));
  background: color-mix(in srgb, var(--color-pill, var(--primary)) 16%, transparent);
  /* El color puro sobre su propia tinta no llega a 4,5:1: se mezcla con el texto del tema (ver colorTextoLegible en panel/app.js). */
  color: color-mix(in srgb, var(--color-pill, var(--primary)) 55%, var(--text));
}

.categoria-filtro-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.categoria-filtro-eliminar {
  background: none;
  border: none;
  box-shadow: none;
  padding: 2px 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
}

.categoria-filtro-eliminar:hover {
  color: var(--danger);
}

.bulk-margen-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 22px;
  margin: 0 22px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.bulk-margen-fila select {
  width: auto;
}

.bulk-margen-pct {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}

.bulk-margen-pct input {
  width: 46px;
  padding: 0;
  background: transparent;
  border: none;
  font-weight: 700;
  text-align: right;
}

.bulk-margen-pct input:focus {
  box-shadow: none;
}

.avatar-producto {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.68rem;
  background: var(--surface-2);
}

/* ---------- Celda de producto en la tabla del catálogo (fase 31: más prolija) ---------- */
.producto-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.producto-cell-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.producto-cell-nombre {
  font-weight: 700;
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.producto-cell-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.categoria-tag-mini {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.6;
}

.producto-cell-foto-btn {
  align-self: flex-start;
  font-size: 0.72rem;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}

.input-inline {
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--border);
  border-radius: 0;
  padding: 2px 0;
}

.input-inline:focus {
  box-shadow: none;
  border-bottom-color: var(--primary);
}

/* ---------- Stock: panel de ajuste resuelto, tarjetas de sugerencia ---------- */
.segmento-btn.activo.peligro {
  background: var(--danger);
  color: #fff;
}

.resuelto-stock:not([hidden]) {
  margin-top: 16px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.sugerencia-card {
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Proveedores ---------- */
.proveedor-card {
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}

/* Cabecera (avatar + nombre) y acciones (badges/botones) en dos filas fijas
   en vez de una sola — antes badges/botones vivían en la misma fila que el
   nombre, y como esa fila no tenía flex-wrap, un proveedor con más badges
   (deuda, saldo a favor) le sacaba todo el ancho disponible al nombre en
   vez de bajar de línea, quedando cada tarjeta con una altura distinta y
   el nombre cortado de forma rara. Con dos filas siempre iguales, todas las
   tarjetas quedan parejas sin importar cuántos badges tenga cada proveedor. */
.proveedor-card-cabecera {
  display: flex;
  align-items: center;
  gap: 14px;
}
.proveedor-card-acciones {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-left: 52px; /* alinea debajo del nombre, no del avatar (mismo offset que .aviso-whatsapp) */
}

.proveedor-card .input-inline:hover,
.proveedor-card .input-inline:focus {
  border-bottom-color: var(--primary);
}

.boton-whatsapp {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  border: none;
  background: #1faa59;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  font-size: 1rem;
  text-decoration: none;
}

.boton-whatsapp.deshabilitado {
  background: var(--surface-2);
  color: var(--text-muted);
}

.aviso-whatsapp:not([hidden]) {
  color: var(--warning);
  background: var(--warning-bg);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 0.82rem;
}

/* ---------- Empleados ---------- */
.rol-leyenda-card {
  padding: 14px 16px;
  margin-bottom: 0;
}

.rol-leyenda-punto {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.empleado-card {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--surface-sunken);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}

/* Miniatura clickeable (banners de Mi tienda online): un <button> que solo envuelve la imagen, sin el aspecto del botón primario. El foco y
   el banner que se está viendo en la vista previa se marcan con el mismo aro. */
button.miniatura-boton {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 6px;
  flex-shrink: 0;
  line-height: 0;
}

button.miniatura-boton:not(:disabled):hover {
  background: none;
  filter: brightness(0.95);
}

button.miniatura-boton[aria-pressed="true"],
button.miniatura-boton:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Encabezado expandible de una fila (historial de Caja, PANEL-011): un <button> que conserva el aspecto del bloque de texto
   que ya era — sin el relleno, la sombra ni el hover del botón primario — y muestra el foco de teclado. */
button.fila-expandible {
  display: block;
  width: 100%;
  background: none;
  color: inherit;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: none;
  padding: 0;
  font: inherit;
  text-align: left;
}

button.fila-expandible:not(:disabled):hover {
  background: none;
  filter: none;
}

button.fila-expandible:not(:disabled):active {
  transform: none;
  filter: none;
}

button.fila-expandible:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

/* Tarjeta de cliente de Fiados: toda la tarjeta es el botón que abre su cuenta, y el enlace de WhatsApp queda al lado como control
   aparte (un enlace dentro de un botón es contenido interactivo anidado). El relleno pasa de la tarjeta al botón para que el área
   clickeable siga siendo la tarjeta entera, y el aro de foco queda hacia adentro para que no lo recorte el borde. */
.empleado-card.empleado-card-boton {
  padding: 0;
  gap: 0;
  flex-wrap: nowrap;
}

.empleado-card-boton > button.fila-expandible {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: 12px 16px;
}

.empleado-card-boton > button.fila-expandible:focus-visible {
  outline-offset: -2px;
}

.empleado-card-boton > .boton-whatsapp {
  margin-right: 16px;
}

/* ---------- Fiados: tarjetas de resumen ---------- */
.resumen-card {
  margin-bottom: 0;
}

.resumen-card-titulo {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.resumen-card-numero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 6px;
}

.link-liso {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  color: var(--text-muted);
  font-weight: 600;
  text-decoration: underline;
}

.link-liso:hover {
  color: var(--text);
  background: none;
}

.preview-social-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #fff;
  flex-shrink: 0;
}

.preview-envio-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(128, 128, 128, 0.15);
}

@media (max-width: 480px) {
  main {
    padding: 16px;
  }
  header.app-header {
    padding: 14px 16px;
  }
  .card {
    padding: 16px;
  }
}

/* ==========================================================================
   Rediseño "Tu tienda online" (asistente tipo wizard con vista previa en
   vivo) — mismo tratamiento de ancho completo y paleta cálida que
   #tab-venta (ver arriba): esta pestaña también escapa el max-width:980px
   de <main> para poder mostrar sidebar + formulario + vista previa como
   tres columnas.
   ========================================================================== */
#tab-personalizacion:not([hidden]) {
  /* Mismo truco que #tab-venta (ver ahí el porqué del cambio de vw a
     var(--panel-pad-x)): escapa el padding de .panel-contenido, no el
     viewport entero, para no superponerse con el cajón de navegación fijo. */
  display: block;
  width: calc(100% + (2 * var(--panel-pad-x, 16px)));
  margin-left: calc(-1 * var(--panel-pad-x, 16px));
  margin-right: calc(-1 * var(--panel-pad-x, 16px));
  padding: 0;
  box-sizing: border-box;
}

/* --tz-* antes era una paleta propia con literales fijos (ni el sistema de
   tokens viejo --bg/--surface ni el --bz-* que ya usan Reportes/Stock/
   Catálogo/Pedidos): un gris cálido en claro y un negro amarronado distinto
   del resto del panel en oscuro — por eso esta pestaña se veía "pegada
   encima" en vez de parte de la misma página (confirmado con captura real:
   una franja de fondo de un tono distinto asomando al costado de la vista
   previa). .tz-shell ahora lleva class="bz-app" data-tema="oscuro|claro"
   (igual que reportes.js/stock.js/etc. — ver temaBz() en app.js), así que
   --tz-* se alían directo a los --bz-* que ese atributo ya pone en
   alcance, en vez de mantener una traducción por tema a mano. */
.tz-shell {
  --tz-text: var(--bz-tx);
  --tz-text-muted: var(--bz-tx-3);
  --tz-text-muted2: var(--bz-tx-4);
  --tz-hairline: var(--bz-borde);
  --tz-card-bg: var(--bz-sup);
  --tz-card-border: var(--bz-borde);
  --tz-input-bg: var(--bz-input);
  --tz-input-border: var(--bz-borde-input);
  --tz-surface-2: var(--bz-sup-2);
  --tz-surface-3: var(--bz-sup-hundida);
  --tz-shell-bg: var(--bz-fondo);
  --tz-header-bg: var(--bz-cabecera);
  --tz-off: var(--bz-borde-fuerte);
  --tz-accent: var(--bz-acento);
  --tz-accent-text: var(--bz-acento-tx);
  --tz-accent-bg: var(--bz-acento-suave);
  --tz-accent-border: var(--bz-acento-borde);
}

.tz-shell {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 64px);
  background: var(--tz-shell-bg);
  color: var(--tz-text);
}

/* ---------- Barra superior: nombre de la tienda + estado + acciones ---------- */
.tz-toolbar {
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 12px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--tz-header-bg);
  border-bottom: 1px solid var(--tz-hairline);
}

.tz-toolbar-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.tz-toolbar-titulo {
  font: 700 10.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tz-text-muted);
}

.tz-toolbar-nombre {
  margin: 2px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tz-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 40vw;
}

.tz-toolbar-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tz-estado-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  font: 700 10.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--tz-accent-border);
  background: var(--tz-accent-bg);
  color: var(--tz-accent-text);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tz-estado-pill.cambios-sin-guardar {
  border-color: var(--tz-off);
  background: var(--tz-surface-2);
  color: var(--warning, #b45309);
  font-weight: 700;
}
.tz-estado-pill.cambios-sin-guardar .tz-dot {
  background: #f59e0b;
}

.tz-estado-pill .tz-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.tz-btn-ghost {
  cursor: pointer;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--tz-off);
  border-radius: 10px;
  background: transparent;
  color: var(--tz-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
  transition: background-color 0.2s ease, transform 0.12s ease;
}
.tz-btn-ghost:hover {
  background: var(--tz-surface-2);
  transform: none;
}
.tz-btn-ghost:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tz-btn-guardar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  background: var(--tz-text);
  color: var(--tz-shell-bg);
  box-shadow: none;
  transition: transform 0.12s ease, opacity 0.2s ease;
}
.tz-btn-guardar:hover {
  background: var(--tz-text);
  filter: brightness(1.15);
}
.tz-btn-guardar:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tz-link-ver-tienda {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--tz-off);
  border-radius: 10px;
  color: var(--tz-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.tz-link-ver-tienda:hover {
  background: var(--tz-surface-2);
}

.tz-body {
  flex-grow: 1;
  min-height: 0;
  display: flex;
}

/* ---------- Navegación lateral: progreso + pasos agrupados ---------- */
.tz-nav {
  width: 260px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 18px 14px;
  border-right: 1px solid var(--tz-hairline);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tz-progreso {
  padding: 16px;
  border: 1px solid var(--tz-card-border);
  border-radius: 16px;
  background: var(--tz-card-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tz-progreso-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tz-progreso-titulo {
  font: 700 10.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tz-text-muted2);
}

.tz-progreso-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--tz-accent-text);
  font-variant-numeric: tabular-nums;
}

.tz-progreso-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--tz-surface-3);
  overflow: hidden;
}

.tz-progreso-barra > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tz-accent);
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tz-progreso-pendiente {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  color: var(--tz-text-muted);
  font-weight: 500;
  font-size: 13px;
  box-shadow: none;
}
.tz-progreso-pendiente:hover {
  color: var(--tz-accent-text);
  background: none;
  transform: none;
}
.tz-progreso-pendiente-punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
}

.tz-nav-grupo-titulo {
  font: 700 11.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tz-text-muted2);
  padding: 14px 12px 6px;
}
.tz-nav-grupo-titulo:first-child {
  padding-top: 0;
}

.tz-nav-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tz-nav-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--tz-text-muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  box-sizing: border-box;
  box-shadow: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.tz-nav-btn:hover {
  background: var(--tz-surface-2);
  transform: none;
}
.tz-nav-btn:not(:disabled):hover {
  background: var(--tz-surface-2);
  color: var(--tz-text-muted);
}
.tz-nav-btn.activo {
  background: var(--tz-accent-bg);
  border-color: var(--tz-accent-border);
  color: var(--tz-accent-text);
}
.tz-nav-btn.activo:not(:disabled):hover {
  background: var(--tz-accent-bg);
  color: var(--tz-accent-text);
}
.tz-nav-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.tz-nav-btn-texto {
  flex-grow: 1;
  white-space: nowrap;
}
.tz-nav-btn-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  flex-shrink: 0;
}

/* ---------- Columna central: paso actual ---------- */
.tz-main {
  flex-grow: 1;
  min-width: 0;
  overflow-y: auto;
  /* Sin esto, el navegador trata overflow-x como "auto" también (mismo
     comportamiento que overflow-y:auto solo en un eje — ver la regla de
     interdependencia overflow-x/overflow-y de la spec), así que cualquier
     diferencia de un par de px entre el contenido y la caja (redondeo,
     un borde, un foco) dispara una barra de scroll horizontal que no lleva
     a ningún lado (confirmado con captura real en el paso "Envíos"). */
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 26px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tz-paso-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 10.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tz-text-muted2);
}
.tz-paso-eyebrow .tz-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tz-accent);
  box-shadow: 0 0 6px var(--tz-accent);
}
.tz-paso-eyebrow strong {
  color: var(--tz-text);
  font-variant-numeric: tabular-nums;
}

.tz-paso-titulo {
  margin: 8px 0 4px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--tz-text);
}

.tz-paso-desc {
  margin: 0;
  font-size: 13.5px;
  color: var(--tz-text-muted);
  max-width: 560px;
  line-height: 1.5;
}

.tz-card {
  background: var(--tz-card-bg);
  border: 1px solid var(--tz-card-border);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 0;
  box-shadow: none;
  animation: tzCardIn 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes tzCardIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tz-card {
    animation: none;
  }
}

.tz-card-titulo {
  font: 700 10.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tz-text-muted2);
  margin: 0;
}

.tz-pasos {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tz-paso {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.tz-paso[hidden] {
  display: none;
}

/* Wrapper que no debe generar caja propia (dos .tz-card hermanas que se
   esconden juntas) — el atributo [hidden] no alcanza solo porque cualquier
   regla de autor con "display" le gana a la hoja de estilos del navegador
   sin importar el orden, así que hace falta esta pareja explícita (mismo
   criterio que .venta-panel-grid/.modal-overlay en este archivo). */
.tz-contents {
  display: contents;
}
.tz-contents[hidden] {
  display: none;
}

/* Los .field/.grid ya existen para el resto del panel — acá se los redibuja
   con el mismo lenguaje visual cálido que Venta rápida (ver .venta-* arriba)
   en vez de crear inputs nuevos, para no duplicar el markup del form real. */
#tab-personalizacion .field {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
#tab-personalizacion .field[hidden] {
  display: none;
}
#tab-personalizacion label {
  font-size: 13px;
  font-weight: 700;
  color: var(--tz-text);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#tab-personalizacion label.toggle-switch {
  justify-content: flex-start;
}
#tab-personalizacion input,
#tab-personalizacion select,
#tab-personalizacion textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  background: var(--tz-input-bg);
  border: 1.5px solid var(--tz-input-border);
  border-radius: 10px;
  color: var(--tz-text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
}
#tab-personalizacion textarea {
  height: auto;
  min-height: 0;
  padding: 11px 13px;
  line-height: 1.45;
}
#tab-personalizacion input:focus,
#tab-personalizacion select:focus,
#tab-personalizacion textarea:focus {
  outline: none;
  border-color: var(--tz-accent);
  box-shadow: 0 0 0 4px var(--tz-accent-bg);
}
#tab-personalizacion input[type="color"] {
  min-height: 36px;
  padding: 2px;
}
#tab-personalizacion input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
#tab-personalizacion input[type="number"]::-webkit-outer-spin-button,
#tab-personalizacion input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Botón nativo de <input type="file"> — sin esto queda con el estilo gris
   claro del navegador, fuera de lugar sobre el resto de los campos oscuros
   del asistente. */
#tab-personalizacion input[type="file"] {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--tz-text-muted);
}
#tab-personalizacion input[type="file"]::file-selector-button {
  cursor: pointer;
  flex-shrink: 0;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--tz-off);
  border-radius: 8px;
  background: var(--tz-card-bg);
  color: var(--tz-text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  transition: background-color 0.2s ease;
}
#tab-personalizacion input[type="file"]::file-selector-button:hover {
  background: var(--tz-surface-2);
}
#tab-personalizacion .muted {
  color: var(--tz-text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
#tab-personalizacion .grid:not([hidden]) {
  gap: 14px;
}
#tab-personalizacion .swatch-row {
  margin-top: 2px;
}
#tab-personalizacion .segmentado {
  background: var(--tz-surface-3);
  border-color: var(--tz-input-border);
}
#tab-personalizacion .segmento-btn.activo {
  background: var(--tz-card-bg);
  color: var(--tz-accent-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
#tab-personalizacion button.secundario {
  background: var(--tz-card-bg);
  border-color: var(--tz-off);
  color: var(--tz-text);
}
#tab-personalizacion button.secundario:hover {
  background: var(--tz-surface-2);
}
#tab-personalizacion button[type="submit"],
#tab-personalizacion .tz-btn-primario {
  background: var(--tz-accent);
  color: #052e14;
  box-shadow: none;
}
#tab-personalizacion button[type="submit"]:hover {
  background: #1ea855;
}

.tz-anticipo-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  border: 1.5px solid var(--tz-input-border);
  border-radius: 12px;
  background: var(--tz-input-bg);
}
.tz-anticipo-stepper input {
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 34px !important;
  background: transparent !important;
  text-align: center;
  font-weight: 800;
  box-shadow: none !important;
  font-variant-numeric: tabular-nums;
}
@keyframes tzNumBump {
  from {
    opacity: 0.25;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tz-anticipo-stepper input.tz-num-bump {
  animation: tzNumBump 0.22s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .tz-anticipo-stepper input.tz-num-bump {
    animation: none;
  }
}
.tz-anticipo-stepper button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 0;
  border-radius: 8px;
  background: var(--tz-surface-3);
  color: var(--tz-text-muted);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  box-shadow: none;
}
.tz-anticipo-stepper button:hover {
  color: var(--tz-accent-text);
  background: var(--tz-surface-3);
}

.tz-dia-btn {
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--tz-input-border);
  background: var(--tz-input-bg);
  color: var(--tz-text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tz-dia-btn.activo {
  background: var(--tz-accent);
  border-color: var(--tz-accent);
  color: #052e14;
}

.tz-plantilla-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.tz-plantilla-opcion {
  cursor: pointer;
  text-align: left;
  padding: 12px;
  border-radius: 14px;
  border: 1.5px solid var(--tz-card-border);
  background: var(--tz-card-bg);
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
/* El botón genérico pinta `button:not(:disabled):hover` de verde (--primary-hover): sin repetir el fondo acá, al pasar el mouse
   por una plantilla el texto oscuro quedaba sobre verde oscuro (contraste ~1,5:1, lo detectó axe). */
.tz-plantilla-opcion:not(:disabled):hover {
  transform: translateY(-2px);
  background: var(--tz-card-bg);
  filter: none;
}
.tz-plantilla-opcion.activa {
  border-color: var(--tz-accent);
  box-shadow: 0 0 0 1px var(--tz-accent);
}
.tz-plantilla-opcion:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.tz-plantilla-nombre {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--tz-text);
}
.tz-plantilla-desc {
  font-size: 13px;
  color: var(--tz-text-muted);
  line-height: 1.4;
}
.tz-badge-actual {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tz-accent);
  color: #052e14;
  font-weight: 700;
}
.tz-badge-premium {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
  font-weight: 700;
}

.tz-prevnext {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}

/* ---------- Vista previa en vivo (columna derecha) ---------- */
.tz-preview-col {
  width: clamp(340px, 32vw, 480px);
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 16px 20px;
  border-left: 1px solid var(--tz-hairline);
  background-color: var(--tz-surface-2);
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 26px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tz-preview-col {
    background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 26px),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 26px);
  }
}
:root[data-theme="dark"] .tz-preview-col {
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 26px);
}

.tz-preview-encabezado {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.tz-preview-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 10.5px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tz-text-muted);
  white-space: nowrap;
}
.tz-preview-titulo .tz-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tz-accent);
  box-shadow: 0 0 6px var(--tz-accent);
}

.tz-device-toggle {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--tz-card-bg);
  border: 1px solid var(--tz-card-border);
}
.tz-device-btn {
  cursor: pointer;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--tz-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}
.tz-device-btn.activo {
  background: var(--tz-text);
  color: var(--tz-shell-bg);
}

.tz-resaltar-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  color: var(--tz-text-muted);
  padding: 0;
  box-shadow: none;
}
.tz-resaltar-pista {
  width: 32px;
  height: 18px;
  border-radius: 999px;
  position: relative;
  background: var(--tz-off);
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}
.tz-resaltar-pista::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  transition: left 0.2s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.tz-resaltar-toggle.activo .tz-resaltar-pista {
  background: var(--tz-accent);
}
.tz-resaltar-toggle.activo .tz-resaltar-pista::after {
  left: 16px;
}

.tz-device-marco {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  width: 100%;
  background: #e9ebef;
  border-radius: 14px;
  border: 8px solid #111214;
  transition: max-width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), border-radius 0.4s ease, border-width 0.4s ease;
}
.tz-device-marco.tz-device-compu {
  max-width: 100%;
  border-radius: 8px;
  border-width: 3px;
}
.tz-device-marco.tz-device-movil {
  max-width: 280px;
  margin: 0 auto;
}

.tz-device-barra {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #e9ebef;
  border-bottom: 1px solid #d5d9e0;
  font-family: "Figtree", -apple-system, sans-serif;
}
.tz-device-favicon {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}
.tz-device-favicon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tz-device-url {
  font-size: 12px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}
.tz-device-ruta {
  margin-left: auto;
  font-size: 11.5px;
  color: #4b5563;
  background: #ffffff;
  border-radius: 999px;
  padding: 3px 10px;
  flex-shrink: 0;
}

.tz-preview-nota {
  margin: 0;
  font-size: 12px;
  color: var(--tz-text-muted2);
  text-align: center;
  max-width: 500px;
  line-height: 1.45;
}

.tz-resaltado {
  outline: 2px dashed var(--tz-accent);
  outline-offset: 3px;
  border-radius: 8px;
  transition: outline-color 0.2s ease;
  animation: tzResaltarFlash 1s ease both;
}
@keyframes tzResaltarFlash {
  0% {
    outline-color: transparent;
  }
  35% {
    outline-color: var(--tz-accent);
  }
  60% {
    outline-color: color-mix(in srgb, var(--tz-accent) 35%, transparent);
  }
  100% {
    outline-color: var(--tz-accent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tz-resaltado {
    animation: none;
  }
}

/* ---------- Animaciones chicas del panel (entradas, feedback, cambio de tema) ---------- */

/* Campos que se despliegan al activar un interruptor (envío a domicilio,
   agenda de encargos, cuotas sin interés): el JS reinicia esta clase con un
   reflow forzado (mismo truco que .tz-num-bump) para que se note cada vez
   que se prenden, no solo la primera. */
@keyframes tzAparecer {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.tz-entrar {
  animation: tzAparecer 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .tz-entrar {
    animation: none;
  }
}

/* Botón de guardar con cambios sin guardar: late suave para no dejarlo pasar
   por alto (el JS pone/saca .pendiente en marcarSucio()/marcarLimpio()). */
@keyframes tzLatido {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent);
  }
  50% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--primary) 0%, transparent);
  }
}
.pendiente {
  animation: tzLatido 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pendiente {
    animation: none;
  }
}

/* Pequeño rebote al quedar seleccionado/activo (pasos del asistente, celular
   vs. compu, días de la agenda, segmentos de plantilla Mercado). */
@keyframes tzActivoRebote {
  0% {
    transform: scale(0.92);
  }
  55% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.tz-nav-btn.activo,
.tz-device-btn.activo,
.tz-dia-btn.activo,
.segmento-btn.activo,
.dia-calendario.seleccionado {
  animation: tzActivoRebote 0.28s cubic-bezier(0.3, 1.4, 0.5, 1);
}
@media (prefers-reduced-motion: reduce) {
  .tz-nav-btn.activo,
  .tz-device-btn.activo,
  .tz-dia-btn.activo,
  .segmento-btn.activo,
  .dia-calendario.seleccionado {
    animation: none;
  }
}

/* Cambio de tema claro/oscuro: onda circular desde el botón que se tocó
   (☀️/🌙 del header) + giro del ícono — el JS arma el <div class="tz-onda">
   con las coordenadas del botón y lo saca solo al terminar la animación. */
.tz-onda {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.55;
  animation: tzOnda 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes tzOnda {
  0% {
    clip-path: circle(0% at var(--rx, 50%) var(--ry, 50%));
    opacity: 0.55;
  }
  80% {
    clip-path: circle(150% at var(--rx, 50%) var(--ry, 50%));
    opacity: 0.4;
  }
  100% {
    clip-path: circle(150% at var(--rx, 50%) var(--ry, 50%));
    opacity: 0;
  }
}
.tz-girar {
  animation: tzGiro 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tzGiro {
  from {
    transform: rotate(-100deg) scale(0.3);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tz-onda,
  .tz-girar {
    animation: none;
  }
}

@media (max-width: 1300px) {
  .tz-nav {
    width: 72px;
    padding: 16px 10px;
    align-items: center;
  }
  .tz-progreso,
  .tz-nav-grupo-titulo {
    display: none;
  }
  .tz-nav-btn-texto,
  .tz-nav-btn-punto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .tz-nav-btn {
    justify-content: center;
    padding: 0;
    width: 48px;
    min-height: 44px;
  }
}

@media (max-width: 1100px) {
  .tz-preview-col {
    display: none;
  }
}

#tab-personalizacion .grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) {
  .tz-body {
    display: block;
  }
  .tz-nav {
    display: grid;
    grid-template-columns: repeat(5, 44px);
    width: 100%;
    padding: 10px;
    justify-content: center;
    gap: 6px;
    border-right: 0;
    border-bottom: 1px solid var(--tz-border);
  }
  .tz-nav-lista {
    display: contents;
  }
  .tz-nav-btn {
    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;
  }
  .tz-toolbar-nombre {
    max-width: 60vw;
  }
  .tz-main {
    padding: 20px 16px 32px;
  }
  #tab-personalizacion .grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Sistema de diseño "bz-" (rediseño de claude.ai/design): navegación
   (cajón/barra inferior), Catálogo→Productos, Pedidos y Reportes. Clases
   con prefijo bz- propias, no pisan nada del sistema anterior — conviven
   con .card/.badge/button de las pestañas todavía no rediseñadas.
   ========================================================================== */

@keyframes bz-subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes bz-fundido { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
@keyframes bz-rebote { 0% { transform: scale(.9); } 55% { transform: scale(1.06); } 100% { transform: scale(1); } }
.bz-entrar { animation: bz-subir .42s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--bz-i, 0) * 70ms); }
.bz-aparecer { animation: bz-subir .3s cubic-bezier(.2,.7,.2,1) both; }
.bz-preview-cambio { animation: bz-fundido .45s cubic-bezier(.2,.7,.2,1) both; }
.bz-app button[aria-pressed="true"], .bz-app .activo, .bz-app .seleccionado, .bz-app [aria-current="true"], .bz-app [aria-current="page"] {
  animation: bz-rebote .34s cubic-bezier(.3,1.4,.5,1);
}
@media (prefers-reduced-motion: reduce) {
  .bz-entrar, .bz-aparecer, .bz-preview-cambio,
  .bz-app button[aria-pressed="true"], .bz-app .activo, .bz-app .seleccionado, .bz-app [aria-current="true"], .bz-app [aria-current="page"] {
    animation: none;
  }
}

/* ---------- bz-sistema.css (tokens, base, íconos, estructura, componentes) ---------- */
[data-tema="oscuro"],
:root[data-theme="dark"] .bz-app:not([data-tema="claro"]) {
  color-scheme: dark;
  --bz-fondo: #0b0e14;
  /* Igual a --bz-fondo (y a --bg del sistema de tokens viejo) a propósito:
     antes tenía su propio tono (#121621), un poco más claro, y se notaba
     como una franja de color distinta entre el header/sidebar y el resto
     de la página (confirmado con captura real). */
  --bz-cabecera: #0b0e14;
  --bz-cabecera-borde: #1e2436;
  --bz-cabecera-ctrl: #131722;
  --bz-cabecera-ctrl-borde: #232a3d;
  --bz-sup: #1a1a16;
  --bz-sup-hundida: #151512;
  --bz-sup-2: #1e1e17;
  --bz-input: #111110;
  --bz-borde: rgba(255,255,255,.08);
  --bz-borde-input: rgba(255,255,255,.1);
  --bz-borde-fuerte: rgba(255,255,255,.16);
  --bz-linea: #1e2436;
  --bz-tx: #f0efe9;
  --bz-tx-2: #d8d9d6;
  --bz-tx-3: #9a9da3;
  --bz-tx-4: #80838a;
  --bz-tinta: #111214;
  --bz-tinta-tx: #f4f3ee;
  --bz-tinta-borde: rgba(255,255,255,.06);
  --bz-kbd: #292a2c;
  --bz-kbd-tx: #d8d9d6;
  --bz-acento: #22c55e;
  --bz-acento-rgb: 34 197 94;
  --bz-acento-sobre: #052e14;
  --bz-acento-tx: #22c55e;
  --bz-acento-suave: rgba(34,197,94,.12);
  --bz-acento-borde: rgba(34,197,94,.3);
  --bz-alerta: #f59e0b;
  --bz-alerta-tx: #fbbf24;
  --bz-alerta-suave: rgba(251,191,36,.18);
  --bz-peligro: #dc2626;
  --bz-peligro-tx: #f87171;
  --bz-peligro-suave: rgba(248,113,113,.14);
  --bz-peligro-borde: rgba(248,113,113,.32);
  --bz-violeta-tx: #c4b5fd; --bz-violeta-suave: rgba(196,181,253,.16);
  --bz-cielo-tx: #7dd3fc; --bz-cielo-suave: rgba(125,211,252,.14);
  --bz-rosa-tx: #f9a8d4; --bz-rosa-suave: rgba(249,168,212,.14);
  --bz-dato-base: #3a3a33;
  --bz-dato-pista: #24241e;
  --bz-grilla: rgba(255,255,255,.05);
  --bz-foco: 0 0 0 4px rgba(34,197,94,.18);
  --bz-sombra-hover: 0 6px 16px rgba(0,0,0,.35);
  --bz-sombra-flotante: 0 18px 48px rgba(0,0,0,.55);
  --bz-velo: rgba(5,6,10,.62);
}
.bz-app:not([data-tema="oscuro"]), [data-tema="claro"] {
  color-scheme: light;
  /* Igual a --bg del sistema de tokens viejo a propósito, mismo motivo que
     en el bloque oscuro de arriba: evitar una franja de color distinta
     entre el header/sidebar/contenido de cada pestaña. */
  --bz-fondo: #f6f7f9;
  --bz-cabecera: #f6f7f9;
  --bz-cabecera-borde: rgba(0,0,0,.08);
  --bz-cabecera-ctrl: #ffffff;
  --bz-cabecera-ctrl-borde: rgba(0,0,0,.1);
  --bz-sup: #ffffff;
  --bz-sup-hundida: #f7f6f2;
  --bz-sup-2: #f2f2ee;
  --bz-input: #fbfbf9;
  --bz-borde: rgba(0,0,0,.08);
  --bz-borde-input: rgba(0,0,0,.12);
  --bz-borde-fuerte: rgba(0,0,0,.16);
  --bz-linea: rgba(0,0,0,.07);
  --bz-tx: #15161a;
  --bz-tx-2: #3a3d43;
  --bz-tx-3: #5f6268;
  --bz-tx-4: #6b6e74;
  --bz-tinta: #111214;
  --bz-tinta-tx: #f4f3ee;
  --bz-tinta-borde: #111214;
  --bz-kbd: #111214;
  --bz-kbd-tx: #f4f3ee;
  --bz-acento: #22c55e;
  --bz-acento-rgb: 34 197 94;
  --bz-acento-sobre: #052e14;
  /* #15803d daba 4.32:1 sobre --bz-acento-suave (fondo verde pálido real
     cuando se compone sobre blanco) — por debajo del 4.5:1 que pide WCAG AA
     para texto chico (confirmado con axe-core, panel de Mi tienda online en
     claro). Un poco más oscuro para tener margen real, sin tocar
     --bz-acento (el verde "sólido" de botones/puntos, que no es texto). */
  --bz-acento-tx: #0f6b32;
  --bz-acento-suave: rgba(34,197,94,.1);
  --bz-acento-borde: rgba(34,197,94,.34);
  --bz-alerta: #f59e0b;
  --bz-alerta-tx: #b45309;
  --bz-alerta-suave: #fef3c7;
  --bz-peligro: #dc2626;
  --bz-peligro-tx: #b91c1c;
  --bz-peligro-suave: #fee2e2;
  --bz-peligro-borde: rgba(220,38,38,.3);
  --bz-violeta-tx: #6d28d9; --bz-violeta-suave: #ede9fe;
  --bz-cielo-tx: #0369a1; --bz-cielo-suave: #e0f2fe;
  --bz-rosa-tx: #be185d; --bz-rosa-suave: #fce7f3;
  --bz-dato-base: #d9d8d0;
  --bz-dato-pista: #efeee8;
  --bz-grilla: rgba(0,0,0,.06);
  --bz-foco: 0 0 0 4px rgba(34,197,94,.16);
  --bz-sombra-hover: 0 6px 16px rgba(17,18,20,.1);
  --bz-sombra-flotante: 0 18px 48px rgba(17,18,20,.18);
  --bz-velo: rgba(17,18,20,.4);
}

.bz-app, [data-tema] {
  --bz-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
  --bz-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --bz-t-micro: 10.5px; --bz-t-xs: 12px; --bz-t-sm: 12.5px; --bz-t-base: 13.5px; --bz-t-md: 14px;
  --bz-t-lg: 15px; --bz-t-xl: 18px; --bz-t-h1: 22px; --bz-t-num: 28px; --bz-t-num-xl: 40px;
  --bz-e-1: 4px; --bz-e-2: 8px; --bz-e-3: 12px; --bz-e-4: 16px; --bz-e-5: 20px;
  --bz-e-6: 24px; --bz-e-8: 32px; --bz-e-10: 40px; --bz-e-12: 48px;
  --bz-r-tarjeta: 18px; --bz-r-interno: 14px; --bz-r-control: 10px; --bz-r-chico: 6px; --bz-r-sheet: 24px; --bz-r-pill: 999px;
  --bz-d-rapida: .15s; --bz-d-base: .22s; --bz-d-lenta: .42s;
  --bz-ease-salida: cubic-bezier(.2,.7,.2,1); --bz-ease-resorte: cubic-bezier(.3,1.4,.5,1);
  --bz-tactil: 44px;
  --bz-zona-segura: env(safe-area-inset-bottom, 0px);
}
.bz-app { font-family: var(--bz-fuente); font-size: var(--bz-t-base); line-height: 1.45; color: var(--bz-tx); background: var(--bz-fondo); box-sizing: border-box; -webkit-font-smoothing: antialiased; }
.bz-app *, .bz-app *::before, .bz-app *::after { box-sizing: border-box; }
.bz-app h1, .bz-app h2, .bz-app h3, .bz-app p { margin: 0; }
.bz-app button, .bz-app input, .bz-app select, .bz-app textarea { font: inherit; }
.bz-app input, .bz-app select, .bz-app textarea { color: inherit; }
.bz-app .num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.bz-micro { font: 700 var(--bz-t-micro)/1.3 var(--bz-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bz-tx-4); }
.bz-bajada { font-size: var(--bz-t-sm); color: var(--bz-tx-3); line-height: 1.5; }
.bz-titulo { font-size: var(--bz-t-lg); font-weight: 700; color: var(--bz-tx); }
.bz-h1 { font-size: var(--bz-t-h1); font-weight: 700; letter-spacing: -.01em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ic { display: inline-block; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic-14 { width: 14px; height: 14px; } .ic-16 { width: 16px; height: 16px; } .ic-20 { width: 20px; height: 20px; } .ic-24 { width: 24px; height: 24px; } .ic-32 { width: 32px; height: 32px; }
.i-menu{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M4 12h16M4 17h16'/></svg>")}
.i-sol{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M6.3 17.7l-1.4 1.4M19.1 4.9l-1.4 1.4'/></svg>")}
.i-luna{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M20.5 13.5A8.5 8.5 0 1 1 10.5 3.5a6.5 6.5 0 0 0 10 10z'/></svg>")}
.i-buscar{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>")}
.i-camara{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z'/><circle cx='12' cy='13' r='3.5'/></svg>")}
.i-escanear{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2M8 8v8M12 8v8M16 8v8'/></svg>")}
.i-basura{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16M9 7V4.5h6V7M18 7l-.8 12.2a2 2 0 0 1-2 1.8H8.8a2 2 0 0 1-2-1.8L6 7M10 11v6M14 11v6'/></svg>")}
.i-chat{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20.5 11.5a8.5 8.5 0 0 1-12.6 7.4L3.5 20.5l1.6-4.3A8.5 8.5 0 1 1 20.5 11.5z'/><path d='M9 10.5h.01M12 10.5h.01M15 10.5h.01'/></svg>")}
.i-camion{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5h12v11H2zM14 9h4l3.5 3.5V16H14'/><circle cx='6' cy='18' r='2'/><circle cx='17.5' cy='18' r='2'/></svg>")}
.i-local{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 9 5 4h14l1.5 5M4 9v11h16V9M3.5 9h17M9.5 20v-6h5v6'/></svg>")}
.i-paquete{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 8 12 3 3 8v8l9 5 9-5zM3 8l9 5 9-5M12 13v8M7.5 5.5l9 5'/></svg>")}
.i-reloj{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>")}
.i-check{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>")}
.i-check-circulo{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 12.5l2.8 2.8L16.5 9.5'/></svg>")}
.i-x{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 7 7 17M7 7l10 10'/></svg>")}
.i-x-circulo{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M15 9l-6 6M9 9l6 6'/></svg>")}
.i-abajo{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>")}
.i-derecha{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>")}
.i-volver{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5M11 18l-6-6 6-6'/></svg>")}
.i-mas{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>")}
.i-menos{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>")}
.i-lapiz{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z'/><path d='M13.5 6.5l4 4'/></svg>")}
.i-etiqueta{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/><circle cx='8' cy='8' r='1.5'/></svg>")}
.i-imagen{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='3'/><circle cx='9' cy='9' r='2'/><path d='M21 15.5 16 10.5 5 21'/></svg>")}
.i-imprimir{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v7H6z'/></svg>")}
.i-alerta{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 4 2.2 18a2 2 0 0 0 1.7 3h16.2a2 2 0 0 0 1.7-3L13.7 4a2 2 0 0 0-3.4 0zM12 9.5v4M12 17h.01'/></svg>")}
.i-sube{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17l6-6 4 4 8-8M15 7h6v6'/></svg>")}
.i-baja{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7l6 6 4-4 8 8M15 17h6v-6'/></svg>")}
.i-calendario{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='3'/><path d='M8 3v4M16 3v4M3 10h18'/></svg>")}
.i-pin{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-6-7-11.5a7 7 0 0 1 14 0C19 15 12 21 12 21z'/><circle cx='12' cy='9.5' r='2.5'/></svg>")}
.i-billete{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='6' width='20' height='12' rx='2.5'/><circle cx='12' cy='12' r='2.5'/><path d='M6 12h.01M18 12h.01'/></svg>")}
.i-tarjeta{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2.5'/><path d='M2 10h20M6 15h4'/></svg>")}
.i-transferencia{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8h15l-4-4M20 16H5l4 4'/></svg>")}
.i-qr{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1.5'/><rect x='14' y='3' width='7' height='7' rx='1.5'/><rect x='3' y='14' width='7' height='7' rx='1.5'/><path d='M14 14h3v3M21 14v.01M14 21h3M21 18v3h-1'/></svg>")}
.i-rayo{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2 4 14h8l-1 8 9-12h-8z'/></svg>")}
.i-caja{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M19 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0 0 4h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5'/><path d='M16.5 14h.01'/></svg>")}
.i-grafico{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18M8 17v-5M13 17V7M18 17v-8'/></svg>")}
.i-puntos{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='5' cy='12' r='1.8'/><circle cx='12' cy='12' r='1.8'/><circle cx='19' cy='12' r='1.8'/></svg>")}
.i-recibo{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3v18l2.3-1.5L9.7 21l2.3-1.5 2.3 1.5 2.4-1.5L19 21V3l-2.3 1.5L14.3 3 12 4.5 9.7 3 7.3 4.5z'/><path d='M9 9h6M9 13h6'/></svg>")}
.i-usuarios{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.5'/><path d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M21.5 20a6.5 6.5 0 0 0-3.5-5.8'/></svg>")}
.i-persona{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4.5 21a7.5 7.5 0 0 1 15 0'/></svg>")}
.i-salir{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M15 21h4a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-4'/><path d='M8 17l-5-5 5-5'/><path d='M3 12h12'/></svg>")}
.i-escudo{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s8-3.5 8-10V5.5L12 3 4 5.5V11c0 6.5 8 10 8 10z'/></svg>")}
.i-radar{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='4.5'/><path d='M12 12l6-6'/></svg>")}
.i-libro{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 19.5V5a2 2 0 0 1 2-2h12v15H7a2 2 0 0 0-2 2 2 2 0 0 0 2 2h12'/></svg>")}
.i-lista{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01'/></svg>")}
.i-info{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 16v-4.5M12 8h.01'/></svg>")}
.i-refrescar{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M20.5 12a8.5 8.5 0 1 1-2.5-6L20.5 8.5M20.5 3.5v5h-5'/></svg>")}
.i-subir{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v3a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-3M17 8l-5-5-5 5M12 3v12'/></svg>")}
.i-ajustes{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/><circle cx='15' cy='6' r='2'/><circle cx='9' cy='12' r='2'/><circle cx='17' cy='18' r='2'/></svg>")}
.i-globo{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/></svg>")}
.i-gasto{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='6' width='20' height='12' rx='2.5'/><path d='M12 9v6M9.5 12.5 12 15l2.5-2.5'/></svg>")}
.i-cuaderno{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='16' height='18' rx='2.5'/><path d='M8 8h8M8 12h8M8 16h5'/></svg>")}
.i-carrito{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3 4 7v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7l-2-4zM4 7h16M15.5 11a3.5 3.5 0 0 1-7 0'/></svg>")}
.i-telefono{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='2.5' width='12' height='19' rx='2.5'/><path d='M11 18h2'/></svg>")}
.i-cortar{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 4v6h-6M4 20v-6h6M5.5 9A7.5 7.5 0 0 1 19 7.5M18.5 15A7.5 7.5 0 0 1 5 16.5'/></svg>")}
.i-candado{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='9' rx='1.8'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>")}
.i-computadora{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='4' width='16' height='11' rx='1.5'/><path d='M2 18h20M10 18v3h4v-3'/></svg>")}
.i-estrella{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'><path d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/></svg>")}
.i-cantidad{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 3 8l9 5 9-5z'/><path d='M3 12l9 5 9-5M3 16l9 5 9-5'/></svg>")}
.i-taza{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8h12l-1 11a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2z'/><path d='M8 8V5a4 4 0 0 1 8 0v3'/></svg>")}
.i-hoja{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M20 4C10 4 4 10 4 20c10 0 16-6 16-16z'/><path d='M8 16 17 7'/></svg>")}
.i-queso{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17 12 4l9 13z'/><circle cx='10' cy='14' r='1' fill='black' stroke='none'/><circle cx='14' cy='15.5' r='1' fill='black' stroke='none'/></svg>")}
.i-trigo{--i:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21V9'/><path d='M12 9c0-3-2-5-5-5 0 3 2 5 5 5zM12 9c0-3 2-5 5-5 0 3-2 5-5 5z'/><path d='M12 15c0-2.5-1.7-4-4.3-4 0 2.5 1.7 4 4.3 4zM12 15c0-2.5 1.7-4 4.3-4 0 2.5-1.7 4-4.3 4z'/></svg>")}

.bz-cab { display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: var(--bz-cabecera); border-bottom: 1px solid var(--bz-cabecera-borde); }
.bz-cab-ctrl { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--bz-r-control); background: var(--bz-cabecera-ctrl); border: 1px solid var(--bz-cabecera-ctrl-borde); color: var(--bz-tx); cursor: pointer; flex: none; }
.bz-cab-ctrl.sol { color: #f59e0b; }
.bz-cab-btn { min-height: 36px; padding: 0 14px; border-radius: var(--bz-r-control); background: var(--bz-cabecera-ctrl); border: 1px solid var(--bz-cabecera-ctrl-borde); color: var(--bz-tx); font-size: 13px; font-weight: 700; cursor: pointer; }
.bz-cab-nombre { display: flex; align-items: center; gap: 8px; font-size: var(--bz-t-lg); font-weight: 700; }
.bz-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--bz-acento); flex: none; box-shadow: 0 0 0 3px var(--bz-acento-suave); }
.bz-punto.alerta { background: var(--bz-alerta); box-shadow: 0 0 0 3px var(--bz-alerta-suave); }
.bz-punto.peligro { background: var(--bz-peligro-tx); box-shadow: 0 0 0 3px var(--bz-peligro-suave); }
.bz-contenido { display: flex; flex-direction: column; gap: 16px; padding: 24px; }

.bz-nav-inf { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); padding: 6px 6px 22px; background: var(--bz-cabecera); border-top: 1px solid var(--bz-cabecera-borde); }
.bz-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: 12px; color: var(--bz-tx-3); font-size: 11px; font-weight: 600; text-decoration: none; position: relative; background: none; border: 0; }
.bz-nav-item[aria-current="page"] { color: var(--bz-tx); }
.bz-nav-item[aria-current="page"] .ic { color: var(--bz-acento); }
.bz-nav-item[aria-current="page"]::before { content: ""; position: absolute; top: 2px; width: 44px; height: 30px; border-radius: 999px; background: var(--bz-acento-suave); z-index: -1; }
.bz-nav-item .bz-cuenta { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--bz-alerta); color: #1a1205; font: 700 10px/17px var(--bz-mono); text-align: center; }

.bz-cajon { background: var(--bz-cabecera); border-right: 1px solid var(--bz-cabecera-borde); display: flex; flex-direction: column; }
.bz-cajon-grupo { display: flex; flex-direction: column; gap: 2px; }
.bz-cajon-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: var(--bz-r-control); color: var(--bz-tx-2); font-size: 14px; font-weight: 600; text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; width: 100%; }
.bz-cajon-item .ic { color: var(--bz-tx-3); }
.bz-cajon-item[aria-current="page"] { background: var(--bz-sup); color: var(--bz-tx); box-shadow: inset 0 0 0 1px var(--bz-borde); }
.bz-cajon-item[aria-current="page"] .ic { color: var(--bz-acento); }
.bz-cajon-item .bz-cuenta { margin-left: auto; font: 700 11px var(--bz-mono); color: var(--bz-alerta-tx); background: var(--bz-alerta-suave); padding: 2px 7px; border-radius: 999px; }

.bz-tarjeta { background: var(--bz-sup); border: 1px solid var(--bz-borde); border-radius: var(--bz-r-tarjeta); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.bz-tarjeta.compacta { padding: 18px; gap: 14px; }
.bz-hundido { background: var(--bz-sup-hundida); border: 1px solid var(--bz-borde); border-radius: var(--bz-r-interno); }
.bz-tarjeta.cancelada { opacity: .55; }

.bz-resumen { background: var(--bz-sup); border: 1px solid var(--bz-borde); border-radius: var(--bz-r-tarjeta); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bz-resumen-valor { font-size: var(--bz-t-num); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--bz-tx); }
.bz-resumen-pie { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bz-tx-3); }
.bz-tendencia { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.bz-tendencia.sube { color: var(--bz-acento-tx); } .bz-tendencia.baja { color: var(--bz-peligro-tx); }

.bzp-seg { display: flex; gap: 4px; padding: 4px; background: var(--bz-sup-hundida); border: 1px solid var(--bz-borde); border-radius: 12px; overflow-x: auto; scrollbar-width: none; }
.bzp-seg::-webkit-scrollbar { height: 0; }
.bzp-seg button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--bz-tx-3); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.bzp-seg button:hover { color: var(--bz-tx); }
.bzp-seg button[aria-pressed="true"] { background: var(--bz-sup); color: var(--bz-tx); border-color: var(--bz-borde-fuerte); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.bzp-seg button .bzp-seg-n { font: 700 11px var(--bz-mono); color: var(--bz-tx-4); }
.bzp-seg button[aria-pressed="true"] .bzp-seg-n { color: var(--bz-acento-tx); }
.bzp-seg.tactil button { min-height: 40px; }
.bzp-seg.auto button { flex: 0 0 auto; }
.bzp-seg button.desc[aria-pressed="true"] { background: var(--bz-acento-suave); color: var(--bz-acento-tx); border-color: var(--bz-acento-borde); }
.bzp-seg button.rec[aria-pressed="true"] { background: var(--bz-alerta-suave); color: var(--bz-alerta-tx); border-color: transparent; }

.bz-riel { position: relative; min-width: 0; }
.bz-riel-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-right: 36px; }
.bz-riel-scroll::-webkit-scrollbar { height: 0; }
.bz-riel::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 44px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--bz-riel-fondo, var(--bz-fondo))); }

.bz-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--bz-r-pill); border: 1px solid var(--bz-borde-fuerte); background: transparent; color: var(--bz-tx-2); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; flex: none; }
.bz-chip .bz-chip-n { font: 700 11px var(--bz-mono); color: var(--bz-tx-4); }
.bz-chip[aria-pressed="true"] { background: var(--bz-tx); color: var(--bz-sup); border-color: var(--bz-tx); }
.bz-chip[aria-pressed="true"] .bz-chip-n { color: inherit; opacity: .7; }
.bz-chip-color { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bz-chip-quitar { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: -8px; border-radius: 50%; border: 0; background: transparent; color: var(--bz-tx-4); cursor: pointer; }
.bz-chip-quitar:hover { background: var(--bz-peligro-suave); color: var(--bz-peligro-tx); }
/* Chip de categoría con su "quitar": dos botones hermanos (antes un <span> con aria-pressed y un botón adentro, que el teclado no
   alcanzaba y axe marcaba como crítico). El botón de quitar se superpone al borde derecho del chip para conservar el aspecto de una sola píldora. */
.bz-chip-par { position: relative; display: inline-flex; align-items: center; flex: none; }
.bz-chip-par .bz-chip { padding-right: 34px; }
.bz-chip-par .bz-chip-quitar { position: absolute; right: 8px; top: 50%; margin-right: 0; transform: translateY(-50%); }
.bz-chip-par .bz-chip[aria-pressed="true"] + .bz-chip-quitar { color: var(--bz-sup); }
.bz-chip.tactil { min-height: 40px; }

.bzp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--bz-r-pill); font: 700 10.5px/1.2 var(--bz-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; }
.bzp-pill .ic { width: 12px; height: 12px; }
.bzp-pill.ok { background: var(--bz-acento-suave); color: var(--bz-acento-tx); }
.bzp-pill.alerta { background: var(--bz-alerta-suave); color: var(--bz-alerta-tx); }
.bzp-pill.peligro { background: var(--bz-peligro-suave); color: var(--bz-peligro-tx); }
.bzp-pill.neutro { background: var(--bz-sup-2); color: var(--bz-tx-3); border-color: var(--bz-borde); }
.bzp-pill.violeta { background: var(--bz-violeta-suave); color: var(--bz-violeta-tx); }
.bzp-pill.cielo { background: var(--bz-cielo-suave); color: var(--bz-cielo-tx); }
.bzp-pill.rosa { background: var(--bz-rosa-suave); color: var(--bz-rosa-tx); }
.bzp-pill.contorno { background: transparent; border-color: var(--bz-borde-fuerte); color: var(--bz-tx-2); }
.bzp-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.bzp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; padding: 0 16px; border-radius: var(--bz-r-control); border: 1px solid transparent; font-size: var(--bz-t-base); font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none; transition: transform .15s ease, filter .2s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease; }
.bzp-btn:not(:disabled):hover { filter: brightness(1.08); }
.bzp-btn:not(:disabled):active { transform: scale(.96); filter: brightness(.95); }
.bzp-btn.tactil { min-height: 48px; font-size: 15px; border-radius: 12px; }
.bzp-btn.chico { min-height: 34px; padding: 0 12px; font-size: 12.5px; }
.bzp-btn.bloque { width: 100%; }
.bzp-btn.tinta { background: var(--bz-tinta); color: var(--bz-tinta-tx); border-color: var(--bz-tinta-borde); }
.bzp-btn.tinta .ic { color: var(--bz-acento); }
.bzp-btn.primario { background: var(--bz-acento); color: var(--bz-acento-sobre); }
.bzp-btn.secundario { background: transparent; color: var(--bz-tx-2); border-color: var(--bz-borde-fuerte); }
.bzp-btn.secundario:hover { background: var(--bz-sup-2); }
.bzp-btn.fantasma { background: transparent; color: var(--bz-tx-2); }
.bzp-btn.fantasma:hover { background: var(--bz-sup-2); }
.bzp-btn.verde-suave { background: var(--bz-acento-suave); color: var(--bz-acento-tx); border-color: var(--bz-acento-borde); }
.bzp-btn.peligro { background: var(--bz-peligro); color: #ffffff; }
.bzp-btn.peligro-suave { background: transparent; color: var(--bz-peligro-tx); border-color: var(--bz-peligro-borde); }
.bzp-btn.icono { width: 40px; padding: 0; }
.bzp-btn.icono.tactil { width: 48px; }
.bzp-btn:disabled, .bzp-btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; filter: none; }
.bzp-btn:focus-visible, .bz-chip:focus-visible, .bzp-seg button:focus-visible { outline: 2px solid var(--bz-acento); outline-offset: 2px; }
.bz-giro { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: bz-giro-carga .8s linear infinite; }
@keyframes bz-giro-carga { to { transform: rotate(360deg); } }
.bz-kbd { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 5px; background: var(--bz-kbd); color: var(--bz-kbd-tx); font: 700 10.5px/1.4 var(--bz-mono); letter-spacing: .04em; }
.bzp-btn.tinta .bz-kbd { background: var(--bz-kbd); color: var(--bz-acento); }
@media (hover: none) and (pointer: coarse) { .bz-kbd, .bz-solo-teclado { display: none !important; } }

.bz-campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bz-label { font-size: 13px; font-weight: 700; color: var(--bz-tx-2); display: flex; justify-content: space-between; gap: 8px; }
.bz-label .opc { font-weight: 500; color: var(--bz-tx-4); }
.bzp-input { width: 100%; height: 44px; padding: 0 13px; background: var(--bz-input); border: 1.5px solid var(--bz-borde-input); border-radius: var(--bz-r-control); color: var(--bz-tx); font-size: 14px; font-weight: 500; outline: none; }
.bzp-input.tactil { height: 48px; font-size: 16px; }
.bzp-input::placeholder { color: var(--bz-tx-4); }
.bzp-input:focus, .bzp-input.foco { border-color: var(--bz-acento); box-shadow: var(--bz-foco); animation: bz-tecleo .4s ease-out; }
.bzp-input.error { border-color: var(--bz-peligro-tx); box-shadow: 0 0 0 4px var(--bz-peligro-suave); }
.bzp-input:disabled { opacity: .5; }
.bzp-input.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.bz-grupo { display: flex; align-items: stretch; }
.bz-prefijo, .bz-sufijo { display: flex; align-items: center; padding: 0 11px; background: var(--bz-sup-2); border: 1.5px solid var(--bz-borde-input); color: var(--bz-tx-3); font: 700 12px var(--bz-mono); white-space: nowrap; }
.bz-prefijo { border-right: 0; border-radius: var(--bz-r-control) 0 0 var(--bz-r-control); }
.bz-sufijo { border-left: 0; border-radius: 0 var(--bz-r-control) var(--bz-r-control) 0; }
.bz-grupo .bzp-input { border-radius: 0; }
.bz-grupo .bz-prefijo + .bzp-input:last-child { border-radius: 0 var(--bz-r-control) var(--bz-r-control) 0; }
.bz-grupo .bzp-input:first-child { border-radius: var(--bz-r-control) 0 0 var(--bz-r-control); }
.bz-select { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: none; }
.bz-select-envoltura { position: relative; display: block; }
.bz-select-envoltura .ic { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--bz-tx-3); pointer-events: none; }
.bz-ayuda { font-size: 12.5px; color: var(--bz-tx-3); line-height: 1.45; }
.bz-ayuda.error { color: var(--bz-peligro-tx); display: flex; gap: 6px; align-items: center; font-weight: 600; }

.bz-buscador { display: flex; gap: 8px; align-items: stretch; }
.bz-buscador-campo { position: relative; flex: 1; min-width: 0; }
.bz-buscador-campo > .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--bz-tx-3); }
.bz-buscador-campo .bzp-input { padding-left: 40px; }

.bz-lista-flotante { background: var(--bz-sup); border: 1px solid var(--bz-borde-fuerte); border-radius: 14px; box-shadow: var(--bz-sombra-flotante); padding: 6px; display: flex; flex-direction: column; }
.bz-opcion { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 10px; }
.bz-opcion[aria-selected="true"] { background: var(--bz-sup-2); }
.bz-opcion mark { background: none; color: var(--bz-acento-tx); font-weight: 700; }

.bz-app .switch { position: relative; width: 44px; height: 26px; border-radius: 999px; border: 0; padding: 0; background: var(--bz-borde-fuerte); cursor: pointer; flex: none; transition: background-color .2s ease; }
.bz-app .switch .perilla { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .22s cubic-bezier(.3,1.4,.5,1); }
.bz-app .switch[aria-checked="true"] { background: var(--bz-acento); }
.bz-app .switch[aria-checked="true"] .perilla { transform: translateX(18px); }
.bz-app .switch:disabled { opacity: .4; }

.bz-avatar { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 14px; background: var(--bz-sup-2); color: var(--bz-tx-2); border: 1px solid var(--bz-borde); overflow: hidden; }
.bz-avatar.redondo { border-radius: 50%; }
.bz-avatar.verde { background: var(--bz-acento-suave); color: var(--bz-acento-tx); border-color: var(--bz-acento-borde); }
.bz-avatar.alerta { background: var(--bz-alerta-suave); color: var(--bz-alerta-tx); border-color: transparent; }
.bz-avatar.peligro { background: var(--bz-peligro-suave); color: var(--bz-peligro-tx); border-color: transparent; }
.bz-avatar.violeta { background: var(--bz-violeta-suave); color: var(--bz-violeta-tx); border-color: transparent; }
.bz-avatar.cielo { background: var(--bz-cielo-suave); color: var(--bz-cielo-tx); border-color: transparent; }
.bz-avatar.rosa { background: var(--bz-rosa-suave); color: var(--bz-rosa-tx); border-color: transparent; }
.bz-avatar.contorno { background: transparent; color: var(--bz-tx-2); border-color: var(--bz-borde-fuerte); }
.bz-avatar.grande { width: 48px; height: 48px; border-radius: 14px; }
.bz-fila { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bz-fila-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.bz-fila-titulo { font-size: 14px; font-weight: 700; color: var(--bz-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bz-fila-meta { font-size: 12.5px; color: var(--bz-tx-3); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.bz-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--bz-tx-4); }

.bz-mini { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--bz-sup-hundida); border: 1px solid var(--bz-borde); color: var(--bz-tx-4); position: relative; overflow: hidden; }
.bz-mini::after { content: attr(data-ini); position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px var(--bz-mono); color: var(--bz-tx-3); letter-spacing: .04em; }

.bz-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bz-tabla th { text-align: left; padding: 14px 12px; font: 700 10.5px var(--bz-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--bz-tx-4); border-bottom: 1px solid var(--bz-linea); white-space: nowrap; vertical-align: middle; }
.bz-tabla td { padding: 12px; border-bottom: 1px solid var(--bz-linea); vertical-align: middle; }
.bz-tabla th.der, .bz-tabla td.der { text-align: right; }
.bz-tabla tr.editando td { background: var(--bz-sup-hundida); }
.bz-tabla tr.editando td:first-child { border-radius: 12px 0 0 12px; }
.bz-tabla tr.editando td:last-child { border-radius: 0 12px 12px 0; }
.bz-tabla .bzp-input { height: 38px; font-size: 13.5px; }
.bz-precio { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.bz-stepper { display: flex; align-items: center; gap: 8px; padding: 5px; border: 1.5px solid var(--bz-borde-input); border-radius: 12px; background: var(--bz-input); }
.bz-stepper:focus-within { border-color: var(--bz-acento); box-shadow: var(--bz-foco); }
.bz-stepper input { flex: 1; min-width: 0; border: 0; background: transparent; text-align: center; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; outline: none; box-shadow: none; animation: none; -moz-appearance: textfield; appearance: textfield; color: var(--bz-tx); }
.bz-stepper input::-webkit-outer-spin-button, .bz-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bz-stepper button { width: 34px; height: 34px; flex-shrink: 0; border: 0; border-radius: 8px; background: var(--bz-sup-2); color: var(--bz-tx-2); font-size: 17px; font-weight: 700; cursor: pointer; display: grid; place-items: center; }
.bz-stepper button.mas { background: var(--bz-acento-suave); color: var(--bz-acento-tx); }
.bz-stepper input.sube { animation: bz-num-sube .32s cubic-bezier(.2,.7,.2,1); }
.bz-stepper input.baja { animation: bz-num-baja .32s cubic-bezier(.2,.7,.2,1); }
.bz-stepper.tactil button { width: 44px; height: 44px; border-radius: 10px; }
.bz-stepper.chico { padding: 3px; gap: 4px; border-radius: 10px; }
.bz-stepper.chico button { width: 30px; height: 30px; border-radius: 7px; font-size: 15px; }
.bz-stepper.chico input { font-size: 14px; width: 34px; }
@keyframes bz-num-sube { from { opacity: .25; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes bz-num-baja { from { opacity: .25; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
.bz-app .bz-num { display: inline-block; font-variant-numeric: tabular-nums; transition: transform .2s ease, color .2s ease; }
.bz-app .bz-num.sube { transform: translateY(-2px) scale(1.08); color: var(--bz-acento-tx); }
.bz-app .bz-num.baja { transform: translateY(2px) scale(1.08); color: var(--bz-alerta-tx); }

.bz-velo { position: absolute; inset: 0; background: var(--bz-velo); }
.bz-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bz-sup); border-radius: var(--bz-r-sheet) var(--bz-r-sheet) 0 0; border: 1px solid var(--bz-borde-fuerte); border-bottom: 0; box-shadow: var(--bz-sombra-flotante); padding: 10px 20px 30px; display: flex; flex-direction: column; gap: 18px; }
.bz-manija { width: 40px; height: 5px; border-radius: 999px; background: var(--bz-borde-fuerte); align-self: center; }
.bz-modal { background: var(--bz-sup); border: 1px solid var(--bz-borde-fuerte); border-radius: 20px; box-shadow: var(--bz-sombra-flotante); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.bz-icono-dialogo { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; }
.bz-icono-dialogo.peligro { background: var(--bz-peligro-suave); color: var(--bz-peligro-tx); }

.bz-volver { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 8px; border-radius: 10px; color: var(--bz-tx-2); font-weight: 700; font-size: 13.5px; text-decoration: none; background: transparent; border: 0; }
.bz-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--bz-r-interno); border: 1px solid var(--bz-borde); background: var(--bz-sup); }
.bz-banner.ok { background: var(--bz-acento-suave); border-color: var(--bz-acento-borde); }
.bz-banner.alerta { background: var(--bz-alerta-suave); border-color: transparent; }
.bz-banner.peligro { background: var(--bz-peligro-suave); border-color: var(--bz-peligro-borde); }
.bz-vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 40px 24px; border: 1px dashed var(--bz-borde-fuerte); border-radius: var(--bz-r-interno); background: var(--bz-sup-hundida); }
.bz-vacio-icono { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--bz-sup); border: 1px solid var(--bz-borde); color: var(--bz-tx-3); }
.bz-esq { background: linear-gradient(90deg, var(--bz-sup-2) 0%, var(--bz-sup-hundida) 50%, var(--bz-sup-2) 100%); background-size: 200% 100%; animation: bz-brillo 1.4s ease-in-out infinite; border-radius: 8px; }
@keyframes bz-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.bz-toast { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 14px; background: var(--bz-tinta); color: var(--bz-tinta-tx); border: 1px solid var(--bz-borde-fuerte); box-shadow: var(--bz-sombra-flotante); font-size: 13.5px; font-weight: 600; }
.bz-toast-icono { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(34,197,94,.18); color: #22c55e; flex: none; }

.bz-columnas { position: relative; display: grid; grid-template-columns: repeat(14, minmax(0,1fr)); gap: 2px; align-items: end; }
.bz-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.bz-col-barra { width: 100%; max-width: 30px; border-radius: 4px 4px 1px 1px; background: var(--bz-dato-base); min-height: 3px; transition: height .5s var(--bz-ease-salida); }
.bz-col.hoy .bz-col-barra { background: var(--bz-acento); }
.bz-col.hover .bz-col-barra { background: var(--bz-tx-3); }
.bz-grilla-linea { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--bz-grilla); }
.bz-eje { font: 600 10.5px var(--bz-mono); color: var(--bz-tx-4); font-variant-numeric: tabular-nums; }
.bz-tip { position: absolute; background: var(--bz-tinta); color: var(--bz-tinta-tx); border: 1px solid var(--bz-borde-fuerte); border-radius: 10px; padding: 8px 10px; box-shadow: var(--bz-sombra-flotante); font-size: 12px; white-space: nowrap; z-index: 2; display: flex; flex-direction: column; gap: 2px; }
.barra-progreso { height: 8px; border-radius: 999px; background: var(--bz-dato-pista); overflow: hidden; }
.barra-progreso > span { display: block; height: 100%; border-radius: 999px; background: var(--bz-acento); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.barra-progreso.fina { height: 6px; }
.barra-progreso.neutra > span { background: var(--bz-tx-3); }

.bz-grilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.bz-grilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.bz-entre { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bz-app .tx-2 { color: var(--bz-tx-2); } .bz-app .tx-3 { color: var(--bz-tx-3); } .bz-app .tx-4 { color: var(--bz-tx-4); }
.bz-app .tx-ok { color: var(--bz-acento-tx); } .bz-app .tx-alerta { color: var(--bz-alerta-tx); } .bz-app .tx-peligro { color: var(--bz-peligro-tx); }

@keyframes bz-latido { 0%,100% { box-shadow: 0 0 0 0 rgb(var(--bz-acento-rgb, 34 197 94) / .5); } 50% { box-shadow: 0 0 0 7px rgb(var(--bz-acento-rgb, 34 197 94) / 0); } }
@keyframes bz-tecleo { 0% { box-shadow: 0 0 0 0 rgb(var(--bz-acento-rgb, 34 197 94) / .35); } 100% { box-shadow: 0 0 0 6px rgb(var(--bz-acento-rgb, 34 197 94) / 0); } }
.bz-app .pendiente { animation: bz-latido 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .bz-app .pendiente { box-shadow: 0 0 0 3px var(--bz-acento-borde) !important; animation: none; }
  .bz-app .bz-esq { background: var(--bz-sup-2); animation: none; }
  .bz-app .bz-giro { animation: none; }
}

/* Red de seguridad general para el bug de [hidden] ya conocido en este
   archivo (una regla de autor que fija "display" le gana a la regla
   [hidden]{display:none} del user-agent aunque tenga menos especificidad
   "visual" — pasó con .tz-paso, .tz-contents, etc. más arriba, y el sistema
   bz- de acá tiene decenas de clases que fijan display:flex/grid/inline-flex
   sin condición: .bzp-btn, .bz-entre, .bz-tip, .bz-lista-flotante, etc. En
   vez de parchear cada una, esta regla con !important gana siempre que el
   atributo hidden esté puesto — que es exactamente lo que hidden significa). */
[hidden] {
  display: none !important;
}

/* ---------- Layout: cajón desplegable en todos los anchos (☰ del encabezado), más barra inferior en móvil ---------- */
.bz-nav-inf-fija { display: none; }
@media (min-width: 901px) {
  .panel-shell:not([hidden]) { display: flex; min-height: 100%; }
  .panel-contenido { flex: 1; min-width: 0; }
}
@media (max-width: 900px) {
  .bz-nav-inf-fija { display: grid; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; }
  .panel-contenido { padding-bottom: 84px; }
}


/* Safari en iOS hace zoom automático de toda la página al enfocar un campo
   con font-size menor a 16px, y no vuelve a desenfocarse solo — en una SPA
   como el panel ese zoom queda pegado al cambiar de pestaña, cada una se ve
   "a su propio tamaño". El campo correcto no es bloquear el zoom (rompe
   accesibilidad), es que ningún input quede por debajo de 16px en touch.
   Va al final del archivo y con `.bz-app`/`.bz-tabla` antepuesto a propósito:
   tiene que ganarle en especificidad a ".bz-app input, ... { font: inherit }"
   (hereda el 13.5px de .bz-app) y a .bzp-input/.bz-tabla .bzp-input. */
@media (hover: none) and (pointer: coarse) {
  input,
  select,
  textarea,
  .bz-app input,
  .bz-app select,
  .bz-app textarea,
  .bz-app .bzp-input,
  .bz-app .bz-tabla .bzp-input {
    font-size: 16px;
  }
}