:root {
  --verde:#1f6f4a; --verde-claro:#e6f3ec; --gris:#5b6470; --linea:#dde1e6; --fondo:#f5f6f8; --papel:#fff;
  --ambar:#b7791f; --rojo:#b42318; --azul:#175cd3; --radio:12px; --radio-full:999px;
  --papel-chat:#f1ece0; --sombra:0 1px 2px rgba(20,25,30,.05), 0 8px 20px rgba(20,25,30,.07);
  /* Tamaños de letra en rem (raíz a 16px); el resto del archivo sigue en px como el resto del código. */
  --fs-xs:.6875rem;   /* 11px — horas, timbres, contadores */
  --fs-sm:.75rem;     /* 12px — meta, pastillas */
  --fs-md:.875rem;    /* 14px — previa del chat, celdas de tabla */
  --fs-base:.9375rem; /* 15px — texto general (el mismo tamaño de siempre) */
  --fs-lg:1.0625rem;  /* 17px — títulos de pantalla */
}
* { box-sizing:border-box }
html { font-size:16px }
html,body { margin:0; height:100% }
body { background:var(--fondo); color:#1a1f24; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:var(--fs-base); line-height:1.45; -webkit-text-size-adjust:100% }
#app { height:100dvh; display:flex; flex-direction:column; max-width:720px; margin:0 auto; background:var(--fondo);
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right) }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--verde); outline-offset:2px }

/* ---------- botones: una sola escala (primario, suave, línea, icono) ---------- */
button { font:inherit; border:0; border-radius:var(--radio); padding:12px 18px; background:var(--verde); color:#fff; cursor:pointer; min-block-size:44px; transition:transform .08s,opacity .08s }
button:active { transform:scale(.97) }
button.suave { background:var(--verde-claro); color:var(--verde) }
button.linea { background:transparent; color:var(--gris); border:1px solid var(--linea) }
button:disabled { opacity:.5; cursor:not-allowed; transform:none }
button.icono, .btn-enviar { width:44px; height:44px; min-block-size:44px; padding:10px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:1.125rem; line-height:1; flex:none }
button.icono.linea { background:transparent; color:var(--gris) }
button.icono.plano { background:transparent; color:var(--gris) }
.btn-enviar { background:var(--verde); color:#fff }
@media (pointer:coarse) {
  button { min-block-size:48px }
  button.icono, .btn-enviar { width:48px; height:48px; min-block-size:48px }
  .tab-panel { min-block-size:48px; padding:11px 18px }
}

/* ---------- campos ---------- */
input,select,textarea { font:inherit; width:100%; border:1px solid var(--linea); border-radius:var(--radio); padding:10px 12px; background:var(--papel); min-height:44px } textarea { resize:none }
.interruptor { display:flex; align-items:center; gap:8px; font-size:var(--fs-md) }
.interruptor input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none }
.interruptor .pista { position:relative; width:40px; height:24px; border-radius:var(--radio-full); background:var(--linea); flex:none; transition:background .15s }
.interruptor .pista::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s }
.interruptor input:checked + .pista { background:var(--verde) }
.interruptor input:checked + .pista::after { transform:translateX(16px) }
.interruptor input:disabled + .pista { opacity:.5 }
.interruptor input:focus-visible + .pista { outline:2px solid var(--verde); outline-offset:2px }

