/*
 * Sistema de diseño del panel de Oriana.
 *
 * Se carga DESPUÉS de los estilos del index.html: reutiliza sus variables
 * (--verde, --superficie, --borde, --texto…) y afina componentes, estados y
 * movimiento en modo claro y oscuro. Todo lo nuevo vive acá para cambiar el
 * diseño desde un solo lugar.
 */

:root {
  /* Movimiento: rápido y sutil */
  --dur-rapida: 120ms;
  --dur: 180ms;
  --dur-lenta: 280ms;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --curva-salida: cubic-bezier(0.4, 0, 1, 1);

  /* Foco visible y accesible */
  --anillo-foco: 0 0 0 3px var(--verde-brillo);

  /* Estados de pedidos: el mismo color en todo el panel */
  --estado-pendiente-fondo: var(--ambar-claro);
  --estado-pendiente-texto: #b45309;
  --estado-programado-fondo: var(--violeta-claro);
  --estado-programado-texto: var(--violeta-hover);
  --estado-camino-fondo: var(--azul-claro);
  --estado-camino-texto: #1d4ed8;
  --estado-entregado-fondo: var(--verde-claro);
  --estado-entregado-texto: var(--verde-oscuro);
  --estado-cancelado-fondo: var(--rojo-claro);
  --estado-cancelado-texto: #b91c1c;

  --radio-control: 10px;
  --esqueleto-base: var(--gris-100);
  --esqueleto-brillo: var(--gris-200);
}

:root[data-theme="dark"] {
  --estado-pendiente-texto: #fcd34d;
  --estado-programado-texto: #c4b5fd;
  --estado-camino-texto: #93c5fd;
  --estado-entregado-texto: #6ee7b7;
  --estado-cancelado-texto: #fca5a5;
  --esqueleto-base: #172033;
  --esqueleto-brillo: #1f2a3d;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body {
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: none;
  box-shadow: var(--anillo-foco);
  border-radius: var(--radio-control);
}

::selection {
  background: var(--verde-brillo);
}

/* Barras de desplazamiento discretas */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--borde-hover) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--borde-hover);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* ── Transición al cambiar de tema ──────────────────────────────────────── */
html.cambiando-tema,
html.cambiando-tema * {
  transition: background-color var(--dur-lenta) var(--curva), border-color var(--dur-lenta) var(--curva), color var(--dur-lenta) var(--curva) !important;
}

/* ── Botones ──────────────────────────────────────────────────────────── */
button,
.boton {
  transition: background-color var(--dur) var(--curva), border-color var(--dur) var(--curva),
    color var(--dur) var(--curva), transform var(--dur-rapida) var(--curva), box-shadow var(--dur) var(--curva);
}
button:active:not(:disabled),
.boton:active {
  transform: scale(0.97);
}
button.accion {
  border-radius: var(--radio-control);
  letter-spacing: 0.1px;
}
button.accion:hover:not(:disabled) {
  transform: translateY(-1px);
}
button.suave,
.btn-ghost {
  border-radius: var(--radio-control);
}

/* ── Campos ───────────────────────────────────────────────────────────── */
input,
textarea,
select {
  transition: border-color var(--dur) var(--curva), box-shadow var(--dur) var(--curva), background-color var(--dur) var(--curva);
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--verde) !important;
  box-shadow: var(--anillo-foco) !important;
  outline: none;
}

/* ── Tarjetas ─────────────────────────────────────────────────────────── */
.tarjeta {
  transition: border-color var(--dur) var(--curva), box-shadow var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.tarjeta:hover {
  border-color: var(--borde-hover);
}
.tarjeta.elevable:hover,
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}

/* ── Pastillas y estados ──────────────────────────────────────────────── */
.pastilla {
  transition: background-color var(--dur-lenta) var(--curva), color var(--dur-lenta) var(--curva), border-color var(--dur-lenta) var(--curva);
}
.estado-pendiente { background: var(--estado-pendiente-fondo) !important; color: var(--estado-pendiente-texto) !important; border-color: transparent !important; }
.estado-programado { background: var(--estado-programado-fondo) !important; color: var(--estado-programado-texto) !important; border-color: transparent !important; }
.estado-en_camino { background: var(--estado-camino-fondo) !important; color: var(--estado-camino-texto) !important; border-color: transparent !important; }
.estado-entregado { background: var(--estado-entregado-fondo) !important; color: var(--estado-entregado-texto) !important; border-color: transparent !important; }
.estado-cancelado,
.estado-devuelto { background: var(--estado-cancelado-fondo) !important; color: var(--estado-cancelado-texto) !important; border-color: transparent !important; }

/* Insignia que late (atención humana pendiente) */
.late {
  animation: or-latido 1.8s var(--curva) infinite;
}
@keyframes or-latido {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ── Tablas ───────────────────────────────────────────────────────────── */
table tbody tr {
  transition: background-color var(--dur-rapida) var(--curva);
}
table tbody tr:hover {
  background: var(--hover);
}

/* ── Menú lateral (escritorio) ────────────────────────────────────────── */
nav button {
  position: relative;
  transition: background-color var(--dur) var(--curva), color var(--dur) var(--curva), transform var(--dur-rapida) var(--curva);
}
nav button:hover:not([aria-selected="true"]) {
  transform: translateX(2px);
}
nav button[aria-selected="true"] {
  background: var(--verde-claro) !important;
  color: var(--verde-oscuro) !important;
  box-shadow: none !important;
}
nav button[aria-selected="true"] svg {
  stroke: var(--verde-oscuro) !important;
  opacity: 1;
}
.nav-grupo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--texto-muted);
  padding: 14px 13px 4px;
  white-space: nowrap;
  user-select: none;
}
.nav-grupo:first-child { padding-top: 4px; }
@media (max-width: 919px) {
  /* En la barra horizontal de tablets el título de grupo sobra */
  nav .nav-grupo { display: none; }
}

/* Cajón del celular */
.drawer-grupo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--texto-muted);
  padding: 14px 16px 4px;
}
.drawer-item {
  transition: background-color var(--dur) var(--curva), color var(--dur) var(--curva);
}

/* ── Vistas: entrada suave al cambiar de sección ──────────────────────── */
main > section:not([hidden]) {
  animation: or-entrar var(--dur-lenta) var(--curva);
}
@keyframes or-entrar {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ── Modales ──────────────────────────────────────────────────────────── */
.modal-backdrop:not([hidden]) {
  animation: or-fundido var(--dur) var(--curva);
}
.modal-backdrop:not([hidden]) .modal-card {
  animation: or-modal var(--dur-lenta) var(--curva);
}
.modal-card {
  border-radius: var(--radio-lg);
}
@keyframes or-fundido {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes or-modal {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ── Avisos ───────────────────────────────────────────────────────────── */
.aviso {
  animation: or-entrar var(--dur-lenta) var(--curva);
}

/* Avisos flotantes (reemplazan a los alert) */
#or-avisos {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  /* Arriba a la derecha: abajo está la mascota de Oriana */
  top: calc(68px + env(safe-area-inset-top, 0px));
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}
.or-aviso {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borde-hover);
  box-shadow: var(--sombra-alta);
  font-size: 13.5px;
  line-height: 1.45;
  animation: or-aviso-entra var(--dur-lenta) var(--curva);
  white-space: pre-line;
}
.or-aviso.saliendo {
  animation: or-aviso-sale var(--dur) var(--curva-salida) forwards;
}
.or-aviso .or-aviso-icono {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  margin-top: 1px;
}
.or-aviso.ok .or-aviso-icono { background: var(--verde-claro); color: var(--verde-oscuro); }
.or-aviso.error .or-aviso-icono { background: var(--rojo-claro); color: var(--rojo); }
.or-aviso.info .or-aviso-icono { background: var(--azul-claro); color: var(--azul); }
.or-aviso.error { border-color: var(--rojo-borde); }
.or-aviso button {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--texto-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 0 0 6px;
}
@keyframes or-aviso-entra {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes or-aviso-sale {
  to { opacity: 0; transform: translateY(-8px) scale(0.98); }
}

/* ── Carga con esqueleto ──────────────────────────────────────────────── */
.esqueleto {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--esqueleto-base) 25%, var(--esqueleto-brillo) 50%, var(--esqueleto-base) 75%);
  background-size: 200% 100%;
  animation: or-brillo 1.2s linear infinite;
}
@keyframes or-brillo {
  to { background-position: -200% 0; }
}

