:root{
  --ink:#14131F; --signal:#5B4EF4; --pulse:#FF5B45; --live:#14C783; --amber:#FFAB1F;
  --paper:#F5F4FB; --white:#FFFFFF; --line:#E7E4F5; --muted:#6E6B85;
  --signal-glow:rgba(91,78,244,.25); --live-glow:rgba(20,199,131,.25);
  --pill-live-bg:#E4FBF0; --pill-warn-bg:#FFF3E0; --pill-due-bg:#FFE5E0;
  --card-shadow:0 1px 2px rgba(20,19,31,.05);
}
[data-theme="dark"]{
  --ink:#F1F0F8; --signal:#8B7CFF; --pulse:#FF6B52; --live:#2FF0B0; --amber:#FFC53D;
  --paper:#0A0A12; --white:#14141F; --line:#26263A; --muted:#8D8BA8;
  --signal-glow:rgba(139,124,255,.35); --live-glow:rgba(47,240,176,.30);
  --pill-live-bg:rgba(47,240,176,.12); --pill-warn-bg:rgba(255,197,61,.12); --pill-due-bg:rgba(255,107,82,.12);
  --card-shadow:none;
}
html[data-theme="dark"] body{
  background-image:radial-gradient(ellipse 900px 500px at 15% -10%,rgba(139,124,255,.14),transparent 60%),radial-gradient(ellipse 700px 500px at 100% 10%,rgba(47,240,176,.07),transparent 60%);
  background-attachment:fixed;
}
*{box-sizing:border-box;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
/* Asegura que el texto que escribes se vea en cualquier campo, en cualquier modo —
   los estilos en línea de otras pantallas definen fondo pero no color de texto,
   así que esta regla general cubre a todos sin tener que tocar cada uno. */
input,textarea,select{color:var(--ink);}
input[type=text],input[type=number],input[type=password],input[type=email],input[type=file],textarea,select{background:var(--paper);}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;transition:background .2s,color .2s;}
a{color:inherit;}

.scope-switch{max-width:1180px;margin:0 auto;padding:calc(16px + env(safe-area-inset-top)) 32px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;position:relative;}
.scope-switch-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
.scope-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;}
.scope-logo .logo-img{width:30px;height:30px;border-radius:8px;object-fit:cover;display:block;}
.scope-logo .logo-fallback{width:30px;height:30px;border-radius:8px;background:var(--signal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:'Space Grotesk',sans-serif;}
.scope-btn{border:1.5px solid var(--line);background:var(--white);color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:9px 16px;border-radius:20px;text-decoration:none;display:inline-block;white-space:nowrap;}
.scope-btn.active{background:var(--ink);color:var(--white);border-color:var(--ink);}
.negocio-switch{position:relative;flex-shrink:0;}
.negocio-switch .scope-btn{cursor:pointer;}
.negocio-switch .menu-cuenta-dropdown{left:0;right:auto;}

.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* Selector de estado Conectado/Ausente (vendedores de negocios puntuales —
   ver usuario_tiene_selector_estado() en helpers.php). Mismo patrón botón +
   dropdown que .negocio-switch, para que en el celular no sufra el mismo
   problema que tuvo antes un <select> nativo (alto variable que empujaba
   el chat fuera de pantalla). */
.estado-switch{position:relative;flex-shrink:0;}
.estado-btn{display:flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:var(--white);color:var(--ink);font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:8px 14px 8px 10px;border-radius:20px;cursor:pointer;white-space:nowrap;}
.estado-btn:hover{border-color:var(--muted);}
.estado-btn[aria-expanded="true"]{border-color:var(--signal);}
.estado-btn.is-ausente{border-color:var(--pulse);color:var(--pulse);}
.estado-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.estado-dot.conectado{background:var(--live);box-shadow:0 0 0 3px var(--live-glow);}
.estado-dot.ausente{background:var(--muted);}
.estado-caret{font-size:9px;opacity:.7;margin-left:1px;}
.estado-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(20,19,31,.16);width:250px;max-width:calc(100vw - 24px);padding:6px;z-index:60;}
.estado-dropdown.open{display:block;}
.estado-opcion{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:none;border:none;padding:10px;border-radius:10px;cursor:pointer;box-sizing:border-box;}
.estado-opcion:hover{background:var(--paper);}
.estado-opcion .estado-dot{margin-top:4px;}
.estado-opcion-title{display:block;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--ink);}
.estado-opcion-desc{display:block;font-family:'Inter',sans-serif;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4;}

