/* Sistema visual del panel (AUT-017, identidad cafetera de AUT-019): tokens de color/espaciado y componentes
   reutilizables (tarjetas, listas, botones, insignias de estado…) que usan TODAS las pantallas — nunca estilos
   repetidos por pantalla. Cambiar un token o un componente aquí cambia el panel entero de una vez. Nada de esto
   toca datos, permisos, cálculos ni el marcado que identifican las pruebas (ids, nombres de clase existentes,
   textos): solo se AÑADEN clases y variables nuevas.
   AUT-019: paleta gris/azul reemplazada por una identidad cafetera cálida y premium -- crema/latte en modo claro,
   espresso/cacao en modo oscuro, acentos dorado/caramelo -- en LOS DOS modos (nunca solo en el oscuro), para que
   la marca se sienta igual sin importar la preferencia del sistema. Se conservan exactamente los mismos NOMBRES
   de variable de AUT-017 (nada que las use tuvo que cambiar) y el mismo criterio de contraste. */
:root {
  --fondo: #f6efe4; --tarjeta: #fffaf2; --texto: #2b1c12; --suave: #7d6753; --borde: #e2d3bf;
  --acento: #96591f; --acento-texto: #fffaf2; --acento-fondo: #f2e3cc;
  --peligro: #a8402a; --peligro-fondo: #fbe6df;
  --ok: #3f7a3f; --ok-fondo: #e7f1e2;
  --aviso-fondo: #f6e4bd; --aviso-texto: #7a5210;
  --radio: 14px; --radio-chico: 9px;
  --sombra: 0 1px 2px rgba(43, 28, 18, .07), 0 6px 18px rgba(43, 28, 18, .08);
  --sombra-chica: 0 1px 2px rgba(43, 28, 18, .09);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #1b120d; --tarjeta: #2a1e16; --texto: #f3e6d5; --suave: #b9a58e; --borde: #4a3a2c;
    --acento: #d7a24a; --acento-texto: #2a1608; --acento-fondo: #3d2c15;
    --peligro: #e8987e; --peligro-fondo: #3d221a;
    --ok: #8fc47a; --ok-fondo: #223821;
    --aviso-fondo: #3d2f14; --aviso-texto: #e8bd6a;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .4);
    --sombra-chica: 0 1px 2px rgba(0, 0, 0, .4);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#app { min-height: 100vh; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1.02rem; }
h1:focus, h2:focus { outline: none; }
p { margin: 0 0 .75rem; }
.suave { color: var(--suave); }
.centro { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 16px; }

/* ---------- Tarjetas: el contenedor base de casi todo (ver tests: la clase "tarjeta" ya existía, sin cambios). */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px; width: 100%; max-width: 440px; box-shadow: var(--sombra-chica); }
.tarjeta.ancha { max-width: none; }

/* ---------- Formularios: etiquetas SIEMPRE visibles (nunca solo placeholder), objetivos táctiles ≥44px. */
label { display: block; font-weight: 600; margin: 0 0 .3rem; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=search], input[type=date] {
  display: block; width: 100%; min-height: 44px; padding: 9px 12px; margin-bottom: 14px; font: inherit; color: inherit;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio-chico);
}
input::placeholder { color: var(--suave); opacity: .85; }
input:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--acento); outline-offset: 2px;
}
select {
  display: block; width: 100%; min-height: 44px; padding: 9px 12px; margin-bottom: 14px; font: inherit; color: inherit;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio-chico);
}
.ayuda { font-size: .875rem; margin: -8px 0 14px; color: var(--suave); }
.ayuda-aparte { margin: 12px 0 0; }

/* ---------- Botones: "primario" (acción principal, una por pantalla lo ideal) y el resto, secundarios. */
button {
  font: inherit; font-weight: 600; min-height: 44px; padding: 9px 18px; border-radius: var(--radio-chico);
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto); cursor: pointer;
}
button.primario { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); box-shadow: var(--sombra-chica); }
button.enlace { background: none; border: none; color: var(--acento); text-decoration: underline; padding: 8px 4px; min-height: 44px; font-weight: 600; }
button[disabled] { opacity: .55; cursor: not-allowed; }
.completo { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  button:not([disabled]):hover { border-color: var(--acento); }
  button.primario:not([disabled]):hover { filter: brightness(1.06); }
  button.enlace:not([disabled]):hover { opacity: .8; }
}
@media (prefers-reduced-motion: no-preference) { button { transition: filter .15s, border-color .15s, background-color .15s; } }