/* ── Pantalla Hoy ─────────────────────────────────────────────────────── */
.hoy-encabezado {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.hoy-encabezado h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
.hoy-encabezado p { margin: 2px 0 0; color: var(--texto-muted); font-size: 13.5px; }
.hoy-tareas {
  display: grid;
  gap: 2px;
}
.hoy-tarea {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  transition: background-color var(--dur) var(--curva);
}
.hoy-tarea:hover { background: var(--hover); }
.hoy-tarea .hoy-icono {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.hoy-tarea .hoy-texto { flex: 1; min-width: 0; }
.hoy-tarea .hoy-texto b { display: block; font-size: 14px; }
.hoy-tarea .hoy-texto span { font-size: 12.5px; color: var(--texto-muted); }
.hoy-tarea.listo { opacity: 0.6; }
.hoy-icono.despachar { background: var(--azul-claro); color: var(--azul); }
.hoy-icono.programados { background: var(--violeta-claro); color: var(--violeta); }
.hoy-icono.atencion { background: var(--rojo-claro); color: var(--rojo); }
.hoy-icono.stock { background: var(--ambar-claro); color: var(--ambar); }
.hoy-icono.chats { background: var(--verde-claro); color: var(--verde-oscuro); }

/* ── Respeto a quien desactiva las animaciones ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
 * Capa 2 — diseño fresco y profesional
 * ════════════════════════════════════════════════════════════════════ */
:root {
  --radio-tarjeta: 18px;
  --sombra-suave: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px -6px rgba(15, 23, 42, 0.08);
  --sombra-elevada: 0 2px 4px rgba(15, 23, 42, 0.04), 0 16px 32px -12px rgba(15, 23, 42, 0.18);
  --marca-degradado: linear-gradient(135deg, #10b981 0%, #0ea5a4 55%, #6366f1 130%);
  --brillo-fondo-1: rgba(16, 185, 129, 0.10);
  --brillo-fondo-2: rgba(139, 92, 246, 0.08);
}
:root[data-theme="dark"] {
  --sombra-suave: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px -8px rgba(0, 0, 0, 0.6);
  --sombra-elevada: 0 2px 6px rgba(0, 0, 0, 0.35), 0 20px 40px -14px rgba(0, 0, 0, 0.75);
  --brillo-fondo-1: rgba(16, 185, 129, 0.08);
  --brillo-fondo-2: rgba(139, 92, 246, 0.10);
}

/* Fondo con dos luces muy suaves de marca (fijas: no se mueven al desplazar) */
body {
  background-color: var(--fondo);
  background-image:
    radial-gradient(900px 520px at 100% -10%, var(--brillo-fondo-2), transparent 60%),
    radial-gradient(700px 480px at -10% 110%, var(--brillo-fondo-1), transparent 60%);
  background-attachment: fixed;
}

/* Encabezado de vidrio con una línea de marca */
header {
  backdrop-filter: saturate(160%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px) !important;
  border-bottom: 1px solid transparent !important;
  background-image: linear-gradient(var(--superficie-header), var(--superficie-header)),
    linear-gradient(90deg, transparent, var(--verde-borde), var(--violeta-borde), transparent) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}

/* Menú lateral: indicador animado en la sección activa y scroll fluido */
@media (min-width: 920px) {
  nav {
    background: color-mix(in srgb, var(--superficie-sidebar) 82%, transparent) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px 10px 40px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--borde) transparent;
  }
  nav::-webkit-scrollbar {
    display: block !important;
    width: 5px;
  }
  nav::-webkit-scrollbar-track {
    background: transparent;
  }
  nav::-webkit-scrollbar-thumb {
    background: var(--borde);
    border-radius: 4px;
  }
  nav::-webkit-scrollbar-thumb:hover {
    background: var(--texto-muted);
  }
  nav button {
    border-radius: 12px !important;
    padding: 9px 12px 9px 16px !important;
    font-weight: 600;
  }
  nav button::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 4px;
    height: 0;
    border-radius: 4px;
    background: var(--marca-degradado);
    transform: translateY(-50%);
    transition: height var(--dur-lenta) var(--curva);
  }
  nav button[aria-selected="true"]::before { height: 60%; }
  nav button[aria-selected="true"] {
    background: linear-gradient(90deg, var(--verde-claro), transparent) !important;
  }
}

/* Tarjetas: superficie limpia, sombra en capas, elevación al pasar */
.tarjeta {
  border-radius: var(--radio-tarjeta) !important;
  box-shadow: var(--sombra-suave);
  border-color: var(--borde-suave);
}
.tarjeta:hover {
  box-shadow: var(--sombra-elevada);
}
.tarjeta[onclick]:hover,
.tarjeta.kpi:hover {
  transform: translateY(-3px);
}

/* Títulos de sección más editoriales */
.seccion-header h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px;
}

/* Botón principal: degradado de marca con un brillo que lo recorre */
button.accion {
  background: var(--marca-degradado) !important;
  background-size: 140% 140% !important;
  border: 0 !important;
  color: #fff !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 16px -6px rgba(16, 185, 129, 0.55);
}
button.accion::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
button.accion:hover:not(:disabled)::after {
  transform: translateX(120%);
  transition: transform 650ms var(--curva);
}
button.accion:hover:not(:disabled) {
  box-shadow: 0 10px 22px -8px rgba(16, 185, 129, 0.65);
}

/* Botones secundarios con borde fino y relleno al pasar */
button.suave {
  border-color: var(--borde) !important;
  background: var(--superficie) !important;
}
button.suave:hover:not(:disabled) {
  border-color: var(--verde-borde) !important;
  background: var(--verde-claro) !important;
  color: var(--verde-oscuro) !important;
}

/* Indicadores de Inicio */
.tarjeta.kpi {
  position: relative;
  overflow: hidden;
}
.tarjeta.kpi::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brillo-fondo-1), transparent 70%);
  pointer-events: none;
  transition: transform var(--dur-lenta) var(--curva);
}
.tarjeta.kpi:hover::after { transform: scale(1.25); }
.tarjeta.kpi.entrada {
  animation: or-entrar-arriba 420ms var(--curva) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.kpi-valor {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
@keyframes or-entrar-arriba {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* "Por hacer hoy": las tareas entran escalonadas */
.hoy-tarea {
  animation: or-entrar-arriba 360ms var(--curva) both;
}
.hoy-tarea:nth-child(2) { animation-delay: 60ms; }
.hoy-tarea:nth-child(3) { animation-delay: 120ms; }
.hoy-tarea:nth-child(4) { animation-delay: 180ms; }
.hoy-tarea:nth-child(5) { animation-delay: 240ms; }
.hoy-tarea .hoy-icono { transition: transform var(--dur) var(--curva); }
.hoy-tarea:hover .hoy-icono { transform: scale(1.08) rotate(-4deg); }
#hoy-por-hacer {
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--verde-claro) 55%, transparent), transparent 55%);
}