/* Menú de cuenta (⋯) — agrupa todo lo que no es navegación real (instalar
   la app, notificaciones, tema, cerrar sesión) detrás de un solo botón, en
   vez de una fila de botones sueltos. Mismo componente en escritorio y
   celular — no hay dos versiones que mantener por separado. */
.menu-cuenta{position:relative;flex-shrink:0;}
.menu-cuenta-btn{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--white);color:var(--muted);padding:6px 10px 6px 6px;border-radius:20px;cursor:pointer;}
.menu-cuenta-btn:hover{color:var(--ink);border-color:var(--muted);}
.menu-cuenta-btn[aria-expanded="true"]{border-color:var(--signal);color:var(--ink);}
.menu-cuenta-inicial{width:24px;height:24px;border-radius:50%;background:var(--signal);color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.menu-cuenta-puntos{font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1;letter-spacing:1px;}
.menu-cuenta-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(20,19,31,.14);min-width:230px;max-width:min(300px,calc(100vw - 24px));padding:6px;z-index:60;}
.menu-cuenta-dropdown.open{display:block;}
.menu-cuenta-user{font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:8px 10px 6px;}
.menu-cuenta-item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--ink);font-family:'Inter',sans-serif;font-size:13px;padding:9px 10px;border-radius:8px;cursor:pointer;text-decoration:none;box-sizing:border-box;}
.menu-cuenta-item:hover{background:var(--paper);}
.menu-cuenta-divider{height:1px;background:var(--line);margin:5px 2px;}

/* Estos 2 dropdowns de la conversación cuelgan justo arriba del campo de
   escribir, con muy poco espacio de por medio en CUALQUIER tamaño de
   pantalla (no solo mobile) — abriéndose hacia abajo (la regla general de
   .menu-cuenta-dropdown de arriba) tapaban el input y el texto de "Respondes
   como...". Se abren hacia arriba en su lugar, con su propio límite de alto
   y scroll para que quepan igual si el catálogo tiene muchos items. */
#dropdown-respuestas,
#dropdown-catalogo{
  top:auto;bottom:calc(100% + 8px);
  max-height:min(60vh,420px);overflow-y:auto;
}

.shell{display:flex;min-height:80vh;max-width:1180px;margin:0 auto;}
.sidebar{width:220px;flex-shrink:0;padding:24px 14px;border-right:1px solid var(--line);}
.brand{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;margin:0 8px 22px;display:flex;align-items:center;gap:10px;}
.brand .logo-img{width:28px;height:28px;border-radius:8px;object-fit:cover;}
.brand .logo-fallback{width:28px;height:28px;border-radius:8px;background:var(--signal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
nav a.nav-btn,nav span.nav-btn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:transparent;padding:11px 12px;border-radius:10px;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;color:var(--muted);cursor:pointer;margin-bottom:2px;text-decoration:none;}
nav .nav-btn .ic{width:17px;height:17px;flex-shrink:0;stroke:var(--muted);fill:none;stroke-width:1.8;}
nav a.nav-btn.active{background:var(--ink);color:var(--white);}
nav a.nav-btn.active .ic{stroke:var(--white);}
nav .locked{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--line);text-transform:uppercase;padding:10px 12px 4px;}

