/* ==========================================================================
   CRM Saysells · design system
   Portado 1:1 desde maqueta-referencia.html.
   Único CSS del proyecto. No hay build: se edita y se recarga.
   ========================================================================== */

/* ============================ 1 · TOKENS ============================ */
:root{
  --navy:#1c2b48; --navy2:#233559; --navy3:#33486E; --navy4:#4A648A; --navy5:#6d8fb3;
  --cel:#8eb1d1; --cel2:#a7c7e7; --celsoft:#EAF1F7;
  --bg:#F4F6F8; --ink:#1c2b48; --mut:#5B6B7C; --mut2:#8494A5; --line:#E3E9EE;
  --green:#2D8C4E; --greensoft:#E8F5EC;
  --yeltx:#8A6508; --yelsoft:#FFF3D6; --yel:#E0A82E;
  --red:#C62828; --redsoft:#FBEAEA; --link:#4E7CA6;
  --kanbg:#EDF1F5;

  --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --sombra:0 4px 16px rgba(16,28,50,.08);
  --sombra-alta:0 16px 44px rgba(16,28,50,.13);

  --side-w:240px;
  /* Mobile: alto del tabbar SIN la safe area (se suma aparte con env()) y
     alto de la topbar sticky. El contenido reserva los dos. */
  --tabbar-h:62px;
  --topbar-h:48px;
  --pad-m:16px;
}

/* ============================ 2 · BASE ============================ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{height:100%}
body{
  min-height:100%;
  font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.4;
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
svg{display:block}
::selection{background:var(--cel2);color:var(--navy)}

/* ============================ 3 · TIPOGRAFÍA ============================ */
.h1{font-size:22px;font-weight:700;color:var(--ink);line-height:1.2}
.h2{font-size:16.5px;font-weight:700;color:var(--ink)}
.h3{font-size:14.5px;font-weight:600;color:var(--ink)}
.h4{font-size:13.5px;font-weight:600;color:var(--ink)}
.b1{font-size:13px;font-weight:500;color:var(--mut);line-height:1.45}
.s1{font-size:12px;font-weight:500;color:var(--mut)}
.s2{font-size:11.5px;font-weight:500;color:var(--mut2);line-height:1.45}
.lab{font-size:10.5px;font-weight:600;color:var(--mut);letter-spacing:.07em;text-transform:uppercase}
.lab.oncel{color:var(--cel2)}
.lk{font-size:13px;font-weight:600;color:var(--link);cursor:pointer}
/* El :hover va siempre detrás de (hover:hover): en iOS el hover se "pega"
   después de tocar y deja la fila pintada. En celular manda el :active. */
@media (hover:hover){ .lk:hover{text-decoration:underline} }
.gr{color:var(--green)}
.wt{color:#fff}
.rd{color:var(--red)}
.yl{color:var(--yeltx)}
.mut{color:var(--mut)}
.tc{text-align:center}
.tr-{text-align:right}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Marca */
.wm{font-weight:800;color:var(--navy);line-height:1;letter-spacing:-.01em}
.wm i{font-style:normal;color:var(--cel)}

/* ============================ 4 · UTILIDADES DE LAYOUT ============================ */
.f{display:flex;align-items:center}
.fc{display:flex;flex-direction:column}
.fw{flex-wrap:wrap}
.g2{gap:2px}.g4{gap:4px}.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}
.g14{gap:14px}.g16{gap:16px}.g18{gap:18px}.g20{gap:20px}.g24{gap:24px}
.sp{flex:1}
.grow{flex:1;min-width:0}
.cen{justify-content:center}
.acen{align-items:center}
.astart{align-items:flex-start}
.w100{width:100%}
.mt-a{margin-top:auto}
.hidden{display:none !important}

/* ============================ 5 · SHELL DE LA APP ============================ */
.app{display:flex;min-height:100vh}

/* --- Sidebar navy (desktop) --- */
.side{
  width:var(--side-w);flex:none;background:var(--navy);
  display:flex;flex-direction:column;padding:26px 20px 22px;
  position:sticky;top:0;height:100vh;
}
.side .wm{font-size:22px;color:#fff}
.side .sub{
  font-size:9.5px;font-weight:500;color:var(--cel2);
  letter-spacing:.12em;text-transform:uppercase;margin-top:4px;
}
.snav{display:flex;flex-direction:column;gap:6px;margin-top:30px}
.snav a{
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r-sm);
  color:var(--cel2);font-size:13.5px;font-weight:500;transition:background .15s,color .15s;
}
.snav a:hover{background:rgba(255,255,255,.07);color:#fff}
.snav a.on{background:rgba(255,255,255,.12);color:#fff;font-weight:600}
.snav a .ic{color:currentColor}
.snav .nbadge{
  margin-left:auto;background:var(--cel);color:var(--navy);
  min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
}
/* Títulos de sección dentro del sidebar (Dirección / Mi trabajo) */
.snav .sgrupo{
  font-size:9.5px;font-weight:700;color:#7d93b0;letter-spacing:.12em;text-transform:uppercase;
  padding:14px 12px 4px;
}
.snav .sgrupo:first-child{padding-top:0}

/* Pie del sidebar: usuario + cerrar sesión siempre visible */
.spie{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:10px}
.suser{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:10px;transition:background .15s}
a.suser:hover{background:rgba(255,255,255,.08)}
.suser .logo{background:rgba(255,255,255,.14);color:#fff;border-radius:10px}
.btn-salir{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.16);
  border-radius:10px;padding:10px 12px;font-size:13px;font-weight:600;
  transition:background .15s,border-color .15s;
}
.btn-salir:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28)}
.btn-salir .ic{color:currentColor}

/* Acción de demo: discreta, se saca en un solo lugar cuando entre Supabase */
.demo-link{
  display:flex;align-items:center;gap:7px;width:100%;
  color:var(--cel2);font-size:11.5px;font-weight:500;
  padding:7px 10px;border-radius:9px;border:1px dashed rgba(255,255,255,.20);
  transition:background .15s,color .15s;
}
.demo-link:hover{background:rgba(255,255,255,.09);color:#fff}
.demo-link .ic{color:currentColor}

/* --- Área principal --- */
.main{
  flex:1;min-width:0;padding:28px 32px 32px;
  display:flex;flex-direction:column;gap:18px;
}
.page-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.page-head .h1{font-size:24px}

/* --- Topbar (mobile) --- */
.topbar{
  display:none;align-items:center;gap:10px;
  padding:16px 20px 8px;background:var(--bg);
  position:sticky;top:0;z-index:20;
}
.topbar .h1{font-size:20px}

/* --- Tabbar (mobile) --- */
.tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:#fff;border-top:1px solid var(--line);padding:10px 8px 18px;
}
.tabbar .tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:10px;font-weight:500;color:var(--mut2);
}
.tabbar .tab.on{color:var(--navy);font-weight:600}
.tabbar .tab .ic{width:22px;height:22px;color:currentColor}
.tabbar .tab .icwrap{position:relative;display:flex}
.tabbar .tab .tbadge{
  position:absolute;top:-5px;left:12px;
  min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill);
  background:var(--red);color:#fff;font-size:9.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* --- Barra inferior de acciones (mobile) --- */
.bbar{
  background:#fff;border-top:1px solid var(--line);
  padding:14px 20px;display:flex;gap:10px;
}

/* --- Nav de detalle --- */
.nav{display:flex;align-items:center;gap:10px}
.back{font-size:26px;font-weight:700;color:var(--ink);line-height:1;padding:0 4px}

/* ============================ 6 · COMPONENTES ============================ */