/* Pastillas más finas */
.pastilla {
  font-weight: 650;
  letter-spacing: 0.1px;
}

/* Modales con fondo de vidrio */
.modal-backdrop {
  background: color-mix(in srgb, var(--gris-900) 55%, transparent) !important;
  backdrop-filter: blur(6px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(120%) !important;
}
.modal-card {
  box-shadow: var(--sombra-elevada) !important;
  border-color: var(--borde-suave) !important;
}

/* Tablas: encabezado discreto y fijo */
table thead th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--texto-muted);
  position: sticky;
  top: 0;
  background: var(--superficie);
  z-index: 1;
}

/* Celular: la tarjeta del asistente apila el texto y el botón */
@media (max-width: 600px) {
  #tarjeta-asistente .fila {
    flex-wrap: wrap;
    gap: 12px;
  }
  #tarjeta-asistente .fila > * {
    flex: 1 1 100%;
  }
}

/* ── Pedidos: filtros rápidos ─────────────────────────────────────────── */
.chips-filtro {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}
.chip-filtro {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-secundario);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.chip-filtro span {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--hover);
  color: var(--texto-muted);
  font-size: 11.5px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur) var(--curva), color var(--dur) var(--curva);
}
.chip-filtro:hover { border-color: var(--verde-borde); color: var(--texto); }
.chip-filtro.activo {
  background: var(--texto);
  border-color: var(--texto);
  color: var(--fondo);
}
.chip-filtro.activo span {
  background: color-mix(in srgb, var(--fondo) 22%, transparent);
  color: var(--fondo);
}
#lista-pedidos-filas tr[data-pedido-id] { cursor: pointer; }
#lista-pedidos-filas tr[data-pedido-id]:not([hidden]) {
  animation: or-entrar var(--dur) var(--curva);
}

/* ── Pedidos: detalle al costado ──────────────────────────────────────── */
#detalle-pedido .detalle-fondo {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: color-mix(in srgb, var(--gris-900) 40%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-lenta) var(--curva);
}
#detalle-pedido .detalle-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1101;
  width: min(420px, 100vw);
  background: var(--superficie);
  border-left: 1px solid var(--borde);
  box-shadow: var(--sombra-elevada);
  padding: calc(18px + env(safe-area-inset-top, 0px)) 20px calc(18px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateX(104%);
  transition: transform var(--dur-lenta) var(--curva);
}
#detalle-pedido.abierto .detalle-fondo { opacity: 1; pointer-events: auto; }
#detalle-pedido.abierto .detalle-panel { transform: none; }
.detalle-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.detalle-cabecera .pastilla { margin: 6px 6px 0 0; }
.detalle-orden { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 15px; }
.detalle-bloque {
  border: 1px solid var(--borde-suave);
  border-radius: 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--superficie-hover) 45%, transparent);
}
.detalle-cliente { font-weight: 800; font-size: 16px; }
.detalle-tel { color: var(--verde); font-weight: 600; text-decoration: none; font-size: 13.5px; }
.detalle-dir { color: var(--texto-muted); font-size: 13px; margin-top: 4px; }
.detalle-subtitulo { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--texto-muted); margin-bottom: 6px; }
.detalle-fila { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 3px 0; }
.detalle-fila span { color: var(--texto-secundario); }
.detalle-total { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borde); font-size: 15px; }
.detalle-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.detalle-acciones button { flex: 1 1 calc(50% - 4px); justify-content: center; }

/* Con el detalle abierto, la mascota y su globo se apartan (si no, tapan los botones) */
body.detalle-abierto #asistente-burbuja-flotante,
body.detalle-abierto #asistente-bocadillo-guia,
body:has(.modal-backdrop:not([hidden])) #asistente-burbuja-flotante,
body:has(.modal-backdrop:not([hidden])) #asistente-bocadillo-guia {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva);
}

/* ── Programar entrega ────────────────────────────────────────────────── */
.programar-card { max-width: 460px !important; }
.programar-atajos {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}
.programar-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  font-family: inherit;
  cursor: pointer;
}
.programar-dia span { font-size: 10.5px; color: var(--texto-muted); text-transform: capitalize; white-space: nowrap; }
.programar-dia b { font-size: 17px; font-variant-numeric: tabular-nums; }
.programar-dia:hover { border-color: var(--violeta-borde); }
.programar-dia.activo {
  background: var(--violeta-claro);
  border-color: var(--violeta);
  transform: translateY(-2px);
}
.programar-dia.activo span { color: var(--violeta); }
.programar-campo { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--texto-secundario); }
.programar-campo input { width: 100%; }
.programar-resumen {
  margin: 14px 0 10px;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--violeta-claro) 60%, transparent);
  display: grid;
  gap: 10px;
  min-height: 48px;
  animation: or-entrar var(--dur) var(--curva);
}
.programar-linea { display: flex; align-items: center; gap: 10px; }
.programar-linea small { display: block; font-size: 11.5px; color: var(--texto-muted); }
.programar-linea b { font-size: 14px; }
.programar-icono {
  width: 32px; height: 32px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex: none;
  background: var(--superficie);
}
.programar-avanzado summary { cursor: pointer; font-size: 12.5px; color: var(--texto-muted); margin: 4px 0 8px; }
.programar-error { min-height: 18px; margin: 6px 0 0; font-size: 12.5px; color: var(--rojo); }
.programar-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 420px) {
  .programar-atajos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════
 * Capa 3 — movimiento en todo el panel
 * ════════════════════════════════════════════════════════════════════ */

/* Barra de progreso arriba mientras se espera al servidor */
#or-progreso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100000;
  pointer-events: none;
  opacity: 0;
  background: var(--marca-degradado);
  transform-origin: left center;
  transform: scaleX(0);
}
#or-progreso.activa {
  opacity: 1;
  animation: or-progreso 2.4s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}
#or-progreso.terminando {
  opacity: 0;
  transform: scaleX(1);
  transition: opacity 300ms ease 80ms, transform 160ms ease;
}
@keyframes or-progreso {
  from { transform: scaleX(0); }
  to { transform: scaleX(0.85); }
}

/* Pestañas con indicador deslizante */
.subnav { position: relative; }
.subnav > button { position: relative; z-index: 1; }
.subnav.con-indicador > button[aria-selected="true"] {
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
}
.subnav-indicador {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  border-radius: 9px;
  background: var(--marca-degradado);
  box-shadow: 0 4px 12px -4px rgba(16, 185, 129, 0.55);
  transition: transform 320ms var(--curva), width 320ms var(--curva), height 320ms var(--curva);
  pointer-events: none;
}

/* Tarjetas que aparecen al desplazarse (solo donde el navegador lo soporta).
   Usa "translate" (no "transform") para no pisar la elevación al pasar el mouse. */