/* ---------- Mensajes de estado: siempre en español claro, nunca detalle técnico. */
.error { background: var(--peligro-fondo); color: var(--peligro); border-radius: var(--radio-chico); padding: 11px 14px; margin: 0 0 14px; font-weight: 600; }
.exito { background: var(--ok-fondo); color: var(--ok); border-radius: var(--radio-chico); padding: 11px 14px; margin: 0 0 14px; font-weight: 600; }
.aviso { background: var(--aviso-fondo); color: var(--aviso-texto); border-radius: var(--radio-chico); padding: 11px 14px; margin: 0 0 14px; font-weight: 600; }

/* ---------- Encabezado: empresa y rol. Las acciones (cambiar de empresa, cerrar sesión) son OTRO elemento
   (".acciones-cabecera") a propósito -- ver ".envoltura-panel" más abajo -- para poder colocarlos por separado en
   escritorio sin duplicar ningún botón. "header.cabecera strong" es el nombre de la empresa: las pruebas de
   navegador lo usan para esperar a que termine de cargar, así que la clase y la etiqueta se conservan tal cual.
   NOTA: se probó "position: sticky" para fijarlo arriba al desplazarse por listas largas, pero Chromium duplica
   los elementos "sticky"/"fixed" al tomar una captura de página completa (capturas de prueba, no un problema real
   al usar el panel) -- se descartó para no ensuciar las capturas de las pruebas visuales de esta misma tarea. */
.cabecera {
  background: var(--tarjeta); border-bottom: 2px solid var(--acento); padding: 14px 16px;
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
}
.cabecera .quien { min-width: 0; }
.cabecera .quien strong { display: block; overflow-wrap: anywhere; font-size: 1.1rem; }
.etiqueta { display: inline-block; font-size: .8rem; font-weight: 600; padding: 3px 11px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--borde); color: var(--suave); }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.acciones-cabecera {
  background: var(--tarjeta); border-bottom: 2px solid var(--acento); padding: 14px 16px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px;
}

/* ---------- Estructura general del panel (AUT-019 ronda 2 -- corrección: el primer intento solo cambió colores,
   sin tocar la composición; esto SÍ la cambia). Identidad, acciones, navegación y contenido son CUATRO piezas
   independientes de un mismo grid, nunca marcado duplicado para cada ancho: en móvil (por defecto) se ven casi
   como antes (identidad+acciones arriba en una franja, la barra de secciones horizontal debajo, el contenido al
   final). En escritorio (≥900px) la navegación se convierte en una barra lateral izquierda permanente junto con
   la identidad, y las acciones suben a una franja angosta arriba a la derecha del contenido -- ver el resto de
   ".envoltura-panel" en la media query de abajo. */
.envoltura-panel { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "identidad acciones" "nav nav" "principal principal"; min-height: 100vh; }
.envoltura-panel > .cabecera { grid-area: identidad; }
.envoltura-panel > .acciones-cabecera { grid-area: acciones; }
.envoltura-panel > nav.pestanas { grid-area: nav; }
.envoltura-panel > .columna-principal { grid-area: principal; min-width: 0; }

/* ---------- Insignias de ESTADO (AUT-017): mismo componente ".etiqueta", con un color que se reconoce de un
   vistazo en toda la pantalla, siempre además del texto (nunca solo color: quien no distingue colores igual lee
   "Pagada"/"Vencida"…). Los nombres coinciden con los valores reales que ya devuelve la API (EstadoCuenta y
   Condicion, sin inventar ningún estado nuevo). */
