/* ══════════════════════════════════════════════════════════════
   Panel interactivo — APROBADO 2026-07-22 (viene de 6-panel-interactivo.html)
   Copiado tal cual; solo se sacó el envoltorio de prueba y las reglas
   genéricas (table, th, td) quedaron limitadas al panel para no pisar
   el resto de la página. NO cambiar datos ni colores.
   Cambios pedidos el 2026-07-22: la marca de la barra lateral (cuadrito verde
   con la "N" + "Mi Negocio") pasó a ser el logo completo de Nucleando, se
   sacaron los subtítulos "Panel de control", "Resumen de hoy" y "Atendidos por
   la IA", las dos cajas del Dashboard cambiaron de lugar (el gráfico de ventas
   va en la ancha y los chats en la angosta) y esas filas perdieron la chapita
   "Bot"/"Vos" para que entren los nombres (en Conversaciones sigue estando).

   ⚠️ El "no cambiar datos ni colores" de arriba corre para el Dashboard y para
   Conversaciones. NO corre para Turnos, Contactos y Catálogo: Tiziano las mandó
   a rehacer el 2026-07-25 con estadísticas y gráficos (ver el bloque del final).
   ══════════════════════════════════════════════════════════════ */

/* ---- El panel ---- */
/* --borde-caja: los bordes de adentro del panel van más suaves que el de la
   página (#e4e4e7). Son muchas cajas juntas y ese gris las hacía ver como una
   grilla. Se define acá y lo heredan todas: se cambian todas de una. */
.panel{--borde-caja:#eeeef1;
       display:flex;background:#fff;border:1px solid var(--borde);border-radius:16px;
       box-shadow:0 20px 50px -12px rgba(16,24,40,.18);overflow:hidden;min-height:520px;
       text-align:left;font-family:var(--sans);line-height:normal}

/* ───── Las barritas para bajar, de adentro del panel (2026-07-25) ─────
   Las que pone Windows de fábrica son anchas y grises, y en un panel prolijo
   cantan. Acá quedan finitas (6px en vez de ~17), redondeadas, sin el rectángulo
   de fondo, y se oscurecen al pasarles el mouse.
   Hay DOS formas de pedirlo y no se pueden mezclar: si se usa "scrollbar-width",
   Chrome apaga el estilo fino de "::-webkit-scrollbar" y la barra se queda en 10px
   (probado el 2026-07-25: con las dos puestas daba 10, sacando la estándar daba 6).
   Por eso Chrome/Edge/Safari van por "::-webkit-scrollbar", y a Firefox —que no lo
   entiende— se le dan las propiedades estándar dentro del @supports de abajo.
   Va con el descendiente suelto para que agarre cualquier parte del panel que
   scrollee, incluidas las que se agreguen después. La tira de secciones del celular
   NO se toca: su regla es más específica y le sigue ganando a esta. */