@supports (animation-timeline: view()) {
  main .tarjeta:not(.kpi) {
    animation: or-revelar linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}
@keyframes or-revelar {
  from { opacity: 0.001; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

/* Mensajes del chat: entran desde su lado */
.wa-burbuja { animation: or-burbuja 220ms var(--curva) both; }
.wa-burbuja.saliente { transform-origin: bottom right; }
.wa-burbuja.entrante { transform-origin: bottom left; }
@keyframes or-burbuja {
  from { opacity: 0; transform: scale(0.94) translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Etiquetas y filtros con respuesta al pasar el mouse */
.chip-tag,
.badge-filtro,
button.pastilla {
  transition: transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva), filter var(--dur) var(--curva);
}
.chip-tag:hover,
.badge-filtro:hover,
button.pastilla:hover {
  transform: translateY(-1px);
  box-shadow: var(--sombra-suave);
}

/* Íconos de estados vacíos que flotan suavemente */
td[colspan] > div:first-child:not(:has(*)) {
  display: inline-block;
  animation: or-flotar 3.2s ease-in-out infinite;
}
@keyframes or-flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Botones de icono: giro breve al pasar */
.btn-ghost svg,
.modal-close {
  transition: transform var(--dur) var(--curva);
}
.modal-close:hover { transform: rotate(90deg); }

/* Selector de tema: el ícono gira al cambiar */
[data-boton-tema] svg { transition: transform 500ms var(--curva); }
[data-boton-tema]:active svg { transform: rotate(180deg); }

/* Avatares y fotos de producto: leve zoom al pasar */
main img:not(.isotipo img) {
  transition: transform var(--dur-lenta) var(--curva);
}
main tr:hover img,
main .tarjeta:hover img {
  transform: scale(1.04);
}

/* ── Logística: centro de despacho ────────────────────────────────────── */
.centro-despacho {
  margin: 0 !important;
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--azul-claro) 70%, transparent), color-mix(in srgb, var(--verde-claro) 50%, transparent) 70%);
}
.centro-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.centro-cabecera > div > b { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; }
.centro-paqueterias { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.centro-chip {
  font-size: 11.5px;
  font-weight: 650;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--borde);
  color: var(--texto-muted);
  background: var(--superficie);
}
.centro-chip.activa { color: var(--verde-oscuro); border-color: var(--verde-borde); background: var(--verde-claro); }
.centro-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.centro-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.centro-cifra {
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: or-entrar-arriba 360ms var(--curva) both;
  transition: transform var(--dur) var(--curva), box-shadow var(--dur) var(--curva);
}
.centro-cifra:nth-child(2) { animation-delay: 60ms; }
.centro-cifra:nth-child(3) { animation-delay: 120ms; }
.centro-cifra:hover { transform: translateY(-2px); box-shadow: var(--sombra-suave); }
.centro-cifra span { font-size: 12px; font-weight: 650; color: var(--texto-muted); }
.centro-cifra b { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.centro-cifra small { font-size: 12px; color: var(--texto-muted); }
.centro-cifra.despachar b { color: var(--azul); }
.centro-cifra.programados b { color: var(--violeta); }
.centro-cifra.camino b { color: var(--verde); }

/* Tarjetas de cada paquetería en el resumen: elevación al pasar */
#sub-logistica-resumen .tarjeta:not(.centro-despacho):hover { transform: translateY(-3px); }

/* ── Conversaciones: etiquetas WA compactas ─────────────────────────────── */
#barra-filtro-etiquetas{gap:6px}
.etiqueta-filtro{--tono:var(--verde);display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--tono) 35%,transparent);background:color-mix(in srgb,var(--tono) 10%,transparent);color:var(--texto);
  transition:background var(--dur-rapida) var(--curva),transform var(--dur-rapida) var(--curva)}
