:root {
  /* Paleta de la marca STAR SYSTEM. Los tres colores de la identidad y las dos
     variantes que hacen falta para los estados (hover, presionado). Todo lo
     demás en la hoja sale de estas variables: cambiar la marca es cambiar aquí. */
  --star-azul: #1a346b;          /* STAR Blue  */
  --star-azul-oscuro: #12244a;
  --star-oro: #f9d05f;           /* STAR Gold  */
  --star-oro-oscuro: #e8b93c;
  --star-gris: #e5e7eb;          /* STAR Light Gray */
  /* Acentos decorativos: se suman a la marca para darle variedad de color a
     lo que no tiene un significado propio (las tarjetas de métricas, por
     ejemplo) — nunca reemplazan el color con significado (rojo = vencida,
     verde = al día, etc. siguen intactos donde ya existían). */
  --star-azul-vivido: #2f6fef;
  --star-esmeralda: #0f9d75;
  --star-rosa: #d6336c;
  /* Sobre el oro nunca va texto blanco: no se lee. Va el azul de la marca. */
  --sobre-oro: #12244a;

  --bg: #fafbfc;
  --sidebar-bg: var(--star-azul);
  --sidebar-text: #eaeef6;
  --accent: var(--star-azul);
  --accent-dark: var(--star-azul-oscuro);
  --danger: #c62828;
  --success: #1f8a3d;
  --text: #1c2536;
  --muted: #6b7280;
  --card-bg: #ffffff;
  --border: var(--star-gris);

  /* Curvas "premium" (estilo Apple): arrancan de una y frenan larguísimo, así
     se sienten pesadas y controladas en vez de mecánicas. --ease-entrada es
     para lo que aparece en pantalla (páginas, tarjetas, modales); --ease-suave
     es la de todos los días —hover, foco— más corta para no sentirse lenta al
     usar el sistema seguido. */
  --ease-entrada: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-suave: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
h1, h2, h3, button, .brand, .page-title { letter-spacing: -0.01em; }

#app { min-height: 100vh; }

button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  padding: 9px 16px;
  background: var(--star-gris);
  color: var(--text);
  cursor: pointer;
  transition: background 0.3s var(--ease-suave), transform 0.25s var(--ease-entrada), box-shadow 0.3s var(--ease-suave);
}
button:hover { background: #d7dbe2; }
button:active:not(:disabled) { transform: scale(0.96); transition-duration: 0.12s; }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(26,52,107,0.22); }
button.accent {
  background: linear-gradient(135deg, var(--star-azul-vivido) 0%, var(--accent) 60%, var(--accent-dark) 100%);
  color: #fff; font-weight: 700; box-shadow: 0 2px 10px rgba(18,36,74,0.28);
}
button.accent:hover { box-shadow: 0 6px 18px rgba(18,36,74,0.38); transform: translateY(-1px); }
button.accent:active:not(:disabled) { background: var(--accent-dark); }
button.danger { background: var(--danger); color: #fff; }
button.danger:hover { background: #a80010; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input, select, textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--text);
  transition: border-color 0.3s var(--ease-suave), box-shadow 0.3s var(--ease-suave);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26,52,107,0.15);
}