main{flex:1;padding:28px 32px 60px;min-width:0;}
h1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px;margin:0 0 4px;}
h2.section{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;margin:22px 0 12px;}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 22px;}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:10px;}
.card{background:var(--white);border-radius:16px;padding:18px 20px;border-left:4px solid var(--line);}
.card.c-signal{border-left-color:var(--signal);}
.card.c-live{border-left-color:var(--live);}
.card.c-amber{border-left-color:var(--amber);}
.card.c-pulse{border-left-color:var(--pulse);}
.card .k{font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);}
.card .v{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;margin-top:4px;}
.card .d{font-size:12px;color:var(--muted);margin-top:3px;}

.pulse-wrap{position:relative;width:9px;height:9px;flex-shrink:0;display:inline-block;}
.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--live);position:relative;z-index:1;display:block;}
.pulse-ring{position:absolute;inset:-6px;border-radius:50%;border:1.5px solid var(--live);animation:pulse 1.8s ease-out infinite;}
@keyframes pulse{0%{transform:scale(.5);opacity:.9;}100%{transform:scale(2.2);opacity:0;}}
@keyframes parpadeo{0%,100%{opacity:1;}50%{opacity:.4;}}
.live-tag{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--live);text-transform:uppercase;}

/* Directorio: dos columnas (contactos + chat en vivo) — ver negocio.php */
.directorio-grid{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start;}
.chip-filtro{font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.02em;padding:6px 12px;border-radius:20px;border:1.5px solid var(--line);background:var(--white);color:var(--muted);cursor:pointer;white-space:nowrap;}
.chip-filtro.active{background:var(--ink);color:var(--white);border-color:var(--ink);}
.contacto-fila{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;text-decoration:none;color:inherit;border:1.5px solid transparent;}
.contacto-fila:hover{background:var(--white);}
.contacto-fila.selected{background:var(--white);border-color:var(--signal);}
.contacto-fila .badge-sin-leer{width:7px;height:7px;border-radius:50%;background:var(--live);flex-shrink:0;margin-left:auto;}
.volver-directorio-movil{display:none;}
@media (max-width: 900px){
  .directorio-grid{grid-template-columns:1fr;}
  .directorio-grid.tiene-seleccionado .directorio-contactos-col{display:none;}
  .directorio-grid.tiene-seleccionado .volver-directorio-movil{display:inline-block;margin-bottom:8px;}
}

table{width:100%;border-collapse:collapse;background:var(--white);border-radius:16px;overflow:hidden;}
th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--line);}
td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle;}
tr:last-child td{border-bottom:none;}

.avatar{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;color:#fff;margin-right:10px;vertical-align:middle;}
.pill{font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;padding:3px 9px;border-radius:20px;}
.pill.on{background:var(--pill-live-bg);color:var(--live);}
.pill.off{background:var(--paper);color:var(--muted);}
.pill.warn{background:var(--pill-warn-bg);color:var(--amber);}
.pill.due{background:var(--pill-due-bg);color:var(--pulse);}
.pill.signal{background:var(--signal-glow);color:var(--signal);}

.swatch-picker{display:flex;gap:8px;align-items:center;}
.swatch-radio{position:relative;display:inline-flex;width:24px;height:24px;cursor:pointer;}
.swatch-radio input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;}
.swatch-radio .swatch{display:block;width:100%;height:100%;border-radius:50%;border:2px solid transparent;box-sizing:border-box;}
.swatch-radio input:checked + .swatch{border-color:var(--ink);}
.swatch-radio input:focus-visible + .swatch{outline:2px solid var(--signal);outline-offset:2px;}

.chip-vendedor{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;padding:4px 10px 4px 4px;border-radius:20px;display:inline-flex;align-items:center;gap:7px;background:var(--paper);color:var(--muted);border:1.5px solid transparent;}
.chip-vendedor.active{background:var(--signal-glow);color:var(--signal);border-color:var(--signal);}
.chip-vendedor .avatar-mini{width:20px;height:20px;border-radius:50%;background:var(--signal);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:9px;flex-shrink:0;}
.chip-vendedor .avatar-mini.sin-asignar{background:var(--line);color:var(--muted);}
.chip-vendedor .n{font-family:'JetBrains Mono',monospace;font-size:10px;opacity:.75;}