.etiqueta-filtro:hover{transform:translateY(-1px);background:color-mix(in srgb,var(--tono) 18%,transparent)}
.etiqueta-filtro b{font-size:11px;opacity:.7;font-weight:700}
.etiqueta-filtro .etiqueta-punto{width:7px;height:7px;border-radius:50%;background:var(--tono)}
.etiqueta-filtro.activa{background:var(--tono);border-color:var(--tono);color:#fff}
.etiqueta-filtro.activa .etiqueta-punto{background:#fff}
.etiqueta-filtro.activa b{opacity:.9}
.etiqueta-mas{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;cursor:pointer;border:1px dashed var(--borde);background:transparent;color:var(--texto-secundario)}
.etiqueta-mas:hover{border-color:var(--verde);color:var(--verde)}

/* Menú móvil abierto: la mascota no tapa los ítems */
body:has(#drawer-movil.abierto) #asistente-burbuja-flotante,
body:has(#drawer-movil.abierto) #asistente-bocadillo-guia{display:none!important}

/* ── Capa móvil: grillas en línea y tablas sueltas ──────────────────────── */
@media (max-width:640px){
  main [style*="minmax(300px"],main [style*="minmax(320px"],main [style*="minmax(380px"],main [style*="minmax(440px"],
  main [style*="grid-template-columns: 290px"],main [style*="grid-template-columns: 240px"],
  main [style*="grid-template-columns: 2fr 1fr 1fr"],main [style*="repeat(3, 1fr)"],main [style*="grid-template-columns:1fr 1fr 1fr"],
  .modal-card [style*="minmax(300px"],.modal-card [style*="minmax(320px"],.modal-card [style*="repeat(3, 1fr)"]{
    grid-template-columns:minmax(0,1fr)!important}
  main [style*="min-height:560px"]{min-height:0!important}
  main .tarjeta>table,main .tarjeta>div>table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  main .tarjeta{min-width:0}
  main img,main video,main iframe{max-width:100%}
}

/* ── Capa móvil: pestañas deslizables y tablas como tarjetas ────────────── */
@media (max-width:640px){
  .subnav{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .subnav::-webkit-scrollbar{display:none}
  .subnav>button{flex:0 0 auto!important;white-space:nowrap!important;scroll-snap-align:start}

  table.tabla-tarjetas,table.tabla-tarjetas tbody{display:block;min-width:0!important;width:100%}
  table.tabla-tarjetas thead{display:none}
  table.tabla-tarjetas tr:has(td + td){display:block;margin:0 0 12px;padding:4px 14px 6px;border:1px solid var(--borde);
    border-radius:14px;background:var(--superficie);box-shadow:var(--sombra-suave)}
  table.tabla-tarjetas tr:has(td + td) td{display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:9px 0!important;border-bottom:1px solid var(--borde);text-align:right!important;white-space:normal!important;width:auto!important}
  table.tabla-tarjetas tr:has(td + td) td:last-child{border-bottom:0}
  table.tabla-tarjetas tr:has(td + td) td[data-etiqueta]::before{content:attr(data-etiqueta);flex:0 0 36%;text-align:left;
    font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--texto-muted)}
  table.tabla-tarjetas tr:has(td + td) td[data-etiqueta=""]::before{content:none}
  table.tabla-tarjetas tr:not(:has(td + td)) td{display:block;text-align:center}
  main .tabla-contenedor:has(table.tabla-tarjetas){overflow:visible;border:0;background:transparent;box-shadow:none}
}
@media (max-width:640px){
  #panel main .grilla-kpi.grilla-kpi{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  #panel main .grilla-kpi>*{min-width:0;padding:12px!important}
  main .grilla-kpi>* [style*="font-size:26px"],main .grilla-kpi>* [style*="font-size: 26px"],main .grilla-kpi>* [style*="font-size:28px"]{font-size:21px!important}
  main .grilla-kpi>:last-child:nth-child(odd){grid-column:1/-1}
}
/* Barras de filtros (3+ desplegables juntos): grilla de dos columnas en el teléfono */
@media (max-width:640px){
  #panel main .fila:has(> select ~ select ~ select){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
  #panel main .fila:has(> select ~ select ~ select)>*{width:100%!important;max-width:none!important;min-width:0!important;margin:0!important}
  #panel main .fila:has(> select ~ select ~ select)>:is(div:has(input),input,button:last-child){grid-column:1/-1}
  #panel main .fila:has(> select ~ select ~ select)>div:has(select){display:block!important}
  #panel main .fila:has(> select ~ select ~ select) select{width:100%!important}
}

/* ── Capa móvil: modales como hoja inferior ─────────────────────────────── */
@media (max-width:640px){
  .modal-backdrop{align-items:flex-end!important;justify-content:center!important;padding:0!important}
  .modal-backdrop>.modal-card{width:100%!important;max-width:none!important;margin:0!important;
    max-height:92dvh!important;overflow-y:auto;border-radius:22px 22px 0 0!important;
    padding-bottom:calc(16px + env(safe-area-inset-bottom))!important;animation:or-hoja var(--dur-lenta) var(--curva) both}
  .modal-backdrop>.modal-card::before{content:"";display:block;width:40px;height:4px;border-radius:4px;
    background:var(--borde);margin:-6px auto 12px}
  .modal-backdrop>.modal-card .modal-footer{position:sticky;bottom:calc(-16px - env(safe-area-inset-bottom));
    background:var(--superficie);padding-top:12px;margin-top:12px;z-index:2}
}
@keyframes or-hoja{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.modal-backdrop>.modal-card{animation:none!important}}

/* ── Capa móvil: cabecera en dos filas ──────────────────────────────────── */
@media (max-width:640px){
  #panel header{display:grid!important;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;
    gap:6px 8px!important;padding:8px 10px!important;height:auto!important}
  #panel header .marca{grid-column:2;margin:0!important}
  #panel header .negocio-badge{grid-column:3;min-width:0;max-width:100%!important;justify-self:start}
  #panel header .negocio-badge .negocio{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%!important}
  #panel header .derecha{grid-column:4;display:flex!important;gap:4px!important;flex-wrap:nowrap!important;margin:0!important;width:auto!important}
  #panel header .derecha>:is(#btn-instalar-app,#creditos,#btn-header-premium,#btn-header-actualizacion){display:none!important}
  #panel header .derecha>button{width:34px;height:34px;padding:0!important}
  #panel header #contenedor-selector-linea{grid-column:1/-1;grid-row:2;width:100%!important;max-width:none!important;margin:0!important}
  #panel header #contenedor-selector-linea select{width:100%!important;padding:7px 10px!important}
}

/* ── Capa móvil: pedidos como tarjeta compacta ──────────────────────────── */
/* Arriba orden y total; después cliente y estado; destino y fecha en chico.
   Productos se ve en el detalle (tocando la tarjeta); guía y acciones quedan al pie. */
@media (max-width:640px){
  #panel #lista-pedidos-filas tr:has(td + td){display:grid!important;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"orden total" "cliente estado" "destino fecha" "guia guia" "acciones acciones";
    gap:4px 10px;padding:12px 14px!important;cursor:pointer}
  #panel #lista-pedidos-filas tr:has(td + td) td{display:block!important;border:0!important;padding:0!important;text-align:left!important}
  #panel #lista-pedidos-filas tr:has(td + td) td::before{content:none!important}
  #panel #lista-pedidos-filas tr:has(td + td) td:nth-child(1){grid-area:orden}
  #panel #lista-pedidos-filas tr:has(td + td) td:nth-child(2){grid-area:fecha;text-align:right!important;font-size:12px;color:var(--texto-muted)}
  #panel #lista-pedidos-filas tr:has(td + td) td:nth-child(3){grid-area:estado;justify-self:end}
  #panel #lista-pedidos-filas tr:has(td + td) td:nth-child(4){grid-area:cliente;min-width:0}
  #panel #lista-pedidos-filas tr:has(td + td) td:nth-child(5){grid-area:destino;font-size:12px;color:var(--texto-muted);min-width:0}
  #panel #lista-pedidos-filas tr:has(td + td) td:nth-child(6){grid-area:guia}
  #panel #lista-pedidos-filas tr:has(td + td) td:nth-child(6):not(:has(*)):empty{display:none!important}
  #panel #lista-pedidos-filas tr:has(td + td) td:nth-child(7){display:none!important}
  #panel #lista-pedidos-filas tr:has(td + td) td:nth-child(8){grid-area:total;text-align:right!important;font-weight:800;font-size:16px}
  #panel #lista-pedidos-filas tr:has(td + td) td:nth-child(9){grid-area:acciones;border-top:1px solid var(--borde)!important;padding-top:8px!important;margin-top:4px}
  #panel #lista-pedidos-filas tr:has(td + td) td:nth-child(9) .fila{justify-content:flex-start!important}
  #panel #lista-pedidos-filas tr:has(td + td) td:nth-child(5) *,#panel #lista-pedidos-filas tr:has(td + td) td:nth-child(2) *{font-size:12px!important}
}
@media (max-width:640px){
  #panel #lista-pedidos-filas tr:has(td + td) td:nth-child(3) select{font-size:12.5px!important;padding:4px 8px!important;width:auto!important}
}

/* ── Capa móvil: chat abierto a pantalla completa, como WhatsApp ─────────── */
@media (max-width:640px){
  .whatsapp-container.chat-activo-movil .whatsapp-chat-area{position:fixed!important;inset:0!important;z-index:950;
    height:100dvh!important;max-height:none!important;border-radius:0!important;margin:0!important;
    padding-bottom:env(safe-area-inset-bottom);animation:or-chat-entra var(--dur) var(--curva) both}
  body:has(.whatsapp-container.chat-activo-movil) #asistente-burbuja-flotante,
  body:has(.whatsapp-container.chat-activo-movil) #asistente-bocadillo-guia{display:none!important}
  body:has(.whatsapp-container.chat-activo-movil){overflow:hidden}
}
@keyframes or-chat-entra{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}

/* ── Tablet y laptop chica: la cabecera pasa a íconos ───────────────────── */
@media (max-width:1200px){
  #panel header .derecha{flex-wrap:nowrap!important;gap:6px!important;min-width:0}
  #panel header .derecha :is(#btn-toggle-sonido,.tema-toggle,#btn-salir,#btn-instalar-app) .tema-texto{display:none!important}
  #panel header .derecha :is(#btn-toggle-sonido,.tema-toggle,#btn-salir){width:36px;height:36px;padding:0!important;justify-content:center}
  #panel header .derecha #btn-instalar-app{padding:6px 10px!important}
}
@media (max-width:900px) and (min-width:641px){
  #panel header .derecha #creditos{display:none!important}
}

/* ── Teléfono: tamaños mínimos para el dedo y para leer ─────────────────── */
@media (max-width:640px){
  #panel main :is(button,select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color])),
  .modal-card :is(button:not(.modal-close),select,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color])){min-height:36px}
  #panel main :is(input[type=checkbox],input[type=radio]),.modal-card :is(input[type=checkbox],input[type=radio]){width:20px!important;height:20px!important;flex:0 0 auto}
  #panel main [style*="font-size:9px"],#panel main [style*="font-size: 9px"],#panel main [style*="font-size:9.5px"],
  #panel main [style*="font-size:10px"],#panel main [style*="font-size: 10px"],#panel main [style*="font-size:10.5px"],#panel main [style*="font-size: 10.5px"]{font-size:11.5px!important}
  #panel main :is(.pastilla,.badge-filtro,small){font-size:max(11.5px,1em)}
  #panel main .leaflet-control-attribution{font-size:10px}
}
/* Bloques "flex:1; min-width:NNNpx" dentro de filas que envuelven: en el teléfono ocupan todo el ancho */
@media (max-width:640px){
  #panel main :is([style*="flex:1"],[style*="flex: 1"]):is([style*="min-width:2"],[style*="min-width: 2"],[style*="min-width:3"],[style*="min-width: 3"]){
    flex:1 1 100%!important;min-width:0!important}
}

