/* ============================================================
   Sistema visual del panel -- Fase 2B.
   Aprobado por el usuario 2026-09-11 a partir de un mockup de revision
   (paleta, tipografia, layout de sidebar, componentes). Este archivo es
   PURA presentacion -- no hay logica de negocio aqui, y ninguna clase
   de este archivo depende de un router/servicio especifico.

   Colores de acento ajustados 2026-09-12 tras auditoria de a11y-architect
   (WCAG 2.2 AA): --accent (decorativo, dots/spinner/gradiente) y
   --accent-strong (texto/fondos de botones y nav activo -- cumple 4.5:1
   contra su superficie en ambos temas) ahora son roles DISTINTOS, no un
   par base/hover. --accent-fg es el color de texto sobre --accent-strong
   (blanco en claro, oscuro en oscuro -- en dark el rol se invierte porque
   --accent-strong es mas clara que la superficie).

   Estructura: 1) tokens (light/dark) 2) base 3) layout (sidebar/topbar)
   4) botones 5) cards/filtros 6) tabla 7) badges 8) paginacion
   9) loading HTMX 10) toast 11) login 12) detalle (kv/timeline)
   13) utilidades a11y 14) responsive.

   Excepcion deliberada al techo de 800 lineas: es la UNICA hoja del panel y define los tokens que el
   marca.css de cada replica sobrescribe en orden; partirla obligaria a cada replica a seguir varios
   archivos. Secciones 16b y 19 = rediseno 2026-10 (dashboard en bloques; movimiento y detalle).
   ============================================================ */

/* ---------- 1. TOKENS ----------
   Rediseno 2026-10 (referencias de CRM tipo Salesforce/Dynamics aprobadas por el usuario): neutros
   calidos, superficies blancas con esquinas amplias y sombra muy leve, menu lateral CLARO, botones en
   pildora con el principal en grafito (--ink, funciona con cualquier marca) y el color de la marca
   reservado para lo que importa: la tarjeta destacada del dashboard, el item activo del menu, enlaces
   y foco. marca.css (carpeta de marca de cada replica) puede sobrescribir cualquiera de estos tokens. */
:root {
  --bg: #f4f2ef;
  --surface: #fffefc;
  --surface-sunken: #f0ede9;
  --sidebar-bg: #fbfaf8;
  --sidebar-text: #5d5750;
  --sidebar-text-strong: #1d1b19;
  --sidebar-hover: rgba(29, 27, 25, 0.06);
  --sidebar-border: #e8e4de;
  --border: #e6e2dc;
  --border-strong: #8f877e; /* borde de campos y botones: >=3:1 sobre la superficie (WCAG 1.4.11) */
  --text: #1d1b19;
  --text-muted: #675f57;
  --text-faint: #8f877e;
  --ink: #23201d;
  --ink-hover: #3d3935;
  --ink-fg: #fbfaf8;
  --accent: #c85a2c;
  --accent-strong: #a4471f;
  --accent-hover: #833a17;
  --accent-fg: #ffffff;
  --accent-tint: #fbe9de;
  --success: #1f7a4d;
  --success-bg: #dff2e6;
  --warning: #7a5108;
  --warning-bg: #faedcd;
  --danger: #b23a3a;
  --danger-bg: #f8dfe0;
  --neutral-bg: #ece8e3;
  --neutral-text: #4f4841;
  --focus-ring: #a4471f;
  /* Series de los graficos (F-003). Solo 3 tonos: los unicos que validan contra TODOS
     los pares (CVD y vision normal) en claro y oscuro; el neutro es "sin dato" / entidad
     sin color asignado. El aqua queda bajo 3:1 sobre blanco: por eso cada grafico lleva
     leyenda visible y tabla de datos. Ver app/panel/graficos.py. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-neutral: #8f877e;
  --shadow-1: 0 1px 2px rgba(29, 27, 25, 0.04), 0 2px 10px rgba(29, 27, 25, 0.04);
  --shadow-2: 0 12px 32px rgba(29, 27, 25, 0.12), 0 2px 6px rgba(29, 27, 25, 0.06);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141312;
    --surface: #1c1b19;
    --surface-sunken: #252321;
    --sidebar-bg: #191816;
    --sidebar-text: #a8a199;
    --sidebar-text-strong: #f1eee9;
    --sidebar-hover: rgba(241, 238, 233, 0.07);
    --sidebar-border: #2c2926;
    --border: #2f2c29;
    --border-strong: #5a544d;
    --text: #f1eee9;
    --text-muted: #aaa298;
    --text-faint: #7a736b;
    --ink: #f1eee9;
    --ink-hover: #d9d4cd;
    --ink-fg: #1c1b19;
    --accent: #e07a45;
    --accent-strong: #f0946a;
    --accent-hover: #f5ac82;
    --accent-fg: #14181d;
    --accent-tint: #3a2519;
    --success: #4fbe86;
    --success-bg: #173325;
    --warning: #d9ab4c;
    --warning-bg: #3a2f13;
    --danger: #e2777a;
    --danger-bg: #3a1e20;
    --neutral-bg: #2a2725;
    --neutral-text: #b9b1a7;
    --focus-ring: #f0946a;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-neutral: #7a736b;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #141312;
  --surface: #1c1b19;
  --surface-sunken: #252321;
  --sidebar-bg: #191816;
  --sidebar-text: #a8a199;
  --sidebar-text-strong: #f1eee9;
  --sidebar-hover: rgba(241, 238, 233, 0.07);
  --sidebar-border: #2c2926;
  --border: #2f2c29;
  --border-strong: #5a544d;
  --text: #f1eee9;
  --text-muted: #aaa298;
  --text-faint: #7a736b;
  --ink: #f1eee9;
  --ink-hover: #d9d4cd;
  --ink-fg: #1c1b19;
  --accent: #e07a45;
  --accent-strong: #f0946a;
  --accent-hover: #f5ac82;
  --accent-fg: #14181d;
  --accent-tint: #3a2519;
  --success: #4fbe86;
  --success-bg: #173325;
  --warning: #d9ab4c;
  --warning-bg: #3a2f13;
  --danger: #e2777a;
  --danger-bg: #3a1e20;
  --neutral-bg: #2a2725;
  --neutral-text: #b9b1a7;
  --focus-ring: #f0946a;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-neutral: #7a736b;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* ---------- 2. BASE ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; letter-spacing: -0.015em; }
a { color: var(--accent-strong); }
button { font-family: inherit; }
::selection { background: var(--accent-tint); color: var(--accent-strong); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.error { color: var(--danger); font-size: 0.9rem; }

/* ---------- 3. LAYOUT: sidebar + topbar ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 236px; flex: none; background: var(--sidebar-bg); color: var(--sidebar-text);
  display: flex; flex-direction: column; padding: 1.25rem 0.9rem; border-right: 1px solid var(--sidebar-border);
}
.brand {
  display: flex; align-items: center; gap: 0.55rem; padding: 0 0.3rem 0.7rem;
  margin-bottom: 0.6rem; border-bottom: 1px solid var(--sidebar-border);
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px; background: var(--accent-strong);
  display: flex; align-items: center; justify-content: center; flex: none; color: var(--accent-fg);
}
.brand-name { font-family: var(--font-display); font-weight: 700; color: var(--sidebar-text-strong); font-size: 15px; }
/* Logo de la instancia (carpeta de marca): reemplaza al icono y al nombre, que se
   conservan solo para lectores de pantalla y para el menu compacto. */
.brand-logo { display: block; max-width: 100%; height: auto; }
.brand:has(.brand-logo) { flex-direction: column; align-items: flex-start; }
.brand:has(.brand-logo) .brand-mark { display: none; }
.brand:has(.brand-logo) .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.login-box .brand-logo { margin: 0 auto 0.5rem; }
.login-box .brand:has(.brand-logo) { align-items: center; }
.nav { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.4rem; flex: 1; }
.nav a {
  display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.75rem; border-radius: var(--radius-pill);
  color: var(--sidebar-text); text-decoration: none; font-size: 13.5px; font-weight: 500;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.nav a svg { flex: none; opacity: 0.85; }
.nav a:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
.nav a.is-active { background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }
.nav a.is-active svg { opacity: 1; }
/* Bloque B33 -- contador de alertas del badge de navegacion. */
.nav-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.sidebar-footer {
  border-top: 1px solid var(--sidebar-border); padding-top: 0.75rem; margin-top: 0.5rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.avatar {
  width: 32px; height: 32px; border-radius: 99px; background: var(--accent-tint); color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-display);
  font-weight: 700; font-size: 13px; flex: none;
}
.who { min-width: 0; }
.who-name { color: var(--sidebar-text-strong); font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-role { font-size: 11px; color: var(--sidebar-text); text-transform: uppercase; letter-spacing: 0.04em; }
.signout {
  margin-left: auto; background: none; border: none; color: var(--sidebar-text); cursor: pointer;
  padding: 0.3rem; border-radius: 6px; display: flex;
}
.signout:hover { color: var(--sidebar-text-strong); background: var(--sidebar-hover); }

.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.75rem;
  background: var(--bg); border-bottom: 1px solid transparent;
}
.topbar-nav { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.icon-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--text-muted); font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--surface-sunken); color: var(--text); border-color: var(--border-strong); }
.topbar h1 { font-size: 24px; font-weight: 700; }
.topbar h1:focus-visible { outline: none; } /* recibe foco programatico tras un swap HTMX, no de tab -- ver panel.js */
.content { padding: 1.5rem 1.75rem 3rem; max-width: 1280px; width: 100%; margin: 0 auto; }

/* ---------- 4. BOTONES ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-body);
  font-weight: 600; font-size: 13.5px; padding: 0.6rem 1.15rem; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out), color 0.15s var(--ease-out), transform 0.1s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--ink); color: var(--ink-fg); }
.btn-primary:hover { background: var(--ink-hover); }
.btn-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-secondary:hover { border-color: var(--text); background: var(--surface-sunken); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-sunken); color: var(--text); }
.btn-sm { padding: 0.4rem 0.85rem; font-size: 12.5px; }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Compat: los templates ya usaban <button> plano en el header/login antes
   del sistema -- se mapean a .btn-secondary/.btn-primary respectivamente
   sin tocar el HTML de esos botones especificos donde no hizo falta. */
.login-box button, .filtros button { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ---------- 5. CARDS / FILTROS ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
/* Barra de filtros compacta, alineada a la izquierda (feedback F-002). Antes cada
   etiqueta tenia `min-width: 140px`, y un <input type="date"> (que necesita mas
   que eso por su icono) se salia de su caja y se montaba sobre el campo vecino.
   Ahora cada control tiene un ancho propio segun su tipo y la etiqueta se ajusta a
   el (`min-width: 0`), asi los campos no se pisan ni se estiran a lo ancho. */
.filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: 0.7rem 1rem;
  padding: 0.9rem 1.1rem; margin-bottom: 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}
.filtros label {
  display: flex; flex-direction: column; gap: 0.3rem; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted); min-width: 0;
}
.filtros input, .filtros select {
  font-family: var(--font-body); font-size: 13.5px; padding: 0.5rem 0.7rem; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
}
.filtros input[type="text"], .filtros input[type="search"] { width: 13rem; max-width: 100%; }
.filtros .filtros__ancho input[type="text"] { width: 22rem; } /* buscador con texto de ayuda largo (ej. clientes) */
.filtros input[type="date"] { width: 9.25rem; }
/* El filtro del dashboard anida un <form> (Desde/Hasta) junto a los presets: sin esto
   el form era un bloque y las dos fechas quedaban una encima de la otra. */
.filtros form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem 1rem; }
.filtros select { min-width: 8.5rem; max-width: 100%; }
.filtros input:focus, .filtros select:focus { border-color: var(--accent-strong); }
.filtros button {
  padding: 0.5rem 1.1rem; border: none; border-radius: var(--radius-pill); background: var(--ink);
  color: var(--ink-fg); cursor: pointer; font-weight: 600; font-size: 13.5px;
}
.filtros button:hover { background: var(--ink-hover); }
.filtros__checkbox {
  flex-direction: row !important; align-items: center; gap: 0.5rem !important;
  min-width: 0; text-transform: none; font-size: 13px !important; letter-spacing: 0; font-weight: 500 !important;
  color: var(--text);
}