.btn{background:var(--signal);color:#fff;border:none;border-radius:10px;padding:10px 18px;font-size:13px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;text-decoration:none;display:inline-block;box-shadow:0 4px 16px -6px var(--signal-glow);}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none;}
.btn.small{padding:6px 12px;font-size:11.5px;border-radius:8px;}

.form-card{background:var(--white);border-radius:16px;padding:22px 24px;max-width:520px;}
.form-row{margin-bottom:14px;}
.form-row label{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.form-row input[type=text],.form-row input[type=number],.form-row input[type=password],.form-row input[type=email],.form-row select,.form-row input[type=file],.form-row textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:13px;font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink);}
.checks{display:flex;flex-wrap:wrap;gap:10px;}
.check-item{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12.5px;}

.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px;}

.lead-card{background:var(--white);border-radius:12px;padding:12px 14px;margin-bottom:10px;box-shadow:0 1px 2px rgba(20,19,31,.05);min-width:0;max-width:100%;overflow:hidden;}

/* ============================================================
   CATÁLOGO — vista de tarjetas y editor de galería de fotos
   ============================================================ */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-bottom:24px;}
.cat-card{background:var(--white);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(20,19,31,.05);display:flex;flex-direction:column;}
.cat-card-foto{position:relative;aspect-ratio:16/9;background:var(--paper);}
.cat-card-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.cat-card-badge{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;padding:3px 8px;border-radius:10px;}
.cat-card-body{padding:12px 14px;display:flex;flex-direction:column;gap:4px;flex:1;}
.cat-card-nombre{font-weight:600;font-size:13.5px;}
.cat-card-meta{color:var(--muted);font-size:12px;}
.cat-card-precio{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;margin-top:2px;}
.cat-card-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--line);}
@media (max-width:720px){.cat-grid{grid-template-columns:1fr;}}