/* ── Teléfono: producto del catálogo como tarjeta compacta ──────────────── */
@media (max-width:640px){
  #panel #filas-catalogo tr:has(td + td){display:grid!important;grid-template-columns:52px minmax(0,1fr) auto;
    grid-template-areas:"foto prod precio" "foto attr stock" "estado estado acciones";gap:4px 12px;padding:12px 14px!important;align-items:center}
  #panel #filas-catalogo tr:has(td + td) td{display:block!important;border:0!important;padding:0!important;text-align:left!important;width:auto!important}
  #panel #filas-catalogo tr:has(td + td) td::before{content:none!important}
  #panel #filas-catalogo tr:has(td + td) td:nth-child(1){grid-area:foto;align-self:start}
  #panel #filas-catalogo tr:has(td + td) td:nth-child(2){grid-area:prod;min-width:0}
  #panel #filas-catalogo tr:has(td + td) td:nth-child(3){grid-area:precio;text-align:right!important}
  #panel #filas-catalogo tr:has(td + td) td:nth-child(4){grid-area:attr;min-width:0}
  #panel #filas-catalogo tr:has(td + td) td:nth-child(5){grid-area:stock;justify-self:end}
  #panel #filas-catalogo tr:has(td + td) td:nth-child(6){grid-area:estado;border-top:1px solid var(--borde)!important;padding-top:8px!important;margin-top:4px}
  #panel #filas-catalogo tr:has(td + td) td:nth-child(7){grid-area:acciones;justify-self:end;border-top:1px solid var(--borde)!important;padding-top:8px!important;margin-top:4px;display:flex!important;gap:6px;align-items:center}
}
@media (max-width:640px){
  #panel #filas-catalogo tr:has(td + td){grid-template-areas:"foto prod precio" "foto attr stock" "pie pie pie"!important}
  #panel #filas-catalogo tr:has(td + td) td:nth-child(6){grid-area:pie;justify-self:stretch}
  #panel #filas-catalogo tr:has(td + td) td:nth-child(7){grid-area:pie;justify-self:end;border-top:0!important;flex-wrap:nowrap}
  #panel #filas-catalogo tr:has(td + td) td:nth-child(7) *{margin:0!important}
}
@media (max-width:640px){
  #panel #filas-catalogo tr:has(td + td) td:nth-child(7)>button{width:auto!important;flex:0 0 auto!important;min-width:40px}
}

/* ── Teléfono: Reporte y Ranking de Pedidos ─────────────────────────────── */
@media (max-width:640px){
  #panel #kpi-reporte-margen-badge{white-space:nowrap}
  #panel #kpi-reporte-margen-badge:only-child,#panel :has(>#kpi-reporte-margen-badge){flex-wrap:wrap;gap:4px}
  #panel #sub-pedidos-reporte div:has(>input[type=date]){flex:1 1 100%}
  #panel #sub-pedidos-reporte input[type=date]{flex:1;min-width:0;width:auto!important}

  #panel #lista-ranking-filas tr:has(td + td){display:grid!important;grid-template-columns:auto 44px minmax(0,1fr) auto;
    grid-template-areas:"puesto foto prod fact" "puesto foto uni stock" "puesto foto ord ord";gap:2px 10px;padding:12px 14px!important;align-items:center}
  #panel #lista-ranking-filas tr:has(td + td) td{display:block!important;border:0!important;padding:0!important;text-align:left!important;width:auto!important}
  #panel #lista-ranking-filas tr:has(td + td) td::before{content:none!important}
  #panel #lista-ranking-filas tr:has(td + td) td:nth-child(1){grid-area:puesto;font-weight:800}
  #panel #lista-ranking-filas tr:has(td + td) td:nth-child(2){grid-area:foto}
  #panel #lista-ranking-filas tr:has(td + td) td:nth-child(3){grid-area:prod;min-width:0;font-weight:700}
  #panel #lista-ranking-filas tr:has(td + td) td:nth-child(4){grid-area:uni;font-size:12.5px}
  #panel #lista-ranking-filas tr:has(td + td) td:nth-child(5){grid-area:fact;text-align:right!important}
  #panel #lista-ranking-filas tr:has(td + td) td:nth-child(6){grid-area:ord;font-size:12px;color:var(--texto-muted)}
  #panel #lista-ranking-filas tr:has(td + td) td:nth-child(6)::after{content:" órdenes"}
  #panel #lista-ranking-filas tr:has(td + td) td:nth-child(7){grid-area:stock;justify-self:end}
}
/* Mapa de ventas: la leyenda de paqueterías no tapa medio mapa en el teléfono */
@media (max-width:640px){
  .mapa-leyenda-couriers{min-width:0!important;padding:6px 9px!important;font-size:10.5px!important;max-width:150px;opacity:.94}
  .mapa-leyenda-couriers>div:first-child{font-size:9.5px!important;margin-bottom:4px!important;padding-bottom:4px!important}
}
/* Ventanas con formulario largo: la fila final de botones queda fija abajo en el teléfono */
@media (max-width:640px){
  .modal-card form>.fila:last-child:has(button){position:sticky;bottom:-6px;z-index:2;background:var(--superficie);
    margin:14px -2px 0!important;padding:10px 2px 6px;border-top:1px solid var(--borde);flex-wrap:wrap}
  .modal-card form>.fila:last-child:has(button)>button{flex:1 1 auto}
}
@media (max-width:640px){
  body .modal-card .grilla-kpi.grilla-kpi.grilla-kpi{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body .modal-card .grilla-kpi>*{min-width:0;padding:10px 12px!important}
}

/* ── Pedidos: departamentos y entrega propia ────────────────────────────── */
.chips-departamentos{margin-top:-4px}
.chips-departamentos .chip-depto{font-size:12px}
.chip-filtro.chip-entrega-propia{margin-left:auto;background:color-mix(in srgb,var(--violeta) 14%,transparent);
  border-color:color-mix(in srgb,var(--violeta) 45%,transparent);color:var(--violeta);font-weight:700}
.chip-filtro.chip-entrega-propia:hover{background:var(--violeta);color:#fff}
.etiqueta-entrega-propia{background:color-mix(in srgb,var(--violeta) 12%,transparent);color:var(--violeta);
  border:1px solid color-mix(in srgb,var(--violeta) 35%,transparent);font-size:11px;font-weight:700;white-space:nowrap}
.entrega-propia-card{max-width:460px}
.entrega-propia-lista{display:flex;flex-direction:column;gap:6px;max-height:210px;overflow-y:auto;padding:2px}
.entrega-propia-item{display:grid;grid-template-columns:auto 1fr;gap:0 10px;padding:8px 10px;border:1px solid var(--borde);
  border-radius:10px;background:var(--superficie-hover,transparent);font-size:13px}
.entrega-propia-item small{grid-column:1/-1;color:var(--texto-muted);font-size:12px}
.aviso-programados{margin:10px 0 0;padding:8px 10px;border-radius:10px;font-size:12.5px;
  background:color-mix(in srgb,var(--ambar) 14%,transparent);color:var(--texto)}
@media (max-width:640px){.chip-filtro.chip-entrega-propia{margin-left:0}}

/* Teléfono: con letra menor a 16px, al tocar un campo el celular (sobre todo
   iPhone) agranda la página sola y queda corrida. 16px lo evita. */
@media (max-width:640px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px!important}
}

/* ── Entrega propia: configuración y hoja de ruta ───────────────────────── */
.propia-repartidores{display:flex;flex-direction:column;gap:8px}
.propia-repartidor{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto auto;gap:8px;align-items:center}
.propia-repartidor .rep-activo{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
@media (max-width:640px){
  .propia-repartidor{grid-template-columns:minmax(0,1fr) auto;padding:10px;border:1px solid var(--borde);border-radius:12px}
  .propia-repartidor .rep-nombre,.propia-repartidor .rep-tel{grid-column:1/-1}
}
.chip-filtro.chip-hoja-ruta{background:color-mix(in srgb,var(--azul) 12%,transparent);border-color:color-mix(in srgb,var(--azul) 40%,transparent);color:var(--azul);font-weight:700}
.chip-filtro.chip-hoja-ruta:hover{background:var(--azul);color:#fff}
.hoja-ruta-card{max-width:520px}
.hoja-ruta-cuerpo{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:2px}
.hoja-ruta-depto>b{display:block;margin-bottom:4px}
.hoja-ruta-muni{font-size:12px;font-weight:700;color:var(--texto-muted);text-transform:uppercase;letter-spacing:.03em;margin:6px 0 4px}
.hoja-ruta-pedido{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border:1px solid var(--borde);border-radius:10px;margin-bottom:6px;font-size:13px}
.hoja-ruta-pedido small{color:var(--texto-muted);font-size:12px}

/* ── Campañas: audiencias para Meta ─────────────────────────────────────── */
.audiencias-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.audiencia{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--borde);border-radius:14px;background:var(--superficie)}
.audiencia .ayuda{margin:0;font-size:12.5px}
.audiencia>button{margin-top:auto}
.audiencia-cabecera{display:flex;align-items:center;gap:8px}
.audiencia-icono{font-size:18px}
.audiencia-cuenta{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--verde);background:color-mix(in srgb,var(--verde) 12%,transparent);padding:2px 8px;border-radius:999px;white-space:nowrap}
.audiencia-cuenta.vacia{color:var(--texto-muted);background:var(--superficie-hover,transparent)}
.audiencia-dias{display:flex;align-items:center;gap:6px;font-size:13px}
.audiencia-dias input{width:72px}
.audiencias-ayuda{margin-top:12px;font-size:13px}
.audiencias-ayuda summary{cursor:pointer;font-weight:700;color:var(--azul)}
.audiencias-ayuda ol{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}

/* Reporte con pedidos en varias monedas */
.aviso-monedas-reporte{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:12px;font-size:13px;
  background:color-mix(in srgb,var(--ambar) 12%,transparent);border:1px solid color-mix(in srgb,var(--ambar) 35%,transparent)}

/* ── Ventas & Pedidos en el teléfono: las 6 pestañas a la vista (3 × 2) ─── */
/* El nombre largo ("Reporte Diario de Productos") no entra: se muestra el
   corto con ícono (data-corto). El contador de órdenes queda en la esquina. */
@media (max-width:640px){
  #panel #subnav-pedidos{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px!important;
    overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;padding:4px!important}
  #panel #subnav-pedidos>button[data-corto]{position:relative;font-size:0!important;white-space:normal!important;
    min-height:46px;padding:6px 4px!important;justify-content:center;text-align:center;flex:initial!important;border-radius:12px}
  #panel #subnav-pedidos>button[data-corto]>svg{display:none}
  #panel #subnav-pedidos>button[data-corto]::before{content:attr(data-corto);font-size:12.5px;font-weight:700;line-height:1.2}
  #panel #subnav-pedidos>button[data-corto] .badge-filtro{position:absolute;top:-6px;right:-4px;font-size:10.5px!important;
    min-width:18px;padding:1px 5px;line-height:1.4}
  #panel #subnav-pedidos>button[data-corto] .badge-filtro:empty,
  #panel #subnav-pedidos>button[data-corto] .badge-filtro[data-cero]{display:none}
}
@media (max-width:640px){
  #panel #subnav-pedidos>button[data-corto] .badge-filtro{top:3px;right:4px}
  /* Acciones de órdenes: Nuevo pedido a todo el ancho; Despachar y Exportar lado a lado */
  #panel div:has(>#btn-abrir-nuevo-pedido){display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}
  #panel div:has(>#btn-abrir-nuevo-pedido)>button{width:100%!important;margin:0!important;font-size:13px!important;padding:10px 8px!important;justify-content:center}
  #panel #btn-abrir-nuevo-pedido{grid-column:1/-1;order:-1}
}
@media (max-width:640px){
  #panel div:has(>#btn-abrir-nuevo-pedido)>:is(#btn-despacho-lote,#btn-exportar-excel){font-size:0!important;gap:6px!important}
  #panel :is(#btn-despacho-lote,#btn-exportar-excel)>svg{display:none}
  #panel #btn-despacho-lote::before{content:"🚚 Despachar";font-size:13px;font-weight:700}
  #panel #btn-exportar-excel::before{content:"📊 Exportar";font-size:13px;font-weight:700}
  #panel #cnt-pedidos-despacho-lote{font-size:11.5px;font-weight:800;min-width:20px;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.25)}
}