.etiqueta.estado-pagada, .etiqueta.condicion-contado { background: var(--ok-fondo); color: var(--ok); border-color: transparent; }
.etiqueta.estado-pendiente { background: var(--fondo); color: var(--suave); border-color: var(--borde); }
.etiqueta.estado-parcial { background: var(--aviso-fondo); color: var(--aviso-texto); border-color: transparent; }
.etiqueta.estado-vencida { background: var(--peligro-fondo); color: var(--peligro); border-color: transparent; }
.etiqueta.condicion-credito { background: var(--acento-fondo); color: var(--acento); border-color: transparent; }
.etiqueta.atencion { background: var(--aviso-fondo); color: var(--texto); border-color: var(--aviso-texto); font-weight: 700; }

/* ---------- Existencia baja o agotada (AUT-017): solo con datos que YA existen (existencia real, y el bulto
   configurado del propio producto para "menos de un bulto") -- nunca un umbral inventado. */
.existencia-agotada { color: var(--peligro); font-weight: 700; }
.existencia-baja { color: var(--aviso-texto); font-weight: 700; }

/* ---------- Navegación por pestañas: barra horizontal con desplazamiento táctil en móvil; la sección activa se
   distingue por color de fondo Y peso de letra (no solo un borde fino). */
nav.pestanas { display: flex; gap: 6px; padding: 10px 12px; overflow-x: auto; background: var(--tarjeta); border-bottom: 1px solid var(--borde); position: relative; }
nav.pestanas button { border: none; border-radius: 999px; background: none; color: var(--suave); font-weight: 600; padding: 10px 16px; white-space: nowrap; flex: none; }
nav.pestanas button[aria-current=page] { background: var(--acento-fondo); color: var(--acento); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { nav.pestanas button:not([aria-current=page]):hover { background: var(--fondo); color: var(--texto); } }

/* ---------- Barra lateral de escritorio (AUT-019 ronda 2): a partir de 900px de ancho ---exactamente las mismas
   secciones, el mismo botón por sección, ni una más--- la navegación deja de ser una fila horizontal y pasa a ser
   una columna fija a la izquierda, junto con la identidad de la empresa. El punto de corte (900px) deja sitio de
   sobra para la barra (260px) más un ancho útil de formulario/lista (≥620px): por debajo, todo vuelve a la franja
   horizontal de siempre (más "menú compacto", ver el resto de esta media query). */
@media (min-width: 900px) {
  .envoltura-panel {
    grid-template-columns: 260px 1fr; grid-template-rows: auto 1fr;
    grid-template-areas: "identidad acciones" "nav principal";
  }
  .envoltura-panel > .cabecera {
    border-bottom: none; border-right: 1px solid var(--borde); padding: 24px 20px 18px;
    background: linear-gradient(180deg, var(--tarjeta), var(--fondo));
  }
  .envoltura-panel > .cabecera .quien { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .envoltura-panel > .acciones-cabecera { border-bottom: 1px solid var(--borde); padding: 16px 28px; }
  .envoltura-panel > nav.pestanas {
    flex-direction: column; align-items: stretch; overflow: visible; gap: 3px; padding: 12px;
    border-right: 1px solid var(--borde); border-bottom: none; background: var(--tarjeta);
  }
  .envoltura-panel > nav.pestanas button { justify-content: flex-start; text-align: left; padding: 12px 14px; border-radius: var(--radio-chico); }
  .envoltura-panel > nav.pestanas button[aria-current=page] { box-shadow: var(--sombra-chica); }
  /* Detalle decorativo sutil (identidad cafetera): un filo cálido a la izquierda de la barra, sin imágenes. */
  .envoltura-panel > nav.pestanas::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--acento); opacity: .35; }
  .envoltura-panel > .columna-principal { display: flex; flex-direction: column; }
}

main { max-width: 880px; margin: 0 auto; padding: 20px 16px 40px; }
/* AUT-018: marca de versión al pie, para comprobar si el navegador muestra el código más reciente (ver app.js,
   VERSION_PANEL) -- discreta a propósito, nunca compite con el contenido real de la pantalla. */
footer.pie { text-align: center; padding: 8px 16px 32px; }
footer.pie .meta { font-size: .75rem; }
/* Ritmo vertical uniforme entre los bloques de una pantalla (títulos, tarjetas, listas…) y dentro de una tarjeta:
   un solo lugar en vez de repetir un margen distinto en cada pantalla (pedido explícito del encargo). */