/* Formulario inline dentro de un .card-pad (ej. motivo de cancelacion en
   el detalle de un pedido) -- mismos estilos de label/input que .filtros,
   pero sin el fondo/borde propio de card (ya esta dentro de uno). */
.form-inline { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; margin-top: 0.9rem; }
.form-inline label {
  display: flex; flex-direction: column; gap: 0.3rem; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted); flex: 1; min-width: 220px;
}
.form-inline input, .form-inline select, .form-inline textarea {
  font-family: var(--font-body); font-size: 13.5px; padding: 0.5rem 0.7rem; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
}
.form-inline input:focus, .form-inline select:focus, .form-inline textarea:focus { border-color: var(--accent-strong); }

/* Fila de botones de accion de ciclo de vida (Bloque 3) -- ej. detalle de
   pedido: avanzar/marcar enviado/marcar entregado. */
.acciones-pedido { display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* Variante para cuando la fila de acciones va SEPARADA de un .card (ej.
   el boton "Nuevo pedido" arriba del listado, Bloque 4.2) -- separa del
   contenido de abajo sin depender de un style="" inline (bloqueado por
   la CSP del panel, que no admite 'unsafe-inline'). */
.acciones-pedido--separada { margin-bottom: 1rem; }

/* ---------- 6. TABLA ---------- */
.table-wrap { overflow-x: auto; position: relative; } /* relative: los .sr-only (absolutos) de la cabecera no escapan del scroll y ensanchan la pagina en movil */
.tabla {
  width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; font-size: 13.5px;
}
.tabla th, .tabla td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); }
.tabla th {
  background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: var(--surface-sunken); }
.tabla .num, .tabla th.num { text-align: right; }
.tabla .mono, .cell-money { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cell-money { font-weight: 600; }

/* ---------- 7. BADGES (semantico, separado del acento) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem;
  border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--neutral-bg);
  color: var(--neutral-text); white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
/* Pedido */
.badge--pending, .badge--preparing { background: var(--warning-bg); color: var(--warning); }
.badge--confirmed, .badge--delivered { background: var(--success-bg); color: var(--success); }
.badge--cancelled { background: var(--danger-bg); color: var(--danger); }
.badge--shipped { background: var(--neutral-bg); color: var(--neutral-text); }
/* Pago */
.badge--reported, .badge--refund_pending { background: var(--warning-bg); color: var(--warning); }
.badge--rejected { background: var(--danger-bg); color: var(--danger); }
.badge--refunded { background: var(--neutral-bg); color: var(--neutral-text); }
/* Reserva */
.badge--activa { background: var(--warning-bg); color: var(--warning); }
.badge--consumida { background: var(--success-bg); color: var(--success); }
.badge--liberada { background: var(--neutral-bg); color: var(--neutral-text); }
/* WhatsApp (Bloque B16) */
.badge--lead { background: var(--neutral-bg); color: var(--neutral-text); }
.badge--pendiente { background: var(--warning-bg); color: var(--warning); }
.badge--respondido { background: var(--success-bg); color: var(--success); }

/* ---------- 8. PAGINACION ---------- */
.paginacion {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 0.2rem; margin-top: 0; font-size: 12.5px; color: var(--text-muted);
}
.paginacion a {
  display: inline-flex; align-items: center; padding: 0.4rem 0.85rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); color: var(--text); text-decoration: none; font-weight: 600;
}
.paginacion a:hover { border-color: var(--accent-strong); color: var(--accent-strong); }

/* ---------- 9. LOADING (HTMX) ----------
   `hx-indicator="#contenido-<seccion>"` (en el form de filtros y en los
   links de paginacion, ver los templates) le dice a htmx que agregue la
   clase `htmx-request` a ESE contenedor mientras la request esta en
   vuelo -- sin `hx-indicator`, htmx solo marca el elemento que dispara la
   request, no el `hx-target`, y estas reglas nunca se activarian
   (hallazgo de code-reviewer, corregido). Nada de esto es logica de
   negocio. */
.htmx-indicator { opacity: 0; transition: opacity 0.15s; }
.htmx-request .htmx-indicator, .htmx-indicator.htmx-request { opacity: 1; }
.htmx-request .table-wrap, .htmx-request .tabla, .htmx-request .paginacion { opacity: 0.45; pointer-events: none; transition: opacity 0.15s; }
.spinner {
  width: 14px; height: 14px; border-radius: 99px; border: 2px solid var(--border-strong);
  border-top-color: var(--accent-strong); display: inline-block; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  /* Detiene la rotacion por completo (no solo la desacelera) -- un giro
     continuo, aunque lento, sigue siendo un disparador vestibular. */
  .spinner { animation: none; border-top-color: var(--border-strong); opacity: 0.7; }
}
.loading-row { display: flex; align-items: center; gap: 0.5rem; font-size: 12.5px; color: var(--text-muted); margin-bottom: 0.6rem; }

/* ---------- 10. TOAST (infraestructura para el Bloque 3 en adelante) ---------- */
.toast-host { position: fixed; top: 1rem; right: 1rem; z-index: 200; display: flex; flex-direction: column; gap: 0.5rem; }
.toast {
  display: flex; align-items: center; gap: 0.6rem; background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--success); box-shadow: var(--shadow-2); border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem; font-size: 13px; min-width: 260px; max-width: 340px;
}
.toast.is-danger { border-left-color: var(--danger); }

/* ---------- 11. LOGIN ---------- */
.login-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(600px 300px at 15% 10%, var(--accent-tint), transparent 60%), var(--bg);
  padding: 2rem;
}
.login-box {
  width: 100%; max-width: 380px; margin: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: 2.5rem 2.25rem;
}
.login-box .brand { border-bottom: none; margin-bottom: 1.5rem; padding: 0; }
.login-box .brand-name { color: var(--text); }
.login-box h1 { font-size: 19px; margin-bottom: 0.3rem; }
.login-sub { color: var(--text-muted); font-size: 13px; margin-bottom: 1.4rem; }
.login-legal { margin: 1.25rem 0 0; text-align: center; font-size: 12px; }
.login-legal a, .sidebar-legal { color: var(--text-muted); text-decoration: underline; }
.sidebar-legal { display: block; padding: 0.5rem 1rem; font-size: 12px; }

/* Pagina publica de la politica de privacidad (/privacidad) */
.doc-legal { max-width: 760px; margin: 0 auto; padding: 2rem 1rem 3rem; color: var(--text); line-height: 1.6; }
.doc-legal h1 { font-size: 24px; margin-bottom: 0.25rem; }
.doc-legal h2 { font-size: 16px; margin: 1.75rem 0 0.4rem; }
.doc-legal ul { padding-left: 1.25rem; margin: 0.4rem 0; }
.doc-legal li { margin: 0.2rem 0; }
.doc-legal__meta { color: var(--text-muted); font-size: 13px; }
.login-box form { display: flex; flex-direction: column; gap: 1rem; }
.login-box label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.login-box input {
  padding: 0.7rem 0.85rem; border: 1px solid var(--border-strong); border-radius: 10px;
  font-size: 14px; font-family: var(--font-body); background: var(--surface); color: var(--text);
}
.login-box input:focus { border-color: var(--accent-strong); }
.login-box button {
  padding: 0.75rem; border: none; border-radius: var(--radius-pill); background: var(--ink);
  color: var(--ink-fg); font-size: 14px; font-weight: 600; cursor: pointer; justify-content: center; margin-top: 0.3rem;
}
.login-box button:hover { background: var(--ink-hover); }
.login-box .error {
  display: flex; gap: 0.5rem; background: var(--danger-bg); color: var(--danger);
  padding: 0.65rem 0.8rem; border-radius: var(--radius-sm); font-size: 12.5px; margin: 0 0 1rem;
}

/* ---------- 12. DETALLE (kv / timeline) ---------- */
.detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.25rem; align-items: start; }
.section-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin-bottom: 0.75rem; }
/* Sustituyen dos style="" en linea que la CSP (style-src 'self') bloqueaba. */
.section-title--separada { margin-top: 1.75rem; }
.input-cantidad { width: 4.5rem; }
.card-pad { padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; font-size: 13.5px; margin: 0; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; font-weight: 600; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 1rem 1.15rem; border-left: 2px solid var(--border); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: 2px; width: 8px; height: 8px; border-radius: 99px;
  background: var(--accent); border: 2px solid var(--surface);
}
.timeline .t-date { font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono); }
.timeline .t-body { font-size: 13px; margin-top: 0.1rem; }
.back-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 12.5px; color: var(--text-muted); text-decoration: none; margin-bottom: 0.9rem; }
.back-link:hover { color: var(--accent-strong); }
.empty-note { color: var(--text-muted); font-size: 13px; margin: 0; }

/* ---------- 13. UTILIDADES A11Y ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0.5rem; top: -3rem; z-index: 300;
  background: var(--accent-strong); color: var(--accent-fg); padding: 0.6rem 1rem;
  border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; font-size: 13px;
  transition: top 0.15s;
}
.skip-link:focus { top: 0.5rem; }

/* ---------- 14. RESPONSIVE ---------- */
@media (max-width: 880px) {
  .topbar { padding: 1rem 1.1rem; flex-wrap: wrap; }
  .content { padding: 1.1rem; }
  .detail-grid { grid-template-columns: 1fr; }
  .filtros { padding: 0.9rem; }
}

/* Movil (< 640px): el menu pasa a barra horizontal solo de iconos. Entre 640 y
   880px ya NO se comprime a la fuerza (antes los nombres de las secciones
   desaparecian sin remedio): el menu lateral se pliega/expande a voluntad (F-004),
   ver el bloque siguiente. */
@media (max-width: 640px) {
  .app-shell { flex-direction: column; }
}

/* Movil (<= 768px): menu "hamburguesa" (B50). El menu lateral deja de ser una barra fija y pasa a un CAJON que se abre con
   el boton de la barra superior (`data-menu-movil-boton`) y se cierra al elegir una seccion, con Escape, con el boton
   "Cerrar" o tocando el fondo (lo gestiona panel.js; el estado vive en `data-menu-movil` de <html>). Cerrado, el cajon queda
   `visibility: hidden`: sus enlaces no reciben foco ni los lee un lector de pantalla. Solo usa los tokens de panel.css
   (--sidebar-bg, --accent-strong...), asi que respeta los colores de marca de marca.css sin tocarlo. Escritorio (> 768px)
   no cambia: estos elementos nuevos estan ocultos y el menu lateral se pliega/expande a voluntad (F-004). */
.menu-movil-boton, .sidebar-cerrar, .menu-fondo { display: none; }
@media (max-width: 768px) {
  .app-shell { flex-direction: column; }
  .menu-movil-boton { display: inline-flex; min-width: 44px; min-height: 44px; justify-content: center; }
  .topbar-nav [data-sidebar-toggle] { display: none; } /* en movil el boton es la hamburguesa */
  .topbar-nav .icon-btn { min-height: 44px; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 200; width: min(86vw, 300px);
    padding: 1rem 0.9rem; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-104%); visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }
  html[data-menu-movil="abierto"] .sidebar {
    transform: none; visibility: visible; box-shadow: var(--shadow-2); transition: transform 0.22s ease, visibility 0s;
  }
  .sidebar .brand { padding-right: 2.75rem; } /* deja sitio al boton Cerrar */
  .sidebar-cerrar {
    display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 0.6rem; right: 0.6rem;
    width: 44px; height: 44px; background: transparent; border: 1px solid var(--sidebar-border);
    border-radius: var(--radius-pill); color: var(--sidebar-text-strong); cursor: pointer;
  }
  .sidebar-cerrar:hover { background: var(--sidebar-hover); }
  .nav a { min-height: 44px; }
  .menu-fondo {
    display: block; position: fixed; inset: 0; z-index: 150; background: rgba(20, 19, 18, 0.45);
    opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0s linear 0.22s;
  }
  html[data-menu-movil="abierto"] .menu-fondo { opacity: 1; visibility: visible; transition: opacity 0.22s ease, visibility 0s; }
  html[data-menu-movil="abierto"] body { overflow: hidden; } /* el fondo no se desplaza detras del cajon */
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .sidebar, .menu-fondo { transition: none; }
}
/* Foco visible y con contraste suficiente sobre el fondo oscuro del cajon (WCAG 2.4.7 / 1.4.11). */
.sidebar a:focus-visible, .sidebar button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Menu lateral compacto (F-004): solo iconos, el nombre aparece en el `title` al
   pasar el raton y sigue disponible para lectores de pantalla (se oculta de forma
   visual, no con display:none). `html[data-sidebar="collapsed"]` (lo fija
   nav-init.js) es MAS ESPECIFICO que `.sidebar`, asi que estas reglas van dentro de
   `min-width`: si no, pisarian la barra horizontal del movil y la dejarian de 64px. */
