/* Leads MDV — sistema visual. Una sola escala de espacio (4 px), una de tipo, tres tonos de azul. */
:root {
  --azul: #2563eb; --azul-700: #1d4ed8; --azul-100: #e8efff; --azul-50: #f3f7ff;
  --tinta: #0b1220; --tinta-2: #111a2e; --texto: #1f2937; --texto-2: #4b5563; --gris: #6b7280; --gris-2: #9ca3af;
  --linea: #e6eaf0; --linea-2: #eef1f5; --fondo: #f6f8fb; --blanco: #fff;
  --ok: #059669; --ok-100: #ecfdf5; --alerta: #d97706; --alerta-100: #fffbeb; --rojo: #dc2626; --rojo-100: #fef2f2;
  --violeta: #7c3aed; --violeta-100: #f5f3ff; --cian: #0891b2; --cian-100: #ecfeff;
  --r: 12px; --r-s: 8px; --sombra: 0 1px 2px rgba(11,18,32,.04), 0 12px 32px -20px rgba(11,18,32,.28);
  --sidebar: 236px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--texto); font: 14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--azul-700); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; color: var(--tinta); letter-spacing: -.01em; }
.mono { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- controles ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--linea); background: #fff; font-weight: 600; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s; }
.btn:hover { background: #f3f6fa; border-color: #d7dee8; text-decoration: none; }
.btn.primario { background: var(--azul); border-color: var(--azul); color: #fff; box-shadow: 0 6px 16px -8px rgba(37,99,235,.7); }
.btn.primario:hover { background: var(--azul-700); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.ok:hover { background: #047857; }
.btn.suave { background: var(--azul-50); border-color: transparent; color: var(--azul-700); }
.btn.peligro { color: var(--rojo); }
.btn.mini { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }
.btn.icono { width: 36px; padding: 0; }
.btn:disabled { opacity: .5; cursor: default; }
.btn svg { width: 16px; height: 16px; flex: none; }
.campo { display: grid; gap: 5px; }
.campo label { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.entrada, .campo input, .campo select, .campo textarea { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 9px; background: #fff; color: var(--texto); }
.campo textarea { height: auto; min-height: 92px; padding: 10px 12px; resize: vertical; }
.entrada:focus, .campo input:focus, .campo select:focus, .campo textarea:focus, .filtros input:focus, .filtros select:focus { outline: 2px solid rgba(37,99,235,.35); outline-offset: 0; border-color: var(--azul); }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.pill.azul { background: var(--azul-100); color: var(--azul-700); }
.pill.gris { background: #eef1f5; color: var(--gris); }
.pill.ok { background: var(--ok-100); color: var(--ok); }
.pill.alerta { background: var(--alerta-100); color: var(--alerta); }
.pill.rojo { background: var(--rojo-100); color: var(--rojo); }
.pill.violeta { background: var(--violeta-100); color: var(--violeta); }
.pill.cian { background: var(--cian-100); color: var(--cian); }
.pill .punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.avatar { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #fff; flex: none; letter-spacing: .02em; }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login .lado { background: radial-gradient(120% 90% at 10% 0%, #16357a 0%, #0b1220 60%); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.login .lado h1 { color: #fff; font-size: 34px; line-height: 1.15; max-width: 14ch; }
.login .lado p { color: #b7c3d9; max-width: 42ch; font-size: 15px; }
.login .lado .logo img { height: 56px; width: auto; display: block; }
.login .lado ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; color: #dbe4f5; }
.login .lado li { display: flex; gap: 10px; align-items: center; }
.login .lado li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #7fb1ff; }
.login .caja { display: grid; place-items: center; padding: 28px; }
.login form { width: min(380px, 100%); display: grid; gap: 14px; }
.login form h2 { font-size: 22px; }
.login form p { margin: -8px 0 4px; color: var(--gris); }
.login .error { background: var(--rojo-100); color: var(--rojo); padding: 9px 12px; border-radius: 9px; font-size: 13px; }

/* ---------- marco ---------- */
.marco { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--tinta); color: #c9d3e6; display: flex; flex-direction: column; padding: 18px 14px; position: sticky; top: 0; height: 100vh; }
.lateral .logo { display: flex; align-items: center; gap: 10px; padding: 4px 10px 20px; }
.lateral .logo img { height: 34px; width: auto; display: block; }
.lateral .logo span { color: #8e9bb5; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; border-left: 1px solid rgba(255,255,255,.15); padding-left: 10px; line-height: 1; }
.lateral nav { display: grid; gap: 4px; }
.lateral nav button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; color: #c9d3e6; padding: 10px 12px; border-radius: 9px; font-weight: 600; }
.lateral nav button svg { width: 18px; height: 18px; opacity: .8; }
.lateral nav button:hover { background: rgba(255,255,255,.07); color: #fff; }
.lateral nav button.activa { background: var(--azul); color: #fff; }
.lateral nav button.activa svg { opacity: 1; }
.lateral .grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6f7d99; padding: 16px 12px 6px; }
.lateral .pie-usuario { margin-top: auto; position: relative; }
.lateral .yo { display: flex; align-items: center; gap: 10px; padding: 8px 6px 8px 8px; min-width: 0; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); }
.lateral .yo .avatar { width: 34px; height: 34px; font-size: 12px; background: linear-gradient(135deg, #3b5bdb, #6f8dff); border-radius: 9px; }
.lateral .yo .txt { min-width: 0; flex: 1; }
.lateral .yo .n { color: #fff; font-weight: 600; font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral .yo .r { font-size: 11.5px; color: #8e9bb5; line-height: 1.25; }
.lateral .puntos { width: 30px; height: 30px; flex: none; border: 0; background: none; color: #8e9bb5; border-radius: 8px; display: grid; place-items: center; }
.lateral .puntos svg { width: 16px; height: 16px; }
.lateral .puntos:hover, .lateral .puntos[aria-expanded="true"] { background: rgba(255,255,255,.1); color: #fff; }
.menu-cuenta { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: #1a2540; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 6px; box-shadow: 0 16px 40px -16px rgba(0,0,0,.7); display: grid; gap: 2px; animation: sube-menu .14s ease-out; z-index: 8; }
@keyframes sube-menu { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.menu-cuenta button { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; color: #dbe4f5; padding: 9px 10px; border-radius: 8px; font-weight: 500; font-size: 13px; text-align: left; }
.menu-cuenta button svg { width: 16px; height: 16px; color: #8e9bb5; }
.menu-cuenta button:hover, .menu-cuenta button:focus-visible { background: rgba(255,255,255,.08); color: #fff; outline: none; }
.menu-cuenta button:hover svg { color: #fff; }
.principal { min-width: 0; }
.cabecera { display: flex; align-items: center; gap: 14px; padding: 22px 28px 0; }
.cabecera h1 { font-size: 22px; }
.cabecera .sub { color: var(--gris); margin-top: 2px; font-size: 13.5px; }
.cabecera .acciones { margin-left: auto; display: flex; gap: 8px; }
.contenido { padding: 20px 28px 40px; display: grid; gap: 16px; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: #fff; border: 1px solid var(--linea); border-radius: var(--r); padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: start; }
.kpi .n { font-size: 26px; font-weight: 800; color: var(--tinta); line-height: 1.1; grid-row: span 2; align-self: center; }
.kpi .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--azul-50); color: var(--azul-700); grid-column: 2; grid-row: 1 / span 2; }
.kpi .ico svg { width: 18px; height: 18px; }
.kpi .t { grid-column: 1; color: var(--gris); font-size: 12.5px; }
.kpi.alerta .n { color: var(--alerta); } .kpi.alerta .ico { background: var(--alerta-100); color: var(--alerta); }
.kpi.rojo .n { color: var(--rojo); } .kpi.rojo .ico { background: var(--rojo-100); color: var(--rojo); }
.kpi.ok .ico { background: var(--ok-100); color: var(--ok); }

/* ---------- filtros ---------- */
.panel { background: #fff; border: 1px solid var(--linea); border-radius: var(--r); }
.filtros { padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; }
.filtros .fila2 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtros input, .filtros select { height: 36px; padding: 0 11px; border: 1px solid var(--linea); border-radius: 9px; background: #fff; color: var(--texto); }
.filtros select { padding-right: 28px; appearance: none; background: #fff 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='%236b7280' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
.buscar { position: relative; }
.buscar svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--gris-2); }
.buscar input { width: 100%; padding-left: 34px; }
.segmentos { display: inline-flex; background: #eef1f5; border-radius: 9px; padding: 3px; }
.segmentos button { border: 0; background: none; height: 30px; padding: 0 12px; border-radius: 7px; font-weight: 600; color: var(--gris); display: inline-flex; align-items: center; gap: 6px; }
.segmentos button .cnt { font-size: 11px; background: rgba(0,0,0,.06); border-radius: 999px; padding: 0 6px; }
.segmentos button.activa { background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.rango { display: inline-flex; align-items: center; gap: 6px; color: var(--gris); font-size: 12.5px; }
.rango input { width: 140px; }

/* ---------- tabla de leads ---------- */
.tabla-leads { display: grid; }
.tabla-leads .cab, .fila-lead { display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(200px, 1.2fr) minmax(150px, 1fr) 160px 170px 32px; gap: 12px; align-items: center; padding: 0 16px; }
.tabla-leads .cab { height: 40px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); border-bottom: 1px solid var(--linea); }
.fila-lead { min-height: 72px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--linea-2); cursor: pointer; transition: background .12s; }
.fila-lead:last-child { border-bottom: 0; }
.fila-lead:hover { background: var(--azul-50); }
.fila-lead:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.quien-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.quien-lead .txt { min-width: 0; }
.quien-lead .nombre { font-weight: 700; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quien-lead .empresa { color: var(--gris); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-contacto { display: grid; gap: 2px; min-width: 0; font-size: 13px; }
.col-contacto span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto-2); }
.col-tipo { display: grid; gap: 5px; justify-items: start; }
.col-tipo .lugar { color: var(--gris); font-size: 12.5px; }
.col-fecha { display: grid; gap: 2px; font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.espera { font-weight: 700; }
.espera.bien { color: var(--ok); } .espera.regular { color: var(--alerta); } .espera.mal { color: var(--rojo); }
.col-estado { display: grid; gap: 5px; justify-items: start; }
.col-estado .resp { font-size: 12px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.chev { color: var(--gris-2); display: grid; place-items: center; }
.chev svg { width: 18px; height: 18px; }
.pie-tabla { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--linea); color: var(--gris); font-size: 13px; }
.pie-tabla .btn { margin-left: auto; }
.pie-tabla .btn + .btn { margin-left: 0; }
.vacio { text-align: center; color: var(--gris); padding: 48px 16px; }
.vacio svg { width: 40px; height: 40px; color: var(--gris-2); margin-bottom: 8px; }
.esqueleto { height: 72px; border-bottom: 1px solid var(--linea-2); background: linear-gradient(90deg, #fff 0%, #f3f6fa 50%, #fff 100%); background-size: 200% 100%; animation: brillo 1.4s infinite; }
@keyframes brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- cajón de detalle ---------- */
.velo { position: fixed; inset: 0; background: rgba(11,18,32,.45); z-index: 20; animation: aparece .15s ease-out; }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(620px, 100%); background: #fff; z-index: 21; box-shadow: -16px 0 48px rgba(11,18,32,.25); display: flex; flex-direction: column; animation: entra .22s cubic-bezier(.2,.8,.3,1); }
@keyframes entra { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
.cajon > header { padding: 18px 22px 0; }
.cajon .titulo { display: flex; align-items: flex-start; gap: 14px; }
.cajon .titulo h2 { font-size: 19px; }
.cajon .titulo .sub { color: var(--gris); font-size: 13px; margin-top: 2px; }
.cajon .titulo .pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cerrar { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; border: 0; background: #f0f3f8; display: grid; place-items: center; flex: none; }
.cerrar svg { width: 16px; height: 16px; }
.contacto-rapido { display: flex; gap: 8px; margin: 16px 0 0; }
.contacto-rapido .btn { flex: 1; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--linea); margin-top: 16px; }
.tabs button { background: none; border: 0; padding: 10px 14px; font-weight: 600; color: var(--gris); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button.activa { color: var(--azul-700); border-bottom-color: var(--azul); }
.cajon .cuerpo { padding: 18px 22px; overflow-y: auto; flex: 1; display: grid; gap: 18px; align-content: start; }
.cajon .pie { padding: 12px 22px; border-top: 1px solid var(--linea); display: flex; gap: 8px; align-items: center; background: #fafbfd; }
.cajon .pie .nota-pie { margin-left: auto; color: var(--gris); font-size: 12.5px; }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.dato label { display: block; font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 2px; }
.dato div { font-weight: 500; word-break: break-word; }
.bloque h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); margin-bottom: 8px; }
.mensaje { background: var(--fondo); border: 1px solid var(--linea-2); border-radius: var(--r-s); padding: 12px 14px; white-space: pre-wrap; line-height: 1.55; }
.notas { white-space: pre-wrap; background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--r-s); padding: 10px 12px; font-size: 13px; }
.linea-tiempo { display: grid; gap: 0; }
.evento { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 8px 0; position: relative; }
.evento::before { content: ''; position: absolute; left: 10px; top: 26px; bottom: -8px; width: 2px; background: var(--linea); }
.evento:last-child::before { display: none; }
.evento .punto { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #eef1f5; color: var(--gris); }
.evento .punto svg { width: 12px; height: 12px; }
.evento.notificado .punto, .evento.autorespuesta .punto { background: var(--azul-100); color: var(--azul-700); }
.evento .pill { vertical-align: 1px; margin-right: 4px; }
.notifs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.notif { border: 1px solid var(--linea); border-radius: var(--r-s); padding: 10px 12px; display: grid; gap: 6px; background: #fff; }
.notif.bien { border-color: #a7f3d0; background: #f7fdfa; }
.notif.mal { border-color: #fecaca; background: #fff7f7; }
.notif .q { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.notif .v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.notif .d { font-size: 12.5px; color: var(--gris); overflow-wrap: anywhere; }
.notif .err { font-size: 12.5px; color: var(--rojo); white-space: pre-wrap; }
@media (max-width: 600px) { .notifs { grid-template-columns: 1fr; } }
.evento.gestionado .punto { background: var(--ok-100); color: var(--ok); }
.evento.asignado .punto { background: var(--violeta-100); color: var(--violeta); }
.evento.nota .punto { background: var(--alerta-100); color: var(--alerta); }
.evento.fallo .punto { background: var(--rojo-100); color: var(--rojo); }
.evento .cuando { color: var(--gris); font-size: 12px; margin-top: 1px; }
.acciones-form { display: grid; gap: 12px; }
.acciones-form .fila { display: flex; gap: 8px; align-items: end; }
.acciones-form .fila .campo { flex: 1; }

/* ---------- tablas de administración ---------- */
.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: var(--r); }
.tarjeta > header { padding: 16px 18px; border-bottom: 1px solid var(--linea); }
.tarjeta > header h2 { font-size: 16px; }
.tarjeta > header p { margin: 4px 0 0; color: var(--gris); font-size: 13px; }
.tarjeta .cuerpo { padding: 16px 18px; }
table.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 10px 12px; border-bottom: 1px solid var(--linea-2); text-align: left; vertical-align: middle; }
.tabla th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .sin-filas td { color: var(--gris); text-align: center; padding: 22px 12px; }
.tabla input:not([type=checkbox]), .tabla select { height: 34px; padding: 0 10px; border: 1px solid var(--linea); border-radius: 8px; width: 100%; max-width: 300px; }
.tabla input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--azul); }
.fila-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; padding: 14px 18px; border-top: 1px solid var(--linea); background: #fafbfd; border-radius: 0 0 var(--r) var(--r); }
.fila-form .campo { flex: 1; min-width: 170px; }
.aviso-inline { background: var(--alerta-100); color: #92400e; border: 1px solid #fde68a; border-radius: var(--r-s); padding: 10px 12px; font-size: 13px; }
.aviso-inline.ok { background: var(--ok-100); color: #065f46; border-color: #a7f3d0; }

/* ---------- modal ---------- */
.velo-modal { z-index: 30; }
.modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px)); background: #fff; border-radius: 14px; box-shadow: 0 24px 64px -24px rgba(11,18,32,.5); z-index: 31; padding: 22px 22px 18px; display: grid; gap: 14px; animation: sube .18s cubic-bezier(.2,.8,.3,1); }
@keyframes sube { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.modal h2 { font-size: 18px; }
.modal p { margin: -6px 0 0; color: var(--gris); }
.opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.opcion { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; font-weight: 600; font-size: 12.5px; color: var(--texto-2); line-height: 1.2; text-align: center; transition: border-color .12s, background .12s; }
.opcion svg { width: 20px; height: 20px; color: var(--gris); }
.opcion:hover { border-color: #c7d2e3; background: #f8fafc; }
.opcion.activa { border-color: var(--azul); background: var(--azul-50); color: var(--azul-700); box-shadow: inset 0 0 0 1px var(--azul); }
.opcion.activa svg { color: var(--azul); }
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.btn.peligro-lleno { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn.peligro-lleno:hover { background: #b91c1c; }
@media (max-width: 480px) { .opciones { grid-template-columns: repeat(2, 1fr); } }

/* ---------- aviso flotante ---------- */
.aviso { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: var(--sombra); z-index: 50; max-width: 90vw; font-weight: 500; }
.aviso.error { background: var(--rojo); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .tabla-leads .cab { display: none; }
  .fila-lead { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .quien-lead { grid-column: 1 / -1; }
  .chev { display: none; }
}
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; } .login .lado { display: none; }
  .marco { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: sticky; height: auto; flex-direction: row; align-items: center; padding: 10px 12px; gap: 6px; z-index: 6; }
  .lateral .logo { padding: 0 8px; } .lateral .logo img { height: 26px; } .lateral .logo span { display: none; }
  .lateral nav { display: flex; gap: 2px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; }
  .lateral nav::-webkit-scrollbar { display: none; }
  .lateral nav button { padding: 8px 10px; white-space: nowrap; }
  .lateral nav button svg { display: none; }
  .lateral .grupo { display: none; }
  .lateral .pie-usuario { margin: 0; }
  .lateral .yo { padding: 0; background: none; border: 0; gap: 0; }
  .lateral .yo .avatar, .lateral .yo .txt { display: none; }
  .lateral .puntos { width: 36px; height: 36px; }
  .menu-cuenta { left: auto; right: 0; bottom: auto; top: calc(100% + 8px); min-width: 190px; }
  .cabecera, .contenido { padding-left: 14px; padding-right: 14px; }
  .filtros { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi .n { font-size: 22px; }
  .cabecera { flex-wrap: wrap; }
  .cabecera .acciones { margin-left: 0; width: 100%; }
  .segmentos { max-width: 100%; overflow-x: auto; }
  .rango { flex-wrap: wrap; }
  .rango input { width: 132px; }
  .fila-lead { grid-template-columns: 1fr; }
  .datos { grid-template-columns: 1fr; }
  .contacto-rapido { flex-wrap: wrap; }
}