con table-layout auto es indefinido, y cambiar el display del td
rompería el layout de la tabla. Sin esto, el Requerimiento de un lead acapara
el ancho y estira la fila varias líneas. */
/* `overflow-wrap: anywhere` y NO `word-break: break-word`: el segundo permite
partir dentro de una palabra corta aunque quepa, y con celdas angostas cortaba
un teléfono dígito a dígito. `anywhere` solo parte cuando no hay otra salida. */
.cell-clip {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
line-clamp: 2; overflow: hidden; max-width: 100%; margin: 0 auto;
overflow-wrap: anywhere;
}
/* ---- Tabla de Leads: entra SIEMPRE en el ancho disponible ----
Con `table-layout: auto` el navegador repartía el ancho según el contenido y
las 10 columnas empujaban la tabla más allá del panel (barra horizontal). Con
layout FIJO el ancho total es el del panel y cada columna respeta lo que se le
asigna acá; el texto largo lo absorbe `.cell-clip` (2 líneas + tooltip). Las
columnas sin ancho declarado (Requerimiento, Vehículo) se reparten el resto.
Los anchos van SOLO en % y suman 78%: el 22% restante se lo reparten esas dos
columnas de texto libre, y la tabla acompaña al viewport. Sin `min-width` a
propósito — bajo layout fijo el ancho sale de la primera fila y un min-width
que sumara más de 100% reintroduciría el desborde que esto viene a eliminar.
TODO EL BLOQUE VA DENTRO DE `min-width: 641px` A PROPÓSITO. Los selectores
llevan el id `#view-leads` (especificidad 1,1,0) y las media queries NO
aportan especificidad: fuera de este envoltorio, `width: 11.5%` le ganaba a
la regla de tarjetas apiladas `.scroll-panel.has-table … td { width: 100% }`
(0,3,2) y en el teléfono la celda del teléfono medía ~25px de contenido —
el número salía en columna, un dígito por línea (incidente 2026-07-25).
Debajo de 641px la tabla NO es una tabla: es una lista de tarjetas y estos
anchos no deben existir. Regla general en `.claude/PROJECT_CONTEXT.md`. */
@media (min-width: 641px) {
#view-leads table { table-layout: fixed; }
#view-leads thead th, #view-leads tbody td { padding: 10px 8px; }
/* El encabezado envuelve en vez de cortarse: con `white-space: nowrap` y ancho
fijo, "Última actividad" se veía como "Última activida". */
#view-leads thead th { white-space: normal; }
/* Anchos derivados del MÍNIMO MEDIDO de cada columna, no elegidos a ojo. El
mínimo es el min-content de su encabezado (varios son una palabra suelta que
no puede envolver: "Número" 65px, "Requerimiento" 106px) o el del control
que contiene, que manda cuando es más ancho: el select de Estado necesita
179px para "Pendiente de contacto" y el botón de Acciones 95px para
"derivaciones". El caso crítico es 1280px, donde la tabla mide 982px: ahí la
suma de los 11 mínimos da 94.8%, así que entran, pero sin margen.
Los declarados suman 78.2%; el 21.8% libre se lo reparten Requerimiento y
Vehículo (10.9% = 107px cada una a 1280px, sobre un mínimo de 106).
Verificado a 1280/1366/1440/1920 px con el medidor por columna.
ANTES de tocar cualquiera de estos números, re-medí: bajar uno solo corta
su encabezado (a 5% "Número" se leía "Númer") y subirlo le roba al pool
libre, que es quien sostiene a Requerimiento. */
#view-leads .col-numero { width: 6.7%; }
#view-leads .col-nombre { width: 6.7%; }
#view-leads .col-telefono { width: 7.5%; }
#view-leads .col-medidas { width: 7%; }
#view-leads .col-ejecutivo { width: 7.5%; }
#view-leads .col-sucursal { width: 7%; }
#view-leads .col-estado { width: 18.5%; }
#view-leads .col-actividad { width: 7.5%; }
/* Medido de nuevo el 2026-07-28 al pasar de un botón "Ver derivaciones" a un menú
"Acciones ⌄": a 1280px la celda necesita 105px (contenido 75 + padding del botón
14 + padding de la celda 16) = 8.51%. Con 8.8% quedan ~4px de margen y el 1%
liberado cae solo en el pool libre, que es quien sostiene a Requerimiento.
Los anchos de las media queries más angostas NO se tocaron: ahí la etiqueta ya
envolvía, y "Acciones" es más corta que "Ver derivaciones". */
#view-leads .col-acciones { width: 8.8%; }
/* Teléfono y fecha son `.mono` (nowrap): con layout fijo deben poder envolver
antes que desbordar su celda. */
#view-leads tbody td .mono { white-space: normal; overflow-wrap: anywhere; }
#view-leads .col-estado .estado-select {
width: 100%; max-width: 100%; padding: 6px 22px 6px 9px; font-size: 11.5px;
background-position: right 6px center;
}
#view-leads .col-acciones .btn { width: 100%; padding: 6px 6px; font-size: 11.5px; }
}
/* ---- Prioridad de columnas (tablet y laptop angosta) ----
Una columna marcada `prio-3` en su
es secundaria: mientras la tabla no
dé para todas, se ocultan las menos consultadas. `labelizeTable` (app.js)
copia la clase del
a cada
, así se declara una sola vez.
El corte va en 1280px y no en 1024: a 1025px el sidebar vuelve a ocupar
240px, así que la tabla mide ~730px — MENOS que en una tablet de 1024 sin
sidebar. Con las 10 columnas ahí, "Pendiente de contacto" (179px con sus
paddings) no entra en ninguna repartición razonable.
Debajo de 641px NO se oculta nada: la fila ya es una tarjeta y cabe todo. */
@media (min-width: 641px) and (max-width: 1279px) {
.prio-3 { display: none; }
}
.empty-state, .loading-state {
padding: 40px 16px; text-align: center; color: var(--muted); font-size: 13.5px;
}
.loading-state .spinner { margin: 0 auto 12px; }
.spinner {
width: 22px; height: 22px; border-radius: 50%;
border: 2.5px solid var(--border-strong); border-top-color: var(--accent);
animation: spin .7s linear infinite;
}
/* ============================================================
Embudo (barras horizontales)
============================================================ */
.funnel { display: flex; flex-direction: column; gap: 12px; }
.funnel-row { display: grid; grid-template-columns: 150px 1fr 46px; align-items: center; gap: 12px; }
.funnel-row .fl-label { font-size: 13px; color: var(--muted); }
.funnel-row .fl-bar-bg { background: var(--surface-2); border-radius: var(--radius-pill); height: 12px; overflow: hidden; }
.funnel-row .fl-bar { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width .5s var(--ease); }
.funnel-row .fl-val { font-size: 13px; font-weight: 600; text-align: right; }
/* ============================================================
Conversaciones (burbujas)
============================================================ */
#conv-list td:first-child { font-weight: 500; }
.chat-panel { max-height: 520px; }
.chat { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: 13px; line-height: 1.45; }
.bubble .bt { display: block; font-size: 10.5px; color: var(--muted); margin-top: 5px; }
.bubble.user { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: 4px; }
.bubble.assistant { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; }
.bubble.assistant .bt { color: color-mix(in srgb, var(--on-accent) 60%, transparent); }
.chat-head {
position: sticky; top: 0; z-index: 1; margin: -16px -16px 4px; padding: 12px 16px;
background: var(--surface-2); border-bottom: 1px solid var(--border);
font-size: 12.5px; color: var(--muted); font-weight: 500;
}
.chat-head .mono { color: var(--text); font-weight: 600; }
.chat-empty { display: grid; place-items: center; height: 100%; min-height: 200px; color: var(--muted); text-align: center; padding: 24px; }
/* Modal "Ver derivaciones" */
.deriv-item { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); }
.deriv-item .deriv-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.deriv-item .deriv-card { white-space: pre-wrap; font-size: 13px; line-height: 1.45; color: var(--text); }
/* ============================================================
Consumo
============================================================ */
.progress { background: var(--surface-2); border-radius: var(--radius-pill); height: 10px; overflow: hidden; margin-top: 10px; }
.progress .bar { height: 100%; background: var(--ok-fg); border-radius: var(--radius-pill); transition: width .5s var(--ease); }
.progress .bar.warn { background: var(--warn-fg); }
.progress .bar.bad { background: var(--bad-fg); }
/* Radio-cards (ajustes) */
.radio-cards { display: flex; flex-direction: column; gap: 10px; }
.radio-card {
display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer;
transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.radio-card:hover { background: var(--surface-hover); }
.radio-card.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.radio-card input { margin-top: 3px; accent-color: var(--accent); }
.radio-card .rc-title { font-weight: 600; font-size: 14px; }
.radio-card .rc-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.setting-row {
display: flex; align-items: center; gap: 16px; padding: 16px 0;
border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-row .sr-text { flex: 1; }
.setting-row .sr-title { font-weight: 600; font-size: 14px; }
.setting-row .sr-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
/* Sucursales — grilla responsive: dos (o más) sucursales lado a lado; en
pantallas angostas colapsa a una sola columna (auto-fit, sin media query). */
/* `min(340px, 100%)`: en un teléfono de 320px el minmax fijo desbordaba la
pantalla (la pista no puede ser más ancha que el contenedor). */
#sucursales-list {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
gap: 16px; align-items: start;
}
.suc-card { margin-bottom: 0; }
.suc-card .suc-group {
font-size: 12px; font-weight: 600; text-transform: uppercase;
letter-spacing: .5px; color: var(--muted); margin: 16px 0 0;
}
.suc-maps {
display: inline-block; margin-top: 6px; font-size: 12.5px;
color: var(--accent); text-decoration: none; font-weight: 600;
}
.suc-maps:hover { text-decoration: underline; }
.switch input:disabled + .track { opacity: .45; cursor: not-allowed; }
/* Acciones de la card de sucursal (editar/eliminar) e iconos por servicio */
.suc-actions { display: inline-flex; gap: 4px; margin-left: 6px; }
.svc-actions { display: inline-flex; gap: 2px; margin-right: 4px; }
.icon-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; padding: 0; border-radius: var(--radius-sm);
border: 1px solid transparent; background: transparent; color: var(--muted);
cursor: pointer; transition: background-color .16s var(--ease), color .16s var(--ease);
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn.danger:hover { background: var(--bad-bg); color: var(--bad-fg); }
.field-hint { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 2px; }
/* Cabecera de sucursal: nombre + badge de estado en una línea. */
.suc-head-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Editor de horarios por día (estilo WhatsApp Business). Cada día apila: arriba el
nombre + "Cerrado"; debajo el rango horario. Así NUNCA desborda el modal (móvil
incluido) y el checkbox queda siempre dentro del recuadro. */
.hours-grid { display: flex; flex-direction: column; gap: 10px; }
.hours-row { display: flex; flex-direction: column; gap: 6px; font-weight: 400; color: var(--text); }
.hours-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hours-row-head .hours-day { font-size: 13px; font-weight: 500; }
.hours-times { display: flex; align-items: center; gap: 8px; }
.hours-times .input { flex: 1 1 0; width: auto; min-width: 0; max-width: 150px; padding: 8px 8px; }
.hours-times .hours-sep { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.hours-row input:disabled { opacity: .5; }
.hours-row.is-closed .hours-times { display: none; }
.hours-closed { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
font-size: 12.5px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.hours-closed input { accent-color: var(--accent); }
/* ============================================================
Toast + modal
============================================================ */
.toast-stack { position: fixed; bottom: 22px; right: 22px; z-index: 90; display: flex; flex-direction: column; gap: 10px; }
.toast {
min-width: 240px; max-width: 360px; padding: 12px 16px; border-radius: var(--radius-sm);
background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
font-size: 13.5px; display: flex; align-items: center; gap: 10px;
animation: toast-in .3s var(--ease);
}
.toast.hide { animation: toast-out .25s var(--ease) forwards; }
.toast .ic { width: 20px; height: 20px; flex-shrink: 0; }
.toast.ok .ic { color: var(--ok-fg); }
.toast.bad .ic { color: var(--bad-fg); }
.modal-backdrop {
position: fixed; inset: 0; background: rgba(20, 20, 19, .5);
display: grid; place-items: center; z-index: 80; padding: 24px;
animation: fade .2s var(--ease);
}
.modal-backdrop[hidden] { display: none; }
.modal {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
/* Sin padding-bottom a propósito: el footer sticky de `.actions` es el último
elemento y aporta él su propio espaciado. Con padding-bottom, el footer se
pegaba al borde del *padding box* y quedaba flotando 24px por encima del
fondo real del modal — el hueco por el que se veía el contenido pasar por
debajo (reporte "crear sucursal", 2026-07-24). */
padding: 24px 24px 0; max-width: 380px; width: 100%; box-shadow: var(--shadow-lg);
animation: rise .28s var(--ease);
/* Nunca más alto que el viewport: el cuerpo scrollea por dentro (con la grilla
de horarios el modal crecía y los botones quedaban fuera de pantalla). */
max-height: calc(100vh - 48px);
max-height: calc(100dvh - 48px);
overflow-y: auto; overflow-x: hidden;
}
/* Los DOS modales sin footer de acciones (cabecera + contenido) recuperan el
espacio inferior que el footer habría aportado. Explícitos por id en vez de
`:not(:has(.actions))`: se lee de una y no depende del soporte de :has(). */
#conv-modal .modal, #deriv-modal .modal { padding-bottom: 24px; }
.modal h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.modal p { font-size: 13.5px; color: var(--muted); margin-bottom: 20px; }
/* Footer de acciones SIEMPRE visible (pegado al fondo del modal aunque se
scrollee): así Guardar/Cancelar nunca quedan fuera de vista. */
.modal .actions {
display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
position: sticky; bottom: 0; z-index: 1;
margin: 16px -24px 0; padding: 14px 24px;
background: var(--surface); border-top: 1px solid var(--border);
border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}
/* Con 3 acciones ("Cancelar · Descartar · Derivar a ejecutivo") el texto se
partía en dos líneas y se amontonaba: los botones no se parten y, si no
entran, la fila envuelve limpio (flex-wrap arriba). */
.modal .actions .btn { white-space: nowrap; }
.modal.modal-wide { max-width: 680px; }
/* Anchos por id DENTRO de `min-width`: un `#id` (1,1,0) le gana a `.modal`
(0,1,0) aunque la otra regla esté en una media query, así que sin este
envoltorio el modal de 468px seguía midiendo 468px en un teléfono de 320px
y se salía de pantalla. Misma trampa de especificidad que rompió Leads. */
@media (min-width: 641px) {
#ab-bulk-modal .modal { max-width: 468px; }
#suc-modal .modal { max-width: 468px; }
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-head h3 { margin-bottom: 0; }
/* ============================================================
Menú de acciones de una fila (Leads)
Va con el atributo `popover`, así el navegador lo dibuja en su CAPA SUPERIOR: el
`.scroll-panel` de la tabla tiene `overflow: auto` y recortaría cualquier menú
normal justo en la última fila. `position: fixed` + top/left calculados en JS
porque el anclaje al botón lo daría CSS anchor positioning, que todavía no es
universal. TODO por clases: un `#id` con ancho/alto acá rompería
tests/test_dashboard_responsive.py y, peor, le ganaría a las media queries.
============================================================ */
.row-menu {
position: fixed; inset: auto; margin: 0; padding: 6px;
min-width: 208px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.row-menu .menu-item {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 9px 12px;
background: transparent; border: none; border-radius: 8px;
font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text);
text-align: left; cursor: pointer;
transition: background-color .12s var(--ease);
}
/* El amarillo de marca entra por el hover, no por el relleno: cuatro botones
sólidos en la columna de acciones le competían al semáforo de Estado, que es lo
único que el ejecutivo escanea. */
.row-menu .menu-item:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }
.row-menu .menu-item:disabled { color: var(--muted); cursor: not-allowed; }
.row-menu .menu-item svg { width: 15px; height: 15px; flex-shrink: 0; }
/* Un ítem deshabilitado y mudo obliga a adivinar: la razón va debajo, alineada al
texto del ítem. */
.row-menu .menu-note {
padding: 2px 12px 8px 34px; margin: 0;
font-size: 11.5px; line-height: 1.35; color: var(--muted);
}
/* Los mismos ítems dentro del modal de respaldo (navegador sin popover). */
.row-menu-plano {
position: static; padding: 0; min-width: 0;
background: transparent; border: none; box-shadow: none;
}
/* Disparador: el chevron gira al abrir. */
.btn .chev { width: 13px; height: 13px; transition: transform .16s var(--ease); }
.btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Fila recién reasignada: en tablet la columna "Ejecutivo asignado" está oculta
(prio-3), así que sin esta señal el operador no ve que algo cambió. */
tbody tr.row-flash { animation: row-flash 1.2s var(--ease); }
@keyframes row-flash {
0%, 55% { background-color: color-mix(in srgb, var(--accent) 30%, transparent); }
100% { background-color: transparent; }
}
.backdrop-mobile { display: none; }
/* ============================================================
Tooltip informativo (icono i sobre las tarjetas)
============================================================ */
/* El globo se ancla a la TARJETA (`.kpi` ya es position:relative), no al icono:
centrado sobre el icono, el de la última tarjeta de la fila se salía por la
derecha y hacía scrollear la página entera (768px y 1024px). Anclado a la
tarjeta ocupa su ancho y nunca puede exceder la grilla. `position: static` en
`.info` es lo que traslada el bloque contenedor a la tarjeta. */
.info { position: static; display: inline-flex; align-items: center; color: var(--muted); cursor: help; }
.info svg { width: 15px; height: 15px; }
.info:hover, .info:focus-visible { color: var(--accent); outline: none; }
.info .tip {
position: absolute; top: calc(100% + 9px); left: 0; right: 0;
transform: translateY(-4px);
width: auto; padding: 10px 12px; border-radius: 10px;
background: var(--surface); color: var(--text); border: 1px solid var(--border);
box-shadow: var(--shadow-lg); font-size: 12px; line-height: 1.45; font-weight: 400;
text-align: left; white-space: normal;
opacity: 0; visibility: hidden; pointer-events: none; z-index: 45;
transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.info .tip::after {
content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
border: 6px solid transparent; border-bottom-color: var(--surface);
}
.info:hover .tip, .info:focus-visible .tip {
opacity: 1; visibility: visible; transform: translateY(0);
}
/* ============================================================
Estados de lead (badges de color, en negrita)
============================================================ */
.estado-select {
appearance: none; border: none; cursor: pointer; color: #fff;
font-family: inherit; font-weight: 700; font-size: 12px; letter-spacing: .2px;
padding: 6px 28px 6px 13px; border-radius: var(--radius-pill);
background-repeat: no-repeat; background-position: right 9px center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
transition: background-color .16s var(--ease), transform .12s var(--ease);
}
.estado-select:hover { transform: translateY(-1px); }
.estado-select option { color: var(--text); background: var(--surface); font-weight: 500; }
.estado-select.est-pendiente_contacto { background-color: #dc3b3b; }
.estado-select.est-contactado { background-color: #de7c00; }
.estado-select.est-venta_realizada { background-color: #2f9e44; }
.estado-select.est-cerrada_sin_venta { background-color: #6b7280; }
/* Compat: leads legacy que sigan en 'cerrado' (verde, hasta reclasificarse). */
.estado-select.est-cerrado { background-color: #2f9e44; }
/* Selector de ACCIONES (Chats abandonados). No comunica un estado, así que va
neutro: reusar `.estado-select` lo dejaba con `color:#fff` y sin
background-color (ninguna clase `est-*`) → texto blanco sobre blanco, la
columna se veía vacía. Minimalista, con el amarillo de marca solo al
interactuar. */
.action-select {
/* Ancho FIJO: un