/* ── Pedidos: cambios pedidos por el cliente y leyenda de colores ───────── */
.etiqueta-alerta{display:inline-block;margin-top:4px;font-size:11px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.alerta-corregido{background:color-mix(in srgb,#eab308 16%,transparent);color:#a16207;border-color:color-mix(in srgb,#eab308 45%,transparent)}
.alerta-humano{background:color-mix(in srgb,#f97316 16%,transparent);color:#c2410c;border-color:color-mix(in srgb,#f97316 45%,transparent)}
.alerta-urgente{background:color-mix(in srgb,var(--rojo) 16%,transparent);color:var(--rojo);border-color:color-mix(in srgb,var(--rojo) 50%,transparent);animation:or-pulso 1.6s ease-in-out infinite}
:root[data-theme="dark"] .alerta-corregido{color:#facc15}
:root[data-theme="dark"] .alerta-humano{color:#fb923c}
#lista-pedidos-filas tr[data-alerta="corregido"]{box-shadow:inset 4px 0 0 #eab308}
#lista-pedidos-filas tr[data-alerta="requiere_humano"]{box-shadow:inset 4px 0 0 #f97316}
#lista-pedidos-filas tr[data-alerta="urgente"]{box-shadow:inset 4px 0 0 var(--rojo);background:color-mix(in srgb,var(--rojo) 5%,transparent)}
@keyframes or-pulso{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--rojo) 18%,transparent)}}
@media (prefers-reduced-motion:reduce){.alerta-urgente{animation:none}}
.detalle-alerta{margin:4px 0 8px;padding:8px 10px;border-radius:10px}
.detalle-cambio{display:flex;flex-direction:column;gap:1px;padding:8px 10px;border:1px solid var(--borde);border-radius:10px;margin-top:6px;font-size:13px}
.detalle-cambio s{color:var(--texto-muted)}
.detalle-cambio small{color:var(--texto-muted);font-size:11.5px}
.detalle-cambio.estado-pendiente,.detalle-cambio.estado-urgente{border-color:#f97316}
.detalle-cambio-acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pedidos-leyenda{margin:-2px 0 10px;font-size:13px}
.pedidos-leyenda summary{cursor:pointer;color:var(--texto-secundario);font-weight:600;width:fit-content}
.leyenda-cuerpo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:8px;padding:12px;border:1px solid var(--borde);border-radius:12px;background:var(--superficie)}
.leyenda-cuerpo ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.leyenda-cuerpo li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--texto-secundario)}
.etiqueta-programado-leyenda{background:color-mix(in srgb,var(--azul) 12%,transparent);color:var(--azul);border:1px solid color-mix(in srgb,var(--azul) 35%,transparent)}

/* ── Inicio: tu negocio de un vistazo (gráficas) ────────────────────────────
   Colores validados con dataviz › validate_palette.js:
   claro  #f59e0b #8b5cf6 #10b981 #ef4444 (pasa; ámbar y verde < 3:1 → leyenda,
          valores y tabla visibles) · oscuro #d97706 #8b5cf6 #059669 #ef4444 (pasa todo) */
:root{--g-ventas:#10b981;--g-barras:#3b82f6;--g-despachar:#f59e0b;--g-camino:#8b5cf6;--g-entregado:#10b981;--g-cancelado:#ef4444;--g-tenue:#cbd5e1;--g-grid:#eef2f6}
:root[data-theme="dark"]{--g-ventas:#059669;--g-barras:#60a5fa;--g-despachar:#d97706;--g-camino:#8b5cf6;--g-entregado:#059669;--g-cancelado:#ef4444;--g-tenue:#334155;--g-grid:#1c2536}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--g-ventas:#059669;--g-barras:#60a5fa;--g-despachar:#d97706;--g-entregado:#059669;--g-tenue:#334155;--g-grid:#1c2536}}

.inicio-analitica{margin:0 0 16px!important;padding:18px!important;transition:opacity var(--dur) var(--curva)}
.inicio-analitica.recargando{opacity:.6}
.ga-cabecera{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ga-cabecera>div:first-child{display:flex;flex-direction:column;gap:2px}
.ga-titulo{font-size:16px}
.ga-periodos{display:flex;gap:6px}
.ga-indicadores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.ga-tile{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--borde);border-radius:14px;background:var(--superficie);overflow:hidden;min-width:0}
.ga-etiqueta{font-size:12px;color:var(--texto-muted);font-weight:600}
.ga-valor{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--texto);line-height:1.15}
.ga-nota{font-size:11.5px;color:var(--texto-muted)}
.ga-delta{font-size:12px;font-weight:700}
.ga-delta.bueno{color:var(--verde)}
.ga-delta.malo{color:var(--rojo)}
.ga-delta.neutro{color:var(--texto-muted);font-weight:600}
.ga-spark{width:100%;height:30px;margin-top:6px}
.ga-grilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ga-tarjeta{padding:14px;border:1px solid var(--borde);border-radius:14px;background:var(--superficie);min-width:0}
.ga-ancha{grid-column:1/-1}
.ga-tarjeta-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ga-tarjeta-cab b{font-size:14px}
.ga-tarjeta-cab .ayuda{margin:0;font-size:12px}
.ga-vacio{margin:18px 0;text-align:center}
.ga-svg{display:block;max-width:100%;height:auto;overflow:visible}
.ga-grid{stroke:var(--g-grid);stroke-width:1}
.ga-eje,.ga-ejex text{font-size:11px;fill:var(--texto-muted);font-variant-numeric:tabular-nums}
.ga-relleno{fill:var(--g-ventas);opacity:.12}
.ga-linea{fill:none;stroke:var(--g-ventas);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ga-punto{fill:var(--g-ventas);stroke:var(--superficie);stroke-width:2}
.ga-cruz{stroke:var(--texto-muted);stroke-width:1;opacity:.6}
.ga-captura{cursor:crosshair;outline:none}
.ga-captura:focus-visible{stroke:var(--azul);stroke-width:1}
.ga-apilada{display:flex;gap:2px;height:22px;margin:4px 0 12px}
.ga-segmento{min-width:6px;border-radius:0;cursor:pointer;transition:filter var(--dur-rapida)}
.ga-segmento:first-child{border-radius:4px 0 0 4px}
.ga-segmento:last-child{border-radius:0 4px 4px 0}
.ga-segmento:only-child{border-radius:4px}
.ga-segmento:hover,.ga-segmento:focus-visible{filter:brightness(1.12);outline:none}
.ga-leyenda{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.ga-leyenda li{display:grid;grid-template-columns:12px 1fr auto 44px;align-items:center;gap:8px;font-size:13px}
.ga-llave{width:12px;height:12px;border-radius:3px}
.ga-ley-nombre{color:var(--texto-secundario)}
.ga-ley-pct{text-align:right;color:var(--texto-muted);font-variant-numeric:tabular-nums}
.ga-leyenda b{font-variant-numeric:tabular-nums}
.ga-top{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ga-top li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:13px;cursor:default;border-radius:6px}
.ga-top li:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.ga-top-nombre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--texto-secundario)}
.ga-top-barra{height:12px;background:var(--g-grid);border-radius:4px;overflow:hidden}
.ga-top-barra span{display:block;height:100%;background:var(--g-barras);border-radius:0 4px 4px 0;transition:width var(--dur-lenta) var(--curva)}
.ga-top li:hover .ga-top-barra span{filter:brightness(1.12)}
.ga-horas{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;align-items:end;height:110px;padding-top:4px}
.ga-hora{height:100%;display:flex;align-items:flex-end;cursor:pointer;border-radius:4px 4px 0 0}
.ga-hora span{display:block;width:100%;max-width:24px;margin:0 auto;background:var(--g-tenue);border-radius:4px 4px 0 0;transition:height var(--dur-lenta) var(--curva)}
.ga-hora.pico span{background:var(--g-barras)}
.ga-hora:hover span,.ga-hora:focus-visible span{background:var(--g-barras);filter:brightness(1.1)}
.ga-hora:focus-visible{outline:none}
.ga-horas-eje{display:flex;justify-content:space-between;font-size:11px;color:var(--texto-muted);margin-top:6px}
.ga-tabla{margin-top:12px;font-size:13px}
.ga-tabla summary{cursor:pointer;color:var(--texto-secundario);font-weight:600}
.ga-tabla table{width:100%;margin-top:8px;font-size:13px;font-variant-numeric:tabular-nums}
.ga-tooltip{position:fixed;z-index:3000;pointer-events:none;min-width:130px;padding:8px 10px;border-radius:10px;background:var(--superficie);border:1px solid var(--borde);box-shadow:var(--sombra-elevada);font-size:12.5px}
.ga-tip-titulo{color:var(--texto-muted);font-size:11.5px;margin-bottom:4px}
.ga-tip-fila{display:flex;gap:6px;align-items:baseline}
.ga-tip-fila b{color:var(--texto);font-size:14px}
.ga-tip-fila span{color:var(--texto-muted)}
@media (max-width:900px){.ga-indicadores{grid-template-columns:repeat(2,minmax(0,1fr))}.ga-grilla{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .inicio-analitica{padding:14px!important}
  .ga-valor{font-size:21px}
  .ga-periodos{width:100%}
  .ga-periodos .chip-filtro{flex:1;justify-content:center}
  .ga-horas{height:90px}
}
@media (prefers-reduced-motion:reduce){.ga-top-barra span,.ga-hora span{transition:none}}
/* Respuestas de la IA y embudo de clientes, con el mismo criterio */
.ga-columnas{display:flex;align-items:flex-end;gap:2px;height:160px;padding-top:18px}
.ga-col{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0;cursor:pointer;position:relative}
.ga-col-barra{display:block;width:100%;max-width:24px;background:var(--g-barras);border-radius:4px 4px 0 0;transition:height var(--dur-lenta) var(--curva),filter var(--dur-rapida)}
.ga-col:hover .ga-col-barra,.ga-col:focus-visible .ga-col-barra{filter:brightness(1.12)}
.ga-col:focus-visible{outline:none}
.ga-col small{font-size:10.5px;color:var(--texto-muted);white-space:nowrap}
.ga-col-valor{font-size:12px;color:var(--texto);font-variant-numeric:tabular-nums}
.ga-embudo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ga-embudo li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto 40px;align-items:center;gap:10px;font-size:13px;border-radius:6px}
.ga-embudo li:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.ga-emb-nombre{color:var(--texto-secundario);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.ga-col small{font-size:9.5px}.ga-embudo li{grid-template-columns:minmax(0,1fr) 70px auto 36px}}