@media (min-width: 769px) {
  html[data-sidebar="collapsed"] .sidebar { width: 64px; padding-left: 0.55rem; padding-right: 0.55rem; }
  html[data-sidebar="collapsed"] .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  /* Menu compacto con logo de marca: no cabe el logo ancho, vuelve el icono. */
  html[data-sidebar="collapsed"] .brand:has(.brand-logo) .brand-logo { display: none; }
  html[data-sidebar="collapsed"] .brand:has(.brand-logo) .brand-mark { display: flex; }
  html[data-sidebar="collapsed"] .brand-name,
  html[data-sidebar="collapsed"] .nav a span,
  html[data-sidebar="collapsed"] .who {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  html[data-sidebar="collapsed"] .nav a { justify-content: center; padding-left: 0; padding-right: 0; }
  html[data-sidebar="collapsed"] .sidebar-footer { flex-direction: column; gap: 0.5rem; }
  html[data-sidebar="collapsed"] .signout { margin-left: 0; }
}

/* ---------- 15. DASHBOARD (Bloque 5) ----------
   Tarjetas de contador -- reusan .card/.card-pad, sin componente nuevo
   ademas de esta grilla. Cada tarjeta es un <a> completo (no un boton
   con onclick) para que funcione sin JS y sea accesible por teclado.
   `auto-fit`/`minmax` ya colapsa a 1 columna en mobile sin media query
   propia. */
.dashboard-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin-bottom: 1.25rem;
}
.stat-card {
  display: flex; flex-direction: column; gap: 0.4rem; text-decoration: none; color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.stat-card:hover, .stat-card:focus-visible { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.stat-card__label {
  font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.stat-card__value { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; font-family: var(--font-display); line-height: 1; color: var(--text); }
.stat-card__value.is-alert { color: var(--warning); }
.stat-card__hint { font-size: 12px; color: var(--text-muted); }
.texto-preservado { white-space: pre-wrap; }

/* Bloque B41 -- columnas EXPLICITAS segun la cantidad de tarjetas. `auto-fit`
   con 5 tarjetas dejaba una huerfana que se estiraba distinto segun el ancho.
   Movil: 1 columna. 561-1399px: 3 arriba + 2 abajo (cada una ocupa su mitad del
   ancho: ninguna sobra ni se queda corta). >=1400px: todas en una fila. Con 3
   tarjetas (vendedor, sin margen): 3 en una fila desde 561px. */
.dashboard-grid--5, .dashboard-grid--3 { grid-template-columns: minmax(0, 1fr); }
.stat-card__value { overflow-wrap: anywhere; }
/* Bloque B41: miniatura del producto en la tabla de items de un pedido. */
.miniatura-item { display: inline-block; line-height: 0; }
.miniatura-item img {
  width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--border);
}
.tabla tfoot th, .tabla tfoot td { border-top: 2px solid var(--border-strong); border-bottom: 0; font-weight: 700; }
@media (min-width: 561px) {
  .dashboard-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-grid--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dashboard-grid--5 > * { grid-column: span 2; }
  .dashboard-grid--5 > :nth-child(n + 4) { grid-column: span 3; }
}
@media (min-width: 1400px) {
  .dashboard-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dashboard-grid--5 > *, .dashboard-grid--5 > :nth-child(n + 4) { grid-column: span 1; }
}

/* ---------- 16. DASHBOARD VISUAL (F-003) ----------
   Graficos interactivos (los dibuja dashboard-charts.js) y KPIs con variacion.
   Rejilla de 6 columnas: la serie diaria ocupa todo el ancho, las 3 donas un
   tercio cada una y "mas vendidos" / "rotacion lenta" la mitad; bajo 1000px todo
   pasa a una columna. Los colores de las series son tokens (--series-*), nunca
   valores sueltos, para que sigan al tema claro/oscuro. */
.kpi-delta { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.kpi-delta--up { color: var(--success); }
.kpi-delta--down { color: var(--danger); }
.viz-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.viz-card { grid-column: span 6; min-width: 0; }
@media (min-width: 1001px) {
  .viz-card--tercio { grid-column: span 2; }
  .viz-card--mitad { grid-column: span 3; }
}
.viz-card__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0 0.75rem; }
.viz-card__hint { font-size: 12px; color: var(--text-muted); margin-bottom: 0.75rem; }
.viz-card__nota { display: block; margin: 0.5rem 0 0; font-size: 12px; color: var(--text-muted); }
.tabla .viz-card__nota { margin-top: 0.15rem; } /* la variante (talla · color) bajo el nombre, sin separarla de el */
.viz-canvas-wrap { position: relative; height: 260px; }
.viz-card--completa .viz-canvas-wrap { height: 300px; }
.viz-card--mitad .viz-canvas-wrap { height: 320px; }
.viz-datos { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid var(--border); }
.viz-datos summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.viz-datos summary:hover { color: var(--text); }
.viz-datos .table-wrap { max-height: 16rem; overflow: auto; margin-top: 0.5rem; }

/* ---------- 16b. DASHBOARD EN BLOQUES (rediseno 2026-10) ----------
   Saludo grande, selector segmentado de periodo y rejilla "bento": la tarjeta destacada (Total
   vendido) va en el color de la marca (--accent-strong / --accent-fg, que cada replica define en su
   marca.css: el contraste lo garantiza ese par) y ocupa el doble de ancho; el resto son neutras. */
.saludo { margin: 0.25rem 0 1.75rem; }
.saludo__titulo {
  font-size: clamp(24px, 1.2rem + 1.2vw, 34px); font-weight: 500; line-height: 1.15;
  letter-spacing: -0.025em; max-width: 44ch;
}
.saludo__titulo strong { font-weight: 700; }
.saludo__titulo em { font-style: italic; color: var(--accent-strong); }

.stat-card { transition: border-color 0.15s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
.stat-card:hover { transform: translateY(-2px); }
.stat-card__value.is-alert { display: inline-flex; align-items: center; gap: 0.5rem; }
.stat-card__value.is-alert::after {
  content: ""; width: 8px; height: 8px; border-radius: 99px; background: currentColor; flex: none;
}
.dashboard-grid--atencion .stat-card__value { font-size: 28px; }

.filtros--periodo { align-items: center; }
.filtros--periodo form { margin-left: auto; align-items: flex-end; }
.segmentado {
  display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-sunken);
  border-radius: var(--radius-pill);
}
.segmentado .btn { border: 0; background: transparent; color: var(--text-muted); padding: 0.45rem 0.95rem; }
.segmentado .btn:hover { background: transparent; color: var(--text); }
.segmentado .btn-primary, .segmentado .btn-primary:hover {
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-1);
}

.dashboard-grid > .card-pad { margin-bottom: 0; } /* la separacion la da el gap de la rejilla */
@media (max-width: 560px) {
  .dashboard-grid--atencion { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .dashboard-grid--atencion > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dashboard-grid--atencion .stat-card { padding: 1rem; }
  .dashboard-grid--bento > .stat-card--destacada { order: -1; }
  /* Rejillas de cifras sin modificador (WhatsApp, inventario...): 2 por fila en el telefono. */
  .dashboard-grid:not(.dashboard-grid--bento) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .dashboard-grid:not(.dashboard-grid--bento) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .dashboard-grid:not(.dashboard-grid--bento) .stat-card { padding: 1rem; }
  .dashboard-grid:not(.dashboard-grid--bento) .stat-card__value { font-size: 24px; }
  .filtros--periodo form { margin-left: 0; }
}
.dashboard-grid--bento { grid-auto-flow: dense; }
.stat-card--destacada {
  position: relative; overflow: hidden; isolation: isolate; justify-content: flex-end; min-height: 168px;
  background: var(--accent-strong); color: var(--accent-fg); border-color: transparent;
}
.stat-card--destacada .stat-card__label,
.stat-card--destacada .stat-card__value,
.stat-card--destacada .kpi-delta { color: inherit; }
.stat-card--destacada .stat-card__label { opacity: 0.88; }
.stat-card--destacada .stat-card__value { font-size: clamp(28px, 1.5rem + 2vw, 52px); }
.stat-card--destacada:hover, .stat-card--destacada:focus-visible { border-color: transparent; box-shadow: var(--shadow-2); }
/* Anillos concentricos decorativos (eco de las referencias): solo tinta del propio color del texto. */
.stat-card--destacada::after {
  content: ""; position: absolute; z-index: -1; right: -70px; top: -90px; width: 280px; height: 280px;
  border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 20px, color-mix(in srgb, currentColor 16%, transparent) 20px 21px);
}
@media (min-width: 561px) and (max-width: 999px) {
  .dashboard-grid--bento.dashboard-grid--5,
  .dashboard-grid--bento.dashboard-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid--bento.dashboard-grid--5 > *,
  .dashboard-grid--bento.dashboard-grid--5 > :nth-child(n + 4) { grid-column: span 1; }
  .dashboard-grid--bento > .stat-card--destacada { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .dashboard-grid--bento.dashboard-grid--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dashboard-grid--bento.dashboard-grid--5 > *,
  .dashboard-grid--bento.dashboard-grid--5 > :nth-child(n + 4) { grid-column: span 2; }
  .dashboard-grid--bento.dashboard-grid--5 > .stat-card--destacada { grid-column: span 4; }
  .dashboard-grid--bento.dashboard-grid--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .stat-card, .btn, .nav a { transition: none; }
  .stat-card:hover, .btn:active { transform: none; }
}

/* ---------- 17. GALERIA DE COMPROBANTES (Bloque B15) ----------
   Grilla de tarjetas -- reusa los tokens de color/sombra existentes
   (mismos que .card/.stat-card), sin paleta nueva. `auto-fill`/`minmax`
   colapsa solo a mobile sin media query propia, mismo criterio que
   .dashboard-grid. La tarjeta entera es un <a> (accesible por teclado,
   funciona sin JS), igual que .stat-card. */
.comprobantes-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem; margin-bottom: 1.25rem;
}
.comprobante-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s;
}
.comprobante-card:hover, .comprobante-card:focus-visible {
  border-color: var(--accent-strong); box-shadow: var(--shadow-1), 0 0 0 1px var(--accent-strong);
}
.comprobante-card__miniatura {
  aspect-ratio: 4 / 3; background: var(--surface-sunken); display: flex; align-items: center; justify-content: center;
}
.comprobante-card__miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comprobante-card__externo {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  color: var(--text-muted); font-size: 12px; font-weight: 600;
}
.comprobante-card__externo--sin-preview { opacity: 0.75; }
.comprobante-card__body { padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.35rem; }
.comprobante-card__cliente { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comprobante-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.comprobante-card__monto { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.comprobante-card__fecha { font-size: 11.5px; color: var(--text-muted); }

/* ---------- 18. WHATSAPP (Bloque B16) ----------
   Hilo de conversacion en burbujas -- "cliente" a la izquierda, "asistente"
   a la derecha (mismo lado que una app de mensajeria real), una nota
   centrada y minima para los mensajes "tool" (sin volcar su JSON, ver
   template). Reusa tokens existentes, sin paleta nueva. */
.chat-thread { display: flex; flex-direction: column; gap: 0.6rem; }
.chat-bubble {
  max-width: 70%; padding: 0.55rem 0.8rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--surface-sunken);
}
.chat-bubble--cliente { align-self: flex-start; }
.chat-bubble--asistente {
  align-self: flex-end; background: var(--accent-strong); color: var(--accent-fg); border-color: transparent;
}
.chat-bubble__quien { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.75; }
.chat-bubble__texto { font-size: 13.5px; white-space: pre-wrap; margin-top: 0.15rem; }
.chat-bubble__hora { font-size: 10.5px; opacity: 0.7; margin-top: 0.3rem; }
/* Archivos del chat (fotos, notas de voz, videos, PDF) y mensajes borrados en la app. */
.chat-adjunto { display: block; max-width: 100%; border-radius: 8px; margin-top: 0.25rem; }
.chat-adjunto--imagen { max-height: 320px; width: auto; object-fit: contain; background: var(--surface-sunken); }
.chat-adjunto--video { max-height: 320px; width: auto; }
.chat-adjunto--audio { width: 100%; min-width: 220px; }
.chat-adjunto-doc { display: inline-block; margin-top: 0.25rem; font-size: 13px; }
.chat-bubble__texto--eliminado { font-style: italic; opacity: 0.7; }
/* Boton "Solucionada" del Centro de alertas: en la misma linea que los enlaces de la fila. */
.alerta-solucionar { display: inline; margin-left: 0.5rem; }
.chat-tool-note {
  align-self: center; font-size: 11.5px; color: var(--text-muted); background: var(--surface-sunken);
  border-radius: 99px; padding: 0.2rem 0.7rem;
}
/* Bandeja humana (Bloque B20). El bot ("asistente", con etiqueta IA) sigue en el
   color de acento; una PERSONA va con el fondo de superficie y borde de acento,
   para distinguirla de un vistazo; los avisos del sistema, centrados y discretos. */
.chat-bubble--vendedor {
  align-self: flex-end; background: var(--surface); border-color: var(--accent-strong);
}
.chat-bubble--sistema {
  align-self: center; background: var(--surface-sunken); color: var(--text-muted); font-style: italic;
}
.chat-bubble__quien .badge { margin-left: 0.25rem; vertical-align: baseline; }
.badge--ia { background: var(--neutral-bg); color: var(--neutral-text); }
.badge--humano { background: var(--success-bg); color: var(--success); }
.chat-compositor { display: flex; flex-direction: column; gap: 0.6rem; }
.chat-compositor label {
  display: flex; flex-direction: column; gap: 0.3rem; font-size: 12.5px; font-weight: 600;
  color: var(--text-muted);
}
.chat-compositor textarea {
  font-family: var(--font-body); font-size: 13.5px; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  text-transform: none; letter-spacing: normal; font-weight: 400; resize: vertical;
}
.chat-compositor textarea:focus { border-color: var(--accent-strong); }
.chat-compositor .btn { align-self: flex-start; }
@media (max-width: 640px) {
  .chat-bubble { max-width: 88%; }
}

/* ---------- Tablero Kanban de pedidos (B26) ---------- */
.tablero { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 0.9rem; overflow-x: auto; align-items: start; }
.tablero__columna { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.tablero__titulo { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: 14px; }
.tablero__conteo { font-weight: 800; color: var(--text-muted); }
.tarjeta-pedido { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 0.65rem; display: flex; flex-direction: column; gap: 0.35rem; }
.tarjeta-pedido__titulo { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.tarjeta-pedido__titulo:hover, .tarjeta-pedido__titulo:focus-visible { color: var(--accent-strong); text-decoration: underline; }

/* ---------- Imagenes de variante (B29) ----------
   Misma grilla auto-fill/minmax que .comprobantes-grid, reusando los
   mismos tokens -- sin paleta nueva. */
.btn-small { padding: 0.35rem 0.65rem; font-size: 12px; }
.galeria-imagenes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.9rem; margin-bottom: 1rem;
}
.galeria-imagenes__item {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; gap: 0.4rem;
  padding-bottom: 0.5rem;
}
.galeria-imagenes__item--principal { border-color: var(--accent-strong); }
.galeria-imagenes__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.galeria-imagenes__item .badge { position: absolute; top: 0.4rem; left: 0.4rem; }
.galeria-imagenes__acciones { display: flex; flex-direction: column; gap: 0.3rem; padding: 0 0.5rem; }

/* ---------- Etiqueta de codigo de barras (B30) ----------
   Pantalla normal (con sidebar) para navegar comodo; @media print oculta
   todo el chrome del panel y deja solo la etiqueta -- asi no hace falta
   una pagina sin layout aparte. */
.etiqueta-imprimible {
  max-width: 260px; margin: 0 auto; padding: 1rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center;
}
.etiqueta-imprimible__producto { font-weight: 700; font-size: 14px; }
.etiqueta-imprimible__variante { font-size: 12.5px; color: var(--text-muted); }
.etiqueta-imprimible__precio { font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.etiqueta-imprimible__codigo { width: 100%; height: auto; margin: 0.4rem 0; }
.etiqueta-imprimible__sku { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
@media print {
  .sidebar, .topbar, .skip-link, .toast-host, .no-imprimir { display: none !important; }
  .main-area, .content { margin: 0; padding: 0; }
  .etiqueta-imprimible { border: none; box-shadow: none; }
}
.tarjeta-pedido__total { font-family: var(--font-display); font-weight: 800; }

/* ---------- 18. PUNTO DE VENTA (Bloques B43/B44) ----------
   Grilla de dos columnas: izquierda = escaner + lineas, derecha = resumen fijo
   (cliente, pago, total, confirmar). La zona viva (`#pos-vivo`) usa
   `display: contents` para que sus dos tarjetas caigan directo en esta grilla.
   Movil: una columna en el orden escaner -> lineas -> resumen. Solo tokens del
   sistema visual (nada de colores sueltos) para que siga al tema claro/oscuro. */
.btn-grande { padding: 0.85rem 1.4rem; font-size: 16px; font-weight: 700; }
.nota-en-linea { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.pos-inicio { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.pos-abiertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pos-abiertas__enlace {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.9rem;
  border: 1px solid var(--border); border-radius: var(--radius-md); text-decoration: none; color: inherit;
}
a.pos-abiertas__enlace:hover { border-color: var(--accent-strong); }
.pos__grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.pos__vivo { display: contents; }
@media (min-width: 1000px) {
  .pos__grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .pos__grid > .pos-escaner { grid-column: 1; grid-row: 1; }
  .pos__grid > .pos__vivo > .pos-lineas-card { grid-column: 1; grid-row: 2; }
  .pos__grid > .pos__vivo > .pos-resumen { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 1rem; }
}
.pos-escaner__form { display: flex; gap: 0.6rem; }
.pos-escaner__form input { flex: 1; min-width: 0; font-size: 18px; padding: 0.8rem 1rem; }
.pos-buscar { display: grid; gap: 0.3rem; margin-top: 0.6rem; }
.pos-buscar input { width: 100%; }
.pos-resultados { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.pos-resultado {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.75rem; align-items: center;
  padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-md);
}
.pos-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.pos-linea {
  display: grid; gap: 0.5rem 0.9rem; align-items: center; padding: 0.8rem; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface);
  grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "img info" "cant cant" "sub acc";
}
.pos-linea__img { grid-area: img; width: 64px; height: 64px; }
.pos-linea__img img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); }
.pos-linea__sinimg {
  display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; font-weight: 800;
  font-size: 22px; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
}
.pos-linea__info { grid-area: info; min-width: 0; display: grid; gap: 0.2rem; }
.pos-linea__nombre { font-weight: 700; overflow-wrap: anywhere; }
.pos-linea__precio { font-size: 15px; }
.pos-linea__lista { color: var(--text-muted); margin-right: 0.35rem; }
.pos-linea__pendiente {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-top: 0.3rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-md); background: var(--warning-bg); color: var(--warning);
}
.pos-linea__cantidad { grid-area: cant; display: flex; align-items: center; gap: 0.4rem; }
.pos-linea__cantidad input { width: 4.2rem; text-align: center; font-size: 16px; font-weight: 700; }
.pos-paso { min-width: 2.6rem; min-height: 2.6rem; font-size: 20px; font-weight: 700; line-height: 1; padding: 0; }
.pos-linea__subtotal { grid-area: sub; font-size: 17px; font-weight: 800; }
.pos-linea__acciones { grid-area: acc; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 0.5rem; }
@media (min-width: 700px) {
  .pos-linea {
    grid-template-columns: 64px minmax(0, 1fr) auto 7.5rem auto; grid-template-areas: "img info cant sub acc";
  }
}
.pos-precio { flex-basis: 100%; text-align: right; }
.pos-precio summary { cursor: pointer; font-size: 12.5px; color: var(--accent-strong); }
.pos-precio__form, .pos-nuevo-cliente__form { display: grid; gap: 0.5rem; margin-top: 0.5rem; text-align: left; }
.pos-precio__form label, .pos-nuevo-cliente__form label { display: grid; gap: 0.2rem; font-size: 12.5px; }
.pos-vacio { display: grid; gap: 0.3rem; padding: 2rem 1rem; text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.pos-resumen { display: grid; gap: 0.75rem; }
.pos-cliente { display: grid; gap: 0.2rem; justify-items: start; }
.pos-nuevo-cliente summary { cursor: pointer; margin-top: 0.5rem; font-size: 13px; color: var(--accent-strong); }
.pos-metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pos-metodo {
  padding: 0.7rem; border: 2px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface);
  color: var(--text); font-weight: 700; cursor: pointer;
}
.pos-metodo.is-activo { border-color: var(--accent-strong); box-shadow: 0 0 0 1px var(--accent-strong); }
.pos-metodo:disabled { cursor: default; opacity: 0.7; }
.pos-total { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding-top: 0.75rem; border-top: 2px solid var(--border-strong); }
.pos-total strong { font-family: var(--font-display); font-size: 32px; font-weight: 800; }
.pos-confirmar { width: 100%; }
.pos-cancelar { justify-self: center; }

/* Vista en vivo (admin) */
.en-curso { display: grid; gap: 1rem; }
.en-curso__venta { display: grid; gap: 0.75rem; }
.en-curso__cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.en-curso__cabecera .viz-card__nota { display: block; margin: 0.15rem 0 0; }
.en-curso__total { font-size: 22px; font-weight: 800; }
.en-curso__solicitud td { background: var(--warning-bg); }
.en-curso__decidir { display: inline-flex; gap: 0.4rem; }

/* Comprobante de venta (imprimible) -- Bloque B43 */
.comprobante {
  max-width: 420px; margin: 1rem auto; padding: 1.25rem; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 13.5px;
}
.comprobante__encabezado { text-align: center; border-bottom: 1px dashed var(--border-strong); padding-bottom: 0.75rem; margin-bottom: 0.75rem; }
.comprobante__encabezado h2 { margin: 0 0 0.3rem; font-size: 18px; }
.comprobante__encabezado p { margin: 0.1rem 0; }
.comprobante__datos { display: grid; gap: 0.2rem; margin: 0 0 0.75rem; }
.comprobante__datos > div { display: flex; justify-content: space-between; gap: 1rem; }
.comprobante__datos dt { color: var(--text-muted); }
.comprobante__datos dd { margin: 0; text-align: right; }
.comprobante__tabla { width: 100%; border-collapse: collapse; }
.comprobante__tabla th, .comprobante__tabla td { padding: 0.35rem 0.2rem; text-align: left; border-bottom: 1px dashed var(--border); vertical-align: top; }
.comprobante__tabla .num { text-align: right; white-space: nowrap; }
.comprobante__tabla tfoot th, .comprobante__tabla tfoot td { border-top: 2px solid var(--border-strong); border-bottom: 0; font-size: 15px; }
.comprobante__detalle { font-size: 12px; color: var(--text-muted); }
.comprobante__pie { text-align: center; margin-top: 0.9rem; }
.comprobante__aviso { font-size: 11.5px; color: var(--text-muted); }
/* Papel de la impresora de recibos (RECIBO_PAPEL_MM): `@page` nombradas, asi solo el comprobante y la etiqueta usan el
   ancho del rollo; el resto del panel imprime en hoja normal. 80 mm = 72 mm imprimibles (4 mm de margen a cada lado). */
@page papel80 { size: 80mm auto; margin: 2mm 4mm; }
@page papel58 { size: 58mm auto; margin: 2mm 5mm; }
@media print {
  .papel-80 { page: papel80; width: 72mm; font-size: 11px; }
  .papel-58 { page: papel58; width: 48mm; font-size: 10px; }
  .papel-80 .comprobante__tabla th, .papel-80 .comprobante__tabla td,
  .papel-58 .comprobante__tabla th, .papel-58 .comprobante__tabla td { padding: 0.2rem 0.1rem; }
  .papel-80 .comprobante__encabezado h2, .papel-58 .comprobante__encabezado h2 { font-size: 14px; }
  .etiqueta-imprimible.papel-80, .etiqueta-imprimible.papel-58 { max-width: none; padding: 0; }
}
@media print {
  /* Papel: fondo blanco, tinta negra, sin tarjeta -- el chrome del panel ya se oculta arriba (.no-imprimir). */
  body { background: #fff !important; color: #000 !important; }
  .comprobante { border: none; box-shadow: none; max-width: none; margin: 0; padding: 0; background: #fff; color: #000; }
  .comprobante__detalle, .comprobante__aviso, .comprobante__datos dt { color: #333; }
}

/* B47 -- aviso de modo degradado del canal de WhatsApp (arriba de todo el contenido del panel). */
.canal-banner { margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; border: 1px solid transparent; font-size: 0.92rem; line-height: 1.45; }
.canal-banner a { margin-left: 8px; font-weight: 600; text-decoration: underline; color: inherit; }
.canal-banner--degradado { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }
.canal-banner--caido { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }


/* ---------- 16. ESPACIADO, MENU AGRUPADO Y BARRA SUPERIOR ----------
   Escala de espaciado unica del panel: usar SIEMPRE estos tokens (multiplos de .25rem) en vez de numeros sueltos.
   --space-1 separa elementos pegados (icono/texto), --space-2 elementos de un mismo grupo, --space-3 filas de una lista,
   --space-4 bloques dentro de una tarjeta, --space-5 tarjetas/secciones entre si, --space-6 margenes de pagina. */
:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
}
.content { padding: var(--space-5) var(--space-6) calc(var(--space-6) + var(--space-5)); }
.content--ancha { max-width: none; } /* tablero de pedidos: usa el 100% del ancho de la vista */
.content--ancha .tablero { grid-template-columns: repeat(5, minmax(180px, 1fr)); padding-bottom: var(--space-2); scroll-snap-type: x proximity; }
.content--ancha .tablero__columna { scroll-snap-align: start; }
.topbar { gap: var(--space-4); padding: var(--space-4) var(--space-6); }
.topbar-nav { gap: var(--space-2); }
.topbar-acciones { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex: none; }
.topbar .icon-btn { min-width: 36px; min-height: 36px; justify-content: center; }
.topbar .icon-btn[aria-current="page"] { background: var(--surface-sunken); color: var(--text); border-color: var(--border-strong); }

/* Menu lateral agrupado: cada grupo se abre y se cierra (panel.js); el que contiene la pagina actual va abierto. */
.nav { gap: var(--space-1); }
.nav-grupo { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); }
.nav-grupo__titulo {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-2) 0.65rem;
  background: none; border: 0; border-radius: var(--radius-pill); cursor: pointer; text-align: left;
  color: var(--sidebar-text); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
}
.nav-grupo__titulo:hover { background: var(--sidebar-hover); color: var(--sidebar-text-strong); }
.nav-grupo__flecha { flex: none; transition: transform 0.15s; }
.nav-grupo__titulo[aria-expanded="true"] .nav-grupo__flecha { transform: rotate(90deg); }
.nav-grupo__lista { display: flex; flex-direction: column; gap: var(--space-1); }
.nav-grupo__lista[hidden] { display: none; }
@media (min-width: 769px) {
  /* Menu compacto (solo iconos): sin titulos de grupo y con todos los enlaces visibles. */
  html[data-sidebar="collapsed"] .nav-grupo__titulo { display: none; }
  html[data-sidebar="collapsed"] .nav-grupo__lista[hidden] { display: flex; }
  html[data-sidebar="collapsed"] .nav-grupo { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--sidebar-border); }
}
@media (max-width: 768px) {
  .nav-grupo__titulo { min-height: 44px; }
  .content { padding: var(--space-4) var(--space-4) var(--space-6); }
  /* Una sola fila fija al desplazarse: menu/volver/inicio, el titulo (recortado con «…» si no cabe) y Mi cuenta/Configuracion.
     Asi las opciones siempre estan a mano sin robar mas de una fila de pantalla. */
  .topbar {
    padding: var(--space-2) var(--space-3); gap: var(--space-2); flex-wrap: nowrap;
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }
  .topbar-nav { order: 1; gap: 0; }
  .topbar h1 {
    order: 2; flex: 1 1 auto; min-width: 0; font-size: 17px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar-acciones { order: 3; gap: 0; }
  .topbar .icon-btn { min-width: 44px; min-height: 44px; }
  html { scroll-padding-top: 4.5rem; }
}

/* Banner de entorno: visible en TODAS las pantallas cuando NO es produccion. */
.entorno-banner { padding: var(--space-2) var(--space-4); font-size: 12.5px; text-align: center; border-bottom: 1px solid transparent; }
.entorno-banner--staging { background: #fff3cd; color: #5c4400; border-color: #e6c75d; }
.entorno-banner--development { background: #e3f0ff; color: #0b3a6b; border-color: #9ec5f0; }
@media print { .entorno-banner { display: none; } }

.campo-cantidad { max-width: 5rem; flex: none; }

/* Campo de contrasena con boton Mostrar/Ocultar. */
.campo-clave { display: flex; align-items: stretch; gap: var(--space-2); }
.campo-clave input { flex: 1; min-width: 0; }
.campo-clave__boton {
  flex: none; padding: 0 var(--space-3); min-height: 40px; background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.campo-clave__boton:hover { background: var(--surface-sunken); color: var(--text); }


/* ---------- 17. CAJA SIN CONEXION (/panel/caja-offline/) ----------
   Pagina autonoma (no usa el shell del panel): barra propia, contenido centrado y ancho comodo para el mostrador. */
.caja-body { background: var(--bg); color: var(--text); min-height: 100vh; }
.caja-barra {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-6);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.caja-barra h1 { font-size: 20px; font-weight: 700; margin-right: auto; }
.caja-contenido { max-width: 980px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.caja-aviso { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font-weight: 500; }
.caja-aviso--ok { background: #e6f4ea; color: #14532d; border-color: #86c79a; }
.caja-aviso--warn { background: #fff3cd; color: #5c4400; border-color: #e6c75d; }
.caja-aviso--error { background: #fde8e8; color: #7a1212; border-color: #e49a9a; }
.caja-aviso[hidden] { display: none; }
.caja-sugerencias { list-style: none; margin: var(--space-2) 0 var(--space-3); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.caja-sugerencias[hidden] { display: none; }
.caja-sugerencia { display: block; width: 100%; padding: var(--space-3) var(--space-4); min-height: 44px; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); font: inherit; color: var(--text); cursor: pointer; }
.caja-sugerencia:hover, .caja-sugerencia:focus-visible { background: var(--surface-sunken); }
.caja-mini { min-height: 36px; min-width: 36px; padding: var(--space-1) var(--space-3); }
.caja-cantidad { display: inline-block; min-width: 2ch; text-align: center; font-weight: 700; }
@media (max-width: 768px) {
  .caja-barra { padding: var(--space-4); }
  .caja-mini { min-height: 44px; min-width: 44px; }
}
@media print { .caja-barra, .caja-aviso { display: none; } }


/* ---------- 19. RITMO, MOVIMIENTO Y DETALLE (rediseno 2026-10, F3-F5) ----------
   Capa final del rediseno: atmosfera (degradados suaves con el color de la marca), barra superior y
   menu fijos al desplazarse, entradas escalonadas, avatares con tono propio, linea de avance del
   pedido, burbujas de chat y login. TODO el movimiento usa transform/opacity (nunca el layout) y se
   apaga con prefers-reduced-motion. Las entradas usan `backwards` (no `both`): al terminar sueltan el
   transform y no bloquean el levantado al pasar el raton. Los contenedores que se refrescan solos
   (data-sin-foco: hilo de WhatsApp, ventas en vivo) NO se animan al refrescar. */
:root {
  --tono-1-bg: #fbe3d6; --tono-1-fg: #8a3a16;
  --tono-2-bg: #dcefe2; --tono-2-fg: #1f5e3b;
  --tono-3-bg: #dde9f8; --tono-3-fg: #1f4f86;
  --tono-4-bg: #ece3f6; --tono-4-fg: #5b3a85;
  --tono-5-bg: #f3e9d2; --tono-5-fg: #684f12;
  --dur-rapida: 160ms;
  --dur-media: 320ms;
  --dur-lenta: 520ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tono-1-bg: #3d2418; --tono-1-fg: #f3b393;
    --tono-2-bg: #1d3427; --tono-2-fg: #8fd3a8;
    --tono-3-bg: #1c2c42; --tono-3-fg: #9cc2f0;
    --tono-4-bg: #2f2440; --tono-4-fg: #c9b1ea;
    --tono-5-bg: #352c17; --tono-5-fg: #e2c47e;
  }
}
:root[data-theme="dark"] {
  --tono-1-bg: #3d2418; --tono-1-fg: #f3b393;
  --tono-2-bg: #1d3427; --tono-2-fg: #8fd3a8;
  --tono-3-bg: #1c2c42; --tono-3-fg: #9cc2f0;
  --tono-4-bg: #2f2440; --tono-4-fg: #c9b1ea;
  --tono-5-bg: #352c17; --tono-5-fg: #e2c47e;
}

/* Atmosfera: halos muy tenues del color de la marca en las esquinas del area de trabajo. */
.main-area {
  background:
    radial-gradient(1100px 460px at 105% -12%, color-mix(in srgb, var(--accent-tint) 75%, transparent), transparent 70%),
    radial-gradient(700px 360px at -10% 110%, color-mix(in srgb, var(--accent-tint) 35%, transparent), transparent 70%),
    var(--bg);
}
html { scrollbar-color: var(--border-strong) transparent; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--text); }

/* Barra superior y menu lateral fijos al desplazarse (escritorio). En movil la barra ocupa dos filas:
   se deja en su sitio para no robar alto de pantalla. */
@media (min-width: 769px) {
  .topbar {
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  }
  html { scroll-padding-top: 5.5rem; } /* los destinos de ancla (#stock-bajo) no quedan bajo la barra fija */
  .sidebar {
    position: sticky; top: 0; align-self: flex-start; height: 100vh; height: 100dvh;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
}

/* Entrada de pagina y de cada fragmento que llega por HTMX (filtros, paginacion): sube y aparece. */
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes aparecer-suave { from { opacity: 0; } to { opacity: 1; } }
.content > :not([data-sin-foco]) { animation: aparecer var(--dur-lenta) var(--ease-out) backwards; }
.content > :nth-child(2) { animation-delay: 40ms; }
.content > :nth-child(3) { animation-delay: 80ms; }
.content > :nth-child(4) { animation-delay: 120ms; }
.content > :nth-child(5) { animation-delay: 160ms; }
.content > :nth-child(n + 6) { animation-delay: 200ms; }
.dashboard-grid > * { animation: aparecer var(--dur-lenta) var(--ease-out) backwards; }
.dashboard-grid > :nth-child(2) { animation-delay: 50ms; }
.dashboard-grid > :nth-child(3) { animation-delay: 100ms; }
.dashboard-grid > :nth-child(4) { animation-delay: 150ms; }
.dashboard-grid > :nth-child(n + 5) { animation-delay: 200ms; }
.tabla tbody tr:not([data-sin-foco] tr) { animation: aparecer-suave var(--dur-media) var(--ease-out) backwards; }
.tabla tbody tr:nth-child(2) { animation-delay: 20ms; }
.tabla tbody tr:nth-child(3) { animation-delay: 40ms; }
.tabla tbody tr:nth-child(4) { animation-delay: 60ms; }
.tabla tbody tr:nth-child(5) { animation-delay: 80ms; }
.tabla tbody tr:nth-child(n + 6) { animation-delay: 100ms; }

/* Interaccion: cada superficie tocable responde. */
.card { transition: box-shadow var(--dur-media) var(--ease-out), border-color var(--dur-media) var(--ease-out), transform var(--dur-media) var(--ease-out); }
.htmx-request .table-wrap .tabla { opacity: 1; } /* ya se atenua el contenedor: sin esto quedaba al 20 % */
.btn-primary { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 1px 2px rgba(29, 27, 25, 0.12); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--ink) 55%, transparent); }
.btn-primary:active { transform: scale(0.97); }
.filtros input, .filtros select, .form-inline input, .form-inline select, .form-inline textarea,
.login-box input, .chat-compositor textarea {
  transition: border-color var(--dur-rapida) var(--ease-out), box-shadow var(--dur-rapida) var(--ease-out);
}
.filtros input:focus, .filtros select:focus, .form-inline input:focus, .form-inline select:focus,
.form-inline textarea:focus, .login-box input:focus, .chat-compositor textarea:focus {
  outline: none; border-color: var(--accent-strong);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-strong) 18%, transparent);
}
.nav a svg { transition: transform var(--dur-rapida) var(--ease-out); }
.nav a:not(.is-active):hover svg { transform: translateX(1px); }
.back-link svg { transition: transform var(--dur-rapida) var(--ease-out); }
.back-link:hover svg { transform: translateX(-3px); }
@keyframes toast-entrar { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
.toast { animation: toast-entrar var(--dur-media) var(--ease-out) backwards; }

/* Tablas (F3): filas que se iluminan, numeros alineados, accion de la fila como pildora. */
.tabla tbody tr { transition: background var(--dur-rapida) var(--ease-out); }
.tabla tbody tr:hover { background: color-mix(in srgb, var(--accent-tint) 45%, var(--surface)); }
.tabla td { vertical-align: middle; }
.celda-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.celda-fecha__hora { display: block; font-size: 12px; color: var(--text-muted); }
.enlace-fila {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.32rem 0.8rem; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--text); font-size: 12.5px; font-weight: 600; text-decoration: none;
  white-space: nowrap; transition: background var(--dur-rapida) var(--ease-out), color var(--dur-rapida) var(--ease-out);
}
.enlace-fila::after { content: "→"; transition: transform var(--dur-rapida) var(--ease-out); }
.tabla tr:hover .enlace-fila, .enlace-fila:hover, .enlace-fila:focus-visible { background: var(--ink); color: var(--ink-fg); }
.tabla tr:hover .enlace-fila::after, .enlace-fila:hover::after { transform: translateX(2px); }
.stock { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stock--bajo { color: var(--warning); }
.stock--agotado { color: var(--danger); }
.stock--bajo::before, .stock--agotado::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: currentColor; }
.paginacion a { transition: background var(--dur-rapida) var(--ease-out), border-color var(--dur-rapida) var(--ease-out); }
.paginacion a:hover { background: var(--surface); border-color: var(--text); color: var(--text); }

/* Listados en el telefono (<= 640px): cada fila de .tabla--tarjetas pasa a ser una tarjeta (sin
   desplazarse de lado). Cada celda dice que es con su data-label; la principal (cliente/producto) y
   la de accion ocupan todo el ancho. Los encabezados siguen ahi para los lectores de pantalla. */
@media (max-width: 640px) {
  .tabla--tarjetas, .tabla--tarjetas tbody, .tabla--tarjetas tr, .tabla--tarjetas td { display: block; }
  .tabla--tarjetas { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .tabla--tarjetas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabla--tarjetas tbody { display: grid; gap: 0.75rem; }
  .tabla--tarjetas tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 1rem; padding: 1rem 1.1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  }
  .tabla--tarjetas tbody tr:hover { background: var(--surface); }
  .tabla--tarjetas td { padding: 0; border: 0; min-width: 0; text-align: left; }
  .tabla--tarjetas td.num { text-align: left; }
  .tabla--tarjetas td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 0.1rem;
    font-family: var(--font-body); font-size: 11.5px; font-weight: 600; color: var(--text-muted);
  }
  .tabla--tarjetas .celda-principal, .tabla--tarjetas .celda-completa, .tabla--tarjetas td[colspan] { grid-column: 1 / -1; }
  .tabla--tarjetas tbody tr td.celda-principal { order: -1; padding-bottom: 0.55rem; border-bottom: 1px solid var(--border); }
  .tabla--tarjetas .celda-accion { grid-column: 1 / -1; }
  .tabla--tarjetas .celda-accion .enlace-fila { width: 100%; justify-content: center; padding: 0.6rem; }
  .tabla--tarjetas .celda-fecha__hora { display: inline; margin-left: 0.35rem; }
}

/* Avatar + nombre (macro persona de _componentes.html). */
.persona { display: inline-flex; align-items: center; gap: 0.65rem; min-width: 0; max-width: 100%; vertical-align: middle; }
.persona__texto { display: inline-flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.persona__nombre { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.persona__detalle { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.avatar--lg { width: 60px; height: 60px; font-size: 21px; letter-spacing: -0.02em; }
.persona--lg { gap: 0.9rem; }
.persona--lg .persona__nombre { font-family: var(--font-display); font-size: clamp(19px, 1rem + 0.9vw, 24px); font-weight: 700; letter-spacing: -0.02em; }
.persona--lg .persona__detalle { font-size: 13px; }
.avatar--tono-1 { background: var(--tono-1-bg); color: var(--tono-1-fg); }
.avatar--tono-2 { background: var(--tono-2-bg); color: var(--tono-2-fg); }
.avatar--tono-3 { background: var(--tono-3-bg); color: var(--tono-3-fg); }
.avatar--tono-4 { background: var(--tono-4-bg); color: var(--tono-4-fg); }
.avatar--tono-5 { background: var(--tono-5-bg); color: var(--tono-5-fg); }

/* Cabecera de las fichas (F4) con un degradado suave hacia el tono de la marca. */
.ficha-cabecera {
  background: linear-gradient(120deg, var(--surface) 35%, color-mix(in srgb, var(--accent-tint) 70%, var(--surface)) 100%);
}
.ficha-cabecera__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; }
.ficha-cabecera__cifra { display: flex; flex-direction: column; align-items: flex-end; }
.ficha-cabecera__etiqueta { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.ficha-cabecera__valor { font-family: var(--font-display); font-size: clamp(24px, 1.1rem + 1.2vw, 32px); font-weight: 700; letter-spacing: -0.025em; }
.ficha-cabecera__fila--separada { margin-bottom: 1rem; }
.ficha-cabecera__cancelado { display: flex; align-items: center; gap: 0.6rem; margin: 1rem 0 0; color: var(--text-muted); font-size: 13px; }

/* Linea de avance del pedido: el tramo recorrido se "llena" de izquierda a derecha al cargar. */
.avance { list-style: none; margin: 1.4rem 0 0.2rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.avance__paso {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  text-align: center; font-size: 12.5px; color: var(--text-muted); --retraso: 0ms;
}
.avance__paso:nth-child(2) { --retraso: 90ms; }
.avance__paso:nth-child(3) { --retraso: 180ms; }
.avance__paso:nth-child(4) { --retraso: 270ms; }
.avance__paso:nth-child(5) { --retraso: 360ms; }
.avance__paso + .avance__paso::before,
.avance__paso + .avance__paso::after {
  content: ""; position: absolute; top: 8px; right: 50%; width: 100%; height: 3px; border-radius: 99px;
}
.avance__paso + .avance__paso::before { background: var(--border); }
.avance__paso + .avance__paso::after {
  background: linear-gradient(90deg, var(--accent-strong), var(--accent)); transform: scaleX(0); transform-origin: left;
}
.avance__paso.is-hecho + .avance__paso::after { animation: llenar var(--dur-lenta) var(--ease-out) var(--retraso) both; }
@keyframes llenar { to { transform: scaleX(1); } }
.avance__punto {
  position: relative; z-index: 1; width: 19px; height: 19px; border-radius: 99px;
  background: var(--surface); border: 2px solid var(--border-strong);
}
.avance__paso.is-hecho .avance__punto { background: var(--accent-strong); border-color: var(--accent-strong); }
.avance__paso.is-hecho .avance__punto::after {
  content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 5px; height: 9px;
  border: solid var(--accent-fg); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.avance__paso.is-actual { color: var(--text); font-weight: 700; }
.avance__paso.is-actual .avance__punto {
  border-color: var(--accent-strong); border-width: 5px;
  animation: latido 2.4s var(--ease-out) 600ms infinite;
}
/* Entregado es un estado final: el punto queda lleno, sin latido. */
.avance__paso:last-child.is-actual .avance__punto { animation: none; background: var(--accent-strong); border-width: 2px; }
@keyframes latido {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-strong) 35%, transparent); }
  70%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent-strong) 0%, transparent); }
}
@media (max-width: 560px) {
  .avance__paso { font-size: 11px; }
  .ficha-cabecera__cifra { align-items: flex-start; }
}

/* Tablero de pedidos: columnas suaves y tarjetas que se levantan. */
.tablero__columna { border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface-sunken) 70%, transparent); border-color: transparent; }
.tarjeta-pedido {
  border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  transition: transform var(--dur-media) var(--ease-out), box-shadow var(--dur-media) var(--ease-out);
}
.tarjeta-pedido:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* WhatsApp (F5): burbujas con "cola", el bot en el degradado de la marca, la persona en grafito. */
.chat-thread {
  background:
    radial-gradient(600px 240px at 100% 0%, color-mix(in srgb, var(--accent-tint) 45%, transparent), transparent 70%),
    var(--surface);
  gap: 0.75rem;
}
.chat-bubble {
  border-radius: 18px; padding: 0.6rem 0.9rem; box-shadow: var(--shadow-1);
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
}
.chat-bubble--cliente { border-bottom-left-radius: 6px; background: var(--surface-sunken); }
.chat-bubble--asistente {
  border-bottom-right-radius: 6px;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent-hover));
}
.chat-bubble--asistente .badge { background: color-mix(in srgb, var(--accent-fg) 20%, transparent); color: inherit; }
.chat-bubble--vendedor { border-bottom-right-radius: 6px; background: var(--ink); color: var(--ink-fg); border-color: transparent; }
.chat-bubble--vendedor .viz-card__nota { color: inherit; }
.chat-bubble--sistema { border-radius: var(--radius-lg); box-shadow: none; }
.chat-bubble__quien { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.chat-thread > .chat-bubble:last-of-type { animation: aparecer var(--dur-media) var(--ease-out) backwards; }

/* Login (F5): fondo con degradado y anillos de la marca; la tarjeta entra con suavidad. */
.login-shell {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(720px 420px at 12% 8%, color-mix(in srgb, var(--accent-tint) 95%, transparent), transparent 65%),
    radial-gradient(640px 420px at 92% 96%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%),
    var(--bg);
}
.login-shell::before {
  content: ""; position: absolute; z-index: -1; right: -180px; bottom: -220px; width: 620px; height: 620px;
  border-radius: 50%; pointer-events: none; color: var(--accent-strong);
  background: repeating-radial-gradient(circle, transparent 0 28px, color-mix(in srgb, currentColor 14%, transparent) 28px 29px);
}
.login-box {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: aparecer var(--dur-lenta) var(--ease-out) backwards;
}
.login-box h1 { font-size: 24px; letter-spacing: -0.02em; }
.login-box .campo-clave__boton {
  margin: 0; padding: 0 0.9rem; background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: 12.5px;
}
.login-box .campo-clave__boton:hover { background: var(--surface-sunken); color: var(--text); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .avance__paso.is-hecho + .avance__paso::after { transform: scaleX(1); }
  .btn-primary:hover, .tarjeta-pedido:hover, .stat-card:hover { transform: none; }
}

/* ---------- Tallas del alta de producto: bloque compacto ---------- */
.tallas-bloque { border: 1px solid var(--border); border-radius: var(--radius-md, 10px); padding: var(--space-3, 12px) var(--space-4, 16px); margin: var(--space-3, 12px) 0; display: grid; gap: var(--space-3, 12px); }
.tallas-bloque legend { padding: 0 6px; font-weight: 600; font-size: 0.875rem; }
.tallas-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3, 12px); }
.tallas-bloque label { font-size: 0.8125rem; }
.tallas-bloque input, .tallas-bloque select { width: 100%; min-width: 0; }
@media (max-width: 640px) { .tallas-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Simulador del bot (aspecto de WhatsApp) ---------- */
.wa-layout { display: grid; grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
.wa-inspector { display: grid; gap: 1rem; min-width: 0; }
@media (max-width: 960px) { .wa-layout { grid-template-columns: minmax(0, 1fr); } }

.wa {
  --wa-fondo: oklch(0.935 0.02 85);
  --wa-puntos: oklch(0.86 0.025 85 / 0.55);
  --wa-cabecera: oklch(0.965 0.006 150);
  --wa-barra: oklch(0.955 0.008 150);
  --wa-borde: oklch(0.88 0.01 150);
  --wa-entrante: oklch(0.995 0.003 95);
  --wa-saliente: oklch(0.925 0.075 142);
  --wa-texto: oklch(0.24 0.015 160);
  --wa-suave: oklch(0.5 0.015 160);
  --wa-verde: oklch(0.6 0.14 165);
  --wa-azul: oklch(0.62 0.15 235);
  --wa-claro: oklch(0.985 0.006 150);
  --wa-grabando: oklch(0.6 0.2 25);
  --wa-sombra: 0 1px 0.5px oklch(0.2 0.02 150 / 0.13);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  height: min(78vh, 46rem); min-height: 28rem; overflow: hidden;
  border: 1px solid var(--wa-borde); border-radius: var(--radius-lg);
  background: var(--wa-fondo); color: var(--wa-texto);
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.9375rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wa {
    --wa-fondo: oklch(0.2 0.012 195); --wa-puntos: oklch(0.3 0.015 195 / 0.5); --wa-cabecera: oklch(0.27 0.01 220);
    --wa-barra: oklch(0.27 0.01 220); --wa-borde: oklch(0.34 0.01 220); --wa-entrante: oklch(0.3 0.01 230);
    --wa-saliente: oklch(0.38 0.07 175); --wa-texto: oklch(0.94 0.005 100); --wa-suave: oklch(0.72 0.01 200);
    --wa-verde: oklch(0.7 0.14 165); --wa-azul: oklch(0.74 0.12 235); --wa-claro: oklch(0.22 0.01 200);
  }
}
:root[data-theme="dark"] .wa {
  --wa-fondo: oklch(0.2 0.012 195); --wa-puntos: oklch(0.3 0.015 195 / 0.5); --wa-cabecera: oklch(0.27 0.01 220);
  --wa-barra: oklch(0.27 0.01 220); --wa-borde: oklch(0.34 0.01 220); --wa-entrante: oklch(0.3 0.01 230);
  --wa-saliente: oklch(0.38 0.07 175); --wa-texto: oklch(0.94 0.005 100); --wa-suave: oklch(0.72 0.01 200);
  --wa-verde: oklch(0.7 0.14 165); --wa-azul: oklch(0.74 0.12 235); --wa-claro: oklch(0.22 0.01 200);
}
.wa [hidden] { display: none !important; }
.wa button { font: inherit; }

.wa__cabecera { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.85rem; background: var(--wa-cabecera); border-bottom: 1px solid var(--wa-borde); }
.wa__avatar { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; overflow: hidden; border-radius: 50%; background: var(--wa-verde); color: var(--wa-claro); font-weight: 600; }
.wa__avatar img { width: 100%; height: 100%; object-fit: contain; padding: 0.2rem; background: oklch(0.985 0.006 100); }
.wa__titulo { display: grid; min-width: 0; line-height: 1.25; }
.wa__titulo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 600; }
.wa__estado { font-size: 0.78rem; color: var(--wa-suave); }
.wa__estado-escribiendo { display: none; color: var(--wa-verde); }
.htmx-request .wa__estado-reposo { display: none; }
.htmx-request .wa__estado-escribiendo { display: inline; }

.wa__menu { margin-left: auto; }
.wa__menu summary { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--wa-suave); cursor: pointer; list-style: none; transition: background 0.15s var(--ease-out); }
.wa__menu summary::-webkit-details-marker { display: none; }
.wa__menu summary:hover, .wa__menu[open] summary { background: color-mix(in oklch, var(--wa-suave) 16%, transparent); }
.wa__menu svg { fill: currentColor; }
.wa__menu-panel { position: absolute; right: 0.6rem; top: calc(100% - 0.1rem); z-index: 5; display: grid; gap: 0.5rem; width: min(19rem, 82vw); padding: 0.85rem; border: 1px solid var(--wa-borde); border-radius: var(--radius-md); background: var(--wa-entrante); box-shadow: 0 10px 28px oklch(0.2 0.02 150 / 0.2); font-size: 0.85rem; }
.wa__menu-panel label { display: grid; gap: 0.3rem; font-weight: 600; }
.wa__menu-panel input { padding: 0.5rem 0.65rem; border: 1px solid var(--wa-borde); border-radius: var(--radius-sm); background: var(--wa-claro); color: var(--wa-texto); font: inherit; font-weight: 400; }
.wa__menu-panel p { margin: 0; color: var(--wa-suave); }