section > * + *, .tarjeta > * + * { margin-top: 14px; }
section > h1, .tarjeta > h1 { margin-top: 0; }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lista li { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; overflow-wrap: anywhere; box-shadow: var(--sombra-chica); }
.lista .meta { color: var(--suave); font-size: .875rem; }
.vacio { text-align: center; color: var(--suave); padding: 28px 12px; border: 1px dashed var(--borde); border-radius: var(--radio); }
.opciones { display: grid; gap: 10px; }
.opciones button { text-align: left; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.qr { display: flex; justify-content: center; margin: 12px 0; }
.qr img { background: #fff; padding: 8px; border-radius: var(--radio-chico); max-width: 100%; height: auto; }
code.clave { display: block; padding: 10px; background: var(--fondo); border: 1px dashed var(--borde); border-radius: var(--radio-chico); overflow-wrap: anywhere; font-size: 1.05rem; letter-spacing: .05em; margin-bottom: 12px; }
ul.codigos { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
ul.codigos li { font-family: ui-monospace, Menlo, Consolas, monospace; padding: 8px; background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio-chico); text-align: center; }
.fila { display: flex; gap: 8px; flex-wrap: wrap; }
.fila button[aria-current=page] { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); font-weight: 600; } /* p. ej. el modo de cliente elegido, en Ventas */

/* ---------- Control "segmentado" (AUT-019 ronda 2): mismo patrón ".fila" + "aria-current", con apariencia de un
   control real (una pista con los botones dentro) en vez de una fila de botones sueltos -- para elegir el modo de
   cliente, la presentación unidad/bulto y pestañas equivalentes (Cuentas por cobrar). Ni un dato ni una opción
   nueva: el mismo grupo de botones de siempre, solo con más jerarquía visual. */
.fila.segmentado { background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 4px; gap: 4px; }
.fila.segmentado button { border: none; background: none; box-shadow: none; border-radius: calc(var(--radio-chico) - 2px); }
.fila.segmentado button[aria-current=page] { background: var(--acento); color: var(--acento-texto); box-shadow: var(--sombra-chica); }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-weight: normal; }
.check input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.solo-lectores { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 640px) {
  .cabecera { padding: 14px 24px; } nav.pestanas { padding: 8px 24px; }
  .campos-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}
details { margin: 0 0 14px; }
details summary { cursor: pointer; padding: 8px 0; min-height: 44px; }
.cifra { margin: 0 0 .5rem; font-size: 1.05rem; }
.cifra strong { font-size: 1.3rem; }
.cab-producto { justify-content: space-between; align-items: flex-start; margin-bottom: .25rem; gap: 8px; }
.cab-producto h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.lista li:has(> button.fila-producto) { padding: 0; }
button.fila-producto {
  display: flex; width: 100%; justify-content: space-between; gap: 12px; text-align: left; border: none;
  background: none; padding: 16px; border-radius: var(--radio); min-height: 56px; font-weight: normal;
}
.fila-producto .pn, .fila-producto .pd { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; gap: 2px; }
.fila-producto .pd { align-items: flex-end; text-align: right; }
.fila-producto .meta { color: var(--suave); font-size: .875rem; }
@media (hover: hover) and (pointer: fine) { button.fila-producto:hover { background: var(--fondo); } }
.pos { color: var(--ok); font-weight: 700; }
.neg { color: var(--peligro); font-weight: 700; }
@media (max-width: 420px) { button.fila-producto { flex-direction: column; } .fila-producto .pd { align-items: flex-start; text-align: left; } }
.simulacion { border: 2px solid var(--acento); }
.chat { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; max-height: 60vh; overflow-y: auto; padding: 4px; }
.burbuja { display: flex; flex-direction: column; gap: 2px; max-width: 88%; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--borde); background: var(--tarjeta); overflow-wrap: anywhere; }
.burbuja.cliente { align-self: flex-end; background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.burbuja.cliente .meta, .burbuja.cliente .quien-msg { color: inherit; opacity: .85; }
.burbuja.automatico { align-self: flex-start; }
.burbuja.propietario, .burbuja.operador { align-self: flex-start; background: var(--ok-fondo); border-color: var(--ok); }
.burbuja .quien-msg { font-size: .75rem; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; }
.texto-msg { white-space: pre-wrap; }
.burbuja .meta { font-size: .75rem; color: var(--suave); }
.aviso-chat { align-self: center; text-align: center; font-size: .875rem; color: var(--suave); background: var(--aviso-fondo); border-radius: var(--radio-chico); padding: 6px 10px; margin: 4px 0; max-width: 95%; }
.opciones-chat { margin-bottom: 12px; }
.caja-atencion { border-color: var(--aviso-texto); margin-bottom: 12px; }
.caja-atencion h2, .caja-atencion h3 { margin-top: 0; }
ul.resumen { padding-left: 1.1rem; margin: 0 0 .75rem; }
ul.resumen li { overflow-wrap: anywhere; margin-bottom: 2px; }
/* Total fijo al pie mientras se arma una venta (AUT-011): el total y la moneda quedan siempre a la vista, sobre
   todo en pantallas de teléfono donde el resto del formulario (condición, nota…) puede quedar varios scrolls más
   abajo. --area-segura-inferior es la ÚNICA fuente de verdad del área segura del dispositivo (p. ej. la barra
   inferior de un iPhone): .barra-total y .espacio-barra-total la usan LAS DOS a través de esta misma variable
   (nunca repetida a mano en cada regla) para que no se puedan desincronizar; si se desincronizaran, el final del
   formulario —incluido "Confirmar venta"— podría quedar tapado por la barra. Ver tests/estilos-movil.test.ts. */
:root { --area-segura-inferior: env(safe-area-inset-bottom, 0px); }
.barra-total {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--tarjeta); border-top: 1px solid var(--borde); padding: 12px 16px;
  padding-bottom: calc(12px + var(--area-segura-inferior));
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .12); font-size: 1rem; text-align: center;
}
.barra-total strong { font-size: 1.2rem; }
/* Mismo alto que .barra-total puede llegar a ocupar (64px de base + la misma área segura de arriba). */
.espacio-barra-total { height: calc(64px + var(--area-segura-inferior)); }