/* ---------- Login ---------- */
.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--star-azul-oscuro, #12244a);
}
/* Video de fondo a pantalla completa detrás de la tarjeta de entrada. */
.login-fondo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.login-card {
  background: var(--card-bg);
  border-radius: 24px;
  padding: 40px;
  width: 340px;
  box-shadow: 0 20px 44px -16px rgba(18,36,74,0.4);
  text-align: center;
  position: relative;
  z-index: 1;
  animation: tarjeta-entrada 0.9s var(--ease-entrada);
}
@keyframes tarjeta-entrada {
  from { opacity: 0; transform: translateY(32px) scale(0.96); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.login-card h1 { font-size: 22px; margin: 0 0 2px; }
/* El logotipo manda en la tarjeta de entrada: ocupa el lugar del nombre escrito. */
.login-logo { display: block; width: calc(100% + 36px); height: auto; margin: 0 -18px 20px; }
.login-card p.subtitle { color: var(--muted); margin: 0 0 24px; }
.login-card label { display: block; text-align: left; margin: 12px 0 4px; font-size: 13px; }
.login-card input { width: 100%; }
.login-card button { width: 100%; margin-top: 18px; padding: 11px; }
.login-error { color: var(--danger); font-size: 13px; min-height: 18px; margin-top: 6px; }
/* La ruedita de ajustes va en la esquina de la tarjeta de entrada: se ve cuando
   se busca, sin competir con el botón de Ingresar. */
.login-card { position: relative; }
.login-card .login-ajustes {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
  padding: 0; margin: 0; border-radius: 50%; background: transparent;
  color: var(--muted); font-size: 17px; line-height: 1;
}
.login-card .login-ajustes:hover { background: var(--star-gris); color: var(--text); }

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; }
/* El menú pasó de bloque navy sólido a blanco: la marca ahora vive en el
   acento (la estrella, el dorado del ítem activo), no en un fondo de color.
   El relleno de la estrella ya es navy (ver estrella.svg), así que se ve
   igual de bien aquí que sobre el navy de antes. */
.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--card-bg);
  color: var(--text);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 24px 14px;
  position: relative; z-index: 1;
}
.sidebar .brand {
  font-size: 17px; font-weight: 700; color: var(--star-azul); padding: 0 10px;
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.brand-estrella { width: 26px; height: 26px; flex-shrink: 0; }
.brand-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .who { font-size: 12px; color: var(--muted); padding: 4px 10px 8px; }
.tienda-badge {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  padding: 3px 10px; border-radius: 20px; margin: 6px 10px 4px;
}
.tienda-badge.tienda-mayor { background: rgba(249, 208, 95, 0.22); color: var(--star-azul); }
.tienda-badge.tienda-detal { background: var(--star-gris); color: var(--muted); }

/* Switch de perfil: arriba = administrador, abajo = empleado. */
.modo-switch {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 10px 12px; cursor: pointer; user-select: none;
  font-size: 12px; color: var(--muted);
}
.modo-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.modo-switch-pista {
  flex-shrink: 0; width: 34px; height: 20px; border-radius: 20px;
  background: var(--star-gris); position: relative; transition: background 0.3s var(--ease-suave);
}
.modo-switch-bolita {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(18,36,74,0.25);
  transition: transform 0.35s var(--ease-entrada);
}
.modo-switch.activo .modo-switch-pista { background: var(--star-oro); }
.modo-switch.activo .modo-switch-bolita { transform: translateX(14px); }
.modo-switch.activo .modo-switch-texto { color: var(--star-azul); font-weight: 600; }
.modo-switch:focus-within .modo-switch-pista { box-shadow: 0 0 0 2px rgba(26, 52, 107, 0.25); }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
/* El dorado de la marca vuelve a ser una pastilla llena en el ítem activo —
   más vistoso que una simple línea — pero sobre el menú blanco y con esquinas
   más redondeadas, para que se sienta amigable y no un bloque duro. */
.sidebar nav a {
  color: var(--text);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  display: block;
  transition: background 0.25s var(--ease-suave), color 0.25s var(--ease-suave), transform 0.25s var(--ease-entrada);
}
.sidebar nav a:hover { background: rgba(26, 52, 107, 0.06); transform: translateX(2px); }
.sidebar nav a.active {
  background: var(--star-oro);
  color: var(--sobre-oro);
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(249,208,95,0.45);
}
.sidebar .logout {
  background: transparent;
  color: var(--muted);
  text-align: left;
  padding: 10px 12px;
}
.sidebar .logout:hover { background: rgba(26, 52, 107, 0.05); color: var(--text); }

.content { flex: 1; padding: 32px 40px; overflow-y: auto; max-height: 100vh; }
/* Al cambiar de módulo el contenido entra con un fundido suave: lo dispara
   `navegar()` en app.js quitando y volviendo a poner esta clase (si no se
   reinicia el reflow, el navegador no repite la animación la segunda vez). */
.content.pagina-entrando { animation: pagina-entrada 0.55s var(--ease-entrada); }
@keyframes pagina-entrada {
  from { opacity: 0; transform: translateY(16px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

h1.page-title { font-size: 24px; margin: 0 0 4px; }
p.page-subtitle { color: var(--muted); margin: 0 0 18px; }

/* ---------- Cards / metrics ---------- */
.cards { display: flex; gap: 16px; flex-wrap: wrap; }
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 18px;
  padding: 20px;
  flex: 1;
  min-width: 180px;
  transition: border-color 0.3s var(--ease-suave), box-shadow 0.3s var(--ease-suave), transform 0.3s var(--ease-entrada);
  animation: tarjeta-metrica-entrada 0.7s var(--ease-entrada) backwards;
}
.card:hover { box-shadow: 0 10px 24px -12px rgba(18,36,74,0.25); transform: translateY(-2px); }
/* Cada tarjeta de métrica lleva su propio color de la paleta ampliada, en vez
   de que todas repitan el mismo navy — más vivo, sin inventar jerarquía donde
   no la hay (ningún número "importa más" que otro). */
.cards .card:nth-child(4n+1) { border-top-color: var(--star-azul-vivido); }
.cards .card:nth-child(4n+1) .value { color: var(--star-azul-vivido); }
.cards .card:nth-child(4n+2) { border-top-color: var(--star-oro-oscuro); }
.cards .card:nth-child(4n+2) .value { color: var(--star-oro-oscuro); }
.cards .card:nth-child(4n+3) { border-top-color: var(--star-esmeralda); }
.cards .card:nth-child(4n+3) .value { color: var(--star-esmeralda); }
.cards .card:nth-child(4n+4) { border-top-color: var(--star-rosa); }
.cards .card:nth-child(4n+4) .value { color: var(--star-rosa); }
/* Las tarjetas de un mismo grupo entran en cadena, una detrás de otra, en vez
   de todas a la vez: se ve más vivo sin ser lento (tope en la 6ta para que una
   lista larga de tarjetas no tarde en aparecer completa). */
.cards .card:nth-child(1) { animation-delay: 0.04s; }
.cards .card:nth-child(2) { animation-delay: 0.11s; }
.cards .card:nth-child(3) { animation-delay: 0.18s; }
.cards .card:nth-child(4) { animation-delay: 0.25s; }
.cards .card:nth-child(5) { animation-delay: 0.32s; }
.cards .card:nth-child(n+6) { animation-delay: 0.38s; }
@keyframes tarjeta-metrica-entrada {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.card .label { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.card .value { color: var(--accent); font-size: 26px; font-weight: 700; margin-top: 7px; letter-spacing: -.01em; }

/* ---------- Toolbar / tables ---------- */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar .search { display: flex; gap: 6px; }

table.data { width: 100%; border-collapse: collapse; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
table.data th {
  text-align: left;
  background: rgba(26, 52, 107, 0.05);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--star-azul);
}
table.data td { padding: 10px 12px; border-top: 1px solid var(--border); font-size: 13px; }
table.data tbody tr { transition: background 0.25s var(--ease-suave); }
table.data tbody tr:hover { background: #eef2fa; cursor: pointer; }
table.data tbody tr.selected { background: #dbe4f5; }
.empty-row td { text-align: center; color: var(--muted); padding: 24px; }
.horario-cal { user-select: none; }
.bloque-horario-cal {
  border-radius: 6px;
  padding: 3px 5px;
  font-size: 10px;
  line-height: 1.3;
  color: #fff;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: box-shadow 0.15s var(--ease-suave);
}
.bloque-horario-cal:active { cursor: grabbing; }
.bloque-horario-cal b { display: block; font-size: 10.5px; }
.bloque-horario-borrar {
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: 13px;
  line-height: 1;
  opacity: 0.75;
  cursor: pointer;
}
.bloque-horario-borrar:hover { opacity: 1; }

.alert { background: #fdf1f0; color: var(--danger); border: 1px solid #f3d3d0; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; }
.hint { color: var(--muted); font-size: 12px; margin-top: 6px; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(18,36,74,0.4);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 50;
  animation: velo-entrada 0.4s var(--ease-suave);
}
.modal {
  background: var(--card-bg); border-radius: 22px; padding: 24px;
  width: 420px; max-width: 92vw; max-height: 86vh; overflow-y: auto;
  box-shadow: 0 16px 36px -14px rgba(18,36,74,0.3);
  animation: modal-entrada 0.5s var(--ease-entrada);
}
@keyframes velo-entrada { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-entrada {
  from { opacity: 0; transform: translateY(22px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal h2 { margin: 0 0 16px; font-size: 18px; }
.modal .field { margin-bottom: 12px; }
.modal .field label { display: block; font-size: 13px; margin-bottom: 4px; }
.modal .field input, .modal .field select, .modal .field textarea { width: 100%; }
.modal .field textarea { resize: vertical; min-height: 70px; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* ---------- Ventas (POS) ---------- */
.pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.pos-panel { background: var(--card-bg); border-radius: 12px; padding: 16px; }
.totales { background: var(--card-bg); border-radius: 12px; padding: 16px; margin-top: 12px; }
.totales .row { display: flex; justify-content: space-between; padding: 4px 0; }
.totales .row.total .value { font-size: 22px; font-weight: 700; color: var(--accent); }
.cobro-field { margin: 10px 0; }
.cobro-field label { display: block; font-size: 13px; margin-bottom: 4px; }

/* Mapa de clientes (Seguimiento). `isolation` encierra las capas de Leaflet
   (z-index hasta 1000) para que no tapen los modales ni el menú. */
.mapa-clientes {
  height: 540px; margin: 8px 0; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border); position: relative; isolation: isolate; z-index: 0;
}
.mapa-clientes.sin-mapa { height: auto; border: none; }
.mapa-clientes.colocando, .mapa-clientes.colocando .leaflet-grab,
.mapa-clientes.colocando .leaflet-interactive { cursor: crosshair !important; }
.mapa-leyenda { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.mapa-leyenda button {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  padding: 3px 10px; border-radius: 999px;
}
.mapa-leyenda button.apagado { opacity: 0.4; text-decoration: line-through; }
.mapa-punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mapa-popup .estado-pill { font-size: 11px; }

/* Recepción de servicio técnico */
.srv-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.srv-check { display: flex; align-items: center; gap: 6px; font-weight: normal; font-size: 13px; margin: 6px 0; cursor: pointer; }
.srv-check input { width: auto; margin: 0; }
.srv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cobro-field .srv-chips label {
  display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 4px 10px;
  border: 1px solid rgba(128, 128, 128, 0.35); border-radius: 999px; cursor: pointer;
}
.srv-chips input { width: auto; margin: 0; }
.orden-datos p { margin: 3px 0; }
.aviso-orden {
  margin-bottom: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px;
  background: var(--card-bg); border-left: 4px solid var(--accent);
}
.aviso-orden button { margin-left: 6px; padding: 3px 8px; font-size: 12px; }

/* Buscador de clientes con autocompletado (Ventas) */
.cliente-buscador { position: relative; }
.cliente-buscador input { width: 100%; }
.cliente-sugerencias {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 2px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.cliente-sugerencia { padding: 8px 12px; font-size: 13px; cursor: pointer; }
.cliente-sugerencia:hover { background: #f0f6ff; }
.cliente-sugerencia-vacia { padding: 8px 12px; font-size: 13px; color: var(--muted); }
.cliente-sugerencia-crear { color: var(--accent); font-weight: 600; border-top: 1px solid var(--border); }
.radio-group label { font-weight: normal; display: inline-flex; align-items: center; gap: 4px; margin-right: 14px; }

/* ---------- Gráficas ---------- */
.chart-section { margin-bottom: 24px; }
.chart-section h3 { font-size: 15px; margin: 0 0 10px; color: var(--text); }
.chart-box { background: var(--card-bg); border-radius: 12px; padding: 18px; }

.chart-vbars { display: flex; align-items: flex-end; gap: 10px; height: 210px; overflow-x: auto; }
.chart-vbars .bar-col { flex: 1 0 40px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 40px; }
.chart-vbars .bar { width: 60%; background: var(--accent); border-radius: 6px 6px 0 0; min-height: 2px; transition: height 0.5s var(--ease-entrada); }
.chart-vbars .bar-value { font-size: 11px; margin-bottom: 4px; color: var(--text); white-space: nowrap; }
.chart-vbars .bar-label { font-size: 11px; color: var(--muted); margin-top: 6px; text-align: center; }

.chart-hbars .hrow { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.chart-hbars .hrow:last-child { margin-bottom: 0; }
.chart-hbars .hlabel { width: 150px; flex-shrink: 0; font-size: 12px; text-align: right; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-hbars .htrack { flex: 1; background: #e8e8ed; border-radius: 6px; height: 18px; }
.chart-hbars .hfill { background: var(--accent); height: 100%; border-radius: 6px; min-width: 2px; transition: width 0.5s var(--ease-entrada); }
.chart-hbars .hvalue { width: 90px; flex-shrink: 0; font-size: 12px; color: var(--text); }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .stats-grid { grid-template-columns: 1fr; } }

/* ---------- Dashboard: facturas por vencer, ranking, meta ---------- */
.vencer-lista { display: flex; flex-direction: column; gap: 8px; }
.vencer-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--card-bg); border: 1px solid var(--border); border-left: 4px solid #e8b339;
  border-radius: 14px; padding: 12px 14px;
}
.vencer-item.vencida { border-left-color: var(--danger); }
.vencer-info { display: flex; flex-direction: column; gap: 2px; }
.vencer-info span { font-size: 12px; color: var(--muted); }
.vencer-whatsapp {
  background: #1f8a3d; color: #fff; font-weight: 600; font-size: 12px;
  padding: 7px 12px; border-radius: 8px; text-decoration: none; white-space: nowrap;
}
.vencer-whatsapp:hover { background: #176b2f; }

.ranking-top { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.ranking-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 14px;
}
.ranking-medalla { font-size: 18px; width: 24px; }
.ranking-nombre { flex: 1; font-weight: 600; }
.ranking-monto { color: var(--accent); font-weight: 700; }

.meta-barra { background: #e8e8ed; border-radius: 999px; height: 20px; max-width: 420px; overflow: hidden; }
.meta-relleno { background: var(--accent); height: 100%; border-radius: 999px; transition: width 0.5s var(--ease-entrada); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tabs button { background: transparent; border-radius: 8px 8px 0 0; padding: 10px 16px; }
.tabs button.active { background: var(--card-bg); font-weight: 600; border-bottom: 2px solid var(--accent); }

/* ---------- Compras → Proveedores y listas ---------- */
.prov-subir { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.prov-subir label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
/* Sin esto el display:flex le gana al atributo hidden y la tasa no se esconde. */
.prov-subir label[hidden] { display: none; }
.prov-subir input[type="file"] { max-width: 260px; }
.hacker-panel {
  background: #0b0f14; color: #d6f5e3; border: 1px solid #1f2b23; border-radius: 12px;
  padding: 12px 16px; margin-bottom: 12px; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px;
}
.hk-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  color: #3ee87a; font-weight: 700; margin-bottom: 8px; }
.hk-ops { display: flex; gap: 8px; flex-wrap: wrap; font-weight: 400; }
.hk-ops select { background: #131b23; color: #d6f5e3; border: 1px solid #1f2b23; font-size: 12px; padding: 3px 8px; width: auto; }
.hk-lineas p { margin: 5px 0; line-height: 1.5; }
.prov-sec { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; }
.prov-sec > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.prov-sec[open] > summary { margin-bottom: 8px; }
.prov-sec .data { font-size: 13px; }
.prov-tabla-scroll { max-height: 55vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.prov-opciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 6px 0 10px; }
.prov-opciones label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.prov-opciones label[hidden] { display: none; }
/* A qué tasa está la lista, con el botón de recalcular bien a la vista. */
.prov-banner-tasa {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 6px 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--card-bg);
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
}
.prov-banner-tasa .accent { font-size: 14px; padding: 8px 14px; }
.btn-mini.accent { font-weight: 600; }
.ct-campo { margin: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.ct-campo[hidden] { display: none; }
.prov-conversion { font-weight: 600; margin: 10px 0 0; line-height: 1.45; }
.prov-negocio { border-top: 1px solid var(--border); padding: 8px 0 12px; }
.prov-negocio:first-child { border-top: none; }
.prov-msg { width: 100%; min-height: 160px; margin-top: 8px; font-size: 13px; line-height: 1.45; box-sizing: border-box; }
.prov-barato { color: var(--success); font-weight: 700; }
.prov-caro { color: var(--danger); }
.prov-badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; color: #fff; margin-bottom: 2px; }

/* ---------- Bloc de notas ---------- */
/* El botón va a la IZQUIERDA del 🤖: encima quedaría tapado por el chat, que se
   abre justo sobre su botón. */
.notas-fab {
  position: fixed; bottom: 24px; right: 92px; width: 52px; height: 52px; border-radius: 50%;
  background: var(--card-bg); border: 2px solid var(--accent); font-size: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 200;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.notas-fab.abierto { background: var(--accent); }
.notas-rapida {
  position: fixed; bottom: 88px; right: 92px; width: 340px; max-width: calc(100vw - 24px);
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); z-index: 201;
  display: flex; flex-direction: column; gap: 8px;
}
/* Sin esta regla el `display:flex` de arriba le gana al atributo `hidden` y el
   panel no se cierra nunca. */
.notas-rapida[hidden] { display: none; }
.notas-rapida-cab { display: flex; justify-content: space-between; align-items: center; }
.notas-rapida-cab button { background: transparent; border: none; font-size: 16px; padding: 2px 6px; }
.notas-rapida textarea { width: 100%; min-height: 96px; resize: vertical; box-sizing: border-box; }
.notas-rapida-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.notas-rapida-pie select { flex: 1; }
.notas-rapida-atajo { margin: 0; font-size: 11px; }
.notas-grid { display: grid; grid-template-columns: 230px 1fr; gap: 20px; align-items: start; }
.notas-lado { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 12px; }
.notas-cat-fila { display: flex; gap: 2px; align-items: center; }
.notas-cat {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 7px 10px; border-radius: 8px; background: transparent; border: 1px solid transparent;
}
.notas-cat.activo { background: var(--card-bg); border-color: var(--border); font-weight: 600; }
.notas-cat .nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notas-cat .n { font-size: 12px; color: var(--muted); }
.notas-cat-menu { padding: 2px 8px; background: transparent; border: none; color: var(--muted); }
.notas-nueva { background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px; margin-bottom: 12px; }
.notas-nueva textarea { width: 100%; resize: vertical; box-sizing: border-box; }
.notas-nueva-pie { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.notas-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.notas-barra input { flex: 1; min-width: 180px; }
.nota-card {
  background: var(--card-bg); border: 1px solid var(--border); border-left: 5px solid #bdbdbd;
  border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
}
.nota-card.fijada { box-shadow: 0 0 0 1px var(--accent) inset; }
.nota-card.hecha .nota-texto { text-decoration: line-through; color: var(--muted); }
.nota-texto { white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.nota-meta { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.nota-chip {
  color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 11px;
  display: inline-block; white-space: nowrap;
}
.nota-acciones { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* ---------- Mensajería interna (notas con destinatario) ---------- */
.notas-lado-titulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  margin: 10px 2px 2px; font-weight: 600; width: 100%; flex-basis: 100%;
}
.notas-lado-titulo:first-child { margin-top: 0; }
.notas-cat .n.hay {
  background: #c62828; color: #fff; border-radius: 999px; padding: 0 6px; min-width: 18px;
  text-align: center; font-weight: 700;
}
/* El número rojo del menú y del botón 📝. El botón ya es `position: fixed`
   (ver arriba) —eso ya alcanza como referencia para el numerito absoluto—;
   ponerle además `relative` aquí se lo pisaba y lo mandaba fuera de la
   pantalla, que es por lo que a veces "desaparecía" de al lado de El Hacker. */
.sidebar nav a { position: relative; }
.aviso-mensajes {
  position: absolute; top: 4px; right: 6px; background: #c62828; color: #fff;
  border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 5px; min-width: 16px; text-align: center; box-shadow: 0 0 0 2px var(--card-bg);
}
.sidebar nav a .aviso-mensajes { top: 50%; transform: translateY(-50%); }
.notas-fab .aviso-mensajes { top: -2px; right: -2px; }
.nota-mensaje.sin-leer { box-shadow: 0 0 0 1px #2e7d32 inset; }
.nota-de { font-size: 12px; font-weight: 700; margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.nota-nuevo {
  background: #2e7d32; color: #fff; border-radius: 999px; padding: 1px 7px;
  font-size: 10px; letter-spacing: .04em;
}
.nota-cita {
  border-left: 3px solid var(--border); padding: 2px 8px; margin-bottom: 6px;
  font-size: 12px; color: var(--muted); white-space: pre-wrap; word-break: break-word;
}

/* ---------- El Hacker (chat flotante) ---------- */
.hacker-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0b0f14;
  color: #3ee87a;
  font-size: 26px;
  border: 2px solid #3ee87a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  padding: 0;
}
.hacker-fab:hover { background: #131b23; }

.hacker-chat {
  position: fixed;
  bottom: 92px;
  right: 24px;
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 460px;
  max-height: calc(100vh - 130px);
  background: #0b0f14;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  z-index: 200;
}
.hacker-chat.hidden { display: none; }

.hacker-chat-header {
  background: #131b23;
  color: #3ee87a;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.hacker-chat-header button {
  background: none; border: none; color: #6e7d75; font-size: 18px; cursor: pointer; padding: 0; line-height: 1;
}
.hacker-chat-header button:hover { color: #3ee87a; }

.hacker-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hacker-msg { max-width: 88%; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; white-space: pre-line; }
.hacker-msg.bot { background: #131b23; color: #d6f5e3; align-self: flex-start; border: 1px solid #1f2b23; }
.hacker-msg.user { background: #1d3b2a; color: #3ee87a; align-self: flex-end; }

.hacker-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; flex-shrink: 0; }
.hacker-chips button {
  background: #131b23; color: #3ee87a; border: 1px solid #2a3a2f; border-radius: 20px;
  padding: 5px 10px; font-family: inherit; font-size: 11px; cursor: pointer;
}
.hacker-chips button:hover { background: #1a2530; border-color: #3ee87a; }

.hacker-chat-input {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid #1b2430;
  flex-shrink: 0;
}
.hacker-chat-input input {
  flex: 1; background: #131b23; border: 1px solid #2a3a2f; color: #d6f5e3;
  border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 13px;
}
.hacker-chat-input input:focus { outline: none; border-color: #3ee87a; }
.hacker-chat-input button {
  background: #3ee87a; color: #0b0f14; border: none; border-radius: 8px;
  padding: 8px 14px; font-weight: 700; cursor: pointer; font-family: inherit; font-size: 13px;
}
.hacker-chat-input button:hover { background: #35cf6c; }

/* ---------- Ticket ---------- */
.ticket-pre {
  font-family: "SF Mono", Menlo, monospace;
  white-space: pre;
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 13px;
}


/* Selector de lista de precios del POS: detal o Cashea. */
.selector-precios {
  display: flex;
  gap: 0;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.selector-precios button {
  flex: 1;
  border: none;
  border-radius: 0;
  background: var(--panel-2, #f2f2f5);
  color: var(--muted);
  font-weight: 600;
  padding: 9px 10px;
  cursor: pointer;
}
.selector-precios button + button { border-left: 1px solid var(--border); }
.selector-precios button.activo {
  background: var(--accent);
  color: #fff;
}

/* Renglón del carrito que se está vendiendo por debajo del costo. */
tr.bajo-costo > td {
  background: #fff2f1;
  box-shadow: inset 3px 0 0 var(--danger);
}
tr.bajo-costo > td:first-child::after {
  content: " ⚠";
  color: var(--danger);
}

/* ---------- Selector de formato del documento ---------- */
.formato-selector {
  display: flex; gap: 6px; margin: -6px 0 14px;
  background: #e8e8ed; padding: 4px; border-radius: 10px;
}
.formato-selector button {
  flex: 1; background: transparent; padding: 7px 10px;
  font-size: 13px; font-weight: 600; color: var(--muted); border-radius: 7px;
}
.formato-selector button:hover { background: rgba(255,255,255,0.6); }
.formato-selector button.activo {
  background: var(--card-bg); color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.14);
}

/* ---------- Nota de entrega (hoja carta) ---------- */
.nota-entrega {
  width: 700px; max-width: 100%; margin: 0 auto;
  background: #fff; color: #000; padding: 26px 28px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 12.5px; line-height: 1.45;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.nota-cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; border-bottom: 2px solid #000; padding-bottom: 12px;
}
.nota-logo { font-size: 21px; font-weight: 800; letter-spacing: 0.5px; }
.nota-sub { font-size: 11.5px; color: #444; }
.nota-folio { text-align: right; flex: 0 0 auto; }
.nota-tipo { font-size: 13px; font-weight: 800; letter-spacing: 1.2px; }
.nota-num { font-size: 16px; font-weight: 700; margin: 2px 0; }

.nota-datos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 22px;
  margin: 14px 0 16px;
}
.nota-dato { display: flex; gap: 6px; }
.nota-dato span { color: #555; min-width: 92px; }
.nota-dato b { font-weight: 600; }

.nota-tabla { width: 100%; border-collapse: collapse; }
.nota-tabla th {
  text-align: left; font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase;
  border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 7px 8px;
}
.nota-tabla td { padding: 6px 8px; border-bottom: 1px solid #e3e3e6; vertical-align: top; }
.nota-tabla tr.vacia td { height: 22px; }
.nota-tabla .c { text-align: center; }
.nota-tabla .r { text-align: right; }
.nota-tabla th.r { text-align: right; }

.nota-cierre {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin-top: 14px;
}
.nota-lado { font-size: 11.5px; color: #444; max-width: 55%; }
.nota-notas { margin-bottom: 6px; }
.nota-totales { border-collapse: collapse; min-width: 240px; }
.nota-totales td { padding: 4px 8px; }
.nota-totales .r { text-align: right; }
.nota-totales tr.grande td {
  font-weight: 700; font-size: 14px; border-top: 1px solid #000;
}

.nota-firmas { display: flex; gap: 40px; margin-top: 46px; }
.nota-firma { flex: 1; text-align: center; font-size: 11.5px; }
.nota-firma .linea { border-top: 1px solid #000; margin-bottom: 5px; }
.nota-firma small { color: #666; font-size: 10.5px; }

.nota-pie {
  margin-top: 22px; padding-top: 8px; border-top: 1px solid #e3e3e6;
  text-align: center; font-size: 10.5px; color: #666;
}

/* Nota con muchos renglones: se aprietan los espacios antes de achicar la letra. */
.nota-entrega.nota-compacta { padding: 18px 22px; }
.nota-compacta .nota-cab { padding-bottom: 8px; }
.nota-compacta .nota-datos { margin: 9px 0 10px; gap: 1px 22px; }
.nota-compacta .nota-tabla th { padding: 5px 8px; }
.nota-compacta .nota-tabla td { padding: 3px 8px; }
.nota-compacta .nota-cierre { margin-top: 9px; }
.nota-compacta .nota-totales td { padding: 2px 8px; }
.nota-compacta .nota-firmas { margin-top: 28px; }
.nota-compacta .nota-pie { margin-top: 12px; padding-top: 6px; }

/* ---------- Toast ---------- */

.toast {
  position: fixed; bottom: 20px; right: 20px;
  background: var(--text); color: #fff; padding: 12px 18px; border-radius: 12px;
  font-size: 13px; z-index: 100; box-shadow: 0 8px 20px -6px rgba(18,36,74,0.35);
  animation: toast-entrada 0.5s var(--ease-entrada);
}
.toast.error { background: var(--danger); }
/* `toast()` en app.js le pone esta clase justo antes de quitarlo del DOM, y
   espera a que la animación termine para recién borrarlo. */
.toast.saliendo { animation: toast-salida 0.4s var(--ease-suave) forwards; }
@keyframes toast-entrada {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toast-salida {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(10px); }
}

/* ---------- Barra superior (solo teléfono) ---------- */
.topbar { display: none; }

/* ---------- Móvil (iPhone / tablet en vertical) ---------- */
@media (max-width: 820px) {
  .shell { display: block; min-height: 100dvh; }

  /* Barra fija arriba con el botón de menú */
  .topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--sidebar-bg);
    color: #fff;
    padding: 12px 14px;
    position: sticky;
    top: 0;
    z-index: 60;
  }
  .topbar-menu {
    background: transparent; color: #fff; border: none;
    font-size: 22px; line-height: 1; padding: 4px 6px; cursor: pointer;
  }
  .topbar-titulo { font-size: 16px; font-weight: 700; flex: 1; }
  .topbar-tienda {
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
    padding: 4px 10px; border-radius: 20px;
  }

  /* El menú se convierte en cajón deslizable desde la izquierda */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 250px;
    z-index: 70;
    transform: translateX(-100%);
    transition: transform 0.4s var(--ease-entrada);
    overflow-y: auto;
    padding: 18px 12px;
  }
  .menu-abierto .sidebar { transform: translateX(0); }
  .sidebar-velo {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 65;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease-suave), visibility 0s linear 0.35s;
  }
  .menu-abierto .sidebar-velo { opacity: 1; visibility: visible; transition: opacity 0.35s var(--ease-suave); }
  .sidebar nav a { padding: 13px 12px; font-size: 15px; }
  .sidebar .logout { padding: 13px 12px; font-size: 15px; }
  .modo-switch { font-size: 14px; padding: 6px 2px; }
  .modo-switch-pista { width: 42px; height: 24px; }
  .modo-switch-bolita { width: 20px; height: 20px; }
  .modo-switch.activo .modo-switch-bolita { transform: translateX(18px); }

  .content { padding: 16px 14px; max-height: none; overflow-y: visible; }
  h1.page-title { font-size: 20px; }

  /* Carrito debajo del buscador, no al lado */
  .pos-grid { grid-template-columns: 1fr; gap: 14px; }
  .srv-dos { grid-template-columns: 1fr; }
  .mapa-clientes { height: 62vh; }

  /* La lista de productos se desliza dentro de su propia caja, para que el
     carrito y el botón de cobrar queden siempre cerca y no haya que bajar
     por cientos de productos. */
  .lista-productos {
    max-height: 45dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px;
    background: #fafafa;
  }
  .lista-productos table.data tbody tr { margin-bottom: 8px; }
  .stats-grid { grid-template-columns: 1fr; }
  .cards .card { flex: 1 1 100%; }

  /* Cada fila de tabla se ve como una tarjeta: nada se corta ni hay que
     deslizar de lado, y cada dato lleva su etiqueta al lado. */
  table.data { display: block; background: transparent; }
  table.data thead { display: none; }
  table.data tbody { display: block; }
  table.data tbody tr {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  table.data tbody tr.selected { background: #dbe4f5; }
  table.data td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    border: none;
    padding: 4px 0;
    font-size: 14px;
    text-align: right;
  }
  table.data td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: left;
    flex-shrink: 0;
  }
  /* El primer dato hace de título de la tarjeta */
  table.data td.celda-titulo {
    font-weight: 700;
    font-size: 15px;
    text-align: left;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
  }
  table.data td.celda-titulo::before { display: none; }
  .empty-row td, table.data tr.empty-row {
    display: block; text-align: center; border: none; background: transparent;
  }
  .empty-row td::before { display: none; }

  /* Pestañas deslizables */
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs button { white-space: nowrap; flex-shrink: 0; }

  /* Barras de acciones: botones cómodos, en fila que se envuelve */
  .toolbar { gap: 8px; }
  .toolbar .actions { width: 100%; }
  .toolbar .actions button { flex: 1 1 auto; padding: 11px 12px; }

  /* Modales a pantalla casi completa */
  .modal { width: calc(100vw - 24px) !important; max-width: none; max-height: 88dvh; overflow-y: auto; }

  /* En el teléfono la nota de entrega se ve angosta: se deja rodar de lado. */
  .nota-entrega { width: auto; padding: 16px; overflow-x: auto; }
  .nota-cab { flex-direction: column; gap: 8px; }
  .nota-folio { text-align: left; }
  .nota-datos { grid-template-columns: 1fr; }
  .nota-cierre { flex-direction: column; gap: 12px; }
  .nota-lado { max-width: none; }
  .nota-totales { min-width: 0; width: 100%; }
  .nota-firmas { gap: 18px; margin-top: 34px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions button { flex: 1 1 auto; padding: 12px; }

  /* Campos grandes para el dedo; 16px evita que iOS haga zoom al enfocar */
  input, select, textarea, button { font-size: 16px; }
  input, select, textarea { padding: 11px 12px; }

  /* El chat flotante no debe tapar los botones de cobrar */
  .hacker-fab { width: 48px; height: 48px; font-size: 22px; bottom: 14px; right: 14px; }
  .notas-fab { width: 46px; height: 46px; font-size: 21px; bottom: 15px; right: 72px; }
  .notas-rapida { right: 12px; bottom: 70px; width: calc(100vw - 24px); }
  .notas-grid { grid-template-columns: 1fr; gap: 12px; }
  .notas-lado { position: static; flex-direction: row; flex-wrap: wrap; }
  .notas-cat-fila, .notas-cat { flex: 0 0 auto; }
  .hacker-chat { width: calc(100vw - 24px); right: 12px; bottom: 72px; height: 60dvh; }
}

@media print {
  /* Antes se ocultaba todo con `visibility: hidden`, pero eso deja el alto
     ocupado: el sistema completo seguía midiendo su altura y salían hojas en
     blanco detrás del documento. Con `display: none` se saca del flujo.
     `.print-host` es el fondo del modal que contiene el documento; si hay otro
     modal abierto detrás (por ejemplo el detalle de la venta), no se imprime. */
  body > *:not(.print-host) { display: none !important; }
  .no-print { display: none !important; }
  .print-host {
    position: static !important; inset: auto;
    display: block !important; background: none;
  }
  .print-host .modal {
    width: auto !important; max-width: none; max-height: none;
    overflow: visible; padding: 0; border-radius: 0; background: none;
  }
  /* El ancho, el tamaño de letra y el alto de la hoja del ticket los calcula
     `prepararImpresion()` justo antes de imprimir, porque dependen del papel de
     la impresora (72 mm útiles en la POS-80). Aquí solo se le quita el marco de
     pantalla, por si esa función no llegara a correr. */
  #ticket-print-area.ticket-pre {
    padding: 0; border: none; border-radius: 0; background: none;
  }

  /* La nota de entrega va a un ancho fijo de hoja carta, centrada y sin el
     marco de la pantalla. El tamaño de letra lo ajusta `ajustarNotaAUnaHoja`
     para que entre en una sola hoja. */
  #ticket-print-area.nota-entrega {
    width: 700px; margin: 0 auto;
    border: none; border-radius: 0; padding: 0;
    page-break-inside: avoid; break-inside: avoid;
  }
  .nota-tabla tr, .nota-firmas { page-break-inside: avoid; break-inside: avoid; }

  /* El catálogo va a ancho de hoja carta, sin el marco de pantalla; cada
     categoría empieza en una posición limpia y ningún producto queda
     partido entre dos hojas. */
  #ticket-print-area.catalogo-hoja {
    width: 700px; margin: 0 auto;
    border: none; border-radius: 0; padding: 0;
  }
  .catalogo-cat { break-after: avoid; }
  .catalogo-item { break-inside: avoid; }
}

/* ===================== Seguimiento de clientes ===================== */
/* Etiqueta de estado: el color se pone desde JS según lo atrasado que esté. */
.estado-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
/* Botón chico para las acciones dentro de una fila de tabla. Sirve igual para
   <button> que para el <a> de WhatsApp, por eso fija el texto y el cursor. */
.btn-mini {
  display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 600; line-height: 1.3;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg);
  color: var(--text); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: border-color 0.2s var(--ease-suave), color 0.2s var(--ease-suave);
}
.btn-mini:hover { border-color: var(--accent); color: var(--accent); }
/* Filtro elegido (los chips de «qué hacer» en Capital muerto). El color de la
   acción se pone desde el código: aquí solo va el peso y el borde. */
.btn-mini.activo { font-weight: 700; border-color: transparent; }

/* ===================== Predicción de pedidos ===================== */
.pred-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 18px; margin-bottom: 10px;
  transition: border-color 0.25s var(--ease-suave);
}
.pred-card:hover { border-color: #c7cedb; }
.pred-cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.pred-items { display: flex; flex-direction: column; gap: 8px; }
/* La etiqueta de estado va arriba a la izquierda y no se estira con el texto. */
.pred-item { display: flex; gap: 10px; align-items: flex-start; }
.pred-item .estado-pill { flex: 0 0 auto; margin-top: 2px; min-width: 82px; text-align: center; }
.pred-pie {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--border);
}
@media (max-width: 820px) {
  .pred-item .estado-pill { min-width: 0; }
}

/* ===================== Cartera: clases ABC y filtros ===================== */
.sello-clase { min-width: 22px; text-align: center; font-weight: 700; }

.filtros-cartera {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
}
.filtros-cartera label { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.filtros-cartera select { width: auto; }

/* Pareto: tres bloques clicables, uno por clase. Son <button> para que se pueda
   filtrar desde ahí con el teclado, no solo con el ratón. */
.pareto { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 4px; }
.pareto-bloque {
  flex: 1 1 180px; text-align: left; cursor: pointer;
  background: var(--card-bg); border: 1px solid var(--border);
  border-top: 3px solid var(--border); border-radius: 10px; padding: 12px 14px;
}
.pareto-bloque:hover { border-color: var(--accent); }
.pareto-clase { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pareto-pct { font-size: 24px; font-weight: 700; color: var(--text); margin: 2px 0; }
.pareto-detalle { font-size: 12px; color: var(--muted); }

.pred-nombre { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ===================== Validación de pagos ===================== */
.alertas-pago { display: flex; flex-direction: column; gap: 4px; }
.alerta-pago {
  font-size: 12px; line-height: 1.35; color: var(--muted);
  padding: 4px 8px; border-radius: 6px; background: #f5f5f7;
  border-left: 3px solid var(--border);
}
/* La grave se ve en rojo: es la referencia repetida o el monto que no cuadra. */
.alerta-pago.grave {
  color: var(--danger); background: #fff2f0; border-left-color: var(--danger);
}

/* ===================== Agenda del día ===================== */
.agenda-fila {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 8px;
}
/* El que ya se atendió se atenúa en vez de desaparecer: sigue haciendo falta
   verlo para saber que se hizo, pero no debe competir por la atención. */
.agenda-fila.hecho { opacity: .58; }
.agenda-num {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.agenda-productos { font-size: 12.5px; line-height: 1.4; }
.agenda-acciones { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
@media (max-width: 820px) {
  .agenda-acciones { flex-direction: row; flex-wrap: wrap; }
}

/* ---- Hoja imprimible ---- */
.hoja-dia { width: 700px; max-width: 100%; margin: 0 auto; color: #000; font-size: 12px; }
.hoja-cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 10px;
}
.hoja-logo { font-size: 19px; font-weight: 800; letter-spacing: .02em; }
.hoja-sub { font-size: 11px; }
.hoja-fecha { text-align: right; font-size: 11px; }
.hoja-firma { margin-top: 10px; }
.hoja-tabla { width: 100%; border-collapse: collapse; }
.hoja-tabla th, .hoja-tabla td {
  border: 1px solid #999; padding: 5px 6px; vertical-align: top; text-align: left;
}
.hoja-tabla th { background: #eee; font-size: 10.5px; text-transform: uppercase; }
.hoja-tabla .c { text-align: center; }
.hoja-tabla .tel { font-size: 10.5px; }
.hoja-tabla .sit, .hoja-tabla .ofr { font-size: 10.5px; line-height: 1.3; }
.hoja-tabla .clase { font-weight: 700; }
/* Casilla grande: se marca con bolígrafo. */
.hoja-tabla .casilla { font-size: 16px; }
/* Espacio en blanco real para escribir a mano en qué quedó la llamada. */
.hoja-tabla .raya { min-height: 30px; }
.hoja-pie { margin-top: 10px; font-size: 10.5px; border-top: 1px solid #999; padding-top: 6px; }
.hoja-dia.nota-compacta .hoja-tabla th,
.hoja-dia.nota-compacta .hoja-tabla td { padding: 3px 4px; }

@media print {
  #ticket-print-area.hoja-dia {
    width: 700px; margin: 0 auto; border: none; border-radius: 0; padding: 0;
  }
  .hoja-tabla tr { page-break-inside: avoid; break-inside: avoid; }
}

/* ---- Catálogo de productos (hoja imprimible) ---- */
.catalogo-modal { max-width: 760px; }
.catalogo-barra {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.catalogo-hoja { width: 700px; max-width: 100%; margin: 0 auto; color: #000; }
.catalogo-cab {
  text-align: center; border-bottom: 2px solid #000;
  padding-bottom: 10px; margin-bottom: 16px;
}
.catalogo-cab h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: .02em; }
.catalogo-cab p { margin: 0; font-size: 12px; color: #444; }
.catalogo-fecha { margin-top: 4px !important; font-style: italic; }
.catalogo-cat {
  font-size: 15px; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid #000; padding-bottom: 4px; margin: 18px 0 10px;
}
.catalogo-cat:first-of-type { margin-top: 0; }
.catalogo-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 20px;
}
.catalogo-item {
  border-bottom: 1px dotted #999; padding-bottom: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.catalogo-item-nombre { font-weight: 700; font-size: 13px; }
.catalogo-item-desc { font-size: 11px; color: #555; }
.catalogo-item-precio { font-size: 13px; font-weight: 700; }
@media (max-width: 820px) {
  .catalogo-grid { grid-template-columns: 1fr; }
}

/* ===================== Calendario de contactos ===================== */
.cal-barra {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
}
.cal-titulo { font-size: 16px; min-width: 150px; text-align: center; }

.cal-rejilla {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.cal-cabecera {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--muted); text-align: center; padding: 4px 0;
}
.cal-dia {
  min-height: 92px; background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 8px; padding: 5px;
  display: flex; flex-direction: column; gap: 3px;
}
/* Los días ya pasados se atenúan pero no se ocultan: sirven para ubicarse. */
.cal-dia.pasado { opacity: .5; }
.cal-dia.fuera { background: none; border: none; }
.cal-dia.hoy { border-color: var(--accent); border-width: 2px; }
.cal-numero { font-size: 11px; font-weight: 700; color: var(--muted); }
.cal-dia.hoy .cal-numero { color: var(--accent); }

.cal-chip {
  display: flex; align-items: center; gap: 4px; width: 100%;
  background: #f5f5f7; border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 5px; padding: 3px 5px; cursor: pointer;
  font-size: 11px; line-height: 1.25; text-align: left;
}
.cal-chip:hover { border-color: var(--accent); }
.cal-chip.recordatorio { background: #fff8e1; }
.cal-chip-clase { font-weight: 800; flex: 0 0 auto; }
/* El nombre se corta con puntos suspensivos: la casilla es angosta y un nombre
   largo desbordaría la rejilla entera. */
.cal-chip-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cal-vencidos {
  background: #fff2f0; border: 1px solid #ffd6d1;
  border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
}
.cal-vencidos-titulo {
  font-size: 13px; font-weight: 700; color: var(--danger); margin-bottom: 8px;
}
.cal-vencidos-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px;
}
.cal-vencidos .cal-chip { background: #fff; }
.cal-atraso {
  margin-left: auto; flex: 0 0 auto;
  font-weight: 700; color: var(--danger); font-size: 10.5px;
}

.cal-leyenda {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 12px; font-size: 11.5px; color: var(--muted);
}

@media (max-width: 820px) {
  /* En el teléfono la rejilla de 7 columnas es ilegible: se pasa a lista. */
  .cal-rejilla { grid-template-columns: 1fr; }
  .cal-cabecera { display: none; }
  .cal-dia { min-height: 0; }
  .cal-dia.fuera { display: none; }
  .cal-dia:not(.hoy):empty { display: none; }
}

/* ===================== Menú de clic derecho ===================== */
.menu-contextual {
  position: fixed; z-index: 3000; min-width: 230px; max-width: 320px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 5px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
}
.menu-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; border-radius: 6px;
  padding: 8px 10px; font-size: 13px; color: var(--text); cursor: pointer;
}
.menu-item:hover:not(:disabled) { background: #f0f0f2; }
.menu-item.peligroso { color: var(--danger); }
.menu-item.peligroso:hover:not(:disabled) { background: #fff2f0; }
/* Una opción apagada se queda a la vista para que se entienda que existe; el
   motivo va debajo, en vez de esconderlo en un tooltip que nadie abre. */
.menu-item:disabled { color: var(--muted); cursor: not-allowed; opacity: .65; }
.menu-nota {
  font-size: 11px; line-height: 1.35; color: var(--muted);
  padding: 0 10px 8px; max-width: 300px;
}
.menu-separador { height: 1px; background: var(--border); margin: 4px 6px; }

/* ===================== Copia de pruebas (beta) ===================== */
/* Franja fija arriba, en naranja: tiene que ser imposible confundir la beta con
   el sistema de verdad, ni de reojo. Solo aparece si existe el marcador ES_BETA. */
.franja-beta {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: #ff8a00; color: #1d1d1f;
  font-weight: 800; font-size: 13px; letter-spacing: .3px;
  text-align: center; padding: 6px 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
body.con-beta { padding-top: 30px; }
@media print { .franja-beta { display: none !important; } body.con-beta { padding-top: 0; } }