.wa__hilo {
  display: flex; flex-direction: column; gap: 0.2rem; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth;
  padding: 1rem clamp(0.75rem, 4%, 1.6rem) 1.25rem;
  background-color: var(--wa-fondo);
  background-image: radial-gradient(circle at 1px 1px, var(--wa-puntos) 1px, transparent 0);
  background-size: 22px 22px;
}
.wa__vacio { align-self: center; max-width: 22rem; margin: auto; padding: 0.6rem 0.9rem; border-radius: var(--radius-md); background: color-mix(in oklch, var(--wa-cabecera) 88%, transparent); color: var(--wa-suave); font-size: 0.85rem; text-align: center; }
.wa__dia { align-self: center; margin: 0.25rem 0 0.6rem; }
.wa__dia span { padding: 0.25rem 0.65rem; border-radius: var(--radius-sm); background: var(--wa-cabecera); box-shadow: var(--wa-sombra); color: var(--wa-suave); font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; }

.wa__burbuja { position: relative; max-width: min(82%, 26rem); padding: 0.35rem 0.55rem 0.3rem 0.6rem; border-radius: 0.6rem; box-shadow: var(--wa-sombra); line-height: 1.38; overflow-wrap: anywhere; }
.wa__burbuja:nth-last-child(-n+3) { animation: wa-entra 0.24s var(--ease-out) backwards; }
.wa__burbuja--entrante { align-self: flex-start; background: var(--wa-entrante); }
.wa__burbuja--saliente { align-self: flex-end; background: var(--wa-saliente); }
.wa__burbuja--entrante + .wa__burbuja--saliente, .wa__burbuja--saliente + .wa__burbuja--entrante { margin-top: 0.55rem; }
/* La cola solo en el primer globo de cada grupo, como en la app. */
.wa__burbuja--entrante::before, .wa__burbuja--saliente::before { content: ""; position: absolute; top: 0; width: 0.55rem; height: 0.8rem; background: inherit; }
.wa__burbuja--entrante::before { left: -0.45rem; clip-path: polygon(100% 0, 0 0, 100% 100%); }
.wa__burbuja--saliente::before { right: -0.45rem; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa__burbuja--entrante { border-top-left-radius: 0; }
.wa__burbuja--saliente { border-top-right-radius: 0; }
.wa__burbuja--entrante + .wa__burbuja--entrante, .wa__burbuja--saliente + .wa__burbuja--saliente { border-radius: 0.6rem; }
.wa__burbuja--entrante + .wa__burbuja--entrante::before, .wa__burbuja--saliente + .wa__burbuja--saliente::before { display: none; }

.wa__texto { display: inline; margin: 0; white-space: pre-wrap; }
.wa__meta { float: right; display: inline-flex; align-items: center; gap: 0.2rem; margin: 0.5rem 0 -0.15rem 0.7rem; color: var(--wa-suave); font-size: 0.68rem; line-height: 1; }
.wa__ticks { fill: var(--wa-azul); }
.wa__burbuja--imagen .wa__meta, .wa__burbuja--audio .wa__meta { float: none; display: flex; justify-content: flex-end; margin: 0.15rem 0 0; }

.wa__imagen { overflow: hidden; margin: 0.05rem -0.25rem 0.3rem; min-width: 11rem; border-radius: 0.45rem; background: color-mix(in oklch, var(--wa-saliente) 55%, var(--wa-fondo)); }
.wa__imagen img { display: block; width: 100%; max-width: 20rem; max-height: 18rem; object-fit: cover; }
.wa__imagen-vacia { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.6rem 0.9rem; color: var(--wa-suave); font-size: 0.82rem; }
.wa__imagen-vacia svg { fill: currentColor; }

.wa__audio { display: flex; align-items: center; gap: 0.5rem; min-width: 14.5rem; padding: 0.1rem 0; }
.wa__reproducir { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: var(--wa-suave); cursor: pointer; transition: color 0.15s var(--ease-out), transform 0.1s var(--ease-out); }
.wa__reproducir svg { fill: currentColor; }
.wa__reproducir:not(:disabled):hover { color: var(--wa-verde); }
.wa__reproducir:not(:disabled):active { transform: scale(0.92); }
.wa__reproducir:disabled { opacity: 0.45; cursor: default; }
.is-sonando .wa__reproducir { color: var(--wa-azul); }
.wa__onda { flex: 1; min-width: 0; height: 1.5rem; }
.wa__onda rect { fill: color-mix(in oklch, var(--wa-suave) 55%, transparent); transition: fill 0.15s linear; }
.wa__onda rect.is-sonada { fill: var(--wa-azul); }
.wa__duracion { color: var(--wa-suave); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.wa__texto--transcripcion { display: block; margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px dashed var(--wa-borde); color: var(--wa-suave); font-size: 0.84rem; }
.wa__etiqueta { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }

.wa__escribiendo { display: none; align-self: flex-start; gap: 0.28rem; margin-top: 0.55rem; padding: 0.75rem 0.85rem; }
.htmx-request .wa__escribiendo { display: inline-flex; }
.wa__escribiendo span { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--wa-suave); animation: wa-punto 1.1s ease-in-out infinite; }
.wa__escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.wa__escribiendo span:nth-child(3) { animation-delay: 0.3s; }

.wa__compositor { padding: 0.5rem 0.65rem 0.6rem; border-top: 1px solid var(--wa-borde); background: var(--wa-barra); }
.wa__barra { display: flex; align-items: flex-end; gap: 0.35rem; }
.wa__barra textarea { flex: 1; min-width: 0; max-height: 7.5rem; padding: 0.6rem 0.95rem; border: 0; border-radius: 1.3rem; outline: 0; resize: none; background: var(--wa-entrante); box-shadow: var(--wa-sombra); color: var(--wa-texto); font: inherit; line-height: 1.35; }
.wa__barra textarea::placeholder { color: var(--wa-suave); }
.wa__barra textarea:focus-visible { box-shadow: var(--wa-sombra), 0 0 0 2px color-mix(in oklch, var(--wa-verde) 55%, transparent); }
.wa__icono { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: transparent; color: var(--wa-suave); cursor: pointer; transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out); }
.wa__icono svg { fill: currentColor; }
.wa__icono:hover { background: color-mix(in oklch, var(--wa-suave) 16%, transparent); color: var(--wa-texto); }
.wa__icono:focus-visible, .wa__enviar:focus-visible, .wa__texto-boton:focus-visible, .wa__reproducir:focus-visible, .wa__menu summary:focus-visible { outline: 2px solid var(--wa-verde); outline-offset: 2px; }
.wa__enviar { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: var(--wa-verde); color: var(--wa-claro); cursor: pointer; transition: transform 0.12s var(--ease-out), filter 0.15s var(--ease-out); }
.wa__enviar svg { fill: currentColor; }
.wa__enviar:hover:not(:disabled) { filter: brightness(1.07); }
.wa__enviar:active:not(:disabled) { transform: scale(0.93); }
.wa__enviar:disabled { opacity: 0.45; cursor: not-allowed; }