/* ---------- "Nueva venta" (AUT-019 ronda 2): tres tarjetas numeradas (1 Cliente, 2 Productos, 3 Pago y nota) en
   vez de tres tarjetas idénticas, y en escritorio un resumen fijo a la derecha con el mismo total que ya existe
   (nunca uno calculado aparte). En móvil (por defecto) es una sola columna, igual que antes, con la barra de
   total fija de siempre. */
.venta-cab { display: flex; flex-direction: column; gap: 4px; }
.tarjeta-paso { max-width: none; }
.paso-encabezado { display: flex; align-items: center; gap: 12px; }
.paso-encabezado h2 { margin: 0; }
.paso-numero {
  display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px;
  border-radius: 999px; background: var(--acento); color: var(--acento-texto); font-weight: 700; font-size: .95rem;
}
.venta-resumen { display: none; } /* visible solo en escritorio, ver media query */
.venta-confirmar { width: 100%; }
@media (min-width: 900px) {
  .venta-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
  .venta-columna-principal { min-width: 0; }
  .venta-resumen {
    display: block; position: sticky; top: 16px; background: var(--acento-fondo); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra-chica);
  }
  .venta-resumen h2 { margin-top: 0; }
  .venta-resumen .cifra { margin: 0; }
  .venta-confirmar { width: auto; }
  /* El resumen fijo de la derecha ya deja el total siempre a la vista: la barra fija de móvil no hace falta. */
  .barra-total, .espacio-barra-total { display: none; }
}


.catalogo-chat { display: block; width: min(100%, 420px); height: auto; margin: .6rem 0; border-radius: .65rem; border: 1px solid var(--borde); }
.alerta-operador { margin: 1rem 0; padding: .85rem 1rem; border: 1px solid var(--acento); border-radius: .65rem; background: color-mix(in srgb, var(--acento) 18%, transparent); font-weight: 700; }

.nav-pedidos-label { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; line-height: 1.15; }
.contador-pendientes { display: inline-flex; align-items: center; justify-content: center; min-height: 1.25rem; padding: .1rem .55rem; border-radius: 999px; background: var(--acento); color: var(--acento-texto); font-size: .72rem; font-weight: 800; white-space: nowrap; }