/* ---------- estructura de pantalla ---------- */
.cabecera { display:flex; align-items:center; gap:10px; padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top)); background:var(--papel); border-bottom:1px solid var(--linea); position:sticky; top:0; z-index:2; flex-wrap:wrap }
.cabecera h1 { font-size:var(--fs-lg); margin:0; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
.cab-texto { display:flex; flex-direction:column; justify-content:center; flex:1; min-width:0; gap:1px }
.cab-texto h1 { flex:none }
.cab-texto .meta { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:0 }
.cab-acciones { display:flex; align-items:center; gap:8px; flex:none }
.cuerpo { flex:1; overflow:auto; -webkit-overflow-scrolling:touch }
.pie { background:var(--papel); border-top:1px solid var(--linea); padding:8px 10px calc(8px + env(safe-area-inset-bottom)) }

/* pestañas del asesor (subrayado, como los tabs superiores de WhatsApp) */
/* Se desliza: con cuatro estados de pedido («🚫 Cancelados» el último) la cuarta pestaña se salía de
   la pantalla de un teléfono y no había manera de llegar a ella. `flex:1` pasa a `flex:0 0 auto` porque
   con basis 0 las cuatro se encogían hasta cortar el rótulo. */
.pestanas { display:flex; background:var(--papel); border-bottom:1px solid var(--linea); overflow-x:auto; scrollbar-width:none }
.pestanas::-webkit-scrollbar { display:none }
.pestanas button { flex:0 0 auto; padding-inline:14px; white-space:nowrap } .pestanas button { flex:1; background:none; color:var(--gris); border-radius:0; border-bottom:3px solid transparent; min-block-size:44px } .pestanas button.activa { color:var(--verde); border-color:var(--verde); font-weight:600 }

/* pestañas del panel del administrador (píldoras deslizables, como el panel del bot) */
.tabs-panel { display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:10px 12px; background:var(--papel); border-bottom:1px solid var(--linea) }
.tabs-panel::-webkit-scrollbar { display:none }
.tab-panel { flex:none; display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:var(--radio-full); border:1px solid var(--linea); background:var(--papel); color:var(--gris); font-weight:600; font-size:var(--fs-md); min-block-size:44px; white-space:nowrap }
.tab-panel.on { background:var(--verde); color:#fff; border-color:var(--verde); font-weight:700 }
/* La tira de pestañas corre a lo ancho (8 secciones no caben en 390 px). El desvanecido del borde
   derecho es lo que avisa que hay más: sin él la última pestaña se ve CORTADA, que parece un error.
   mask-image es Baseline desde hace años; si un navegador viejo lo ignora, la tira sigue corriendo igual. */
.tabs-panel { -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent) }
.tabs-panel::-webkit-scrollbar { display:none }

/* Datos de una persona como piezas sueltas y no como párrafo: se escanean en vez de leerse. */
/* .meta solo estaba definido DENTRO de .fila y de .cab-texto, así que en el tablero —donde no hay filas—
   las notas al pie heredaban 15 px casi negros y competían con las cifras. Una línea, y las dos reglas
   específicas siguen mandando sobre esta por especificidad. */
.meta { font-size:var(--fs-sm); color:var(--gris) }

/* Un ajuste es rótulo + control + una frase que explica qué pasa si lo mueves. La explicación no es
   adorno: sin ella el dueño no sabe si «10» son minutos u horas, ni qué rompe si lo cambia. */
.ajuste { display:grid; gap:5px; margin-block-end:18px }
.ajuste:last-child { margin-block-end:0 }
.ajuste-rotulo { font-weight:600; font-size:var(--fs-md) }
.ajuste-ayuda { font-size:var(--fs-sm); color:var(--gris); line-height:1.45 }

.chips { display:flex; flex-wrap:wrap; gap:4px 6px; margin-top:6px }
.chip { font-size:var(--fs-sm); line-height:1.35; padding:2px 8px; border-radius:var(--radio-full);
  background:#eef0f3; color:var(--gris); white-space:nowrap }
.chip.ambar { background:#fdf3e1; color:var(--ambar) }
.chip.rojo { background:#fde8e6; color:var(--rojo) }
.chip.verde { background:var(--verde-claro); color:var(--verde) }

.tab-contador { background:rgba(0,0,0,.08); color:inherit; border-radius:var(--radio-full); padding:1px 7px; font-size:var(--fs-xs); font-weight:700 }
.tab-panel.on .tab-contador { background:rgba(255,255,255,.28) }

/* ---------- filas de lista ---------- */
.fila { display:flex; gap:10px; padding:12px; border-bottom:1px solid var(--linea); background:var(--papel); cursor:pointer; align-items:center }
.fila .texto { flex:1; min-width:0 }
.fila .nombre { font-weight:600; display:flex; justify-content:space-between; gap:8px }
.fila .previa { color:var(--gris); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:var(--fs-md) }
.fila .meta { font-size:var(--fs-sm); color:var(--gris) }
.avatar { width:44px; height:44px; border-radius:50%; background:var(--verde-claro); color:var(--verde); display:grid; place-items:center; font-weight:700; flex:none; font-size:1.0625rem }
.avatar.chico { width:36px; height:36px; font-size:.9375rem }
/* fila.contacto: el separador arranca después del avatar (estilo WhatsApp), no en todo el ancho */
.fila.contacto { align-items:stretch; padding:12px 12px 0 }
.fila.contacto .avatar { align-self:center }
.fila.contacto .texto { display:flex; flex-direction:column; justify-content:center; gap:3px; border-bottom:1px solid var(--linea); padding-bottom:12px }
.fila-l1 { display:flex; align-items:baseline; gap:8px }
.nombre-fila { flex:1; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hora-fila { flex:none; font-size:var(--fs-xs); color:var(--gris) }
.fila-l2 { display:flex; align-items:center; gap:6px }
.fila-l2 .previa { flex:1; min-width:0; margin:0 }
.badge { flex:none; background:var(--verde); color:#fff; border-radius:var(--radio-full); min-width:20px; height:20px; padding:0 6px; font-size:var(--fs-xs); font-weight:700; display:inline-flex; align-items:center; justify-content:center }

.espera { font-size:var(--fs-sm); padding:2px 8px; border-radius:var(--radio-full); background:#eef0f3; color:var(--gris) } .espera.ambar { background:#fdf3e1; color:var(--ambar) } .espera.rojo { background:#fde8e6; color:var(--rojo) }

/* ---------- conversación: burbujas con timbre, separador de fecha, fondo cálido ---------- */
.hilo-caja { position:relative; flex:1; min-height:0; display:flex }
.flotante { position:absolute; right:12px; bottom:12px; box-shadow:var(--sombra); z-index:3 }
#hilo { flex:1; min-width:0; background-color:var(--papel-chat); background-image:repeating-linear-gradient(135deg, rgba(0,0,0,.015) 0 2px, transparent 2px 14px) }
.fecha-sep { display:flex; justify-content:center; margin:14px 0 6px }
.fecha-sep span { background:rgba(0,0,0,.08); color:var(--gris); font-size:var(--fs-xs); font-weight:600; padding:4px 12px; border-radius:var(--radio-full) }
.globo { position:relative; max-width:82%; margin:6px 10px; padding:8px 12px; border-radius:16px; border-top-left-radius:6px; background:var(--papel); box-shadow:0 1px 1px rgba(0,0,0,.06); overflow-wrap:break-word; white-space:pre-wrap; user-select:text }
.globo:not(.out)::before { content:''; position:absolute; top:6px; left:-6px; border-top:6px solid transparent; border-bottom:6px solid transparent; border-right:6px solid var(--papel) }
.globo.out { margin-left:auto; background:var(--verde-claro); border-top-left-radius:16px; border-top-right-radius:6px }
.globo.out::before { content:''; position:absolute; top:6px; right:-6px; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:6px solid var(--verde-claro) }
.globo .hora { display:block; font-size:var(--fs-xs); color:var(--gris); text-align:right; margin-top:2px }
/* Quién escribió el mensaje, cuando no fui yo. Va arriba del texto y en pequeño: identifica sin robarle
   el sitio a lo que se está leyendo. */
.globo .autor { font-size:var(--fs-xs); font-weight:800; color:var(--verde); margin-bottom:2px }
/* Los checks. El interletraje negativo los pega como en WhatsApp; el azul es el suyo (#34B7F1). */
.cheque { font-weight:700; letter-spacing:-2px; margin-left:1px }
.cheque.leido { color:#34B7F1 }
.cheque.fallo { color:var(--rojo); letter-spacing:normal }
/* El motivo de un envío fallido va en su propia línea: metido en la línea de la hora la empujaba
   fuera y quedaba un renglón ilegible. */
.motivo-fallo { font-size:var(--fs-xs); color:var(--rojo); margin-top:3px; line-height:1.3 }
.sin-caja { margin:0; text-align:center; padding:6px 4px }
/* Los pasos de arranque del asesor: lista numerada, con aire para que el botón de los avisos quepa. */
.pasos-arranque { margin:0; padding-left:20px; display:grid; gap:10px; font-size:var(--fs-md) }
.pasos-arranque li { line-height:1.45 }
.pasos-arranque button { margin-top:6px }
.pasos-arranque .meta { margin-top:4px }

/* 🎯 La barra de la meta de la semana. Selectores ACOTADOS a .barra-meta: `.pista` ya existe dos veces
   —el interruptor y las barras del tablero— y una regla suelta las habría pisado. */
.barra-meta { padding:9px 0; border-top:1px solid var(--linea) }
.barra-meta:first-of-type { border-top:0; padding-top:2px }
.barra-meta .bm-l1, .barra-meta .bm-l2 { display:flex; justify-content:space-between; gap:10px; align-items:baseline }
.barra-meta .bm-l1 { font-size:var(--fs-md); font-weight:700; margin-bottom:5px }
.barra-meta .bm-l2 { font-size:var(--fs-xs); color:var(--gris); font-weight:600; margin-top:4px }
.barra-meta .pista { height:12px; border-radius:var(--radio-full); background:var(--linea); overflow:hidden }
.barra-meta .pista i { display:block; height:100%; border-radius:var(--radio-full); background:var(--ambar);
  transition:width .25s ease-out }
/* Verde al pasar del 60 %, y verde fuerte al cumplir: el color dice en qué va sin leer el número. */
.barra-meta.cerca .pista i { background:#2f9e6b }
.barra-meta.cumplida .pista i { background:var(--verde) }
.barra-meta.cumplida .bm-l1 b, .barra-meta.cumplida .bm-l2 b { color:var(--verde) }
/* 🛍️ El sello del pedido dentro del hilo: la conclusión de la conversación. */
.sello-pedido { margin:8px 10px; padding:9px 12px; border-radius:12px; background:var(--verde-claro); color:var(--verde);
  font-size:var(--fs-md); font-weight:700; border:1px solid rgba(31,111,74,.25) }
.sello-pedido.revisar { background:#fdf3e1; color:var(--ambar); border-color:rgba(183,121,31,.35) }
.sello-pedido .meta { font-weight:600; margin-top:2px }
.sello-pedido .aviso-revisar { color:var(--ambar) }
/* El formulario del pedido: panel de abajo que DEJA EL HILO A LA VISTA. Registrar la venta es copiar del
   hilo el nombre y la dirección; taparlo fue un reporte real de las asesoras del bot el 8/9. */
.pedido-panel { position:fixed; left:0; right:0; bottom:0; z-index:6; background:var(--papel);
  border-top:1px solid var(--linea); border-radius:16px 16px 0 0; box-shadow:0 -6px 24px rgba(0,0,0,.18);
  padding:12px 12px calc(12px + env(safe-area-inset-bottom)); max-height:62dvh; overflow-y:auto }
.pedido-cab { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px }
.pedido-campos { display:grid; grid-template-columns:1fr 1fr; gap:9px }
.pedido-campos .ancho { grid-column:1/-1 }
.campo-p { display:grid; gap:3px; font-size:var(--fs-xs); font-weight:700; color:var(--gris) }
.pedido-manual { display:grid; grid-template-columns:1fr 1fr; gap:9px }
.pedido-total { margin:10px 0; padding:9px 12px; border-radius:10px; background:var(--verde-claro); color:var(--verde);
  font-weight:800; font-size:var(--fs-md) }
.pedido-total.malo { background:#fdf3e1; color:var(--ambar) }
.pedido-panel > button:last-of-type { width:100% }
/* Las acciones de un pedido en fila que envuelve: una por renglón dejaba la tarjeta de 700 px de alto. */
.pedido-acciones { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin-top:10px }
.pedido-acciones input[type=date] { width:auto; min-width:150px }
.pedido-fila.revisar { border-color:var(--ambar); box-shadow:inset 4px 0 0 var(--ambar), var(--sombra) }

/* 🧑‍💼 Personas agrupadas por equipo, con arrastre. */
.caja-equipo { transition:background .12s, border-color .12s }
.caja-equipo.recibe { border-color:var(--verde); background:var(--verde-claro) }
.fila-persona { display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; padding:9px 0; border-top:1px solid var(--linea) }
.fila-persona:first-of-type { border-top:0 }
.fila-persona.arrastrando { opacity:.45 }
.fila-persona .texto { flex:1 1 190px; min-width:0 }
.fila-persona .agarre { cursor:grab; color:var(--gris); font-size:1.1rem; line-height:1; flex:none; user-select:none }
.checks-persona { display:flex; gap:14px; flex:none; align-items:center }
.check-rot { display:flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:700; color:var(--gris) }
.acciones-persona { display:flex; flex-wrap:wrap; gap:6px; align-items:center }
.acciones-persona select { width:auto; min-width:150px }
/* En un teléfono no hay arrastre: el agarre solo estorbaría. El <select> de cada fila es la vía real. */
@media (max-width:699px) { .fila-persona .agarre { display:none } .acciones-persona, .checks-persona { width:100% } }
@media (min-width:700px) { .pedido-panel { left:auto; right:auto; width:min(680px,100%); margin:0 auto; max-height:70dvh } }
.globo img,.globo video { max-width:100%; border-radius:8px; display:block }
.globo audio { width:220px; max-width:100% }
.globo.fallo { border:1px solid var(--rojo) }
.globo.gris { opacity:.6 }

/* ---------- compositor: píldora con adjuntar/mic + botón de enviar aparte ---------- */
.compositor { display:flex; gap:8px; align-items:flex-end }
.compositor-pill { flex:1; min-width:0; display:flex; align-items:flex-end; gap:2px; background:var(--papel); border:1px solid var(--linea); border-radius:22px; padding:4px 6px 4px 8px }
.compositor-pill textarea { flex:1; min-width:0; border:0; border-radius:0; background:transparent; padding:9px 4px; min-height:36px; max-height:120px }
.compositor-pill textarea:focus { outline:0 }
.compositor .grabando, .compositor-pill .grabando { background:var(--rojo); color:#fff; border-radius:50% }

/* ---------- tarjetas, avisos, filtros ---------- */
.tarjeta { background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio); padding:14px; margin:10px 12px; box-shadow:var(--sombra) } .tarjeta h2 { font-size:var(--fs-base); margin:0 0 10px; font-weight:700 }
.tarjeta.alerta { border-color:var(--rojo); box-shadow:inset 4px 0 0 var(--rojo), var(--sombra) }
.aviso { background:#fdf3e1; color:var(--ambar); padding:10px 12px; margin:10px 12px; border-radius:var(--radio); font-size:var(--fs-md) } .aviso.rojo { background:#fde8e6; color:var(--rojo) }
.filtros { display:flex; gap:9px; flex-wrap:wrap; align-items:center; padding:8px 12px }
.filtros select, .filtros input { width:auto; flex:1 1 150px; min-width:120px; max-width:100% }

.centro { display:grid; place-items:center; height:100%; padding:20px } .centro form { width:100%; max-width:340px; display:grid; gap:10px }
.cargando { text-align:center; color:var(--gris); padding:40px; font-size:var(--fs-md) }
.desliza { overflow-x:auto; overflow-y:hidden; border:1px solid var(--linea); border-radius:var(--radio) }
table { width:100%; border-collapse:collapse; background:var(--papel); font-size:var(--fs-md) } th,td { text-align:left; padding:8px; border-bottom:1px solid var(--linea); white-space:nowrap } th:first-child,td:first-child { position:sticky; left:0; background:var(--papel) }
.punto { display:inline-block; width:10px; height:10px; border-radius:50%; background:#c3c8cf; margin-right:4px } .punto.on { background:#1f9d55 }
.oculto { display:none !important }

/* ---------- tablero ---------- */
/* El dibujo del panel del bot, en verde: tarjeta grande de color con la cifra a 38 px y el desglose a
   17 px (a 12,5 px el dueño no vio el monto), tira de días con HOY al final, barras de divs. Ninguna
   librería: dos primitivas (una barra horizontal y una columna) cubren los seis bloques. */
.tab-cuerpo { display:grid; gap:12px; padding:12px 12px calc(24px + env(safe-area-inset-bottom)) }
/* ⚠️ Un hijo de grid trae min-width:auto y NO encoge por debajo de su contenido, y eso atraviesa los
   .desliza de dentro: con el análisis abierto, la tabla de anuncios (7 columnas en nowrap) estiraba el
   cuerpo a 1.031 px en una pantalla de 390 y TODO se arrastraba de lado (medido). Las tablas y las
   gráficas ya tienen su propio overflow-x; lo que falta es dejarlas encoger. */
.tab-cuerpo > * { min-width:0 }
.tab-cuerpo > .tarjeta { margin:0 }   /* la tarjeta trae margen propio para las listas; aquí manda el gap */
.tab-nota { text-align:center; margin:0 }
.grande { border-radius:16px; padding:15px 16px; color:#fff; box-shadow:var(--sombra); display:grid;
  grid-template-columns:minmax(130px,auto) 1fr; gap:18px; align-items:center;
  background:linear-gradient(105deg,#12523a,var(--verde)) }
/* ⚠️ SIN ESTO LA PÁGINA SE ARRASTRA DE LADO: un hijo de grid trae min-width:auto y no encoge por
   debajo de su contenido, así que las 14 columnas de la tira estiran la tarjeta (medido en el panel
   del bot: 513 px de documento en una pantalla de 390). La tira ya tiene su propio overflow-x. */
.grande > * { min-width:0 }
.grande.sola { grid-template-columns:1fr }
.grande.envio, .grande.ventana { background:linear-gradient(105deg,#103a80,var(--azul)) }
.grande.prog, .grande.espera { background:linear-gradient(105deg,#7a4d10,var(--ambar)) }
.grande.puesto { background:linear-gradient(105deg,#4a2b7a,#7c4dd1) }
.g-k { font-size:var(--fs-xs); font-weight:800; opacity:.88; letter-spacing:.05em }
.g-q { font-size:2.375rem; font-weight:900; line-height:1.05; font-variant-numeric:tabular-nums }
.g-desglose { font-size:var(--fs-lg); font-weight:800; margin-top:6px; line-height:1.4; font-variant-numeric:tabular-nums }
.g-sub { font-size:var(--fs-sm); font-weight:700; opacity:.9; margin-top:2px; min-height:1.1em }
.g-pie { margin-top:7px }
.grande button { background:rgba(255,255,255,.2); color:#fff; margin-top:8px }
.g-dias { display:flex; gap:5px; align-items:flex-end; overflow-x:auto; padding-bottom:2px }
/* La columna se ancha con su rótulo (`auto`, no 26px fijos): con un ancho fijo el «1.8k» y el «HOY»
   del último día sobresalen de su caja, y lo que sobresale a la derecha del último hijo de un flex NO
   entra en el scrollWidth — la tira se abre pegada al final y aun así el dato de hoy sale cortado. */
.g-dias .d { flex:1 0 auto; min-width:26px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:3px }
.g-dias .d i { display:block; width:100%; background:rgba(255,255,255,.4); border-radius:4px 4px 0 0; min-height:3px }
.g-dias .d b, .g-dias .d span { font-size:.625rem; font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums }
.g-dias .d span { font-weight:700; opacity:.72 }
.g-dias .d.hoy i { background:#ffd166 }
.g-dias .d.hoy span { opacity:1; color:#ffd166 }
.g-fechas { display:flex; gap:7px; flex-wrap:wrap; align-content:flex-start }
.g-fechas .f { background:rgba(255,255,255,.18); border-radius:9px; padding:6px 10px; font-size:var(--fs-sm); font-weight:800; line-height:1.35; white-space:nowrap }
.g-fechas .f.hoy { outline:2px solid #ffd166 }
.g-fechas .f.atr { background:rgba(255,90,70,.45) }
@media (max-width:640px) { .grande { grid-template-columns:1fr; gap:12px } .g-q { font-size:2.125rem } }

/* el pulso del inbox: una franja, no una tarjeta más */
.franja { display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap; cursor:pointer; background:var(--papel);
  border:1px solid var(--linea); border-radius:var(--radio); padding:11px 14px; font-size:var(--fs-sm); font-weight:700; color:var(--gris) }
.franja .ambar { color:var(--ambar) } .franja .rojo { color:var(--rojo) }
.franja-ir { margin-left:auto; color:var(--verde) }

/* la fila de contadores: en el teléfono va en carrusel, se enseña una y media a propósito */
.tarjetas { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; padding-bottom:4px }
.tarjetas::-webkit-scrollbar { display:none }
.tarj { flex:0 0 62%; max-width:230px; scroll-snap-align:start; background:var(--papel); border:1px solid var(--linea);
  border-radius:var(--radio); padding:12px 14px; box-shadow:var(--sombra) }
.tarj .v { font-size:1.625rem; font-weight:900; line-height:1.1; font-variant-numeric:tabular-nums }
.tarj.rojo .v { color:var(--rojo) }
.tarj .k { font-size:var(--fs-sm); font-weight:700; color:var(--gris); margin-top:2px }
.tarj .q { font-size:var(--fs-sm); font-weight:800; color:var(--verde); min-height:1.2em; font-variant-numeric:tabular-nums }
/* el pie va vacío pero con alto mínimo, para que las tarjetas queden todas igual de altas */
.tarj .sub { font-size:var(--fs-xs); font-weight:600; color:var(--gris); margin-top:3px; min-height:1.1em }

/* barras horizontales (más vendidos, embudo, ventas por persona) */
.fila-b { margin-bottom:11px }
.fb-l { display:flex; justify-content:space-between; gap:10px; font-size:var(--fs-md); font-weight:700; margin-bottom:4px }
.fb-l span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fb-l b { font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums }
.pista { height:7px; background:var(--verde-claro); border-radius:var(--radio-full); overflow:hidden }
.pista i { display:block; height:100%; background:var(--verde); border-radius:var(--radio-full) }

/* columnas dobles (ingresados contra despachados). ⚠️ El scroll va en la CAJA de fuera: puesto en la
   fila flex el navegador impone overflow-y y recorta por arriba la columna más alta. */
.cols-caja { overflow-x:auto; padding-bottom:4px }
.cols { display:flex; align-items:flex-end; gap:5px; min-height:150px }
.cols.baja { min-height:104px }
.col { flex:1 0 34px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:3px }
.col .par { display:flex; align-items:flex-end; gap:2px; width:100% }
.col .par i { flex:1; background:var(--verde); border-radius:5px 5px 0 0; min-height:3px }
.col .par i.des { background:var(--azul) }
.col .vv, .col .dd { font-size:.625rem; font-weight:800; color:var(--gris); white-space:nowrap; font-variant-numeric:tabular-nums }
.col.marca .dd, .col.marca .vv { color:var(--verde) }   /* la semana en curso, o la hora pico */
.leyenda { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:var(--fs-sm); font-weight:700; color:var(--gris); margin-bottom:8px }
.leyenda i { display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--verde); margin-right:4px }
.leyenda i.des { background:var(--azul) }
.leyenda-modo { display:flex; gap:6px; margin-left:auto }
.leyenda-modo button { padding:6px 12px; min-block-size:36px; font-size:var(--fs-sm) }
button.suave.on { background:var(--verde); color:#fff }

/* el análisis, plegado: se abre cuando se quiere mirar */
.analisis { background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra) }
.analisis > summary { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:13px 14px; cursor:pointer;
  font-weight:800; min-block-size:44px; list-style:none }
.analisis > summary::-webkit-details-marker { display:none }
.analisis > summary::before { content:'▸'; color:var(--verde); font-size:var(--fs-sm); transition:transform .15s }
.analisis[open] > summary::before { transform:rotate(90deg) }
.bloque { padding:0 14px 16px; min-width:0 }
.bloque h2 { font-size:var(--fs-base); font-weight:700; margin:0 0 10px }
.fino { font-weight:400; color:var(--gris); font-size:var(--fs-sm) }

/* ─────────────────────────────────────────────────────────────────────────────────────────────────
   VISTA DE ESCRITORIO — los supervisores trabajan en PC.
   La app nació para teléfonos y estaba capada a 720 px: en un monitor eso deja media pantalla en
   blanco y obliga a leer en una sola columna lo que cabría de un vistazo. A partir de 1000 px el
   PANEL se ensancha y sus bloques se acomodan en rejilla. La BANDEJA y el CHAT se quedan angostos a
   propósito: una conversación de WhatsApp con líneas de 1.400 px no se lee.
   Solo cambia el ancho y la colocación; ni un componente nuevo, ni una regla de negocio distinta. */
@media (min-width: 1000px) {
  body:has(.tabs-panel) #app { max-width: 1600px }

  /* La tira de pestañas deja de correr: en un monitor caben todas y el desvanecido sobra. */
  .tabs-panel { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none }

  /* El cuerpo del panel se vuelve rejilla: las tarjetas se acomodan solas según lo ancho que esté. */
  .tabs-panel ~ .cuerpo, .tab-cuerpo { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    align-content: start; padding: 14px }
  /* El tablero envuelve sus bloques en .tab-cuerpo: sin esta línea la rejilla se aplicaba a UN solo hijo
     y todo seguía en una columna, con 1.100 px en blanco al lado. */
  /* El tablero trae su propio contenedor. Que ocupe la fila entera en vez de caer como UNA celda de la
     rejilla de arriba — si no, mide 510 px y deja 1.100 en blanco al lado. */
  .tab-cuerpo { grid-column: 1 / -1; width: 100% }
  .tabs-panel ~ .cuerpo > .tarjeta, .tab-cuerpo > .tarjeta { margin: 0 }

  /* Las filas de una lista (personas, chats) siguen siendo lista: apilarlas en rejilla las haría
     ilegibles. Ocupan la fila entera y se leen de arriba abajo, como una tabla. */
  .tabs-panel ~ .cuerpo > .fila { grid-column: 1 / -1; border-radius: var(--radio); border: 1px solid var(--linea) }
  .tabs-panel ~ .cuerpo > .desliza, .tabs-panel ~ .cuerpo > details,
  .tab-cuerpo > .desliza, .tab-cuerpo > details, .tab-cuerpo > .filtros { grid-column: 1 / -1 }

  /* Las tarjetas grandes del tablero se reparten en tres; en pantallas muy anchas, en cuatro. */
  /* La tarjeta grande reparte cifra a la izquierda y gráfica de 14 días a la derecha. Eso funciona a lo
     ancho de la pantalla, pero aquí cada una mide ~490 px: la columna derecha queda tan angosta que el pie
     («Últimos 14 días: …») se desborda ENCIMA de la cifra. Medido en el sitio en vivo. A este ancho se
     apilan: cifra arriba, gráfica debajo, cada una con todo el ancho de la tarjeta. */
  .grande { grid-template-columns: 1fr; gap: 10px; align-items: start }
  .grande .g-dias { min-height: 64px }

  /* NO se igualan las alturas. Se intentó dos veces y las dos salieron peor: con `display:flex` la fila de
     filtros se volvió una columna con un hueco enorme, y con `align-self:stretch` la franja de contadores
     (100 px de contenido) se estiró a 998 px para igualar a la lista de «Sin contestar» que tenía al lado.
     En una rejilla de bloques que miden cosas distintas, alturas distintas es lo correcto. */
  .tab-cuerpo > * { align-self: start }
  /* Y la rejilla del PANEL necesita lo mismo, que se había quedado sin ponerlo: .desliza es contenedor de
     scroll (overflow-x:auto), y un contenedor de scroll NO aporta el alto de su contenido a la rejilla.
     Sin `align-self: start` la fila se quedaba con el hueco que sobraba y la caja se estiraba a ESO:
     medido en el catálogo, 257 px de caja para una tabla de 1.013 px — de 16 productos se veían 4 y a los
     otros 12 no se llegaba por ningún lado, porque el overflow vertical va en `hidden`. Afecta a las
     tablas de Equipos y productos, Anuncios e Informe. */
  .tabs-panel ~ .cuerpo > * { align-self: start }

  /* El filtro de fechas deja de ocupar un bloque entero: va en una sola línea arriba de todo. */
  .filtros { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: end }

  /* En el teléfono la fila de contadores se desliza con el dedo y eso está bien. En PC nadie descubre
     que hay más a la derecha: con 9 tarjetas, tres quedaban fuera de la pantalla sin ninguna señal.
     Aquí envuelven. El `flex-basis` va en 180px y NO en 0: con 0 no encogen y aplastan al vecino. */
  .tabs-panel ~ .cuerpo > .tarjetas, .tab-cuerpo > .tarjetas { grid-column: 1 / -1; flex-wrap: wrap; overflow-x: visible }
  .tab-cuerpo > .tarjetas > .tarj { flex: 1 1 180px; max-width: none }

  /* Con el ratón sí hay estado de reposo: en un teléfono no existe y por eso no estaba. */
  .fila:hover { background: var(--verde-claro) }
  .tab-panel:hover:not(.on) { border-color: var(--verde); color: var(--verde) }
}
@media (min-width: 1500px) {
  .tabs-panel ~ .cuerpo, .tab-cuerpo { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) }
}

/* El botón de cuenta va al final de la cabecera, separado del título: es de quien MIRA la pantalla,
   no del contenido. En un teléfono se queda solo con el emoji para no robarle ancho al título. */
.cabecera .cuenta { margin-inline-start: auto; white-space: nowrap; font-weight: 600 }
@media (max-width: 560px) { .cabecera .cuenta { font-size: 0; padding: 12px } .cabecera .cuenta::before { content: '👤'; font-size: 1.05rem } }