.wa__adjunto { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.45rem; padding: 0.4rem 0.5rem 0.4rem 0.4rem; border-radius: 0.65rem; background: var(--wa-entrante); box-shadow: var(--wa-sombra); font-size: 0.82rem; }
.wa__adjunto-vista { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; overflow: hidden; border-radius: 0.45rem; background: var(--wa-cabecera); font-size: 1.2rem; }
.wa__adjunto-vista img { width: 100%; height: 100%; object-fit: cover; }
.wa__adjunto-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wa__grabando { display: flex; align-items: center; gap: 0.65rem; min-height: 2.5rem; padding-left: 0.4rem; }
.wa__punto { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--wa-grabando); animation: wa-late 1.2s ease-in-out infinite; }
.wa__tiempo { font-weight: 600; font-variant-numeric: tabular-nums; }
.wa__grabando-texto { flex: 1; color: var(--wa-suave); }
.wa__texto-boton { padding: 0.4rem 0.7rem; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--wa-suave); cursor: pointer; transition: background 0.15s var(--ease-out); }
.wa__texto-boton:hover { background: color-mix(in oklch, var(--wa-suave) 16%, transparent); }

.wa__guardado { padding: 0.5rem 0.85rem 0.55rem; border-bottom: 1px solid var(--wa-borde); background: color-mix(in oklch, var(--wa-grabando) 12%, var(--wa-cabecera)); font-size: 0.78rem; line-height: 1.35; }
.wa__guardado p { margin: 0; }
.wa__guardado-enlaces { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.85rem; margin-top: 0.3rem !important; }
.wa__guardado a { color: var(--wa-texto); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.wa__guardado .wa__texto-boton { padding: 0.15rem 0.5rem; color: var(--wa-grabando); font-size: 0.78rem; font-weight: 700; }
.wa__menu-panel a { color: var(--wa-texto); font-weight: 600; }

@keyframes wa-entra { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes wa-punto { 0%, 60%, 100% { opacity: 0.4; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes wa-late { 50% { opacity: 0.3; } }
@media (max-width: 640px) { .wa { height: calc(100dvh - 12rem); min-height: 26rem; } .wa__burbuja { max-width: 88%; } }
@media (prefers-reduced-motion: reduce) {
  .wa *, .wa *::before { animation: none !important; transition: none !important; }
  .wa__hilo { scroll-behavior: auto; }
}

/* ---------- Campos de texto mas comodos + casillas alineadas ---------- */
.form-inline input:not([type="checkbox"]):not([type="radio"]), .form-inline select, .form-inline textarea,
.filtros input:not([type="checkbox"]):not([type="radio"]), .filtros select,
.chat-compositor textarea, .login-box input {
  min-height: 2.5rem; padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--surface);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
}
.form-inline textarea, .chat-compositor textarea { line-height: 1.45; }
.form-inline input::placeholder, .form-inline textarea::placeholder, .chat-compositor textarea::placeholder {
  color: var(--text-muted); opacity: 0.7;
}
.form-inline input:hover:not(:focus), .form-inline select:hover:not(:focus), .form-inline textarea:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--accent-strong) 45%, var(--border-strong));
}
label.campo-check, .form-inline label.campo-check, .chat-compositor label.campo-check {
  display: flex; flex-direction: row; align-items: flex-start; gap: 0.6rem; flex: 1 1 100%; min-width: 0;
  font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.45; cursor: pointer;
}
label.campo-check input[type="checkbox"] {
  flex: none; width: 1.1rem; height: 1.1rem; margin: 0.12rem 0 0; accent-color: var(--accent-strong); cursor: pointer;
}