.foto-galeria{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 18px;}
.foto-galeria-item{position:relative;width:96px;height:72px;border-radius:10px;overflow:hidden;background:var(--paper);}
.foto-galeria-item img{width:100%;height:100%;object-fit:cover;display:block;}
.foto-galeria-add{width:96px;height:72px;border-radius:10px;border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--muted);cursor:pointer;background:none;}
.foto-galeria-acciones{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:4px;padding:3px 0;background:rgba(0,0,0,.55);}
.foto-galeria-acciones button{background:none;border:none;color:#fff;font-size:12px;cursor:pointer;padding:2px 5px;line-height:1;}
.foto-galeria-principal{position:absolute;left:4px;top:4px;background:var(--pill-live-bg);color:var(--live);font-family:'JetBrains Mono',monospace;font-size:8.5px;text-transform:uppercase;padding:2px 6px;border-radius:8px;}
/* ============================================================
   AGENDA — calendario mensual
   ============================================================ */
.calendario{background:var(--white);border-radius:16px;padding:14px;margin-bottom:24px;}
.calendario-dias-semana{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;}
.calendario-dias-semana div{text-align:center;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;color:var(--muted);}
.calendario-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.calendario-celda{min-height:96px;max-height:150px;overflow-y:auto;background:var(--paper);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:3px;}
.calendario-celda.vacia{background:none;}
.calendario-celda.hoy{box-shadow:inset 0 0 0 1.5px var(--signal);}
.calendario-num{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);margin-bottom:2px;}
.calendario-celda.hoy .calendario-num{color:var(--signal);font-weight:700;}
.calendario-cita{background:var(--signal);color:#fff;border-radius:6px;padding:3px 6px;font-size:10.5px;line-height:1.4;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.calendario-cita .hora{font-family:'JetBrains Mono',monospace;font-weight:600;margin-right:4px;}
.calendario-vendedor{display:block;font-size:9px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media (max-width:720px){
  .calendario-celda{min-height:60px;max-height:96px;padding:4px;}
  .calendario-num{font-size:10px;}
  .calendario-cita{font-size:9px;padding:2px 4px;}
  .calendario-dias-semana div{font-size:8.5px;}
}

.lead-card .name{font-weight:600;font-size:13.5px;overflow-wrap:break-word;word-break:break-word;}
.lead-card .msg{font-size:12px;color:var(--muted);margin:3px 0 8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:2.8em;overflow-wrap:break-word;word-break:break-word;}
.lead-card .foot{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);display:flex;justify-content:space-between;}

.day-card{background:var(--white);border-radius:16px;padding:16px 18px;margin-bottom:12px;}
.day-card h3{font-family:'Space Grotesk',sans-serif;font-size:14px;margin:0 0 10px;}
.slot{display:flex;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:12.5px;align-items:center;}
.slot:last-child{border-bottom:none;}
.slot .t{font-family:'JetBrains Mono',monospace;color:var(--signal);min-width:46px;font-weight:500;}

.msg-flash{background:var(--pill-live-bg);color:var(--live);border-radius:10px;padding:10px 16px;font-size:13px;margin-bottom:18px;font-family:'JetBrains Mono',monospace;}

.logo-preview{width:64px;height:64px;border-radius:14px;object-fit:cover;border:1px solid var(--line);}
.logo-preview-fallback{width:64px;height:64px;border-radius:14px;background:var(--signal);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;}

.footnote{max-width:1180px;margin:20px auto 40px;padding:0 32px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);text-align:center;}

/* Kanban de leads por estado */
.kanban-columns{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start;}
.kanban-col-header{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:10px;}
.kanban-col-header .dot{width:8px;height:8px;border-radius:3px;flex-shrink:0;}
.kanban-col-header .count{margin-left:auto;background:var(--paper);border-radius:20px;padding:1px 8px;font-size:10px;color:var(--ink);}
.kanban-col-body{display:flex;flex-direction:column;gap:10px;min-height:40px;min-width:0;}

/* Navegación inferior — solo aparece en celular */
.bottom-nav{display:none;}

/* ============================================================
   RESPONSIVO — celular (menos de 720px de ancho)
   La barra lateral se convierte en navegación inferior fija, y el
   kanban de leads pasa de 4 columnas apretadas a un carrusel
   horizontal con snap (deslizar en vez de achicar todo).
   ============================================================ */
@media (max-width: 900px){
  .kanban-columns{grid-template-columns:1fr 1fr;}
}
/* Tope de alto en escritorio — en mobile el media query de abajo lo saca
   (estaba como estilo inline en conversacion.php, y un inline siempre le
   gana a cualquier regla externa aunque esté en @media, así que se movió
   acá para que sí se pueda pisar). */