/* Espacio operativo de atención: conserva la identidad de cada empresa. */
main.main-atencion { width: 100%; max-width: 1800px; padding: 24px; }
.mesa-canal { font-size: .84rem; color: var(--suave); display: flex; align-items: center; gap: 8px; margin: 12px 0 20px; }
.mesa-punto { width: 8px; height: 8px; background: var(--acento); border-radius: 50%; flex: none; }
.mesa-atencion { display: grid; grid-template-columns: 260px minmax(0, 1fr); border: 1px solid var(--borde); border-radius: 18px; background: var(--tarjeta); overflow: hidden; min-height: 660px; margin-top: 18px; box-shadow: var(--sombra); }
.mesa-atencion * { min-width: 0; }
.mesa-bandeja { padding: 18px 14px; border-right: 1px solid var(--borde); max-height: 85vh; overflow-y: auto; }
.mesa-titulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mesa-titulo .etiqueta { font-size: .7rem; }
.mesa-busqueda { margin-top: 18px; }
.mesa-busqueda label, .mesa-bandeja > div > label { font-size: .8rem; color: var(--suave); }
.mesa-busqueda button { width: 100%; margin-bottom: 12px; }
.mesa-casos, .mesa-contactos { list-style: none; padding: 0; margin: 12px 0; }
.mesa-casos li + li { margin-top: 8px; }
button.mesa-caso { display: flex; flex-direction: column; align-items: stretch; width: 100%; text-align: left; gap: 7px; padding: 14px 12px; background: transparent; border: 1px solid transparent; font-weight: 400; }
button.mesa-caso:hover { background: var(--fondo); }
button.mesa-caso[aria-current=true] { background: var(--acento-fondo); border-color: var(--acento); box-shadow: inset 3px 0 var(--acento); }
.mesa-caso .etiqueta { align-self: flex-start; white-space: normal; }
.mesa-extracto { font-size: .83rem; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mesa-motivo { color: var(--peligro); font-size: .85rem; }
.mesa-bienvenida { align-self: center; text-align: center; max-width: 480px; margin: 50px auto; padding: 24px; color: var(--suave); }
.mesa-bienvenida h2 { color: var(--texto); }
.mesa-icono { display: grid; place-items: center; font-size: 2.2rem; width: 76px; height: 76px; border-radius: 24px; background: var(--acento-fondo); color: var(--acento); margin: 0 auto 24px; }
.mesa-detalle { display: grid; grid-template-columns: minmax(0, 1fr) 315px; grid-template-rows: auto 1fr; min-height: 660px; }
.mesa-cabecera { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--borde); }
.mesa-cabecera h2 { font-size: 1.2rem; }
.mesa-responsable { color: var(--acento); font-size: .8rem; margin-left: auto; }
.mesa-volver { display: none; }
.mesa-conversacion { display: flex; flex-direction: column; min-height: 0; background: var(--fondo); }
.mesa-chat { flex: 1; padding: 22px; margin: 0; max-height: 68vh; min-height: 300px; overscroll-behavior: contain; scroll-padding-bottom: 12px; }
.mesa-chat .burbuja { max-width: 91%; overflow-wrap: anywhere; }
.mesa-chat .aviso-chat { background: transparent; font-size: .76rem; }
.mesa-chat .catalogo-chat { width: 125px; max-width: 100%; }
.mesa-chat .quien-msg { font-size: .72rem; letter-spacing: .04em; }
.mesa-contexto { border-left: 1px solid var(--borde); max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; }
.mesa-ficha { padding: 20px 18px; border-bottom: 1px solid var(--borde); overflow-wrap: anywhere; }
.mesa-ficha h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .07em; color: var(--suave); margin-bottom: 15px; }
.mesa-datos { margin: 16px 0; }
.mesa-datos dt { color: var(--suave); font-size: .78rem; margin-top: 12px; }
.mesa-datos dd { margin: 3px 0 0; font-size: .9rem; }
.mesa-ficha .lista li { padding: 12px; }
.mesa-ficha .tarjeta { padding: 12px; box-shadow: none; margin-top: 12px; }
.mesa-ficha .campos-2 { grid-template-columns: 1fr; }
.mesa-ficha summary { padding: 12px 0; min-height: 44px; cursor: pointer; font-size: .88rem; }
.mesa-contactos li { border-bottom: 1px solid var(--borde); padding: 12px 0; }
.mesa-total, .mesa-saldo { display: flex; flex-direction: column; gap: 5px; background: var(--acento-fondo); padding: 14px; border-radius: 10px; margin: 12px 0; }
.mesa-total strong, .mesa-saldo strong { font-size: 1.3rem; }
.mesa-total > span, .mesa-saldo > span { font-size: .8rem; }
.mesa-privado { font-size: .75rem; color: var(--suave); }
.mesa-alerta-interna { background: var(--aviso-fondo); padding: 12px; border-radius: 10px; font-size: .85rem; }
.mesa-alerta-interna ul { padding-left: 18px; }
.mesa-factura { border-top: 1px solid var(--borde); margin-top: 12px; }
.mesa-compositor, .mesa-conversacion > .caja-atencion { border: 0; border-top: 1px solid var(--borde); border-radius: 0; padding: 16px 20px; background: var(--tarjeta); margin: 0; box-shadow: none; }
.mesa-conversacion > .caja-atencion h2 { font-size: 1rem; }
.mesa-conversacion > .caja-atencion .resumen { display: none; } /* el mismo motivo está en Pedido */
.mesa-tabs { display: none; }
@media (max-width: 1490px) {
  .mesa-atencion { grid-template-columns: 235px minmax(0, 1fr); }
  .mesa-detalle { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .mesa-tabs { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
  .mesa-tabs button { flex: 1; padding: 8px; }
  .mesa-tabs button[aria-pressed=true] { background: var(--acento-fondo); border-color: var(--acento); }
  .mesa-contexto { border-left: 0; }
  .mesa-atencion[data-panel=chat] .mesa-contexto,
  .mesa-atencion:not([data-panel=chat]) .mesa-conversacion { display: none; }
  .mesa-atencion:not([data-panel=cliente]) .mesa-cliente,
  .mesa-atencion:not([data-panel=pedido]) .mesa-pedido,
  .mesa-atencion:not([data-panel=facturas]) .mesa-facturas { display: none; }
}
@media (max-width: 780px) {
  main.main-atencion { padding: 16px 10px 24px; }
  .mesa-atencion { grid-template-columns: minmax(0, 1fr); min-height: 450px; border-radius: 12px; }
  .mesa-bandeja { border-right: 0; max-height: none; }
  .mesa-atencion.con-caso .mesa-bandeja { display: none; }
  .mesa-bienvenida { display: none; }
  .mesa-detalle { min-height: 500px; }
  .mesa-volver { display: block; flex-basis: 100%; text-align: left; }
  .mesa-cabecera { padding: 12px; gap: 8px; }
  .mesa-cabecera h2 { font-size: 1.1rem; }
  .mesa-responsable { margin-left: 0; }
  .mesa-chat { padding: 12px; min-height: 230px; max-height: 52dvh; }
  .mesa-contexto { max-height: none; }
  .mesa-compositor, .mesa-conversacion > .caja-atencion { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .mesa-tabs { position: sticky; top: 0; background: var(--tarjeta); z-index: 1; }
}

.mesa-saldo-rapido { display: flex; flex-direction: column; background: var(--acento-fondo); padding: 10px 12px; border-radius: 9px; margin-bottom: 14px; gap: 3px; }
.mesa-saldo-rapido > span { color: var(--suave); font-size: .75rem; }
.mesa-pedido-cabecera { font-size: .85rem; padding: 7px 10px; border-radius: 8px; background: var(--acento-fondo); color: var(--texto); }
.mesa-bandeja .mesa-titulo { flex-wrap: wrap; }
@media (min-width: 781px) {
  .mesa-atencion { height: max(560px, calc(100dvh - 360px)); min-height: 0; }
  .mesa-detalle { min-height: 0; height: 100%; }
  .mesa-bandeja, .mesa-contexto { max-height: none; min-height: 0; height: 100%; }
  .mesa-chat { min-height: 100px; max-height: none; }
  .mesa-conversacion > .caja-atencion { max-height: 55%; overflow-y: auto; }
  .mesa-ficha { padding: 16px; }
}