.panel ::-webkit-scrollbar{width:6px;height:6px}
.panel ::-webkit-scrollbar-track{background:transparent}
.panel ::-webkit-scrollbar-thumb{background:#d4d4d8;border-radius:99px}
.panel ::-webkit-scrollbar-thumb:hover{background:#a1a1aa}
@supports not selector(::-webkit-scrollbar){
  .panel,.panel *{scrollbar-width:thin}
  .panel{scrollbar-color:#d4d4d8 transparent}   /* pulgar / fondo — se hereda */
}

/* Barra lateral */
/* Barra angosta a propósito: el espacio que suelta se lo lleva el contenido. */
.side{width:158px;flex-shrink:0;background:#fff;border-right:1px solid var(--borde);padding:16px 9px;display:flex;flex-direction:column}
.marca{display:flex;align-items:center;gap:8px;padding:4px 5px 16px}
/* Tipografía del panel = la del panel de minificando: fuente del SISTEMA
   (ui-sans-serif/system-ui), números 700, títulos 600, espaciado apretado.
   Cairo queda solo para los títulos de la página, como hacen ellos. */
.marca-ico{width:30px;height:30px;display:block;flex-shrink:0}
.marca b{font-size:14px;font-weight:600;letter-spacing:-.02em;display:block;line-height:1.2}
/* Hamburguesa de las SECCIONES del panel. Solo existe en el celular (ver el
   bloque de 600 al final del archivo): en tablet y compu las cinco secciones
   están siempre a la vista, así que acá queda tapada.
   El "margin-left:auto" es lo que la manda contra el borde derecho de la
   cabecera, igual que hace el logo del navbar de la página. */
.p-hamb{display:none;margin-left:auto;flex-shrink:0;width:34px;height:34px;padding:0;
        align-items:center;justify-content:center;background:none;color:#3f3f46;
        border:1px solid var(--borde);border-radius:9px;cursor:pointer;transition:.15s}
.p-hamb:hover{background:#f4f4f5}
.p-hamb[aria-expanded="true"]{background:var(--verde-suave);border-color:#d1fae5;color:var(--verde-osc)}
.p-hamb svg{width:18px;height:18px;display:block}
.panel .nav{display:flex;flex-direction:column;gap:1px}
/* El borde transparente está siempre puesto para que al seleccionar una sección
   el texto no se corra 1px: solo cambia de color, no aparece de la nada. */
.panel .nav button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 7px;background:none;
            border:1px solid transparent;border-radius:8px;font:inherit;font-size:13px;color:#3f3f46;
            cursor:pointer;text-align:left;white-space:nowrap;transition:.15s}
.panel .nav button:hover{background:#f4f4f5}
/* Seleccionada = "levantada": borde propio + sombra verde suave abajo */
.panel .nav button.on{background:var(--verde-suave);color:var(--verde-osc);font-weight:600;
            border-color:#d1fae5;box-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 10px -3px rgba(16,185,129,.22)}
.panel .nav svg{width:16px;height:16px;flex-shrink:0;stroke-width:1.9}
.yo{margin-top:auto;display:flex;align-items:center;gap:8px;padding:9px 5px;border-top:1px solid var(--borde)}
.yo i{width:27px;height:27px;border-radius:50%;background:#e4e4e7;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;color:#52525b}
.yo b{font-size:12.5px;display:block;line-height:1.2}
.yo span{font-size:10.5px;color:var(--gris-claro)}

/* Contenido */
.panel .main{flex:1;background:var(--fondo);padding:22px;overflow:hidden;
             display:flex;flex-direction:column}
.vista{display:none;animation:entrar .28s ease}
/* Toda sección visible es una columna que se estira hasta el fondo del panel,
   así todas terminan a la misma altura y no queda hueco muerto abajo.
   OJO con el "0" pelado del flex: si fuera "0%" el navegador lo mide contra un
   alto que todavía no conoce, se va al tamaño del contenido y estira el panel
   (pasaba en Conversaciones, que pedía 452px por la ventana de mensajes). */
.vista.on{display:flex;flex-direction:column;flex:1 1 0;min-height:0}
@keyframes entrar{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.panel .titulo{font-size:18px;font-weight:600;letter-spacing:-.015em;margin-bottom:3px}
.panel .sub{font-size:13.5px;color:var(--gris-claro);margin-bottom:16px}
/* El Dashboard ya no lleva subtítulo: sin esto las tarjetas quedan pegadas al título.
   Conversaciones tampoco lleva desde el 2026-07-25, así que le toca lo mismo. */
.panel .titulo + .tarjetas,
.panel .titulo + .chat{margin-top:15px}

.tarjetas{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
/* El Catálogo lleva TRES tarjetas y no cuatro (2026-07-26): sin esto quedarían
   con el ancho de cuatro y sobraría un hueco a la derecha. Con "repeat(3,1fr)"
   se reparten en partes iguales todo el ancho que ocupaban las cuatro. */
#v-catalogo .tarjetas{grid-template-columns:repeat(3,1fr)}
.t{background:#fff;border:1px solid var(--borde-caja);border-radius:11px;padding:15px}
/* Sin letter-spacing: era para las MAYÚSCULAS. Con Title Case queda separado.
   El título va SIEMPRE en un renglón (2026-07-25). Si se parte en dos, esa tarjeta
   crece y su número queda 15px más abajo que el de las otras: las cuatro se ven
   desparejas. Pasó con "Agendados por el Bot", que pedía 112px y solo hay 100.
   Con esto, un título largo se corta con puntitos en vez de romper la fila — y los
   puntitos avisan que hay que acortarlo. */
.t small{font-size:11px;font-weight:700;color:var(--gris-claro);display:block;margin-bottom:8px;
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t b{font-size:26px;font-weight:700;letter-spacing:-.02em;display:block;line-height:1.05}
.t i{font-style:normal;font-size:11.5px;color:var(--gris-claro);display:block;margin-top:5px}
.t i.up{color:var(--verde-osc);font-weight:600}
/* red-600, el par exacto del emerald-600 del verde: mismo peso visual */
.t i.down{color:#dc2626;font-weight:600}

.caja{background:#fff;border:1px solid var(--borde-caja);border-radius:11px;padding:16px}
.caja h4{font-size:14px;font-weight:700;margin-bottom:11px;display:flex;justify-content:space-between;align-items:center}
.caja h4 a{color:var(--verde-osc);font-size:12px;text-decoration:none;font-weight:600}
.dos{display:grid;grid-template-columns:1.55fr 1fr;gap:10px}
/* Sin esto, la caja de chats exige más ancho del que le toca y se come a la otra:
   una columna "fr" nunca baja de lo que mide su contenido salvo que se le permita. */
.dos > .caja{min-width:0}

/* Qué se queda con el alto que sobra en cada sección: la tabla en las que tienen
   una sola caja, la ventana de chat en Conversaciones, y la fila de dos cajas en
   Analíticas (adentro de esas dos, el gráfico y las filas se reparten el resto). */
.vista.on > .caja{flex:1 1 0;min-height:0}
#v-conversaciones .chat{flex:1 1 0;height:auto;min-height:0}
#v-conversaciones .lista,#v-conversaciones .ventana{min-height:0}
#v-dashboard .dos{flex:1 1 0;min-height:0}
#v-dashboard .dos > .caja{display:flex;flex-direction:column}
#v-dashboard .grafico{flex:1 1 0;min-height:0}
#v-dashboard .dos .fila{flex:1}

/* Gráfico de ventas (curva suave estilo minificando, en nuestro verde) */
.chip{font-size:9.5px;font-weight:700;color:var(--verde-osc);background:var(--verde-suave);border:1px solid #a7f3d0;border-radius:99px;padding:2.5px 9px}
.grafico{position:relative;margin-top:10px}
/* Sin "cursor": el puntero se deja como venga (2026-07-25, pedido de Tiziano).
   Antes forzaba la cruz de apuntar y quedaba raro. Vale para los dos gráficos. */
.grafico svg{display:block}
.tip{position:absolute;transform:translate(-50%,-130%);background:#fff;border:1px solid var(--borde);border-radius:9px;padding:5px 11px;box-shadow:0 8px 20px rgba(16,24,40,.12);display:none;pointer-events:none;text-align:center;white-space:nowrap;z-index:2}
.tip small{display:block;font-size:9.5px;color:var(--gris-claro)}
.tip b{font-size:13.5px;font-weight:700;letter-spacing:-.02em}
/* Entrada del gráfico: la línea y el degradado se revelan JUNTOS, de izquierda
   a derecha (una "cortina" que se corre y los va descubriendo a la vez) */
@keyframes revelarGrafico{from{width:0}}
.gv-reco{animation:revelarGrafico 1.1s ease-out both}

.panel .fila{display:flex;align-items:center;gap:9px;padding:7px 5px;border-radius:8px}
.panel .fila:hover{background:#fafafa}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;flex-shrink:0}
.panel .fila .txt{flex:1;min-width:0}
/* El nombre más largo entra justo (98px de 98px) en la caja angosta del Dashboard:
   si alguno creciera, que se corte con puntitos en vez de partirse en dos líneas
   y desalinear toda la fila. */
.panel .fila .txt b{font-size:13.5px;display:block;font-weight:600;
                    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel .fila .txt span{font-size:12px;color:var(--gris-claro);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{font-size:9.5px;font-weight:700;padding:2.5px 7px;border-radius:99px;border:1px solid;white-space:nowrap}
.pill.on{color:var(--verde-osc);border-color:#a7f3d0;background:var(--verde-suave)}
.pill.off{color:var(--gris-claro);border-color:var(--borde);background:#fff}

/* Conversaciones */
.chat{display:grid;grid-template-columns:236px 1fr;gap:10px;height:392px}
.lista{background:#fff;border:1px solid var(--borde-caja);border-radius:11px;padding:7px;overflow-y:auto}
.lista .fila{cursor:pointer}
.lista .fila.sel{background:var(--verde-suave)}
.ventana{background:#fff;border:1px solid var(--borde-caja);border-radius:11px;display:flex;flex-direction:column;overflow:hidden}
.cabeza{padding:10px 13px;border-bottom:1px solid var(--borde);display:flex;align-items:center;gap:9px}
.cabeza b{font-size:14px}
.burbujas{flex:1;padding:13px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;background:#fbfbfb}
.b{max-width:76%;padding:9px 12px;border-radius:13px;font-size:13.5px;line-height:1.45;animation:entrar .3s ease}
.b.cli{background:#fff;border:1px solid var(--borde);border-bottom-left-radius:4px;align-self:flex-start}
.b.bot{background:var(--verde);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.b small{display:block;font-size:9.5px;opacity:.65;margin-top:3px}
.marca-ia{align-self:flex-end;font-size:9.5px;color:var(--verde-osc);font-weight:700;display:flex;align-items:center;gap:4px}
.punto{width:5px;height:5px;border-radius:50%;background:var(--verde);animation:latir 1.4s infinite}
@keyframes latir{0%,100%{opacity:1}50%{opacity:.25}}

/* ══════════════════════════════════════════════════════════════
   Turnos, Contactos y Catálogo — REHECHAS 2026-07-25 (pedido de Tiziano,
   siguiendo dos capturas de referencia que pasó él).
   Antes las tres eran una tabla pelada. Ahora las tres arrancan con cuatro
   estadísticas arriba (las mismas tarjetas .t del Dashboard, para que el panel
   se vea de una sola pieza) y abajo llevan un gráfico o una barrita de nivel.
   Regla de color que se siguió: el color sale de los DATOS —las barras, los
   niveles, las chapitas— y NO de las tarjetas, que quedan blancas y limpias.
   Es lo que hacen las referencias, y es lo que evita que sume color y ensucie.
   ══════════════════════════════════════════════════════════════ */

/* Reparten el alto igual que el Dashboard: la fila de abajo se come lo que sobra
   y las dos cajas terminan parejas contra el piso del panel. */
#v-turnos .dos,#v-contactos .dos{flex:1 1 0;min-height:0}
#v-turnos .dos > .caja,#v-contactos .dos > .caja{display:flex;flex-direction:column}
/* La lista scrollea adentro de su caja en vez de estirar el panel. */
#v-turnos .agenda,#v-contactos .top-cli{flex:1 1 0;min-height:0;overflow-y:auto}

/* La hora del turno, en una chapita verde para que se lea de un saque */
.ag-hora{font-size:11.5px;font-weight:700;color:var(--verde-osc);background:var(--verde-suave);
         border:1px solid #d1fae5;border-radius:7px;padding:4px 7px;flex-shrink:0;
         font-variant-numeric:tabular-nums}
/* Cuánto gastó cada cliente. "tabular-nums" = todos los números miden lo mismo,
   así la columna de plata queda alineada aunque cambien las cifras. */
.fila-monto{font-size:13px;font-weight:700;letter-spacing:-.01em;flex-shrink:0;
            font-variant-numeric:tabular-nums}
.caja-nota{font-size:10.5px;font-weight:600;color:var(--gris-claro)}

/* ───── Gráfico de barras ─────
   El espacio entre barras se controla con --gb-gap: 4px van bien para las 7 de
   Turnos, pero las 12 de Contactos necesitan menos (se pasa por style). */
/* "relative" para que el cartelito del mouse se ubique contra este marco. */
.gb{position:relative;display:flex;gap:7px;flex:1 1 0;min-height:96px;margin-top:4px}
/* El cartelito reusa el .tip del gráfico de Analíticas, pero se corre distinto:
   allá cuelga de un punto de la curva (por eso el -130% de alto), acá panel.js le
   calcula la posición exacta arriba de la barra, así que solo hay que centrarlo. */
.gb .tip{transform:translateX(-50%)}
/* La barra apuntada se oscurece un toque para que se note cuál se está mirando. */
.gb-col.mirando i{filter:brightness(.9)}
/* Los números del costado. El relleno de abajo lo baja hasta el piso de las
   barras, salteando la fila de letras (que mide ~14px). */
.gb-y{display:flex;flex-direction:column;justify-content:space-between;flex-shrink:0;
      font-size:9px;color:var(--gris-claro);text-align:right;padding-bottom:14px;
      font-variant-numeric:tabular-nums}
.gb-cuerpo{flex:1;display:flex;flex-direction:column;min-width:0}
/* Las rayas de fondo salen de un degradado que se repite cada 25% del alto: una
   línea de 1px arriba de cada cuarto. Sale más barato que dibujar cuatro divs. */
.gb-plot{flex:1;min-height:0;display:flex;gap:var(--gb-gap,4px);
         background:linear-gradient(to top,#f1f1f3 1px,transparent 1px);
         background-size:100% 25%}
/* Cada columna se estira sola a todo el alto (align-items va en "stretch", el
   valor de fábrica) y hace de riel para su barra. */
.gb-col{flex:1;position:relative;min-width:0}
/* ⚠️ La barra va ABSOLUTA pegada abajo, y NO como caja normal. Razón: el alto en
   porcentaje del HTML (style="height:X%") solo resuelve si el padre tiene un alto
   propio, y acá el alto viene de un "flex:1" —o sea, se calcula recién al armar
   la pantalla—. Puesta como caja normal el navegador no puede resolver ese
   porcentaje, lo toma como "auto", y al ser un elemento vacío queda en 0: las
   barras desaparecían. Estando absoluta, el porcentaje se mide contra la columna
   ya resuelta y anda siempre.
   La animación estira desde abajo con scaleY para no volver a tocar el alto. */
.gb-col i{position:absolute;left:0;right:0;bottom:0;border-radius:3px 3px 0 0;
          background:var(--verde);transform-origin:bottom;animation:crecerBarra .7s ease-out}
.gb-col i.tenue{background:#a7f3d0}
@keyframes crecerBarra{from{transform:scaleY(0)}}
.gb-x{display:flex;gap:var(--gb-gap,4px);margin-top:5px}
.gb-x span{flex:1;min-width:0;text-align:center;font-size:9px;color:var(--gris-claro)}

/* ───── Barrita de demanda (columna "DEMANDA" del catálogo) ─────
   Verde lo que más sale, azul lo del medio, ámbar lo poco y rojo lo que no se
   vende. Es la misma idea de semáforo de las capturas de referencia. */
.nivel{display:block;width:100%;max-width:92px;height:6px;border-radius:99px;
       background:#f1f1f3;overflow:hidden}
.nivel i{display:block;height:100%;border-radius:99px}
.nivel i.alto{background:var(--verde)}
.nivel i.medio{background:#3b82f6}
.nivel i.bajo{background:#f59e0b}
.nivel i.flojo{background:#f43f5e}

/* ───── Tablas (del panel) ─────
   ⚠️ ARREGLO 2026-07-26: el último servicio se salía de la tarjeta.
   Eran dos problemas encimados:
   1) El navegador repartía el ancho solo y a la columna del nombre le dejaba
      81px, así que TODAS las filas se partían en varios renglones ("Consulta
      inicial" en dos, "Plan trimestral (12 sesiones)" en tres). Cada fila pasaba
      de 31px a 57-93px y la tabla pedía 736px de alto donde hay 518.
   2) Los 7 servicios no entraban ni con las filas derechas.
   La solución tiene tres partes, y las tres hacen falta:
   · "table-layout:fixed" + los anchos de abajo → el reparto lo mandamos nosotros
     y la tabla NUNCA se pasa de la tarjeta, por angosto que quede el panel.
   · "nowrap" → ninguna celda se parte, todas las filas miden un renglón.
   · relleno de 6px (antes 10) → siete filas entran cómodas en la tarjeta.
   Si una celda no entra en su columna se corta con puntitos: eso avisa que hay
   que acortar el texto, no ensanchar la columna (se lo comería a otra). */
.panel table{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed}
/* Los títulos de las columnas usan la MISMA letra que "Top clientes" y demás
   títulos de caja (.caja h4): 14px, negrita, color normal y en minúscula.
   Antes iban en VERSALITA gris chiquita (10.5px con letter-spacing), que es el
   estilo típico de tabla; se cambió a pedido de Tiziano el 2026-07-26 para que
   hagan de título de la caja, ahora que la caja no lleva <h4> propio. */
.panel th{text-align:left;font-size:14px;font-weight:700;padding:0 9px 9px}
.panel td{padding:6px 9px;border-top:1px solid #f4f4f5}
/* Todo el cuerpo de la tabla lleva la misma letra que los nombres de la lista de
   Contactos (.panel .fila .txt b): 13,5px con grosor 600. Antes los nombres y los
   precios iban en negrita del navegador (700) y las cantidades en normal (400),
   o sea tres grosores distintos en la misma tabla. El "font-weight:600" hay que
   ponérselo también al <b> de adentro, porque si no el navegador se lo pisa. */
.panel td,.panel td b{font-weight:600}
.panel td,.panel th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel tr:hover td{background:#fafafa}
/* Suman 100. El nombre se lleva la parte más grande porque es el texto más largo.
   ⚠️ Para la tabla quedan 434px de verdad (el panel mide 670 pero la barra
   lateral se lleva 200 y los bordes el resto). En ese ancho SEIS columnas no
   entran de ninguna manera: por eso se sacó "CATEGORÍA" —el nombre ya dice si
   es un servicio o un plan— y la plata facturada va corta ($568k) en vez de
   entera. Antes de agregar una columna nueva, medir: no hay lugar. */
.panel th:nth-child(1){width:34%}
.panel th:nth-child(2){width:13%}
.panel th:nth-child(3){width:19%}
.panel th:nth-child(4){width:14%}
.panel th:nth-child(5){width:20%}
.et{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px}
.et.ok{background:var(--verde-suave);color:var(--verde-osc)}
.et.esp{background:#fef3c7;color:#b45309}
.et.gris{background:#f4f4f5;color:var(--gris)}
/* 600 y no 700: esta regla lleva dos clases, así que le gana a la de arriba y hay
   que repetirle el grosor o los precios volverían a verse más gruesos que el resto. */
.panel .precio{font-weight:600}

@media(max-width:860px){
  .panel{flex-direction:column;min-height:0}
  .side{width:100%;border-right:0;border-bottom:1px solid var(--borde);padding:12px}
  .marca{padding-bottom:10px}
  .yo{display:none}
  .panel .nav{flex-direction:row;overflow-x:auto;gap:5px;scrollbar-width:none}
  .panel .nav::-webkit-scrollbar{display:none}
  .panel .nav button{white-space:nowrap;padding:7px 11px}
  .tarjetas{grid-template-columns:repeat(2,1fr)}
  /* En el celular el Catálogo también va de a dos. Hay que repetirlo con el
     "#v-catalogo" adelante: la regla de arriba lleva un id y le gana a esta por
     más específica, aunque esté antes. */
  #v-catalogo .tarjetas{grid-template-columns:repeat(2,1fr)}
  .dos{grid-template-columns:1fr}
  /* En el celu todo se apila y crece con su contenido, en vez de repartirse
     el alto que sobra: si no, queda todo apretadísimo.
     ⚠️ La PRIMERA línea (.vista.on) es la que arregla un bug que estuvo dado
     vuelta hasta el 2026-07-25: en el celu el panel deja de tener alto fijo
     (min-height pasa a 0) y su alto sale del contenido. Con "flex:1 1 0" la
     sección le pedía al panel un sobrante que ya no existía, se quedaba en 0 de
     alto y el panel entero se veía cortado en ~148px. Les pasaba a las cinco
     secciones, no solo a las nuevas. Con "flex:none" cada una mide lo que mide
     su contenido y el panel crece con ellas. */
  .vista.on,
  .vista.on > .caja,#v-conversaciones .chat,#v-dashboard .dos,
  #v-turnos .dos,#v-contactos .dos{flex:none}
  #v-conversaciones .chat{height:auto}
  /* Las listas dejan de scrollear adentro y se muestran enteras, apiladas. */
  #v-turnos .agenda,#v-contactos .top-cli{flex:none;overflow:visible}
  /* El gráfico necesita un alto propio: acá ya no hay sobrante que repartir. */
  .gb{flex:none;height:130px}
  /* Lo MISMO para la curva de ventas de Analíticas, que se había pasado por alto
     (arreglo 2026-07-26). Tenía "flex:1 1 0" con "min-height:0" adentro de una
     caja que en el celular ya no reparte alto, así que se quedaba en 0 y el
     dibujo se salía de su caja y se encimaba con lo de abajo.
     Los 150px son los mismos que usa dibujarVentas() como alto mínimo en
     panel.js: si se cambia uno, cambiar el otro. */
  #v-dashboard .grafico{flex:none;height:150px}
  .chat{grid-template-columns:1fr;height:auto}
  .lista{max-height:158px}
  .ventana{height:330px}
  .ocultar-chico{display:none}
  /* En el celular la tabla se queda con 287px y solo tres columnas. Hay que
     repartirlas de nuevo (los porcentajes de arriba son para las cinco) y
     achicar el relleno de los costados, o "Atención a domicilio" no entra y
     todos los nombres salen cortados con puntitos. */
  .panel th:nth-child(1){width:52%}
  .panel th:nth-child(2){width:18%}
  .panel th:nth-child(3){width:30%}
  .panel td,.panel th{padding-left:6px;padding-right:6px}
  /* Medio punto menos de letra: es lo justo para que entre "Atención a
     domicilio", el nombre más largo del catálogo. Los títulos de columna llevan
     su propio tamaño (no heredan el de la tabla), así que se bajan aparte. */
  .panel table{font-size:12.5px}
  .panel th{font-size:13px}
}

/* ═══════════ TABLET (601–860px) — EL PANEL REARMADO ═══════════
   El bloque de 860 de arriba está pensado para el CELULAR: ahí todo se apila y
   el panel crece con el contenido, así que cada sección le daba un alto distinto
   (medido a 768px: Conversaciones 582px y Turnos 1219px). En la tablet eso se
   veía como un panel que se agranda y se achica solo al cambiar de sección.
   Acá se rearma para tablet (pedido de Tiziano, 2026-07-31), y son tres cosas:
   el panel queda de un alto FIJO, las cinco secciones se reparten ese alto
   (como en la compu) y las dos cajas de abajo vuelven a ir lado a lado.

   Este bloque va DESPUÉS del de 860 a propósito: donde las dos reglas pesan lo
   mismo, gana la de más abajo. Cuando hace falta pisar una regla del de arriba
   que lleva un id (#v-conversaciones, #v-dashboard...), acá también se le pone
   el id, o perdería por menos específica. */
@media(min-width:601px) and (max-width:860px){

  /* 1) EL ALTO FIJO. 645px NO es un número inventado: es lo que mide Analíticas
        sin la caja de "Últimas conversaciones" (fila de nav 102 + 44 de relleno
        + 2 de bordes + 497 de contenido). Ese es el alto que pidió Tiziano y
        ahora lo usan las cinco secciones, así el panel no se mueve nunca al
        cambiar de pestaña.
        Los 2px de más sobre los 643 que da la cuenta pelada son a propósito: el
        gráfico de ventas NUNCA se dibuja de menos de 150px de alto (ese piso
        está escrito en dibujarVentas(), en panel.js). Con 643 su caja quedaba en
        148 y el dibujo se salía 2px. Si se cambia uno hay que mirar el otro.
        ⚠️ Si algún día cambia lo que hay en Analíticas (otra fila de tarjetas,
        un gráfico más alto), hay que volver a MEDIR y actualizar este número. */
  .panel{height:645px}

  /* 2) Con alto fijo vuelve a haber sobrante para repartir, así que se deshace
        el "flex:none" del bloque de arriba (que existe porque en el celular no
        hay nada que repartir). Cada sección se estira hasta el piso del panel y
        lo que sobra se lo llevan el gráfico y las listas. */
  .vista.on,.vista.on > .caja,#v-conversaciones .chat,
  #v-dashboard .dos,#v-turnos .dos,#v-contactos .dos{flex:1 1 0;min-height:0}
  /* Las listas largas scrollean adentro de su caja en vez de estirar el panel
     (la agenda tiene 11 turnos y no entran nunca; en la compu tampoco entran). */
  #v-turnos .agenda,#v-contactos .top-cli{flex:1 1 0;min-height:0;overflow-y:auto}
  /* Los gráficos vuelven a tomar el alto que sobra en vez de uno clavado. El
     mínimo de 96px es el de la regla original: por debajo las barras no se leen.
     El de Analíticas se redibuja solo al cambiar el tamaño (panel.js escucha
     "resize" y lo dibuja con el alto real de su caja, mínimo 150). */
  .gb{flex:1 1 0;height:auto;min-height:96px}
  #v-dashboard .grafico{flex:1 1 0;height:auto;min-height:0}

  /* 3) CONVERSACIONES lado a lado, como en la compu: los nombres en la columna
        angosta de la izquierda y el chat entero al lado (no apilados).
        200px y no los 236 de la compu: acá el panel es más angosto y hay que
        dejarle ancho al chat, o las burbujas salen de a una palabra por renglón. */
  #v-conversaciones .chat{grid-template-columns:200px 1fr;height:auto}
  .lista{max-height:none}
  .ventana{height:auto}

  /* 4) Las dos cajas de abajo (agenda + gráfico, top clientes + gráfico) vuelven
        a ir una al lado de la otra: apiladas no entraban en el alto fijo. */
  .dos{grid-template-columns:1fr 1fr}

  /* 5) ANALÍTICAS sin "Últimas conversaciones" (pedido de Tiziano): en la tablet
        esa caja repetía lo que ya muestra la pestaña Conversaciones y era lo que
        estiraba la sección. El gráfico se queda con todo el ancho.
        El "grid-template-columns:1fr" hace falta porque si no quedaría media
        fila vacía a la derecha, ahora que hay una sola caja. */
  #v-dashboard .dos{grid-template-columns:1fr}
  #v-dashboard .dos > .caja:nth-child(2){display:none}

  /* 6) CATÁLOGO: son TRES tarjetas en dos columnas, así que la tercera quedaba
        sola y a media fila, con un hueco al lado. Con "grid-column:1/-1" (=de la
        primera columna a la última) "Ticket Promedio" ocupa la fila entera y las
        tres quedan simétricas. */
  #v-catalogo .tarjetas .t:nth-child(3){grid-column:1/-1}
  /* Y las filas de la tabla van 2px más finitas arriba y abajo: con el alto fijo,
     las 7 filas pedían 21px más de los que hay. Con 4 en vez de 6 entran las
     siete sin barra de scroll (medido: 222 de contenido en 224 de caja). */
  #v-catalogo td{padding-top:4px;padding-bottom:4px}
}

/* ═══════════ CELULAR (hasta 600px) — EL PANEL REARMADO ═══════════
   Lo mismo que se hizo en tablet, pero para el celular (pedido de Tiziano,
   2026-07-31), más una cosa que el celular necesitaba aparte: la HAMBURGUESA.
   Los tres problemas que arregla, en orden:
   · La fila de secciones no entraba a lo ancho y había que arrastrarla de
     costado para llegar a Contactos y Catálogo (se veían cortados contra el
     borde). Ahora la fila se guarda detrás de un botón.
   · Analíticas mostraba "Últimas conversaciones", que repite lo que ya muestra
     la pestaña Conversaciones.
   · El panel cambiaba de alto en cada sección (a 375px: 691 en Conversaciones,
     1385 en Turnos), así que la página saltaba al cambiar de pestaña.
   Va después del bloque de tablet y antes del de 400: el de 400 es un caso más
   chico del celular y tiene que poder pisar lo de acá. */
@media(max-width:600px){

  /* 1) LA CABECERA. La marca a la izquierda y la hamburguesa a la derecha, en
        una sola fila baja. El "position:relative" es lo que hace que la lista de
        secciones se cuelgue de ESTA cabecera y no de otra cosa. */
  .side{position:relative;padding:10px 12px}
  .marca{padding:0}
  .p-hamb{display:flex}

  /* La lista de secciones deja de ser una fila que se arrastra y pasa a ser una
     tarjeta flotante que baja de la cabecera. "position:absolute" = queda por
     ENCIMA del contenido en vez de empujarlo, así abrirla no mueve nada de lugar
     ni cambia el alto del panel. La abre panel.js poniéndole la clase "abierto". */
  .panel .nav{position:absolute;top:100%;left:10px;right:10px;z-index:5;
              display:none;flex-direction:column;gap:2px;overflow:visible;
              background:#fff;border:1px solid var(--borde);border-radius:12px;
              box-shadow:0 14px 34px -8px rgba(16,24,40,.22);padding:6px;margin-top:6px}
  .panel .nav.abierto{display:flex}
  .panel .nav button{padding:10px 11px}

  /* 2) EL ALTO FIJO, igual que en tablet: lo que mide Analíticas sin la caja de
        "Últimas conversaciones". Son 49px menos que el de tablet (645) porque la
        cabecera con hamburguesa mide 55px y la fila de secciones medía 102.
        Medido: 596 de 401 a 600px de ancho, y 556 abajo de 400 (ahí las tarjetas
        llevan menos relleno). Se usa el MÁS GRANDE para los dos: en un celular
        angosto sobran 40px que se los lleva el gráfico —queda un poco más alto,
        se ve igual de bien— y a cambio hay un solo número que mantener.
        ⚠️ Mismo cuidado que en tablet: si cambia lo que hay en Analíticas, hay
        que volver a MEDIR este número. */
  .panel{height:596px}

  /* 3) Con alto fijo vuelve a haber sobrante para repartir (se deshace el
        "flex:none" del bloque de 860, que está pensado para un panel que crece
        con su contenido). */
  .vista.on,.vista.on > .caja,#v-conversaciones .chat,#v-dashboard .dos,
  #v-turnos .dos,#v-contactos .dos{flex:1 1 0;min-height:0}
  #v-turnos .agenda,#v-contactos .top-cli{flex:1 1 0;min-height:0;overflow-y:auto}
  #v-dashboard .grafico{flex:1 1 0;height:auto;min-height:0}

  /* 4) ANALÍTICAS sin "Últimas conversaciones" (pedido de Tiziano). */
  #v-dashboard .dos > .caja:nth-child(2){display:none}

  /* 5) TURNOS y CONTACTOS: en el celular va UNA sola caja, no dos. Acá las dos
        no pueden ir lado a lado (a 320px no entran), así que quedaban apiladas y
        MEDIDO a 320 no daba: de los 511px de contenido, las cuatro tarjetas se
        llevan 205 y el gráfico de barras pide 194 con su cabecera, así que a la
        lista le quedaban 60 y adentro de la caja eso es MENOS QUE CERO (la
        agenda quedaba en 0px de alto y la sección se salía 8px del panel).
        Se elige quedarse con la LISTA y esconder el gráfico de barras: en un
        celular vale más ver a quién tenés hoy, con nombre y hora, que siete
        barras; y el gráfico de Analíticas ya cuenta la parte de los números.
        Es la misma decisión que se tomó con "Últimas conversaciones": en el
        celular, una cosa por sección.
        👉 Si algún día se prefiere al revés, se cambia el "nth-child(2)" por
        "nth-child(1)" y listo — pero las dos juntas no entran. */
  #v-turnos .dos > .caja:nth-child(2),
  #v-contactos .dos > .caja:nth-child(2){display:none}

  /* 6) CONVERSACIONES: la lista de nombres arriba con su alto de siempre y el
        chat abajo llevándose todo lo que sobra (antes tenía 330px clavados). */
  #v-conversaciones .chat{grid-template-rows:auto 1fr}
  .ventana{height:auto}

  /* 7) CATÁLOGO: mismas filas finitas que en tablet, para que los siete
        servicios entren sin barra de scroll. */
  #v-catalogo td{padding-top:4px;padding-bottom:4px}
}

/* ═══════════ CELULAR ANGOSTO (320px, la pantalla más chica) ═══════════
   Todo esto se midió el 2026-07-26 a 320px, que es la medida más chica que hay
   que soportar. Con las reglas de 860 el panel queda de 280px y adentro no entra
   nada: las tarjetas se salían 24px del panel (la de la derecha aparecía cortada)
   y la tabla pedía 233px donde había 200.
   Los tres arreglos van juntos y cada uno recupera lo suyo. */
@media(max-width:400px){
  /* 1) El relleno del panel baja de 22 a 14px. En una pantalla de 280px, 44px de
        aire a los costados era el 16% del panel. Recupera 16px para todo.
        Va con ".panel .main" y no ".main" a secas: la regla original (arriba, en
        .panel .main) lleva dos clases y le ganaría a una sola por más específica,
        aunque esté antes en el archivo. */
  .panel .main{padding:14px}
  /* 2) Las tarjetas pasan de cuatro (o tres) a DOS por fila, y con "minmax(0,1fr)"
        en vez de "1fr": ese es el arreglo de fondo. Con "1fr" pelado la tarjeta no
        puede achicarse más que su contenido, así que en vez de encogerse se salía
        del panel. El relleno de cada tarjeta baja de 15 a 9px, que es lo justo para
        que entre el texto más largo ("hace más de 30 días", 103px). */
  .tarjetas,#v-catalogo .tarjetas{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .t{padding:9px 9px 10px}
  /* 3) La tabla del Catálogo se queda con DOS columnas. Con las tres, "Atención a
        domicilio" y hasta el título "Cant." salían cortados con puntitos. Sin esa
        columna, Servicio pide 129px y Precio 60: entran de sobra en los 216px que
        quedan. Los porcentajes de arriba son para tres columnas, así que hay que
        repartir de nuevo entre las dos que quedan. */
  .ocultar-mini{display:none}
  .panel th:nth-child(1){width:66%}
  .panel th:nth-child(3){width:34%}
}