#chat-body{max-height:520px;}
@media (max-width: 720px){
  /* iOS hace zoom automático al tocar un campo con letra menor a 16px —
     forzamos ese mínimo acá, sin importar qué diga el estilo en línea de
     cada campo puntual, para no tener que ir arreglando uno por uno. */
  input,textarea,select{font-size:16px !important;}

  /* Pantalla de conversación: el campo de escribir queda SIEMPRE fijo al
     borde real visible de la pantalla (no al fondo de la página, que es
     donde el teclado lo tapaba) — y se corre hacia arriba exactamente lo
     que el teclado esté tapando, ni un pixel más ni menos, calculado por
     JS más abajo con la posición real que reporta el navegador. */
  #form-responder{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--white);margin:0 !important;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
  }
  /* La conversación se ancla al alto real de pantalla (100dvh, no 100vh —
     dvh sí descuenta la barra de direcciones del navegador) en vez de dejar
     que la página crezca más que la pantalla. El bloque de arriba (volver,
     nombre, estado) mantiene su alto natural y el chat absorbe el resto del
     espacio con flex:1 — así el último mensaje y el campo de escribir caben
     siempre juntos en pantalla, sin scroll de la página completa. */
  .conversacion-main{
    padding-bottom:88px;
    display:flex;flex-direction:column;height:100dvh;overflow:hidden;
    min-height:0;
    /* main{flex:1;...} (regla de escritorio, para repartir el ancho junto al
       sidebar) deja flex-basis:0% en CUALQUIER <main> — acá eso anula el
       height:100dvh de arriba (con basis:0%, el alto final pasa a depender
       del contenido, no del height especificado). flex:none aísla a esta
       pantalla de esa regla: el alto lo manda 100dvh, punto. */
    flex:none;
  }
  #chat-body{overscroll-behavior:contain;flex:1 1 auto;min-height:0;max-height:none;}
  /* Un input de texto con flex:1 no se achica solo por eso — su min-width
     por defecto es "auto" (su ancho de contenido), así que en pantallas
     angostas empujaba el botón "Enviar" fuera de la pantalla. */
  #input-contenido{min-width:0;}

  .scope-switch{padding:calc(10px + env(safe-area-inset-top)) 12px 0;gap:6px;}
  /* max-width + ellipsis a propósito: un nombre de negocio largo no puede
     hacer que esta fila se pase a dos líneas — eso agranda la barra
     superior y corre hacia abajo la pantalla de conversación, que se ancla
     al alto exacto de pantalla (ver #chat-body más abajo). Mejor cortado
     con "..." que rompiendo el chat. */
  .scope-switch .scope-btn{padding:7px 10px;font-size:9.5px;max-width:56vw;overflow:hidden;text-overflow:ellipsis;}
  .menu-cuenta-btn{padding:6px 8px 6px 6px;}
  .menu-cuenta-dropdown{right:-6px;}
  .topbar-right{gap:6px;}
  .estado-btn{padding:6px 10px 6px 8px;font-size:9.5px;}
  .estado-dropdown{right:-6px;}
  .shell{flex-direction:column;min-height:0;}
  .sidebar{display:none;}
  main{padding:16px 16px 90px;}
  .grid{grid-template-columns:1fr;}
  .convo-wrap{grid-template-columns:1fr;}

  /* El kanban se convierte en carrusel horizontal con snap */
  .kanban-columns{
    display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 -16px;padding:0 16px 8px;gap:12px;
  }
  .kanban-columns::-webkit-scrollbar{display:none;}
  .kanban-columns > div{min-width:82%;max-width:82%;scroll-snap-align:start;flex-shrink:0;}

  .bottom-nav{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:20;
    height:calc(58px + env(safe-area-inset-bottom));
    background:var(--white);border-top:1px solid var(--line);
    align-items:center;justify-content:space-around;padding:0 4px env(safe-area-inset-bottom);
  }
  .bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;color:var(--muted);font-family:'JetBrains Mono',monospace;text-transform:uppercase;text-decoration:none;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bottom-nav a .bn-icon{width:18px;height:18px;border-radius:5px;background:var(--line);}
  .bottom-nav a.active{color:var(--signal);}
  .bottom-nav a.active .bn-icon{background:var(--signal);box-shadow:0 0 8px var(--signal-glow);}
}

/* ============================================================
   Vista "Leads por día" — segunda forma de ver los leads,
   agrupados por fecha en vez de por estado.
   ============================================================ */