/* ---------- Visor flotante de comprobantes ---------- */
.visor-imagen {
  border: 0; padding: 0; background: transparent; max-width: min(92vw, 880px); max-height: 92vh; overflow: visible;
}
.visor-imagen::backdrop { background: color-mix(in srgb, var(--ink) 72%, transparent); backdrop-filter: blur(3px); }
.visor-imagen[open] { animation: visor-entra 220ms var(--ease-out) backwards; }
.visor-imagen[open]::backdrop { animation: visor-fondo 220ms var(--ease-out) backwards; }
.visor-imagen__img {
  display: block; max-width: 100%; max-height: 82vh; margin: 0 auto; border-radius: 14px; background: var(--surface);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
}
.visor-imagen__cerrar {
  position: absolute; top: -0.9rem; right: -0.9rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 0; background: var(--surface); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); transition: transform var(--dur-rapida) var(--ease-out);
}
.visor-imagen__cerrar:hover { transform: scale(1.08); }
.visor-imagen__abrir { display: block; margin-top: 0.6rem; text-align: center; color: #fff; font-size: 13px; }
@keyframes visor-entra { from { opacity: 0; transform: scale(0.94) translateY(8px); } }
@keyframes visor-fondo { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .visor-imagen[open], .visor-imagen[open]::backdrop { animation: none; }
}

/* ---------- POS: cuadro unico de busqueda/escaneo ---------- */
.pos-escaner__form { display: grid; gap: 0.5rem; }
.pos-escaner__etiqueta { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 14px; color: var(--ink); }
.pos-escaner__campo { display: flex; gap: 0.5rem; }
.pos-escaner__campo input {
  flex: 1; min-width: 0; font-size: 16px; min-height: 3rem; padding: 0.7rem 1rem; border-radius: 12px;
  border: 2px solid var(--border-strong); background: var(--surface);
}
.pos-escaner__campo input:focus { border-color: var(--accent-strong); outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-strong) 18%, transparent); }
.pos-escaner__campo .btn { min-height: 3rem; padding-inline: 1.3rem; }