/* --- Cards --- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px}
.card.navy{background:var(--navy);border:none;color:#fff}
.card.soft{background:var(--celsoft);border:none}
.card.gsoft{background:var(--greensoft);border:none}
.card.ysoft{background:var(--yelsoft);border:none}
.card.rsoft{background:var(--redsoft);border:none}
.card.p0{padding:0;overflow:hidden}
a.card,.card.click{transition:box-shadow .15s,transform .15s}
@media (hover:hover){ a.card:hover,.card.click:hover{box-shadow:var(--sombra)} }

/* --- Botones --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--navy);color:#fff;font-weight:600;font-size:15px;
  padding:13px 22px;border-radius:var(--r-md);border:none;text-align:center;
  transition:filter .15s,box-shadow .15s;
}
@media (hover:hover){ .btn:hover{filter:brightness(1.12)} }
.btn:active{filter:brightness(.95)}
.btn:disabled,.btn.off{opacity:.5;pointer-events:none}
.btn .ic{color:currentColor}
.btn.sec{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.btn.grn{background:var(--green)}
.btn.red{background:var(--red)}
.btn.out{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost{background:rgba(255,255,255,.16);color:#fff}
.btn.sm{padding:9px 16px;font-size:13px;border-radius:10px}
.btn.xs{padding:7px 12px;font-size:12px;border-radius:var(--r-sm)}

/* --- Chips --- */
.chip{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--r-pill);
  background:var(--celsoft);color:var(--navy);font-size:11px;font-weight:600;white-space:nowrap;
}
.chip.grn{background:var(--greensoft);color:var(--green)}
.chip.yel{background:var(--yelsoft);color:var(--yeltx)}
.chip.red{background:var(--redsoft);color:var(--red)}
.chip.nvy{background:var(--navy);color:#fff}
.chip.gris{background:var(--bg);color:var(--mut)}
.chip.onnvy{background:rgba(255,255,255,.14);color:#fff}
.chip.sm{padding:3px 9px;font-size:10.5px}
.chip .ic{color:currentColor}
button.chip,a.chip{cursor:pointer}

/* Chips de estado del lead */
.chip-estado[data-estado="nuevo"]{background:var(--celsoft);color:var(--navy)}
.chip-estado[data-estado="contactado"]{background:var(--yelsoft);color:var(--yeltx)}
.chip-estado[data-estado="ll1_agendada"]{background:var(--greensoft);color:var(--green)}
.chip-estado[data-estado="ll1_realizada"]{background:var(--greensoft);color:var(--green)}
.chip-estado[data-estado="propuesta_ll2"]{background:var(--yelsoft);color:var(--yeltx)}
.chip-estado[data-estado="ganado"]{background:var(--green);color:#fff}
.chip-estado[data-estado="perdido"]{background:var(--bg);color:var(--mut)}

/* Chips de temperatura */
.chip-temp[data-temp="caliente"]{background:var(--redsoft);color:var(--red)}
.chip-temp[data-temp="tibia"]{background:var(--yelsoft);color:var(--yeltx)}
.chip-temp[data-temp="fria"]{background:var(--celsoft);color:var(--navy)}

/* --- Tira de items: en escritorio envuelve; en celular scrollea de costado --- */
.strip{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* --- Stats --- */
.stats{display:flex;gap:14px;flex-wrap:wrap}
.stat{
  flex:1;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;min-width:130px;
}
.stat b{display:block;font-size:22px;font-weight:700;color:var(--ink);line-height:1.15}
.stat span{
  display:block;margin-top:3px;font-size:10.5px;font-weight:600;color:var(--mut);
  letter-spacing:.06em;text-transform:uppercase;
}

/* --- Inputs --- */
.inp{display:flex;flex-direction:column;gap:6px}
.inp label{font-size:12.5px;font-weight:500;color:var(--mut)}
.fld{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;font-size:13.5px;color:var(--mut2);
  display:flex;align-items:center;gap:8px;width:100%;
}
.fld.on{color:var(--ink);font-weight:600}
input.fld,select.fld,textarea.fld{
  color:var(--ink);font-weight:500;outline:none;transition:border-color .15s,box-shadow .15s;
}
input.fld::placeholder,textarea.fld::placeholder{color:var(--mut2);font-weight:500}
input.fld:focus,select.fld:focus,textarea.fld:focus{
  border-color:var(--cel);box-shadow:0 0 0 3px rgba(142,177,209,.25);
}
input.fld:disabled,select.fld:disabled{background:var(--bg);color:var(--mut2);cursor:not-allowed}
select.fld{
  appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' stroke='%235B6B7C' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:18px;
}
textarea.fld{min-height:84px;resize:vertical;line-height:1.5}
.buscador{position:relative;display:flex;align-items:center}
.buscador .ic{position:absolute;left:13px;color:var(--mut2);pointer-events:none}
.buscador input.fld{padding-left:40px}

/* --- Segmented control --- */
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg a,.seg button{
  padding:7px 12px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);
  font-size:12px;font-weight:500;color:var(--mut);white-space:nowrap;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
@media (hover:hover){ .seg a:hover,.seg button:hover{border-color:var(--cel)} }
.seg a.on,.seg button.on{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:600}

/* --- Filas de lista --- */
.lrow{display:flex;align-items:center;gap:10px;padding:14px 16px}
.lrow+.lrow{border-top:1px solid var(--line)}
/* Una fila con data-lead se toca entera aunque no sea un <a>: los chips de
   adentro son botones, y un botón dentro de un link no es HTML válido. */
a.lrow,.lrow[data-lead]{transition:background .12s}
.lrow[data-lead]{cursor:pointer}
@media (hover:hover){ a.lrow:hover,.lrow[data-lead]:hover{background:var(--celsoft)} }
a.lrow:active,.lrow[data-lead]:active{background:var(--celsoft)}
.chev{font-size:17px;font-weight:700;color:var(--mut2)}

/* --- Avatares y logos --- */
.logo{
  display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);
  font-weight:600;flex:none;background:var(--celsoft);color:var(--navy);
}
.l22{width:22px;height:22px;font-size:9px;border-radius:8px}
.l36{width:36px;height:36px;font-size:12px}
.l40{width:40px;height:40px;font-size:13px}
.l44{width:44px;height:44px;font-size:13px;border-radius:13px}
.l48{width:48px;height:48px;font-size:15px;border-radius:14px}
.av{border-radius:var(--r-pill) !important;background:var(--cel2);color:var(--navy)}

/* --- Varios --- */
.dot{width:8px;height:8px;border-radius:var(--r-pill);background:var(--green);flex:none}
.divv{height:1px;background:var(--line);flex:none}
.ic{width:20px;height:20px;flex:none;color:var(--ink)}
.ic.s16{width:16px;height:16px}
.ic.s18{width:18px;height:18px}
.ic.s24{width:24px;height:24px}
.per{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 14px;
  font-size:12.5px;font-weight:600;color:var(--mut);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
select.per{appearance:none;cursor:pointer;padding-right:32px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' stroke='%235B6B7C' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:16px}

/* --- Banner del guardarraíl --- */
.banner{
  display:flex;gap:10px;align-items:flex-start;
  border-radius:var(--r-lg);padding:13px 14px;background:var(--yelsoft);
}
.banner .ic{color:var(--yeltx)}
.banner .h4,.banner .s2{color:var(--yeltx)}
.banner.rojo{background:var(--redsoft)}
.banner.rojo .ic,.banner.rojo .h4,.banner.rojo .s2{color:var(--red)}
.banner.verde{background:var(--greensoft)}
.banner.verde .ic,.banner.verde .h4,.banner.verde .s2{color:var(--green)}

/* ============================ 7 · TABLAS ============================ */
.tbl{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.tbl .tr{display:flex;align-items:center;padding:13px 18px;gap:10px}
.tbl .tr+.tr{border-top:1px solid var(--line)}
.tbl a.tr{transition:background .12s}
@media (hover:hover){ .tbl a.tr:hover{background:var(--celsoft)} }
.tbl a.tr:active{background:var(--celsoft)}
.tbl .th{background:var(--celsoft);border-top:none !important}
.tbl .th span{
  font-size:10.5px;font-weight:600;color:var(--mut);
  letter-spacing:.07em;text-transform:uppercase;
}
.tbl-scroll{overflow-x:auto}
.tbl-scroll .tbl{min-width:840px}
/* La tabla de consultas tiene una columna más y el nombre no se puede
   aplastar: se le reserva un mínimo y, si no entra, scrollea adentro. */
.tbl-scroll .cons-tbl{min-width:1126px}
.cons-tbl .c1{min-width:160px}
/* "libre": scrollea adentro sólo si hace falta, sin forzar un ancho mínimo.
   Es lo que usan las tablas chicas (los cruces del dashboard). */
.tbl-scroll.libre .tbl{min-width:0}
.c1{flex:1;min-width:0}
.cw90{width:90px;flex:none}
.cw110{width:110px;flex:none}
.cw120{width:120px;flex:none}
.cw140{width:140px;flex:none}
.cw150{width:150px;flex:none}
.cw180{width:180px;flex:none}
.cw260{width:260px;flex:none}

/* ============================ 8 · KANBAN ============================
   El tablero ocupa el alto que le queda a la vista: cada columna scrollea sola
   por dentro, con su encabezado siempre a la vista, y la barra horizontal del
   tablero queda pegada al borde de abajo. La página no scrollea: scrollea el
   tablero. Lo activa `body.tablero`, que ponen las tres páginas de pipeline. */
.kb{display:flex;gap:14px;align-items:stretch;overflow-x:auto;padding-bottom:6px}
.kcol{
  flex:1;min-width:230px;background:var(--kanbg);border-radius:14px;padding:10px;
  display:flex;flex-direction:column;gap:10px;min-height:0;
}
.kcol.ganado{background:var(--greensoft)}
/* El encabezado queda fuera del área que scrollea: no se va nunca. */
.kcol .kh{display:flex;align-items:center;gap:8px;padding:2px 4px;flex:none}
.kcol .kh b{font-size:12.5px;font-weight:600;color:var(--ink)}
.kcol .kh .kn{
  margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:7px;
  padding:1px 7px;font-size:11px;font-weight:600;color:var(--mut);
}

/* --- Barra de scroll del tablero: fina, redondeada y siempre visible ---
   Va sólo con ::-webkit-scrollbar y NO con `scrollbar-width`: cuando está la
   propiedad estándar, Chrome ignora el pseudo-elemento y en macOS vuelve a la
   barra flotante que aparece y desaparece. Acá tiene que verse de entrada.
   Firefox no entiende el pseudo-elemento: para él va el @supports de abajo. */
.kb::-webkit-scrollbar{height:10px}
.kb::-webkit-scrollbar-track{background:transparent}
.kb::-webkit-scrollbar-thumb{
  background:#C6D0DB;border-radius:var(--r-pill);border:2px solid var(--bg);
}
@media (hover:hover){ .kb::-webkit-scrollbar-thumb:hover{background:var(--cel)} }
/* Lo mismo, más discreto, adentro de cada columna. */
.kcol-cuerpo::-webkit-scrollbar{width:8px}
.kcol-cuerpo::-webkit-scrollbar-track{background:transparent}
.kcol-cuerpo::-webkit-scrollbar-thumb{
  background:#CDD7E1;border-radius:var(--r-pill);border:2px solid var(--kanbg);
}
.kcol.ganado .kcol-cuerpo::-webkit-scrollbar-thumb{border-color:var(--greensoft)}

@supports not selector(::-webkit-scrollbar){
  .kb{scrollbar-width:thin;scrollbar-color:#C6D0DB transparent}
  .kcol-cuerpo{scrollbar-width:thin;scrollbar-color:#CDD7E1 transparent}
}

/* Aviso de que hay más columnas a la derecha: si no, "Perdido" cortado
   parece un error de la pantalla y no lo es. */
.kb-desk{position:relative}
.kb-desk:after{
  content:'';position:absolute;top:0;right:0;bottom:12px;width:52px;
  pointer-events:none;opacity:0;transition:opacity .2s;
  background:linear-gradient(to right,rgba(244,246,248,0),var(--bg) 78%);
}
.kb-desk.hay-mas:after{opacity:1}
.kcard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:11px 12px;display:flex;flex-direction:column;gap:7px;
}
.kcard .kt{font-size:13px;font-weight:600;color:var(--ink)}
.kcard .ks{font-size:11px;font-weight:500;color:var(--mut2)}
/* El texto va en un <a> adentro de la tarjeta: así la tarjeta puede llevar
   botones de acción. La tarjeta entera abre la ficha igual. */
.kcard-txt{display:flex;flex-direction:column;gap:7px;min-width:0}
/* Sin borde izquierdo de color: la temperatura la dice su chip. */
.kcard{transition:box-shadow .15s;cursor:pointer}
@media (hover:hover){ .kcard:hover{box-shadow:var(--sombra)} }
/* Fila de acciones de la tarjeta: botones de ícono, nunca botones anchos. */
.kacc{display:flex;align-items:center;gap:6px;padding-top:2px}
.kcard .ibtn,.pcard .ibtn{width:34px;height:34px;border-radius:9px}
.kcard .ibtn .ic,.pcard .ibtn .ic{width:16px;height:16px}
/* El closer asignado, en la tarjeta de Agendadas. */
.kquien{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--mut)}
.kquien .logo{width:20px;height:20px;font-size:8.5px}

/* ============================ 9 · AGENDA SEMANAL ============================ */
.week{display:flex;gap:12px;align-items:stretch;overflow-x:auto}
.wday{
  flex:1;min-width:180px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:12px;display:flex;flex-direction:column;gap:9px;
}
.wday .wh{
  font-size:11px;font-weight:600;color:var(--mut);letter-spacing:.06em;text-transform:uppercase;
  padding-bottom:8px;border-bottom:1px solid var(--line);
}
/* Sin borde izquierdo de color: el estado lo dice el fondo del evento. */
.ev{
  background:var(--celsoft);border-radius:var(--r-sm);
  padding:9px 10px;display:flex;flex-direction:column;gap:3px;
}
.ev b{font-size:12px;font-weight:600;color:var(--ink)}
.ev span{font-size:10.5px;font-weight:500;color:var(--mut)}
.ev.won{background:var(--greensoft)}

/* ============================ 10 · EMBUDO ============================ */
.frow{
  height:40px;border-radius:10px;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;font-weight:600;font-size:13px;color:#fff;
}

/* ============================ 11 · TIMELINE ============================ */
.tstep{display:flex;gap:12px}
.tdot{width:24px;display:flex;flex-direction:column;align-items:center;flex:none}
.tdot .c{
  width:22px;height:22px;border-radius:var(--r-pill);background:var(--greensoft);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;
}
.tdot .l{width:2px;flex:1;background:var(--line);min-height:16px}
.tstep.pend .c{background:var(--celsoft);color:var(--mut2)}

/* ============================ 12 · SLOTS DE AGENDA ============================ */
.slot{
  padding:10px 8px;border-radius:10px;background:#fff;border:1px solid var(--line);
  font-size:12.5px;font-weight:600;color:var(--ink);text-align:center;flex:1;cursor:pointer;
}
.slot.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.slot.off{color:var(--mut2);background:var(--bg);font-weight:500;cursor:not-allowed}

/* ============================ 13 · LOGIN ============================ */
.login{display:flex;min-height:100vh}
.login-brand{
  width:520px;flex:none;background:var(--navy);color:#fff;
  display:flex;flex-direction:column;justify-content:center;gap:26px;padding:60px 56px;
}
.login-brand .wm{font-size:34px;color:#fff}
.login-brand .sub{
  font-size:11px;font-weight:500;color:var(--cel2);
  letter-spacing:.12em;text-transform:uppercase;margin-top:4px;
}
.login-brand .punto{display:flex;align-items:center;gap:12px}
.login-brand .punto .logo{background:rgba(255,255,255,.12);color:#fff}
.login-brand .punto .b1{color:var(--cel2)}
.login-form{
  flex:1;min-width:0;display:flex;align-items:center;justify-content:center;padding:32px;
}
.login-form .caja{display:flex;flex-direction:column;gap:14px;width:380px;max-width:100%}
.login-form .h1{font-size:26px}
.login-mobile-marca{display:none}
.nota-fld{
  background:var(--bg);border:1px dashed var(--line);border-radius:10px;
  padding:11px 14px;font-size:11.5px;font-weight:500;color:var(--mut2);line-height:1.45;
}

/* ============================ 13.b · TAREAS ============================ */
.tarea{display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.tarea .tt{font-size:13.5px;font-weight:600;color:var(--ink)}
.tarea.hecha{opacity:.55}
.tarea.hecha .tt{text-decoration:line-through}
.grupo-tareas{display:flex;flex-direction:column;gap:10px}

/* ============================ 13.c · CONSULTAS ============================ */
.consultas{display:flex;flex-direction:column;gap:12px}
.facetas{display:flex;gap:8px;flex-wrap:wrap}
.facetas select.per{max-width:100%}
.paginado{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.paginado .pbtn{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:var(--mut);
}
.paginado .pbtn:disabled{opacity:.4;cursor:not-allowed}

/* ============================ 13.d · SESIÓN ACTIVA EN EL LOGIN ============================ */
.sesion-activa{
  display:flex;align-items:center;gap:12px;
  background:var(--celsoft);border-radius:var(--r-lg);padding:14px;
}

/* ============================ 13.d.2 · FICHA DEL LEAD ============================ */
.ficha-cols{display:flex;gap:22px;align-items:flex-start}
.ficha-cols .col-izq{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.ficha-cols .col-der{width:390px;flex:none;display:flex;flex-direction:column;gap:10px}
@media (max-width:1023px){
  .ficha-cols{flex-direction:column;gap:14px}
  .ficha-cols .col-der{width:100%}
}

/* ============================ 13.d.3 · MÉTRICAS PERSONALES ============================
   El indicador del setter contra las metas de dirección. Entero en Mi día,
   `mini` en el header de Consultas. Verde cumple, ámbar hasta 1,5 veces la
   meta, rojo más allá. En rojo va la brecha y nada más. */
.metricas{display:flex;flex-direction:column;gap:10px}
.metricas .mt-fila{display:flex;align-items:center;gap:10px}
.metricas .mt-fila .ic{color:var(--mut2)}
.metricas .mt-fila.ok .ic{color:var(--green)}
.metricas .mt-fila.medio .ic{color:var(--yel)}
.metricas .mt-fila.mal .ic{color:var(--red)}
.metricas .mt-val{font-size:13.5px;font-weight:600;color:var(--ink)}
.mt-chip{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--r-pill);
  font-size:11px;font-weight:600;white-space:nowrap;background:var(--bg);color:var(--mut);flex:none;
}
.mt-chip.ok{background:var(--greensoft);color:var(--green)}
.mt-chip.medio{background:var(--yelsoft);color:var(--yeltx)}
.mt-chip.mal{background:var(--redsoft);color:var(--red)}
.mt-chip .ic{color:currentColor;width:14px;height:14px}

.metricas.mini{flex-direction:row;flex-wrap:wrap;gap:8px;padding:0;background:none;border:none}
.metricas.mini .mt-it{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);
  font-size:11.5px;font-weight:600;color:var(--mut);white-space:nowrap;
}
.metricas.mini .mt-it .ic{color:currentColor;width:15px;height:15px}
.metricas.mini .mt-it.ok{background:var(--greensoft);border-color:#C4E3CF;color:var(--green)}
.metricas.mini .mt-it.medio{background:var(--yelsoft);border-color:#EFDCAE;color:var(--yeltx)}
.metricas.mini .mt-it.mal{background:var(--redsoft);border-color:#F0CBCB;color:var(--red)}

/* ============================ 13.d.4 · DENSIDAD ============================
   La regla de CLAUDE.md → "Densidad y listas". Fila compacta de 56-64px, las
   acciones como botones de ícono y los chips editables con su chevron.
   Lo usan Mi día, Seguimientos y las consultas. */

/* --- Fila compacta --- */
.crow{
  display:flex;align-items:center;gap:10px;padding:9px 14px;min-height:58px;
  background:#fff;transition:background .12s;
}
.crow+.crow{border-top:1px solid var(--line)}
.crow[data-lead]{cursor:pointer}
@media (hover:hover){ .crow[data-lead]:hover{background:var(--celsoft)} }
.crow[data-lead]:active{background:var(--celsoft)}
/* align-self:stretch para que el link ocupe el alto entero de la fila: así el
   target táctil es la fila y no dos renglones de texto. */
.crow-txt{display:flex;flex-direction:column;justify-content:center;gap:2px;flex:1;min-width:0;align-self:stretch}
.crow-t{font-size:13.5px;font-weight:600;color:var(--ink)}
.crow-s{font-size:11.5px;font-weight:500;color:var(--mut2)}
.crow-chips{display:flex;align-items:center;gap:6px;flex:none;flex-wrap:wrap}
.crow-der{font-size:11.5px;font-weight:500;color:var(--mut2);flex:none;white-space:nowrap}
.crow-acc{display:flex;align-items:center;gap:6px;flex:none}

/* --- Botón de ícono: la acción discreta que reemplaza al botón gigante --- */
.ibtn{
  width:40px;height:40px;flex:none;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);color:var(--mut);
  transition:background .15s,border-color .15s,color .15s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.ibtn .ic{color:currentColor}
@media (hover:hover){ .ibtn:hover{border-color:var(--cel);color:var(--navy);background:var(--celsoft)} }
.ibtn:active{background:var(--celsoft)}
.ibtn:disabled{opacity:.45;pointer-events:none}
.ibtn.grn{color:var(--green);border-color:#C4E3CF;background:var(--greensoft)}
@media (hover:hover){ .ibtn.grn:hover{background:var(--green);color:#fff;border-color:var(--green)} }
.ibtn.grn:active{background:var(--green);color:#fff}
.ibtn.off{opacity:.4;cursor:not-allowed;background:var(--bg)}

/* --- Chip editable: el chip de siempre + un chevron que avisa que se toca --- */
.chip-edit{
  display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:var(--r-pill);
  background:none;border:none;cursor:pointer;max-width:100%;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background .15s;
}
.chip-edit .ic{width:14px;height:14px;color:var(--mut2);flex:none}
.chip-edit .chip{min-width:0;overflow:hidden;text-overflow:ellipsis;display:inline-block}
@media (hover:hover){ .chip-edit:hover{background:var(--bg)} }
.chip-edit:active{background:var(--celsoft)}

/* --- Menú flotante (escritorio). En celular manda el action sheet. --- */
.menu-fondo{position:fixed;inset:0;z-index:65;background:transparent}
.menu{
  position:fixed;min-width:210px;max-width:280px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sombra-alta);padding:6px;display:flex;flex-direction:column;gap:2px;
  animation:subir .14s ease-out;
}
.menu-tit{
  font-size:10.5px;font-weight:600;color:var(--mut);letter-spacing:.07em;
  text-transform:uppercase;padding:6px 8px 4px;
}
.menu-op{
  display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:0 8px;
  border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--ink);text-align:left;
}
.menu-op:hover,.menu-op:focus-visible{background:var(--celsoft);outline:none}
.menu-op.on:after{content:'✓';margin-left:auto;color:var(--green);font-weight:700;flex:none}

/* ============================ 13.d.4.b · SEGUIMIENTOS ============================
   El pipeline de toques del setter: segmentos con contador arriba y filas
   compactas abajo. Sin borde rojo: la urgencia la dice el chip de días. */
.segbig{display:flex;gap:8px;flex-wrap:wrap}
.segbig button{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:13px;font-weight:600;color:var(--mut);white-space:nowrap;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
@media (hover:hover){ .segbig button:hover{border-color:var(--cel)} }
.segbig button:active{background:var(--celsoft)}
.segbig button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.segbig .sn{
  min-width:22px;height:20px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--bg);color:var(--mut);font-size:11.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}
.segbig button.on .sn{background:rgba(255,255,255,.20);color:#fff}
.segbig button:disabled{opacity:.45;pointer-events:none}

/* El chip de días sin toque: gris hasta 3, ámbar 4-5, rojo 6+. */
.chip-dias{
  display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-pill);
  font-size:10.5px;font-weight:600;white-space:nowrap;background:var(--bg);color:var(--mut);
}
.chip-dias .ic{width:13px;height:13px;color:currentColor}
.chip-dias.tibio{background:var(--yelsoft);color:var(--yeltx)}
.chip-dias.frio{background:var(--redsoft);color:var(--red)}

/* ============================ 13.d.4.b · COLA DE TRABAJO ============================
   El workspace de Seguimientos: la cola a la izquierda, el trabajo a la
   derecha. Lo describe CLAUDE.md → "El patrón cola de trabajo". La regla dura:
   en la cola no hay banners ni avisos, sólo items. */
.ws{display:flex;flex:1;min-height:0;margin:0}

/* --- Panel izquierdo: la cola --- */
.ws-cola{
  width:360px;flex:none;display:flex;flex-direction:column;min-height:0;
  background:#fff;border-right:1px solid var(--line);
}
.ws-cola-head{flex:none;display:flex;flex-direction:column;gap:10px;padding:16px 16px 12px;border-bottom:1px solid var(--line)}
.ws-cola-lista{flex:1;min-height:0;overflow-y:auto}

/* Las tres stats, en versión mini: una tira, no tres cards grandes. */
.qstats{display:flex;gap:8px}
.qstat{
  flex:1;min-width:0;background:var(--bg);border-radius:10px;padding:8px 10px;
  display:flex;flex-direction:column;gap:1px;
}
.qstat b{font-size:16px;font-weight:700;color:var(--ink);line-height:1.1}
.qstat span{font-size:9.5px;font-weight:600;color:var(--mut);letter-spacing:.05em;text-transform:uppercase;line-height:1.25}

/* Los segmentos, como pills chicas. */
.qseg{display:flex;gap:6px;flex-wrap:wrap}
.qseg button{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);font-size:11.5px;font-weight:600;color:var(--mut);
  white-space:nowrap;cursor:pointer;transition:background .15s,color .15s,border-color .15s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
@media (hover:hover){ .qseg button:hover{border-color:var(--cel)} }
.qseg button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.qseg .qn{font-size:10.5px;font-weight:700;opacity:.75}
.qseg button:disabled{opacity:.4;pointer-events:none}

/* --- Item de la cola: nada más que el lead. Sin avisos, sin banners. --- */
.q-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;
  background:none;text-align:left;cursor:pointer;transition:background .12s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.q-item+.q-item{border-top:1px solid var(--line)}
@media (hover:hover){ .q-item:hover{background:var(--bg)} }
.q-item:active{background:var(--celsoft)}
/* El activo se marca con fondo, nunca con un borde de color a la izquierda. */
.q-item.on{background:var(--celsoft)}
.q-item .q-t{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink);min-width:0}
.q-item .q-s{font-size:11.5px;font-weight:500;color:var(--mut2)}
.q-item .q-der{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
/* La única señal del 4º toque que entra en la cola. El resto va en el panel. */
.q-punto{width:6px;height:6px;border-radius:var(--r-pill);background:var(--red);flex:none}
.q-vacio{padding:26px 18px;text-align:center}

/* --- Panel derecho: el espacio de trabajo --- */
.ws-work{
  flex:1;min-width:0;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;padding:20px 24px 28px;
}
.w-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.w-head .h2{font-size:19px}
.w-reg-cab{display:flex;align-items:center;gap:10px}
.w-fin{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.w-fin-fila{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.w-fin-fila .inp{flex:none;width:180px}
.w-agenda{display:flex;flex-direction:column;gap:10px;background:var(--celsoft);border-radius:var(--r-md);padding:12px}
.w-agenda .f-campos{display:flex;gap:10px;flex-wrap:wrap}
.w-agenda .inp{flex:1;min-width:190px}

/* --- Timeline vertical del panel --- */
.stl{display:flex;flex-direction:column;gap:0}
.stl-item{display:flex;align-items:flex-start;gap:10px;padding:9px 0}
.stl-item+.stl-item{border-top:1px dashed var(--line)}
.stl-n{
  flex:none;min-width:30px;height:22px;padding:0 7px;border-radius:var(--r-pill);
  background:var(--celsoft);color:var(--navy);font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.stl-a{font-size:12.5px;font-weight:600;color:var(--ink)}
.stl-meta{font-size:11.5px;font-weight:500;color:var(--mut2)}
.stl-nota{font-size:11.5px;font-weight:500;color:var(--mut);line-height:1.4}

/* --- Card colapsable (la consulta al pie). <details> nativo: sin JS. --- */
.fold{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.fold-cab{
  display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;
  cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;
}
.fold-cab::-webkit-details-marker{display:none}
.fold-cab:active{background:var(--celsoft)}
.fold-chev{margin-left:auto;font-size:19px;font-weight:700;color:var(--mut2);transition:transform .18s;line-height:1}
.fold[open] .fold-chev{transform:rotate(90deg)}
.fold-cuerpo{padding:2px 14px 14px;border-top:1px solid var(--line)}

/* --- Chips que se eligen (la acción del seguimiento) --- */
.chips-sel{display:flex;flex-wrap:wrap;gap:7px}
.chip-sel{
  padding:8px 13px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line);
  font-size:12.5px;font-weight:500;color:var(--mut);cursor:pointer;text-align:left;
  transition:background .15s,color .15s,border-color .15s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
@media (hover:hover){ .chip-sel:hover{border-color:var(--cel)} }
.chip-sel:active{background:var(--celsoft)}
.chip-sel.on{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:600}

/* --- Toggle "Agendó la llamada" --- */
.toggle{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  background:var(--celsoft);border-radius:var(--r-md);padding:12px 14px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.tg-pista{
  flex:none;width:44px;height:26px;border-radius:var(--r-pill);background:#C6D0DB;
  display:flex;align-items:center;padding:3px;transition:background .18s;
}
.tg-bolita{
  width:20px;height:20px;border-radius:var(--r-pill);background:#fff;
  box-shadow:0 1px 3px rgba(16,28,50,.25);transition:transform .18s;
}
.toggle input:checked+.tg-pista{background:var(--green)}
.toggle input:checked+.tg-pista .tg-bolita{transform:translateX(18px)}
.toggle input:focus-visible+.tg-pista{box-shadow:0 0 0 3px rgba(142,177,209,.45)}
.tg-txt{display:flex;flex-direction:column;gap:2px;min-width:0}

/* La sugerencia del 4º toque, en una línea liviana debajo de la fila. */
.savisa{
  display:flex;align-items:center;gap:8px;padding:8px 14px;
  background:var(--yelsoft);
}
.savisa .ic{width:16px;height:16px;color:var(--yeltx);flex:none}
.savisa span{flex:1;min-width:0;font-size:11.5px;font-weight:500;color:var(--yeltx);line-height:1.35}
.savisa button{
  flex:none;font-size:12px;font-weight:700;color:var(--yeltx);
  text-decoration:underline;padding:4px 2px;
}

/* ============================ 13.d.4.c · GRILLA DE DIRECCIÓN ============================
   Columnas del mismo ancho, cada una del alto de lo que tiene adentro.
   `align-items:start` es a propósito: una tabla de una fila estirada al alto
   de otra de seis es justamente el hueco blanco que hay que evitar.
   En celular, una sola columna. */
.grid-d{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px;align-items:start;
}
.grid-d>*{min-width:0}

/* ============================ 13.d.5 · FLECHAS DE LA FICHA ============================
   Anterior / siguiente respetando el orden y el filtro de la lista de origen. */
.fnav{display:flex;align-items:center;gap:6px;flex:none}
.fnav .fbtn{
  width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--mut);
}
@media (hover:hover){ .fnav .fbtn:not(:disabled):hover{border-color:var(--cel);color:var(--navy)} }
.fnav .fbtn:disabled{opacity:.35;cursor:not-allowed}
.fnav .fbtn .ic{width:18px;height:18px;color:currentColor}
.fnav .fpos{font-size:11.5px;font-weight:600;color:var(--mut2);white-space:nowrap;padding:0 2px}

/* ============================ 13.e · MODALES ============================ */
.modal-fondo{
  position:fixed;inset:0;z-index:60;background:rgba(11,17,29,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  animation:aparecer .16s ease-out;
}
.modal{
  background:#fff;border-radius:var(--r-lg);width:100%;max-width:420px;
  box-shadow:var(--sombra-alta);display:flex;flex-direction:column;
  max-height:90vh;overflow:auto;animation:subir .18s ease-out;
}
.modal-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-body{padding:18px;display:flex;flex-direction:column;gap:12px}
.modal-pie{display:flex;gap:10px;padding:0 18px 18px}
.modal-pie .btn{flex:1}
.modal-x{margin-left:auto;color:var(--mut2);font-size:20px;line-height:1;padding:4px 8px}

@keyframes aparecer{from{opacity:0}to{opacity:1}}
@keyframes subir{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ============================ 13.f · ENTRADA DE LEAD EN VIVO ============================ */
@keyframes entrarLead{
  0%{opacity:0;transform:translateY(-10px);box-shadow:0 0 0 3px rgba(45,140,78,.35)}
  60%{opacity:1;transform:none;box-shadow:0 0 0 3px rgba(45,140,78,.25)}
  100%{opacity:1;transform:none;box-shadow:none}
}
.entra{animation:entrarLead 1.1s ease-out}

/* La consulta que acaba de agendar se va de la lista: cumplió el objetivo y
   se nota. El verde es el mismo del "Ganado" del tablero. */
@keyframes salirLead{
  0%{opacity:1;transform:none;background:var(--greensoft)}
  100%{opacity:0;transform:translateX(26px);background:var(--greensoft)}
}
.sale{animation:salirLead .26s ease-in forwards;overflow:hidden}

/* ============================ 13.g · DRAG & DROP DEL KANBAN ============================ */
.kcard[draggable="true"]{cursor:grab}
.kcard.arrastrando{opacity:.45;cursor:grabbing}
.kcol.encima{outline:2px dashed var(--cel);outline-offset:-4px;background:var(--celsoft)}
.kcol.encima.ganado{background:var(--greensoft)}
.kcol-cuerpo{display:flex;flex-direction:column;gap:10px;min-height:60px}

/* ============================ 13.h · AVISO SUAVE ============================
   Para lo que no merece un modal: un movimiento que rebota, algo que no se
   puede hacer. Aparece abajo, se va solo y no bloquea la pantalla. */
.avisos{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:0 18px 22px;pointer-events:none;
}
.aviso{
  max-width:min(440px,100%);background:var(--navy);color:#fff;
  border-radius:var(--r-pill);padding:11px 18px;
  font-size:13px;font-weight:600;line-height:1.35;text-align:center;
  box-shadow:var(--sombra-alta);animation:avisoEntra .2s ease-out;
}
.aviso.yel{background:var(--yelsoft);color:var(--yeltx)}
.aviso.yendo{animation:avisoSale .22s ease-in forwards}
@keyframes avisoEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes avisoSale{to{opacity:0;transform:translateY(10px)}}

/* ============================ 14 · ESTADOS VACÍOS Y CARGA ============================ */
.vacio{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:36px 20px;text-align:center;color:var(--mut2);
}
.vacio .ic{width:28px;height:28px;color:var(--mut2)}
.esqueleto{
  border:1.5px dashed #C6D0DB;border-radius:var(--r-xl);background:rgba(255,255,255,.5);
  padding:22px;display:flex;flex-direction:column;gap:8px;
}

/* --- Esqueletos de carga ---
   Tienen la forma y las MEDIDAS del contenido que viene, no la de un spinner:
   la fila mide los mismos 58px que una fila de lead, la card de stat el mismo
   alto que un stat. Así la pantalla no está nunca vacía y, cuando llegan los
   datos, no salta ni un pixel. Los pinta js/shell.js sobre `data-esqueleto`. */
@keyframes sk-latido{
  0%{opacity:1}
  50%{opacity:.55}
  100%{opacity:1}
}
.sk-card,.sk-fila,.sk-stat,.sk-col,.sk-panel,.sk-nav,.sk-user{
  animation:sk-latido 1.4s ease-in-out infinite;
}
.sk-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;animation:none;
}
/* Flex y padding, no margin: con margin, el de la primera fila se colapsaba
   hacia afuera y esa fila quedaba 20px más alta que el resto. */
.sk-fila{
  display:flex;align-items:center;height:58px;padding:0 14px;background:#fff;
}
.sk-fila+.sk-fila{border-top:1px solid var(--line)}
.sk-fila::after{
  content:'';display:block;height:20px;width:38%;border-radius:6px;background:#EDF2F7;
}
.sk-stat{
  flex:1;min-width:130px;height:76px;background:#fff;
  border:1px solid var(--line);border-radius:14px;
}
.sk-panel{height:104px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.sk-tablero{display:flex;gap:14px;overflow:hidden}
.sk-col{flex:1;min-width:230px;height:280px;background:var(--kanbg);border-radius:14px}

/* Los dos del sidebar van sobre navy, así que aclaran en vez de oscurecer. */
.sk-nav{display:block;height:38px;border-radius:var(--r-sm);background:rgba(255,255,255,.08)}
.sk-user{display:block;height:52px;border-radius:10px;background:rgba(255,255,255,.08)}

/* Quien pidió menos movimiento no ve el latido: la forma alcanza. */
@media (prefers-reduced-motion:reduce){
  .sk-card,.sk-fila,.sk-stat,.sk-col,.sk-panel,.sk-nav,.sk-user{animation:none}
}

/* ============================ 15 · SHEETS (panel desde abajo) ============================
   El patrón de mobile para filtros y acciones. Se usa desde js/ui.js
   (abrirSheet / abrirAcciones) y respeta la safe area de abajo. */
.sheet-fondo{
  position:fixed;inset:0;z-index:70;background:rgba(11,17,29,.55);
  display:flex;align-items:flex-end;justify-content:center;
  animation:aparecer .16s ease-out;
}
.sheet{
  background:#fff;width:100%;max-width:560px;max-height:88vh;
  border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--sombra-alta);
  display:flex;flex-direction:column;animation:subirSheet .22s cubic-bezier(.2,.8,.3,1);
  padding-bottom:env(safe-area-inset-bottom);
}
.sheet-tirador{width:38px;height:4px;border-radius:var(--r-pill);background:var(--line);margin:9px auto 0;flex:none}
.sheet-head{display:flex;align-items:center;gap:10px;padding:12px 18px 10px;flex:none}
.sheet-head .h3{font-size:16px}
.sheet-x{margin-left:auto;color:var(--mut2);font-size:22px;line-height:1;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.sheet-body{padding:2px 18px 10px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sheet-body.p0{padding:0 0 6px}
.sheet-pie{padding:12px 18px 16px;display:flex;gap:10px;flex:none;border-top:1px solid var(--line)}
.sheet-pie .btn{flex:1;min-height:52px}
.sheet-op{
  display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:0 18px;
  font-size:16px;font-weight:600;color:var(--ink);text-align:left;background:none;
}
.sheet-op+.sheet-op{border-top:1px solid var(--line)}
.sheet-op:active{background:var(--celsoft)}
.sheet-op .chip{margin-left:auto}
.sheet-op.on{color:var(--navy)}
.sheet-op.on:after{content:'✓';margin-left:auto;color:var(--green);font-weight:700}
@keyframes subirSheet{from{transform:translateY(100%)}to{transform:none}}

/* ============================ 16 · CAPA MOBILE ============================
   Todo lo de acá abajo vive bajo 1024px: el escritorio queda como estaba.
   Cambia la ergonomía, no el diseño: mismos colores, chips y radios.
   Las reglas están escritas en CLAUDE.md → "Estándar mobile". */
@media (max-width:1023px){

  /* --- 16.1 · shell --- */
  .side{display:none}
  .topbar{display:flex}
  .tabbar{display:flex}
  .app{flex-direction:column;min-height:100dvh}
  .main{
    padding:12px var(--pad-m) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px);
    gap:12px;
  }
  /* Páginas de detalle (ficha del lead): sin tabbar, con barra de acciones fija. */
  body.detalle .tabbar{display:none}
  body.detalle .main{padding-bottom:calc(72px + env(safe-area-inset-bottom) + 16px)}

  /* Topbar sticky: el nombre de la sección UNA sola vez + avatar a Perfil. */
  .topbar{
    position:sticky;top:0;z-index:40;align-items:center;gap:10px;
    min-height:calc(var(--topbar-h) + env(safe-area-inset-top));
    padding:0 var(--pad-m);
    padding-top:env(safe-area-inset-top);
    background:#fff;border-bottom:1px solid var(--line);
  }
  .topbar.doble{min-height:calc(58px + env(safe-area-inset-top));padding-bottom:7px}
  .tb-tit{font-size:20px;font-weight:700;color:var(--ink);line-height:1.15;letter-spacing:-.01em}
  .tb-sub{font-size:13px;font-weight:500;color:var(--mut2);line-height:1.2}
  .tb-av{
    width:48px;height:48px;flex:none;margin-right:-10px;
    display:flex;align-items:center;justify-content:center;
  }
  .tb-av .logo{width:36px;height:36px;font-size:12.5px}
  .tb-av:active{opacity:.55}
  .tb-back{
    width:44px;height:44px;flex:none;margin-left:-12px;
    display:flex;align-items:center;justify-content:center;
    font-size:30px;font-weight:600;line-height:1;color:var(--ink);
  }
  .tb-back:active{background:var(--celsoft);border-radius:var(--r-md)}
  .topbar .chip{flex:none}

  /* Tabbar: labels visibles, 50px de alto por item y safe area abajo. */
  .tabbar{
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    z-index:50;
  }
  .tabbar .tab{
    flex:1;min-width:0;min-height:50px;border-radius:var(--r-md);
    justify-content:center;gap:3px;font-size:11px;padding:0 2px;
  }
  .tabbar .tab .ic{width:23px;height:23px}
  .tabbar .tab:active{background:var(--celsoft)}

  /* --- 16.2 · tipografía --- */
  body{font-size:15px}
  .h1{font-size:21px}
  .h2{font-size:17px}
  .h3{font-size:15.5px}
  .h4{font-size:15px}
  .b1{font-size:15px;line-height:1.5}
  .s1{font-size:13.5px}
  .s2{font-size:13px}
  .lab{font-size:11px}
  .lk{font-size:14px}
  .page-head .h1{font-size:21px}

  /* --- 16.3 · lo que se toca: 44px mínimo, feedback propio, cero hover --- */
  a,button,input,select,textarea,label,
  .tab,.chip,.lrow,.tr,.kcard,.pcard,.slot,.dia-chip,.sec-cab{
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
  }
  a.card:active,.card.click:active,.pcard:active,.dcard:active{background:var(--celsoft)}
  a.lrow,.tbl a.tr,a.card,.pcard,.dcard,.btn,.chip,.seg button{transition:background .15s,filter .15s}

  .btn{min-height:48px;padding:12px 20px;font-size:15.5px}
  .btn:active{filter:brightness(.93)}
  .btn.sm{min-height:44px;padding:10px 16px;font-size:15px;border-radius:var(--r-md)}
  .btn.xs{min-height:44px;padding:10px 14px;font-size:14px;border-radius:11px}
  .btn.xs .ic{width:17px;height:17px}

  /* Filas de lista: la fila entera es tocable y mide 56px o más. */
  .lrow{min-height:56px;padding:12px 14px;gap:10px}
  .tbl .tr{min-height:56px}

  /* --- 16.4 · campos: 16px o iOS hace zoom al enfocar --- */
  input,select,textarea,
  .fld,input.fld,select.fld,textarea.fld,
  .per,select.per{font-size:16px}
  .fld{min-height:48px;padding:13px 14px;border-radius:var(--r-md)}
  select.fld{background-size:20px;background-position:right 12px center;padding-right:40px}
  textarea.fld{min-height:104px}
  .inp{gap:7px}
  .inp label{font-size:13px}
  .per{min-height:44px;padding:10px 14px;border-radius:var(--r-md)}
  select.per{padding-right:36px;background-size:18px}
  .buscador input.fld{padding-left:44px}
  .buscador .ic{left:15px}

  /* --- 16.5 · chips y segmentos --- */
  .chip{font-size:12.5px;padding:6px 12px}
  .chip.sm{font-size:12px;padding:4px 10px}
  .seg{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 calc(var(--pad-m) * -1);padding:2px var(--pad-m);gap:8px;
  }
  .seg::-webkit-scrollbar{display:none}
  .seg a,.seg button{min-height:44px;padding:0 16px;display:inline-flex;align-items:center;font-size:14px}
  .seg button:active{background:var(--celsoft)}
  /* Tira horizontal genérica: scrollea adentro, nunca desborda la página. */
  .strip{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 calc(var(--pad-m) * -1);padding:2px var(--pad-m);align-items:stretch;
  }
  .strip::-webkit-scrollbar{display:none}
  .strip>*{flex:none}

  /* --- 16.6 · stats --- */
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:visible}
  .stats.tres{grid-template-columns:repeat(3,1fr)}
  .stat{padding:12px;min-width:0}
  .stat b{font-size:20px}
  .stat span{font-size:9.5px;margin-top:2px}

  /* Una sola columna: nada de columnas de 300px apretadas en 390. */
  .grid-d{grid-template-columns:1fr;gap:12px}

  /* --- 16.7 · tablas: adentro de su card, jamás la página --- */
  .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg)}
  .card .tbl,.tbl{border-radius:var(--r-lg)}
  /* Card de datos: el reemplazo de la tabla en celular. */
  .dcard{
    background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
    padding:13px 14px;display:flex;flex-direction:column;gap:9px;
  }
  .dcard+.dcard{margin-top:10px}
  .dcard .dfila{display:flex;align-items:center;gap:10px;justify-content:space-between}
  .dcard .dk{font-size:13px;font-weight:500;color:var(--mut2);flex:none}
  /* Un chip de métrica dentro de una fila de dcard cede antes de desbordar. */
  .dcard .dfila .mt-chip{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;display:block}
  .dcard .dv{
    font-size:14px;font-weight:600;color:var(--ink);text-align:right;
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  /* --- 16.8 · kanban y agenda de escritorio: fuera --- */
  .kb{flex-direction:column}
  .kcol{min-width:0}
  .week{flex-direction:column}
  .wday{min-width:0}

  /* Pipeline mobile: lista agrupada por estado, sin drag & drop. */
  .plist{display:flex;flex-direction:column;gap:18px}
  .pgrupo{display:flex;flex-direction:column;gap:10px}
  .pgrupo-cab{display:flex;align-items:center;gap:8px}
  .pgrupo-cab .kn{
    background:#fff;border:1px solid var(--line);border-radius:8px;
    padding:2px 9px;font-size:12px;font-weight:700;color:var(--mut);
  }
  .pcard{
    background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
    padding:0;display:flex;flex-direction:column;overflow:hidden;
  }
  .pcard>a{display:flex;flex-direction:column;gap:7px;padding:13px 14px 12px}
  /* El cuerpo de la tarjeta es el mismo en las dos vistas: sólo cambia el
     tamaño, que en el pulgar tiene que ser el de celular. */
  .pcard .kt{font-size:15px}
  .pcard .ks{font-size:13px}
  .pcard .kacc{padding:0 14px 12px}
  .pcard .ibtn{width:44px;height:44px;border-radius:12px}
  .pcard .ibtn .ic{width:19px;height:19px}
  .kquien{font-size:12.5px}
  .kquien .logo{width:22px;height:22px;font-size:9px}
  .avisos{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px)}
  .aviso{font-size:14px;padding:12px 18px}
  .pcard .pacc{
    border-top:1px solid var(--line);min-height:48px;width:100%;
    display:flex;align-items:center;justify-content:center;gap:8px;
    font-size:14.5px;font-weight:600;color:var(--navy);background:#fff;
  }
  .pcard .pacc:active{background:var(--celsoft)}

  /* Agenda mobile: chips de día + lista del día elegido. */
  .dias{
    display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 calc(var(--pad-m) * -1);padding:2px var(--pad-m);
  }
  .dias::-webkit-scrollbar{display:none}
  .dia-chip{
    flex:none;min-width:66px;min-height:58px;padding:8px 10px;
    background:#fff;border:1px solid var(--line);border-radius:14px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  }
  .dia-chip b{font-size:17px;font-weight:700;color:var(--ink);line-height:1.1}
  .dia-chip span{font-size:11px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
  .dia-chip .pin{width:6px;height:6px;border-radius:var(--r-pill);background:var(--cel);margin-top:2px}
  .dia-chip.on{background:var(--navy);border-color:var(--navy)}
  .dia-chip.on b{color:#fff}
  .dia-chip.on span{color:var(--cel2)}
  .dia-chip.on .pin{background:var(--cel2)}
  .dia-chip.hoy{border-color:var(--cel)}
  .dia-chip:active{background:var(--celsoft)}
  .ev{padding:13px 14px;min-height:58px;gap:4px;border-radius:var(--r-md)}
  .ev b{font-size:14.5px}
  .ev span{font-size:12.5px}
  .ev:active{background:var(--cel2)}
  .pbtn-nav{
    width:44px;height:44px;flex:none;background:#fff;border:1px solid var(--line);
    border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
    font-size:20px;font-weight:700;color:var(--mut);
  }
  .pbtn-nav:active{background:var(--celsoft)}

  /* --- 16.9 · consultas --- */
  .cons-barra{
    position:sticky;top:calc(var(--topbar-h) + env(safe-area-inset-top));z-index:30;
    display:flex;gap:8px;align-items:center;
    margin:0 calc(var(--pad-m) * -1);padding:8px var(--pad-m);background:var(--bg);
  }
  .cons-barra .buscador{flex:1;min-width:0}
  .cons-barra .buscador input.fld{min-height:48px}
  .btn-filtros{
    min-height:48px;flex:none;padding:0 14px;gap:7px;
    background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
    display:flex;align-items:center;font-size:14.5px;font-weight:600;color:var(--ink);
  }
  .btn-filtros:active{background:var(--celsoft)}
  .btn-filtros .fn{
    min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-pill);
    background:var(--navy);color:#fff;font-size:11.5px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  .btn-mas{width:100%;min-height:50px}

  /* --- 16.10 · ficha del lead: secciones colapsables ---
     align-items:stretch es obligatorio: en columna, el flex-start del
     escritorio encoge las secciones plegadas al ancho de su título. */
  .ficha-cols{align-items:stretch}
  .ficha-cols .col-izq,.ficha-cols .col-der{width:100%}
  /* La sección del rol va primero: en el celular es a lo que se entra a hacer. */
  .ficha-cols .col-der{order:-1}
  .sec{
    background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
    display:flex;flex-direction:column;
  }
  .sec-cab{
    width:100%;min-height:52px;display:flex;align-items:center;gap:10px;
    padding:0 14px;background:#fff;text-align:left;
  }
  .sec-cab:active{background:var(--celsoft)}
  .sec-cab .lab{color:var(--mut)}
  .sec-chev{
    margin-left:auto;font-size:20px;font-weight:700;color:var(--mut2);
    transition:transform .18s;line-height:1;
  }
  .sec.abierta .sec-chev{transform:rotate(90deg)}
  .sec-cuerpo{display:none}
  .sec.abierta .sec-cuerpo{display:block;border-top:1px solid var(--line)}
  .sec-cuerpo>.card{border:none;border-radius:0;box-shadow:none}
  .sec-cuerpo>.card.p0{border-radius:0}
  .sec-cuerpo>.card.soft{border-radius:0}
  /* Barra de acciones fija de la ficha, con safe area. */
  .abar{
    position:fixed;left:0;right:0;bottom:0;z-index:45;
    display:flex;gap:10px;align-items:center;
    background:#fff;border-top:1px solid var(--line);
    padding:12px var(--pad-m) calc(12px + env(safe-area-inset-bottom));
  }
  .abar .btn{flex:1;min-height:50px}
  .banner{padding:14px}
  .banner .btn{min-height:44px}

  /* --- 16.11 · modales: ancho completo, botones de 48px --- */
  .modal-fondo{align-items:flex-end;padding:0}
  .modal{
    max-width:none;border-radius:var(--r-xl) var(--r-xl) 0 0;
    max-height:88vh;animation:subirSheet .22s cubic-bezier(.2,.8,.3,1);
  }
  .modal-head{padding:18px 18px 14px}
  .modal-body{padding:16px 18px}
  .modal-pie{padding:0 18px calc(18px + env(safe-area-inset-bottom));gap:10px}
  .modal-pie .btn{min-height:48px;font-size:15.5px;padding:12px 18px}
  .modal-x{width:44px;height:44px;display:flex;align-items:center;justify-content:center}

  /* --- 16.12 · login: una columna, marca arriba, Entrar bien abajo --- */
  .login{flex-direction:column;min-height:100dvh}
  .login-brand{display:none}
  .login-mobile-marca{
    display:flex;flex-direction:column;align-items:center;gap:12px;
    padding:calc(env(safe-area-inset-top) + 9vh) 24px 0;
  }
  .login-mobile-marca .wm{font-size:38px}
  /* El bloque queda centrado en lo que sobra: el botón Entrar cae en la
     mitad baja de la pantalla, donde llega el pulgar. */
  .login-form{
    padding:24px 20px calc(28px + env(safe-area-inset-bottom));
    align-items:center;
  }
  .login-form .caja{width:100%;gap:16px}
  .login-form .h1{font-size:23px;text-align:center}
  .login-form .fld{min-height:52px}
  .login-form .btn{min-height:52px;font-size:16px}
  .sesion-activa{padding:16px}

  /* --- 16.14 · métricas personales --- */
  .metricas .mt-val{font-size:14.5px}
  .metricas .mt-fila{gap:11px}
  .mt-chip{font-size:12px;padding:5px 11px}
  .mt-chip .ic{width:15px;height:15px}
  /* La tira mini scrollea adentro de sí misma: nunca desborda la pantalla. */
  .metricas.mini{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 calc(var(--pad-m) * -1);padding:2px var(--pad-m);gap:8px;
  }
  .metricas.mini::-webkit-scrollbar{display:none}
  .metricas.mini .mt-it{flex:none;min-height:38px;font-size:13px;padding:8px 13px}

  /* --- 16.15 · densidad en celular ---
     La fila sigue siendo compacta, pero todo lo que se toca llega a 44px. */
  .crow{min-height:64px;padding:10px 14px;gap:10px}
  .crow-txt{min-height:44px}
  .crow-t{font-size:15px}
  .crow-s{font-size:13px}
  .crow-der{font-size:12.5px}
  .crow-acc{gap:8px}
  .ibtn{width:44px;height:44px;border-radius:12px}
  .ibtn .ic{width:20px;height:20px}
  /* El chip editable es un target real: 44px de alto con el chip centrado. */
  .chip-edit{min-height:44px;padding:0 2px}
  .chip-edit .ic{width:16px;height:16px}
  .segbig{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 calc(var(--pad-m) * -1);padding:2px var(--pad-m);gap:8px;
  }
  .segbig::-webkit-scrollbar{display:none}
  .segbig button{flex:none;min-height:46px;font-size:14px}
  .chip-dias{font-size:12px;padding:4px 10px}
  .chip-dias .ic{width:15px;height:15px}
  .savisa{padding:9px 14px}
  .savisa span{font-size:13px}
  .savisa button{font-size:13.5px;min-height:44px;display:flex;align-items:center}

  /* --- Cola de trabajo en celular: una pantalla por vez ---
     Primero la cola completa; al tocar un lead, el mismo espacio de trabajo a
     pantalla completa. La página vuelve a scrollear normal: acá no hay dos
     paneles que sincronizar. */
  body.cola .main{
    padding:0 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 18px);
    gap:0;
  }
  .ws{flex-direction:column}
  .ws-cola{width:100%;border-right:none;background:transparent}
  .ws-cola-head{
    padding:10px var(--pad-m) 12px;border-bottom:1px solid var(--line);background:var(--bg);
    position:sticky;top:calc(var(--topbar-h) + env(safe-area-inset-top));z-index:25;
  }
  .ws-cola-lista{overflow:visible}
  .q-item{min-height:64px;padding:12px var(--pad-m);background:#fff}
  .q-item .q-t{font-size:15px}
  .q-item .q-s{font-size:13px}
  .qstat b{font-size:18px}
  .qstat span{font-size:10px}
  .qseg{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 calc(var(--pad-m) * -1);padding:2px var(--pad-m);
  }
  .qseg::-webkit-scrollbar{display:none}
  .qseg button{flex:none;min-height:44px;font-size:13.5px;padding:0 14px}
  /* Una pantalla por vez: o la cola, o el trabajo. */
  .ws-work{display:none;padding:14px var(--pad-m) 0}
  body.viendo-trabajo .ws-cola{display:none}
  body.viendo-trabajo .ws-work{display:flex}
  /* Los dos desenlaces, uno debajo del otro y a ancho completo: en el pulgar
     no se eligen dos botones que comparten renglón. */
  .w-fin-fila{flex-direction:column;align-items:stretch;gap:10px}
  .w-fin-fila .inp{width:100%}
  .w-fin-fila .btn{width:100%}
  .w-agenda .inp{min-width:0}
  .w-head .h2{font-size:18px;width:100%}

  /* La timeline y los chips del registro, en celular. */
  .stl-item{padding:11px 0;gap:10px}
  .stl-n{min-width:34px;height:24px;font-size:12px}
  .stl-a{font-size:14px}
  .stl-meta{font-size:12.5px}
  .stl-nota{font-size:13px}
  .fold-cab{min-height:52px}
  .chip-sel{min-height:44px;display:inline-flex;align-items:center;font-size:14px;padding:0 15px}
  .toggle{min-height:56px;padding:12px 14px}
  .tg-pista{width:50px;height:30px}
  .tg-bolita{width:24px;height:24px}
  .toggle input:checked+.tg-pista .tg-bolita{transform:translateX(20px)}

  /* --- 16.16 · flechas de la ficha, en el header sticky --- */
  .fnav{gap:0;margin-right:-6px}
  .fnav .fbtn{width:44px;height:44px;background:none;border:none;color:var(--ink)}
  .fnav .fbtn:active{background:var(--celsoft);border-radius:var(--r-md)}
  .fnav .fbtn .ic{width:22px;height:22px}
  .fnav .fpos{display:none}
  /* Botones dentro de una fila de datos (el "Entrar al Meet"): no se aplastan. */
  .lrow>.btn,.lrow>a.btn{flex:none}

  /* --- 16.13 · varios --- */
  .paginado .pbtn{width:44px;height:44px}
  .vacio{padding:30px 18px}
  .vacio .b1{font-size:14.5px}
  .card{padding:14px}
  .tarea{padding:14px;gap:10px}
  .tarea .tt{font-size:15px}
  .tarea>a.s2{display:flex;align-items:center;min-height:44px;font-size:13.5px}
  /* Los links sueltos ("Ver todas", "Reabrir") también son cosas que se tocan. */
  .lk{display:inline-flex;align-items:center;min-height:44px}
  .page-head select.per{width:100%}
  .frow{height:44px;font-size:14px;gap:10px;white-space:nowrap;padding:0 14px}
  .solo-desktop{display:none !important}
}

@media (min-width:1024px){
  .solo-mobile{display:none !important}

  /* --- Tablero a alto completo (body.tablero) ---
     La cadena de min-height:0 es obligatoria: sin ella un hijo flex no se deja
     achicar por debajo de su contenido y el scroll se va a la página entera. */
  body.tablero .app{height:100vh;overflow:hidden}
  body.tablero .app>.grow{min-height:0}
  body.tablero .main{min-height:0;overflow:hidden}
  body.tablero .kb-host{flex:1;min-height:0;display:flex;flex-direction:column}
  body.tablero .kb-desk{flex:1;min-height:0;display:flex;flex-direction:column}
  body.tablero .kb{flex:1;min-height:0}
  body.tablero .kcol-cuerpo{flex:1;min-height:0;overflow-y:auto;padding-right:2px}

  /* --- Workspace de dos paneles (body.cola) ---
     La página no scrollea: scrollea la cola por un lado y el trabajo por otro.
     Misma cadena de min-height:0 que el tablero. */
  body.cola .app{height:100vh;overflow:hidden}
  body.cola .app>.grow{min-height:0}
  body.cola .main{min-height:0;overflow:hidden;padding:0;gap:0}
  /* En escritorio las secciones de la ficha están siempre abiertas y el
     encabezado no es un botón: la colapsable es una idea de celular. */
  .sec{display:flex;flex-direction:column;gap:6px}
  .sec-cab{background:none;padding:0;cursor:default;display:flex;align-items:center}
  .sec-chev{display:none}
  .sec-cuerpo{display:block}
}