.toggle-btn{border:none;background:transparent;color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;padding:7px 16px;border-radius:16px;cursor:pointer;}
.toggle-btn.active{background:var(--signal);color:#fff;}

.day-group{margin-bottom:12px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);cursor:pointer;}
.day-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;}
.day-head-left{display:flex;align-items:center;gap:10px;}
.day-titulo{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:var(--ink);}
.day-count{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);background:var(--paper);padding:2px 9px;border-radius:20px;}
.chevron{color:var(--muted);font-size:10px;transition:transform .15s;display:inline-block;}
.day-group.abierto .chevron{transform:rotate(90deg);}
.day-body{display:none;border-top:1px solid var(--line);}
.day-group.abierto .day-body{display:block;}

.convo-avatar{width:38px;height:38px;border-radius:50%;background:var(--signal);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;flex-shrink:0;}
.lead-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;cursor:pointer;}
.lead-row:last-child{border-bottom:none;}
.lead-row:hover{background:var(--paper);}
.estado-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.lead-row-info{flex:1;min-width:0;}
.lead-row-nombre{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.lead-row-msg{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;}
.canal-tag{font-family:'JetBrains Mono',monospace;font-size:8.5px;text-transform:uppercase;color:var(--live);background:var(--pill-live-bg);padding:1px 6px;border-radius:10px;}
.lead-row-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0;}
.lead-row-hora{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);}
.vendedor-chip{font-size:10px;color:var(--muted);background:var(--paper);padding:2px 8px;border-radius:10px;}
.badge-alerta{font-family:'JetBrains Mono',monospace;font-size:9px;text-transform:uppercase;padding:2px 7px;border-radius:10px;}
.badge-alerta.urgente{background:var(--pill-due-bg);color:var(--pulse);}
.badge-alerta.seguimiento{background:var(--pill-warn-bg);color:var(--amber);}

@media (max-width: 720px){
  .lead-row{flex-wrap:wrap;}
  .lead-row-meta{flex-direction:row;gap:8px;}
}

/* Aviso de servicio cortado por pago — visible en TODAS las páginas del negocio afectado */
.banner-suspension{background:var(--pill-due-bg);border-bottom:1.5px solid var(--pulse);}
.banner-suspension-inner{max-width:1180px;margin:0 auto;padding:12px 32px;display:flex;align-items:flex-start;gap:12px;}
.banner-suspension-icono{font-size:18px;line-height:1.3;color:var(--pulse);flex-shrink:0;}
.banner-suspension-inner div{display:flex;flex-direction:column;gap:2px;}
.banner-suspension-inner strong{font-family:'Space Grotesk',sans-serif;font-size:13.5px;color:var(--pulse);}
.banner-suspension-inner span{font-size:12.5px;color:var(--ink);line-height:1.5;}
@media(max-width:860px){.banner-suspension-inner{padding:10px 12px;}}

/* Recordatorio de cita próxima (próximas 2h) — mismo patrón que
   .banner-suspension pero con el acento "live" (verde), no de alerta, ya
   que es informativo, no un problema. */
.banner-recordatorio{background:var(--pill-live-bg);border-bottom:1.5px solid var(--live);}
.banner-recordatorio-inner{max-width:1180px;margin:0 auto;padding:10px 32px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink);line-height:1.5;}
.banner-recordatorio-icono{font-size:16px;line-height:1;flex-shrink:0;}
.banner-recordatorio-inner strong{font-family:'Space Grotesk',sans-serif;font-size:12.5px;color:var(--live);}
@media(max-width:860px){.banner-recordatorio-inner{padding:8px 12px;}}

/* Visor de imagen ampliada (chat de Leads y de Directorio) */
.modal-imagen-overlay{display:none;position:fixed;inset:0;background:rgba(10,10,18,.85);z-index:100;align-items:center;justify-content:center;padding:24px;}
.modal-imagen-overlay.open{display:flex;}
.modal-imagen-contenido{max-width:min(92vw,900px);max-height:92vh;display:flex;flex-direction:column;align-items:center;gap:14px;}
.modal-imagen-contenido img{max-width:100%;max-height:78vh;border-radius:12px;object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.modal-imagen-acciones{display:flex;gap:10px;}