/* ---------- Todos los campos de texto del panel: mismo aspecto (redondeado, borde de acento al enfocar) ----------
   Con :where() la especificidad es 0: cualquier regla propia de una pantalla (anchos, tamanos) sigue mandando. */
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"], [type="color"]), select, textarea) {
  font-family: var(--font-body); font-size: 13.5px; color: var(--text); background: var(--surface);
  min-height: 2.5rem; padding: 0.6rem 0.85rem; border: 1px solid var(--border-strong); border-radius: 12px;
  transition: border-color var(--dur-rapida) var(--ease-out), box-shadow var(--dur-rapida) var(--ease-out);
}
:where(input, select, textarea)::placeholder { color: var(--text-muted); opacity: 0.7; }
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"], [type="color"]), select, textarea):focus {
  outline: none; border-color: var(--accent-strong);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-strong) 18%, transparent);
}
.content :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="hidden"], [type="submit"], [type="button"], [type="color"]), select, textarea) { border-radius: 12px; }
form.card :where(input:not([type="checkbox"], [type="radio"]), select, textarea) { width: 100%; box-sizing: border-box; }
.campo-clave :where(input) { width: auto; }

/* ---------- Menu de usuario (barra superior): Mi cuenta, Configuracion y Cerrar sesion ---------- */
.menu-usuario { position: relative; }
.menu-usuario > summary { list-style: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; }
.menu-usuario > summary::-webkit-details-marker { display: none; }
.menu-usuario > summary.is-active,
.menu-usuario[open] > summary { background: var(--surface-sunken); color: var(--text); border-color: var(--border-strong); }
.menu-usuario[open] > summary { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.menu-usuario__panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: min(264px, calc(100vw - 24px));
  display: flex; flex-direction: column; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-2); transform-origin: top right;
}
/* Abre desde la esquina del boton (aparece y crece); al cerrar, panel.js agrega .is-cerrando y espera la salida. */
.menu-usuario[open] .menu-usuario__panel { animation: menu-usuario-entrar 180ms var(--ease-out) both; }
.menu-usuario.is-cerrando .menu-usuario__panel { animation: menu-usuario-salir 120ms ease-in both; }
@keyframes menu-usuario-entrar { from { opacity: 0; transform: translateY(-6px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes menu-usuario-salir { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-4px) scale(0.97); } }
.menu-usuario__quien { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.menu-usuario__avatar {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-strong); font-weight: 700; font-size: 13px; letter-spacing: 0.03em;
}
.menu-usuario__datos { display: flex; flex-direction: column; min-width: 0; }
.menu-usuario__datos strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-usuario__rol {
  align-self: flex-start; margin-top: 3px; padding: 1px 8px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--text-muted); font-size: 11.5px; font-weight: 600;
}
.menu-usuario__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 8px;
  border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-weight: 500; text-align: left;
  text-decoration: none; cursor: pointer; transition: background-color 0.12s;
}
.menu-usuario__icono {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: var(--surface-sunken); color: var(--text-muted); transition: background-color 0.12s, color 0.12s;
}
.menu-usuario__item:hover, .menu-usuario__item:focus-visible { background: var(--surface-sunken); outline-offset: -2px; }
.menu-usuario__item:hover .menu-usuario__icono, .menu-usuario__item:focus-visible .menu-usuario__icono,
.menu-usuario__item[aria-current="page"] .menu-usuario__icono { background: var(--accent-tint); color: var(--accent-strong); }
.menu-usuario__item[aria-current="page"] { font-weight: 600; }
.menu-usuario__separador { height: 1px; margin: 4px 8px; border: 0; background: var(--border); }
.menu-usuario__item--salir { color: var(--danger); }
.menu-usuario__item--salir .menu-usuario__icono { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.menu-usuario__item--salir:hover .menu-usuario__icono,
.menu-usuario__item--salir:focus-visible .menu-usuario__icono { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
@media (max-width: 768px) { .menu-usuario__item { min-height: 48px; } }
@media (prefers-reduced-motion: reduce) {
  .menu-usuario[open] .menu-usuario__panel, .menu-usuario.is-cerrando .menu-usuario__panel { animation: none; }
}

/* ---------- Lecciones del bot («Mejorable») ---------- */
.chat-mejorable { margin-top: var(--space-1); }
.chat-mejorable__boton {
  border: 0; background: transparent; padding: 0; color: var(--text-muted); font: inherit; font-size: 12px;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.chat-mejorable__boton:hover, .chat-mejorable__boton:focus-visible { color: var(--text); }
.leccion-panel:empty { display: none; }
.leccion-panel { margin-top: var(--space-4); }
.leccion-cita { margin: 0 0 var(--space-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.leccion-form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.leccion-form label { display: flex; flex-direction: column; gap: var(--space-1); }
.leccion-form textarea, .leccion-form input[type="text"] { width: 100%; box-sizing: border-box; }
.leccion-form__acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.leccion { padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.leccion:first-of-type { border-top: 0; }
.leccion-archivadas__titulo { display: inline; font-size: inherit; }

/* ---------- IMPRESION: margenes del papel ----------
   VA AL FINAL a proposito: las reglas de espaciado de pantalla de `.content` (seccion 16) se declaran despues de las de impresion
   anteriores y las pisaban, dejando 32 px de relleno a cada lado: en un ticket de 72 mm eso le quita ~17 mm de ancho util y el recibo
   se cortaba. Aqui el contenido ocupa TODA la hoja (los margenes del papel los pone `@page`: ver `papel80`/`papel58`). */
@media print {
  .app-shell { display: block; }
  .main-area, .content, .content--ancha { margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; }
  .entorno-banner, .menu-fondo, .canal-banner { display: none !important; }
}