*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* OSCURO de entrada. El claro entra por el interruptor. */
  --bg:#0e0f11; --card:#16181b; --card2:#1d2024; --fg:#e9ebee; --muted:#79818a;
  --soft:#16233a; --line:#2b2f35; --line2:#212429; --side:#131518;
  --primary:#3b82f6; --primary-d:#2f6fe0; --primary-s:#16233a; --primary-txt:#8ab4f8;
  --cyan:#22d3ee; --purple:#a78bfa; --purple-s:#201a38;
  --ok:#4ade80; --ok-bg:#10291a;
  --warn:#fbbf24; --warn-bg:#2c2109; --warn-solid:#f59e0b;
  --danger:#f87171; --danger-bg:#331413;
  --r:9px; --rc:13px; --sw:236px;
  --ui:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Geist',var(--ui);
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
html[data-tema="oscuro"]{
  --bg:#0e0f11; --card:#16181b; --card2:#1d2024; --fg:#e9ebee; --muted:#79818a;
  --soft:#16233a; --line:#2b2f35; --line2:#212429; --side:#131518;
  --primary:#3b82f6; --primary-d:#2f6fe0; --primary-s:#16233a; --primary-txt:#8ab4f8;
  --cyan:#22d3ee; --purple:#a78bfa; --purple-s:#201a38;
  --ok:#4ade80; --ok-bg:#10291a;
  --warn:#fbbf24; --warn-bg:#2c2109; --warn-solid:#f59e0b;
  --danger:#f87171; --danger-bg:#331413;
  --r:9px; --rc:13px; --sw:236px;
  --ui:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Geist',var(--ui);
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
html[data-tema="claro"]{
  --bg:#f4f5f7; --card:#fff; --card2:#eef0f3; --fg:#14161a; --muted:#6f767f;
  --soft:#e8f0fe; --line:#dadee3; --line2:#e8ebef; --side:#fff;
  --primary:#1d6bff; --primary-d:#155ce0; --primary-s:#e8f0fe; --primary-txt:#1553e8;
  --cyan:#0e7490; --purple:#6d28d9; --purple-s:#f0eafd;
  --ok:#15803d; --ok-bg:#e7f6ec;
  --warn:#a16207; --warn-bg:#fdf3da; --warn-solid:#d98324;
  --danger:#b91c1c; --danger-bg:#fdeaea;
  color-scheme:light;
}

body{background:var(--bg);color:var(--fg);font-family:var(--ui);
  font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,.kpi .v,.kpi-v{font-family:var(--display);letter-spacing:-.03em;font-weight:600}
h1{text-wrap:balance}
.kpi .v,.kpi-v,.num{font-variant-numeric:tabular-nums}
code,kbd,pre,.mono{font-family:var(--mono)}
.app{display:flex;min-height:100vh}

/* ── Barra lateral ─────────────────────────────────────────────────── */
.side{width:var(--sw);flex:none;background:var(--side);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{padding:17px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line2)}
.brand-m{width:28px;height:28px;border-radius:9px;flex:none;background:linear-gradient(135deg,var(--primary),var(--cyan))}
.brand b{display:block;font-size:.9375rem;font-weight:800;letter-spacing:-.3px;line-height:1.2}
.brand i{display:block;font-size:.6875rem;color:var(--muted);font-style:normal}
.search{margin:14px 14px 4px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:var(--r);padding:9px 12px;color:var(--muted);font-size:.8125rem;background:var(--card);
  transition:border-color .15s;width:calc(100% - 28px)}
.search:hover{border-color:var(--primary)}
.search kbd{margin-left:auto;font:inherit;font-size:.6875rem;font-weight:600;background:var(--soft);
  border-radius:5px;padding:2px 6px}
.grp{margin-top:14px}
.grp-t{padding:0 18px 6px;font-size:.6875rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.nav{width:100%;display:flex;align-items:center;gap:11px;padding:9px 18px;color:var(--muted);
  font-size:.875rem;font-weight:500;text-align:left;transition:background .13s,color .13s}
.nav:hover{background:var(--soft);color:var(--fg)}
.nav.on{background:var(--primary-s);color:var(--primary-txt);font-weight:700}
.nav .n{margin-left:auto;font-size:.6875rem;font-weight:800;border-radius:999px;padding:2px 8px;
  background:var(--primary);color:#fff}
.nav .new{margin-left:auto;font-size:.625rem;font-weight:800;border-radius:999px;padding:2px 7px;
  background:#e11d48;color:#fff}
.nav-mas{margin-top:14px;font-weight:600}
.nav-mas-f{width:18px;text-align:center;font-size:.75rem}
.nav-mas-n{margin-left:auto;font-size:.6875rem;font-weight:700;border-radius:999px;padding:2px 8px;
  background:var(--soft);color:var(--muted)}
.side-f{margin-top:auto;padding:14px;border-top:1px solid var(--line2)}
.userc{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r);
  border:1px solid var(--line2);background:var(--card2)}
.userc .av{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:.75rem;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--purple))}
.userc b{display:block;font-size:.8125rem;font-weight:700;line-height:1.25}
.userc i{display:block;font-size:.6875rem;color:var(--muted);font-style:normal}

/* Checklist */
.chk{margin:14px;border:1px solid var(--line);border-radius:var(--rc);padding:14px;background:var(--card2)}
.chk-h{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:700}
.chk-h span{margin-left:auto;font-size:.6875rem;color:var(--muted)}
.chk-bar{height:5px;border-radius:999px;background:var(--soft);margin:10px 0 12px;overflow:hidden}
.chk-bar i{display:block;height:100%;background:var(--primary)}
.chk ul{list-style:none;display:grid;gap:7px}
.chk li{display:flex;align-items:center;gap:8px;font-size:.75rem}
.chk li.d{color:var(--muted);text-decoration:line-through}
.chk .dot{width:14px;height:14px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:9px;color:#fff;background:var(--primary)}
.chk li:not(.d) .dot{background:transparent;border:1.5px solid var(--line)}

/* ── Principal ─────────────────────────────────────────────────────── */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;background:var(--card);border-bottom:1px solid var(--line2);
  display:flex;align-items:center;gap:12px;padding:0 20px;height:58px;flex:none}
.crumb{display:flex;align-items:center;gap:7px;font-size:.875rem;color:var(--muted);min-width:0}
.crumb b{color:var(--fg);font-weight:700;white-space:nowrap}
.top-r{margin-left:auto;display:flex;align-items:center;gap:4px}
.ibtn{width:34px;height:34px;border-radius:var(--r);color:var(--muted);display:flex;
  align-items:center;justify-content:center;transition:background .13s,color .13s}
.ibtn:hover{background:var(--soft);color:var(--fg)}
.burger{display:none}

/* Banner de demo */
.demo{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:11px 20px;background:var(--warn-bg);border-bottom:1px solid var(--line2);
  font-size:.8125rem;color:var(--warn);font-weight:600;text-align:center}
.demo a{background:var(--warn-solid);color:#3a2500;border-radius:999px;padding:6px 16px;
  font-size:.75rem;font-weight:800;text-decoration:none;white-space:nowrap}
.demo a:hover{filter:brightness(.94)}

.body{padding:24px 20px 56px;flex:1}
.hello{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.hello h1{font-size:clamp(1.375rem,3vw,1.75rem);font-weight:800;letter-spacing:-.6px;line-height:1.2}
.hello h1 span{color:var(--primary)}
.hello p{margin-top:3px;font-size:.8125rem;color:var(--muted)}
.range{margin-left:auto;display:flex;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--card)}
.range button{padding:7px 14px;font-size:.75rem;font-weight:700;color:var(--muted);transition:.13s}
.range button.on{background:var(--primary);color:#fff}

/* ── Tarjetas ──────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--rc)}
.card-h{padding:14px 16px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card-h b{font-size:.9375rem;font-weight:700;letter-spacing:-.2px}
.card-h .sub{font-size:.75rem;color:var(--muted);margin-left:auto}
.card-b{padding:16px}
.kpis{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--rc);padding:16px}
.kpi .l{font-size:.8125rem;color:var(--muted)}
.kpi .v{font-size:1.5rem;font-weight:600;letter-spacing:-.5px;margin-top:7px;
  font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .d{font-size:.75rem;color:var(--muted);margin-top:5px}
.kpi .d .up{color:var(--ok);font-weight:700}
.kpi .d .dn{color:var(--danger);font-weight:700}
.kpi .nota{margin-top:11px;padding-top:11px;border-top:1px solid var(--line2);
  font-size:.75rem;color:var(--muted);line-height:1.45}
.g2{display:grid;gap:16px;grid-template-columns:1fr 330px;align-items:start}
.g2>*{min-width:0}
.g3{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g3>*{min-width:0}
@media(max-width:1080px){.g2{grid-template-columns:1fr}}

/* Filas */
.rows{display:grid;gap:9px}
.rows>*{min-width:0}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0;padding:11px 13px;
  border:1px solid var(--line2);border-radius:var(--r);background:var(--card)}
.row .av{width:32px;height:32px;border-radius:9px;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:.8125rem;font-weight:800;color:#fff}
.row .m{flex:1;min-width:0}
.row .m b{display:block;font-size:.875rem;font-weight:700;line-height:1.3}
.row .m span{display:block;font-size:.75rem;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.row.av-r .m span{overflow:visible;white-space:normal}
.av-h{display:flex;align-items:center;gap:8px;flex:none}
.av-h .inp{width:110px}

.chip{font-size:.6875rem;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.dg{background:var(--danger-bg);color:var(--danger)}
.chip.info{background:var(--primary-s);color:var(--primary)}
.chip.mute{background:var(--soft);color:var(--muted)}
.rc-sel{cursor:pointer}
.rc-sel input{width:18px;height:18px;accent-color:var(--primary);flex:none}
/* Los botones van en su renglón, abajo: la tarjeta del día es angosta (comparte con el calendario)
   y con "Asistió / No asistió" el nombre ya no cabía junto a cinco botones (8-oct-2026). */
.cita-fila{flex-wrap:wrap}
.cita-acc{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-start;flex-basis:100%}
.cita-fila.cancelada .m b{text-decoration:line-through;color:var(--muted)}
.cita-fila.cancelada{opacity:.7}
.chip.pur{background:var(--purple-s);color:var(--purple)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:.8125rem;
  font-weight:700;padding:9px 16px;border-radius:var(--r);border:1px solid transparent;
  transition:.14s;text-decoration:none;white-space:nowrap}
.btn.pri{background:var(--primary);color:#fff}
.btn.pri:hover{background:var(--primary-d)}
.btn.gh{background:var(--card);color:var(--fg);border-color:var(--line)}
.btn.gh:hover{background:var(--soft)}
.btn.wa{background:var(--ok-bg);color:var(--ok)}
.btn.sm{padding:6px 12px;font-size:.75rem}

.bars{display:grid;gap:11px}
.bar-r{display:grid;gap:5px}
.bar-h{display:flex;justify-content:space-between;gap:12px;font-size:.8125rem}
.bar-h b{font-weight:700;font-variant-numeric:tabular-nums}
.bar{height:7px;border-radius:999px;background:var(--soft);overflow:hidden}
.bar i{display:block;height:100%;background:var(--primary)}

/* ── Embudo (kanban) ───────────────────────────────────────────────── */
.stages{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.stage-s{flex:1;min-width:110px}
.stage-s .b{height:5px;border-radius:999px;margin-bottom:6px}
.stage-s .t{font-size:.75rem;color:var(--muted);text-align:center}
.kan{display:grid;grid-auto-flow:column;grid-auto-columns:270px;gap:12px;overflow-x:auto;
  padding-bottom:12px}
.col{background:var(--card2);border:1px solid var(--line2);border-radius:var(--rc);padding:12px;
  min-width:0}
.col-h{display:flex;align-items:center;gap:8px;padding-bottom:10px;margin-bottom:10px;
  border-bottom:1px solid var(--line2)}
.col-h .dot{width:8px;height:8px;border-radius:50%;flex:none}
.col-h b{font-size:.8125rem;font-weight:700}
.col-h .n{margin-left:auto;font-size:.6875rem;font-weight:800;background:var(--soft);
  color:var(--muted);border-radius:999px;padding:2px 8px}
.lead{background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:11px;
  margin-bottom:9px}
.lead-t{display:flex;align-items:center;gap:9px;min-width:0}
.lead-t .av{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:.6875rem;font-weight:800;color:#fff}
.lead-t b{font-size:.8125rem;font-weight:700;display:block;line-height:1.25}
.lead-t span{font-size:.6875rem;color:var(--muted)}
.lead-msg{font-size:.75rem;color:var(--muted);margin:8px 0;line-height:1.45;font-style:italic;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lead-a{display:flex;gap:6px;align-items:center}
.lead-a .btn{flex:1}
.mv{position:relative}
.mv-menu{position:absolute;right:0;bottom:calc(100% + 6px);background:var(--card);
  border:1px solid var(--line);border-radius:var(--rc);padding:6px;min-width:190px;z-index:40;display:none}
.mv.abierto .mv-menu{display:block}
.mv-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;
  border-radius:8px;font-size:.8125rem;text-align:left;transition:background .12s}
.mv-menu button:hover{background:var(--soft)}
.mv-menu .dot{width:8px;height:8px;border-radius:50%;flex:none}
.mv-menu .ck{margin-left:auto;color:var(--muted)}
/* El de Asignar vive arriba del chat: hacia arriba se salía de la pantalla
   (en el iPhone no se veía ni a quién asignar; 28-sep-2026). Abre hacia
   abajo, y si la lista es larga se desplaza adentro. */
.chat-h .mv-menu{top:calc(100% + 6px);bottom:auto;max-height:min(60vh,420px);overflow-y:auto}

/* ── Chat ──────────────────────────────────────────────────────────── */
.chat-w{display:grid;grid-template-columns:290px 1fr;min-height:520px}
/* iPad vertical (761–820 px): lista angosta y chat. Antes la lista se
   escondía y la columna quedaba vacía (28-sep-2026). El teléfono (≤760)
   tiene sus propias reglas más abajo. */
@media(max-width:820px){.chat-w,.chat-w.con-ficha{grid-template-columns:250px minmax(0,1fr)}}
.chat-list{border-right:1px solid var(--line2);overflow-y:auto;max-height:560px}
.ci{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line2);
  width:100%;text-align:left;transition:background .12s}
.ci:hover{background:var(--soft)}
.ci.on{background:var(--primary-s)}
.ci .av{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:.75rem;font-weight:800;color:#fff}
.ci .m{flex:1;min-width:0}
.ci .m b{display:block;font-size:.8125rem;font-weight:700}
.ci .m span{display:block;font-size:.75rem;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ci .t{font-size:.6875rem;color:var(--muted);flex:none}
.chat-p{display:flex;flex-direction:column;min-width:0}
.chat-h{padding:12px 16px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:11px}
.chat-b{flex:1;padding:18px 16px;display:flex;flex-direction:column;gap:9px;overflow-y:auto;
  max-height:420px;background:var(--card2)}
.msg{max-width:78%;padding:9px 13px;border-radius:11px;font-size:.8125rem;line-height:1.45}
.msg .t{display:block;font-size:.6875rem;opacity:.65;margin-top:4px;text-align:right}
.msg.in{background:var(--card);border:1px solid var(--line2);align-self:flex-start;border-top-left-radius:3px}
.msg.out{background:var(--ok-bg);color:var(--fg);align-self:flex-end;border-top-right-radius:3px}
.msg .who{display:block;font-size:.6875rem;font-weight:700;color:var(--purple);margin-bottom:3px}
/* La foto, el audio o el documento que mandaron (antes sólo "[Foto]"). La burbuja
   lleva ancho propio: con sólo la foto adentro se encogía al ancho del texto. */
.msg.con-medio{width:min(286px,78%)}
.msg-foto{display:block;width:100%;min-height:80px;margin:2px 0 6px;border-radius:9px;
  overflow:hidden;background:var(--line2)}
.msg-foto img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover}
.msg-foto.sticker{width:140px;background:none}
.msg-foto.sticker img{object-fit:contain}
.msg-audio{display:block;width:100%;height:40px;margin:2px 0 4px}
.msg-video{display:block;width:100%;max-height:340px;margin:2px 0 6px;border-radius:9px;background:#000}
.msg-baja{display:inline-block;font-size:.6875rem;color:inherit;opacity:.75;margin-bottom:2px}
.msg-doc{display:flex;width:fit-content;gap:6px;align-items:center;max-width:100%;padding:8px 10px;margin:2px 0 6px;
  border-radius:9px;background:var(--line2);color:inherit;font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.msg-sinfoto{display:block;font-size:.75rem;opacity:.75;margin:2px 0 6px}
.chat-in{position:relative;padding:12px 16px;border-top:1px solid var(--line2);display:flex;gap:10px;align-items:center}
.chat-in .fake{flex:1;border:1px solid var(--line);border-radius:999px;padding:10px 16px;
  color:var(--muted);font-size:.8125rem}

/* ── Estrellas ─────────────────────────────────────────────────────── */
.stars{display:inline-flex;gap:1px;font-size:.8125rem;letter-spacing:1px}
.empty{padding:44px 20px;text-align:center;color:var(--muted);font-size:.875rem}

.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ── Responsivo ────────────────────────────────────────────────────── */
@media(max-width:900px){
  .side{position:fixed;left:0;top:0;z-index:70;transform:translateX(-100%);transition:transform .2s}
  .side.abierto{transform:translateX(0)}
  .backdrop{position:fixed;inset:0;background:rgba(15,28,51,.45);z-index:60}
  .burger{display:flex}
  .body{padding:18px 14px 44px}
  .top{padding:0 14px}
}
@media(min-width:901px){.backdrop{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* ── Secciones nuevas: tablas, interruptores y tarjetas ────────────── */
.barra-h{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.sel{border:1px solid var(--line);border-radius:var(--r);padding:8px 11px;background:var(--card);
  color:var(--fg);font:inherit;font-size:.8125rem;outline:none}
.sel:focus{border-color:var(--primary)}

.tabla-w{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:.8125rem}
.tabla th{text-align:left;padding:9px 16px;font-size:.6875rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
.tabla td{padding:11px 16px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:var(--soft)}
.tabla .der{text-align:right}
.tabla .num{font-variant-numeric:tabular-nums;font-weight:600}
.tabla .vac{color:var(--muted)}
.tabla tr.apagada td{opacity:.45}
.celda-p{display:flex;align-items:center;gap:10px}
.celda-p b{display:block;font-weight:600}
.celda-p span span{display:block;font-size:.6875rem;color:var(--muted)}
.chip-e{font-size:.75rem;font-weight:600;white-space:nowrap}
.tag.mini{padding:2px 8px;font-size:.625rem;margin-right:4px}

/* Interruptor */
.sw{width:38px;height:22px;flex:none;border-radius:999px;background:var(--line);
  position:relative;transition:background .18s;vertical-align:middle}
.sw i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--card);transition:transform .18s}
.sw.on{background:var(--ok)}
.sw.on i{transform:translateX(16px)}

/* Pipeline */
.pl-fila{display:grid;grid-template-columns:190px 1fr 90px 90px;gap:12px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line2)}
.pl-fila:last-child{border-bottom:0}
.pl-n{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:600}
.pl-n em{font-style:normal;font-size:.6875rem;color:var(--muted);background:var(--soft);
  border-radius:999px;padding:1px 7px}
.pl-barra{height:9px;border-radius:5px;background:var(--soft);overflow:hidden}
.pl-barra i{display:block;height:100%;border-radius:5px}
.pl-v{text-align:right;font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums}
.pl-p{text-align:right;font-size:.8125rem;color:var(--primary-txt);font-weight:700;font-variant-numeric:tabular-nums}
.col-sum{font-size:.75rem;font-weight:700;padding:0 2px 9px;border-bottom:1px solid var(--line2);margin-bottom:9px}
.col-sum em{display:block;font-style:normal;font-size:.625rem;font-weight:500;color:var(--muted)}
.pl-monto{font-size:.9375rem;font-weight:700;margin:5px 0 3px}

/* Agentes */
.agente.off{opacity:.62}
.ag-ic{width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--primary-s);font-size:1rem}
.ag-d{font-size:.8125rem;color:var(--muted);line-height:1.55}
.ag-meta{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin-top:11px;font-size:.75rem}
.ag-meta span{color:var(--muted)}
.ag-meta b{font-weight:600;text-align:right}

/* Flujos */
.flujo.off{opacity:.55}
.fl-ic{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--soft);font-size:.9375rem}
.fl-regla{display:block;font-size:.75rem;color:var(--muted);line-height:1.5}
.fl-regla em{font-style:normal;font-weight:700;color:var(--primary-txt)}

/* Plantillas y campañas */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem}
.pl-txt{display:block;font-size:.75rem;color:var(--muted);line-height:1.5;margin-top:2px}
.pl-motivo{display:block;font-size:.6875rem;color:var(--danger);margin-top:4px}
.adj-atajo{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.75rem;color:var(--muted);
  padding:6px 12px;border-top:1px solid var(--line)}
.adj-atajo b{color:var(--fg);font-weight:600}
.sug{margin-bottom:16px}
.sug-g{display:grid;gap:10px}
.sug-i{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card2)}
.sug-ic{font-size:1.15rem;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--card)}
.sug-t b{font-size:.82rem}
.sug-t p{margin:2px 0 0;font-size:.74rem;color:var(--muted);line-height:1.45;max-width:70ch}
.sug-a{display:flex;align-items:center;gap:10px}
@media(max-width:640px){.sug-i{grid-template-columns:auto 1fr}.sug-a{grid-column:1/-1;justify-content:flex-end}}
.seg-emb{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;gap:2px;background:var(--card2)}
.seg-emb button{border:0;background:none;color:var(--muted);font:inherit;font-size:.78rem;font-weight:600;
  padding:5px 13px;border-radius:999px;cursor:pointer}
.seg-emb button.on{background:var(--card);color:var(--fg);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.seg-emb button:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.tel-pista{display:block;font-size:.72rem;color:var(--muted);margin-top:4px;min-height:1em}
.tel-pista.mal{color:var(--danger)}
.pl-usos{font-size:.75rem;color:var(--muted);white-space:nowrap;min-width:74px;text-align:right}
.aviso{border:1px solid var(--primary-s);background:var(--primary-s);border-radius:var(--rc);
  padding:13px 16px;font-size:.8125rem;line-height:1.55;margin-bottom:16px}
.aviso.warn{border-color:var(--warn-bg);background:var(--warn-bg)}
.aviso b{font-weight:700}
.nota-b{margin-top:12px;font-size:.75rem;color:var(--muted);text-align:center}
.camp-barra{display:block;height:6px;border-radius:4px;background:var(--soft);margin:8px 0 6px;overflow:hidden}
.camp-barra i{display:block;height:100%;background:var(--primary);border-radius:4px}
.camp-m{display:flex;flex-wrap:wrap;gap:12px;font-size:.6875rem;color:var(--muted)}
.camp-m em{font-style:normal}
.camp-m em.ok{color:var(--ok);font-weight:700}
.camp-dest{display:block;font-size:.6875rem;color:var(--muted);margin-top:5px;white-space:nowrap}
.row.camp,.row.plantilla{align-items:flex-start}

@media(max-width:760px){
  .pl-fila{grid-template-columns:1fr 70px;row-gap:5px}
  .pl-barra{grid-column:1/-1}
  .barra-h{width:100%;margin-left:0}
}

/* ── Conversaciones: lista, ficha y modales ────────────────────────── */
/* Ojo: NO redeclarar .chat-w aquí — la regla de arriba trae min-height:520px
   y sin ella la rejilla colapsa a 0. Solo se agrega la variante con ficha. */
.chat-w.con-ficha{grid-template-columns:280px 1fr 285px}
.chat-col{display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0}
.chat-col .chat-list{border-right:0;max-height:none;flex:1}
.chat-busca{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--line2)}
.chat-busca input{flex:1;min-width:0;border:0;background:none;color:var(--fg);font:inherit;
  font-size:.8125rem;outline:none}
.chat-busca input::placeholder{color:var(--muted)}
.tabs{display:flex;gap:2px;padding:8px 9px;border-bottom:1px solid var(--line2);overflow-x:auto}
.tab{display:flex;align-items:center;gap:5px;padding:6px 9px;border-radius:var(--r);
  font-size:.75rem;font-weight:600;color:var(--muted);white-space:nowrap}
.tab:hover{background:var(--soft)}
.tab.on{background:var(--primary-s);color:var(--primary-txt)}
.tab-n{background:var(--soft);border-radius:999px;padding:0 6px;font-size:.6875rem;font-weight:700}
.tab.on .tab-n{background:var(--primary);color:#fff}
.ci-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}
.ci-tags em{font-style:normal;font-size:.625rem;font-weight:600;color:var(--muted)}
.ci-tags em.tg{background:var(--purple-s);color:var(--purple);border-radius:5px;padding:1px 5px}
.cerrada-p{font-size:.625rem;color:var(--muted)}
.sep{display:flex;align-items:center;gap:10px;margin:4px 0 8px;color:var(--muted);font-size:.6875rem}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line2)}
.msg .ck{font-weight:700;letter-spacing:-1px}
.msg .ck.env,.msg .ck.ent{color:var(--muted);opacity:.85}
.msg .ck.lei{color:var(--cyan)}
/* El "!" de lo que WhatsApp no entregó: se toca y dice por qué (30-sep-2026) */
.msg .ck.falla{color:var(--danger);background:none;border:0;padding:0;font:inherit;font-weight:800;letter-spacing:0;
  min-width:28px;min-height:28px;margin:-8px -8px -8px -2px;border-radius:7px;cursor:pointer}
.msg .ck.falla:hover,.msg .ck.falla:focus-visible{background:var(--danger-bg)}
.msg .motivo{display:none;margin-top:7px;padding-top:7px;font-size:.75rem;line-height:1.45;
  border-top:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.msg.ver-motivo .motivo{display:block}

/* ── Nota de voz ───────────────────────────────────────────────────── */
.msg.es-voz{min-width:min(300px,72vw)}
.voz{display:flex;align-items:center;gap:10px;padding:3px 0 1px}
.voz-play{width:31px;height:31px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--primary);color:#fff;font-size:.6875rem;padding-left:2px}
.msg.out .voz-play{background:rgba(255,255,255,.22)}
.voz-play.sonando{padding-left:0}
.voz-onda{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:2px;height:20px;overflow:hidden}
.voz-onda i{flex:1;min-width:1px;border-radius:2px;background:var(--muted);opacity:.5}
.msg.out .voz-onda i{background:#fff;opacity:.45}
.voz-avance{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--primary);opacity:.28;
  border-radius:2px;pointer-events:none;transition:width .1s linear}
.msg.out .voz-avance{background:#fff;opacity:.35}
.voz-dur{font-size:.6875rem;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.msg.out .voz-dur{color:rgba(255,255,255,.75)}
.voz-txt{margin-top:7px;padding-top:7px;border-top:1px solid var(--line2);font-size:.75rem;line-height:1.5}
.msg.out .voz-txt{border-top-color:rgba(255,255,255,.22)}
.voz-et{display:block;font-size:.625rem;font-weight:700;letter-spacing:.05em;
  color:var(--primary-txt);margin-bottom:2px}
.msg.out .voz-et{color:rgba(255,255,255,.8)}
.mv-t{padding:8px 12px 5px;font-size:.6875rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.av.xs{width:20px;height:20px;font-size:.5625rem;border-radius:6px;margin-right:7px}
.av.lg{width:52px;height:52px;font-size:1.0625rem;border-radius:16px}

.sug-ia{display:flex;align-items:center;gap:9px;padding:9px 13px;border-top:1px solid var(--line2);
  background:var(--primary-s)}
.sug-et{font-size:.6875rem;font-weight:700;color:var(--primary-txt);white-space:nowrap}
.sug-x{flex:1;min-width:0;font-size:.75rem;color:var(--fg);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:7px}

/* Barra de escribir */
.chat-in{gap:3px}
.chat-in .ibtn{width:32px;height:32px;flex:none;border-radius:9px;font-size:.9375rem;color:var(--muted)}
.chat-in .ibtn:hover{background:var(--soft);color:var(--fg)}
.chat-in .ibtn.on{background:var(--primary-s);color:var(--primary-txt)}
.chat-in [data-pedir-sug]{color:var(--purple)}
.chat-in [data-pedir-sug]:hover{background:var(--purple-s)}

/* Globo de ayuda, como el de Lumin */
.tip{position:relative}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%);background:var(--fg);color:var(--bg);font-size:.6875rem;
  font-weight:600;padding:5px 9px;border-radius:7px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .12s;z-index:50}
.tip::before{content:"";position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--fg);pointer-events:none;opacity:0;transition:opacity .12s}
.tip:hover::after,.tip:hover::before{opacity:1}

.ficha{border-left:1px solid var(--line);overflow-y:auto;background:var(--card2)}
.ficha-top{padding:19px 16px 15px;text-align:center;border-bottom:1px solid var(--line2)}
.ficha-top .av{margin:0 auto 9px}
.ficha-top b{display:block;font-size:.875rem;font-weight:700}
.ficha-top span{display:block;font-size:.75rem;color:var(--muted)}
.ficha-s{padding:14px 16px;border-bottom:1px solid var(--line2)}
.ficha-t{font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.est{border:1px solid var(--line);border-radius:999px;padding:5px 10px;font-size:.6875rem;
  font-weight:600;color:var(--muted);background:var(--card)}
.est:hover{border-color:var(--primary)}
.est.on{background:var(--soft);font-weight:700}
.tag{display:inline-flex;align-items:center;gap:5px;background:var(--purple-s);color:var(--purple);
  border-radius:999px;padding:4px 6px 4px 10px;font-size:.6875rem;font-weight:600}
.tag button{color:inherit;opacity:.6;font-size:.625rem;line-height:1}
.tag button:hover{opacity:1}
.tag-add{border:1px dashed var(--line);border-radius:999px;padding:4px 10px;font-size:.6875rem;
  font-weight:500;color:var(--muted)}
.tag-add:hover{border-color:var(--primary);color:var(--primary-txt)}
.valor{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:var(--r);
  padding:8px 11px;background:var(--card);color:var(--muted);font-size:.75rem}
.valor input{flex:1;min-width:0;border:0;background:none;color:var(--fg);font:inherit;
  font-size:.9375rem;font-weight:600;outline:none}
.ficha-d{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin-top:12px;font-size:.75rem}
.ficha-d span{color:var(--muted)}
.ficha-d b{font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis}
.ficha textarea{width:100%;min-height:76px;resize:vertical;border:1px solid var(--line);
  border-radius:var(--r);padding:9px 11px;background:var(--card);color:var(--fg);font:inherit;
  font-size:.75rem;outline:none}
.ficha textarea:focus,.valor:focus-within{border-color:var(--primary)}

/* ── Modales ───────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:250;background:rgba(10,21,38,.5);display:flex;
  align-items:center;justify-content:center;padding:20px}
.modal-c{width:100%;max-width:470px;max-height:82vh;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--rc);overflow:hidden}
.modal-h{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line2)}
.modal-h b{display:block;font-size:.875rem;font-weight:700}
.modal-h i{display:block;font-style:normal;font-size:.6875rem;color:var(--muted)}
.marca-ia{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--purple),var(--primary));font-size:.9375rem}
.modal-b{padding:16px;overflow-y:auto}
.res-box{border:1px solid var(--purple);border-radius:var(--rc);padding:14px;background:var(--purple-s)}
.res-box p{font-size:.8125rem;margin-bottom:10px}
.res-box dt{font-size:.6875rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--purple);margin-top:9px}
.res-box dd{font-size:.8125rem;line-height:1.5}
.modal-pie{margin-top:12px;font-size:.6875rem;color:var(--muted);text-align:center}
.linea{display:flex;flex-direction:column;gap:2px}
.hito{display:flex;gap:12px;padding-bottom:16px;position:relative}
.hito:not(:last-child)::before{content:"";position:absolute;left:15px;top:34px;bottom:0;
  width:1px;background:var(--line)}
.hito-ic{width:31px;height:31px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:.8125rem}
.hito b{display:block;font-size:.8125rem;font-weight:600}
.hito span span{display:block;font-size:.75rem;color:var(--muted)}
.hito em{font-style:normal;font-size:.6875rem;color:var(--muted)}

@media(max-width:1100px){
  .chat-w.con-ficha{grid-template-columns:250px 1fr}
  .ficha{display:none}
  /* Si la ficha no cabe, su botón tampoco tiene por qué ocupar lugar:
     era justo el que empujaba la cabecera 6px fuera de la pantalla. */
  .chat-h [data-ficha]{display:none}
}
@media(max-width:760px){
  .chat-w,.chat-w.con-ficha{grid-template-columns:1fr}
  .chat-col{display:none}
  .chat-h{flex-wrap:wrap;row-gap:7px}
}

/* ── Buscador ⌘K ───────────────────────────────────────────────────── */
.paleta{position:fixed;inset:0;z-index:300;background:rgba(10,21,38,.45);
  display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.paleta.hide{display:none}
.paleta-caja{width:100%;max-width:560px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rc);overflow:hidden;display:flex;flex-direction:column;max-height:70vh}
.paleta-top{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line2)}
.paleta-top input{flex:1;border:0;background:none;color:var(--fg);font:inherit;font-size:.9375rem;outline:none}
.paleta-top input::placeholder{color:var(--muted)}
.paleta-res{overflow-y:auto;padding:6px}
.pgrupo{padding:10px 12px 5px;font-size:.6875rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.pitem{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 12px;
  border-radius:var(--r);color:var(--fg);font-size:.8125rem}
.pitem:hover,.pitem.sel{background:var(--soft)}
.pitem .pic{width:26px;height:26px;flex:none;border-radius:8px;background:var(--primary-s);
  color:var(--primary-txt);display:grid;place-items:center;font-size:.75rem}
.pitem b{font-weight:600;display:block}
.pitem i{font-style:normal;color:var(--muted);font-size:.75rem;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pitem .flecha{margin-left:auto;color:var(--muted);flex:none}
.pvacio{padding:26px 16px;text-align:center;color:var(--muted);font-size:.8125rem}
.paleta-pie{border-top:1px solid var(--line2);padding:8px 14px;display:flex;gap:14px;
  font-size:.6875rem;color:var(--muted)}
.paleta-pie kbd{font:inherit;font-weight:600;background:var(--soft);border-radius:4px;padding:1px 5px}

/* ── Notificaciones ────────────────────────────────────────────────── */
.top-r{position:relative;display:flex;align-items:center;gap:2px}
.punto{position:absolute;top:5px;right:5px;min-width:15px;height:15px;padding:0 4px;
  border-radius:999px;background:var(--danger);color:#fff;font-size:.625rem;font-weight:700;
  display:grid;place-items:center;line-height:1;pointer-events:none}
.wrap-ib{position:relative}
.pop{position:absolute;top:calc(100% + 8px);right:0;width:320px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rc);z-index:150;overflow:hidden}
.pop.hide{display:none}
.pop-t{padding:12px 15px;border-bottom:1px solid var(--line2);display:flex;align-items:center;
  justify-content:space-between;font-weight:700;font-size:.8125rem}
.pop-t button{font-size:.75rem;color:var(--primary-txt);font-weight:600}
.pop-l{max-height:330px;overflow-y:auto}
.noti{display:flex;gap:11px;padding:11px 15px;border-bottom:1px solid var(--line2);
  width:100%;text-align:left}
.noti:last-child{border-bottom:0}
.noti:hover{background:var(--soft)}
.noti.nueva{background:var(--primary-s)}
.noti-ic{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;font-size:.8125rem}
.noti b{display:block;font-size:.8125rem;font-weight:600}
.noti span{display:block;font-size:.75rem;color:var(--muted)}
.noti em{font-style:normal;font-size:.6875rem;color:var(--muted)}

/* ── Retoma, el asistente del dueño ────────────────────────────────── */
.ia-btn{position:fixed;right:20px;bottom:20px;z-index:180;display:flex;align-items:center;gap:9px;
  background:var(--primary);color:#fff;font-weight:700;font-size:.8125rem;
  padding:12px 18px;border-radius:999px;border:1px solid var(--primary-d)}
.ia-btn:hover{background:var(--primary-d)}
.ia-panel{position:fixed;right:20px;bottom:20px;z-index:190;width:370px;max-width:calc(100vw - 32px);
  height:min(560px,calc(100vh - 40px));background:var(--card);border:1px solid var(--line);
  border-radius:var(--rc);display:flex;flex-direction:column;overflow:hidden}
.ia-panel.hide,.ia-btn.hide{display:none}
.ia-t{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--line2)}
.ia-t .marca{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--cyan));color:#fff;font-size:.9375rem}
.ia-t b{display:block;font-size:.875rem;font-weight:700;line-height:1.3}
.ia-t i{display:block;font-style:normal;font-size:.6875rem;color:var(--muted)}
.ia-t .cerrar{margin-left:auto;color:var(--muted);font-size:1.125rem;line-height:1;padding:4px}
.ia-l{flex:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:11px}
.ia-msg{max-width:88%;padding:10px 13px;border-radius:var(--rc);font-size:.8125rem;line-height:1.5}
.ia-msg.bot{background:var(--soft);border:1px solid var(--line2);align-self:flex-start;
  border-bottom-left-radius:5px}
.ia-msg.yo{background:var(--primary);color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.ia-msg a{color:var(--primary-txt);font-weight:600}
.ia-sugs{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.ia-sug{border:1px solid var(--line);background:var(--card2);border-radius:999px;
  padding:7px 13px;font-size:.75rem;font-weight:500;color:var(--fg);text-align:left}
.ia-sug:hover{border-color:var(--primary);color:var(--primary-txt)}
.ia-sug.destacada{background:var(--primary-s);border-color:var(--primary-s);color:var(--primary-txt);
  font-weight:600;width:100%;display:flex;align-items:center;gap:8px}
.ia-sug.destacada .flecha{margin-left:auto}
.ia-f{border-top:1px solid var(--line2);padding:11px 13px;display:flex;gap:9px;align-items:center}
.ia-f input{flex:1;border:1px solid var(--line);background:var(--card2);border-radius:var(--r);
  padding:10px 13px;color:var(--fg);font:inherit;font-size:.8125rem;outline:none}
.ia-f input:focus{border-color:var(--primary)}
.ia-f button{background:var(--primary);color:#fff;border-radius:var(--r);padding:10px 14px;
  font-weight:600;font-size:.8125rem}
.ia-pie{text-align:center;font-size:.6875rem;color:var(--muted);padding:0 13px 10px}
.escribiendo{display:flex;gap:4px;align-items:center;padding:12px 14px}
.escribiendo span{width:6px;height:6px;border-radius:50%;background:var(--muted);
  animation:pun 1.2s infinite}
.escribiendo span:nth-child(2){animation-delay:.15s}
.escribiendo span:nth-child(3){animation-delay:.3s}
@keyframes pun{0%,60%,100%{opacity:.25}30%{opacity:1}}

@media(max-width:560px){
  /* En el celular, a pantalla completa y sin meterse bajo la barra de estado
     (la hora quedaba encima del título en el iPhone, 28-sep-2026). Cerrado es
     display:none, así que no mueve nada más de la página. */
  .ia-panel{inset:0;width:auto;height:auto;max-width:none;border:0;border-radius:0;
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .ia-t{padding-left:max(15px,env(safe-area-inset-left));padding-right:max(15px,env(safe-area-inset-right))}
  .ia-t .cerrar{padding:10px;margin-right:-6px;font-size:1.25rem}
  /* Menos de 16 px en un campo y el iPhone le hace zoom a toda la página */
  .ia-f input{font-size:16px}
  .ia-btn{right:14px;bottom:14px}
  .pop{width:min(320px,calc(100vw - 24px))}
}

/* ── v2: densidad y piezas de las secciones nuevas ─────────────────── */
body{font-size:13px}
.side{width:var(--sw)}

.plan{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--primary);background:var(--primary-s);padding:1px 5px;border-radius:4px;
  vertical-align:middle;margin-left:5px}

.rows-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(308px,100%),1fr));gap:11px}

.quote{background:var(--card2);border-left:2px solid var(--primary);padding:9px 12px;
  border-radius:0 var(--r) var(--r) 0;font-size:.84rem;color:var(--fg);line-height:1.5}

.row-f{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:11px}

.mini-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);padding:10px 0}
.mini-kpis div{text-align:center}
.mini-kpis b{display:block;font-family:var(--display);font-size:1.05rem;font-weight:600;
  font-variant-numeric:tabular-nums}
.mini-kpis span{display:block;font-size:.68rem;color:var(--muted);margin-top:1px}

.lista-sabe{margin:0;padding-left:16px;color:var(--muted);font-size:.79rem;line-height:1.75}

.canal-ic{width:31px;height:31px;flex:none;border-radius:8px;background:var(--card2);
  display:grid;place-items:center;font-size:.95rem}

.av.sm{width:22px;height:22px;font-size:.62rem}

.row.faq{flex-direction:column;align-items:flex-start;gap:3px}
.row.faq b{font-size:.86rem;line-height:1.4}
.row.faq .sub{max-width:72ch}

/* Conexiones y mensajes por hora, del tablero */
.conex{display:grid;gap:8px}
.conex-i{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card2)}
.conex-i .ic{width:30px;height:30px;flex:none;border-radius:8px;display:grid;
  place-items:center;font-size:.9rem;background:var(--card);border:1px solid var(--line)}
.conex-i .m{flex:1;min-width:0}
.conex-i b{display:block;font-size:.82rem;font-weight:600}
.conex-i .s{display:block;font-size:.71rem;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.horas{display:flex;align-items:flex-end;gap:2px;height:72px}
.horas i{flex:1;background:var(--primary);border-radius:2px 2px 0 0;min-height:2px;opacity:.8}
.horas i.pico{opacity:1}
.horas-x{display:flex;justify-content:space-between;font-size:.66rem;
  color:var(--muted);margin-top:6px}


/* ── v3: equipo y calendario ───────────────────────────────────────── */
.vivo{font-size:.7rem;color:var(--ok);background:var(--ok-bg);padding:3px 9px;
  border-radius:99px;font-weight:600;white-space:nowrap}

.carga{margin-top:12px}
.carga-t{display:flex;justify-content:space-between;font-size:.73rem;
  color:var(--muted);margin-bottom:5px}
.carga-t b{color:var(--fg);font-variant-numeric:tabular-nums}
.carga-b{height:5px;border-radius:99px;background:var(--card2);overflow:hidden}
.carga-b i{display:block;height:100%;border-radius:99px;transition:width .5s ease}
.carga-b i.ok{background:var(--ok)}
.carga-b i.warn{background:var(--warn-solid)}
.carga-b i.dg{background:var(--danger)}
.carga-n{display:block;font-size:.7rem;color:var(--danger);margin-top:5px}

/* Mapa de calor: 7 filas (días) x 24 columnas (horas) */
.mapa{display:grid;gap:3px}
.mapa-f{display:grid;grid-template-columns:32px repeat(24,1fr);gap:3px;align-items:center}
.mapa-d{font-size:.66rem;color:var(--muted);text-align:right;padding-right:4px}
.mapa-f i{height:13px;border-radius:2px;background:var(--primary);display:block}

/* Calendario del mes */
.cal-w{display:grid;grid-template-columns:1.15fr 1fr;gap:13px}
.cal-h{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:6px}
.cal-h span{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-align:center}
/* minmax(0,1fr): con 1fr, en un iPhone de 320 px las columnas de los días no se encogían más que su contenido,
   quedaban más anchas que las de LUN…DOM (el 1 de octubre salía bajo VIE) y el domingo se salía (11-oct-2026). */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-c{aspect-ratio:1;min-width:0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card2);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding:0;transition:border-color .12s,background .12s}
.cal-c:hover{border-color:var(--primary);background:var(--card)}
.cal-c.vacia{border:0;background:none;cursor:default}
.cal-c.hoy{border-color:var(--primary)}
.cal-c.sel{background:var(--primary);border-color:var(--primary)}
.cal-c.sel .cal-n,.cal-c.sel .cal-p{color:#fff}
.cal-n{font-size:.78rem;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
.cal-p{font-size:.63rem;font-weight:700;color:var(--primary);
  background:var(--primary-s);border-radius:99px;padding:0 5px;min-width:16px}
.cal-c.sel .cal-p{background:rgba(255,255,255,.22)}

@media(max-width:1080px){.cal-w{grid-template-columns:1fr}}
@media(max-width:640px){
  .mapa-f{grid-template-columns:26px repeat(24,1fr);gap:2px}
  .mapa-f i{height:10px}
}


/* ── v4: embudo con filtros y pipeline con controles ───────────────── */
.acciones{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

.filtros{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:15px}
.inp.busca{max-width:290px}
.inp.sel{width:auto;padding-right:26px;cursor:pointer}

.fchip-n{font-size:.62rem;font-weight:700;background:var(--card2);color:var(--muted);
  border-radius:99px;padding:0 5px;margin-left:2px}
.fchip.on .fchip-n{background:rgba(255,255,255,.24);color:#fff}

.col-v{font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums;
  margin-left:auto;font-weight:600}
.col-vacia{font-size:.72rem;color:var(--muted);text-align:center;padding:20px 8px;
  border:1px dashed var(--line);border-radius:var(--r);background:var(--card2)}

.lead-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}
.lead-v{font-size:.7rem;font-weight:700;color:var(--ok);font-variant-numeric:tabular-nums;
  background:var(--ok-bg);border-radius:5px;padding:1px 6px}


/* ── v5: ventana modal, compositor real y emojis ───────────────────── */
.modal{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.62);
  backdrop-filter:blur(3px);display:flex;align-items:flex-start;
  justify-content:center;padding:10vh 18px 18px;overflow-y:auto}
.modal-c{width:100%;max-width:430px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rc);
  box-shadow:0 24px 60px rgba(0,0,0,.55);animation:sube .16s cubic-bezier(.22,1,.36,1)}
@keyframes sube{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--line2)}
.modal-h b{font-size:.95rem;font-weight:600}
.modal-b{padding:16px;display:grid;gap:13px}
.modal-f{padding:12px 16px;border-top:1px solid var(--line2);
  display:flex;justify-content:flex-end;gap:8px}

.campo{display:grid;gap:5px}
.campo>span{font-size:.74rem;font-weight:600;color:var(--muted)}
.campo textarea{resize:vertical;font-family:inherit;line-height:1.5}

/* Compositor de verdad: un campo, no un letrero */
.chat-in .real{flex:1;min-width:0;border:1px solid var(--line);
  border-radius:99px;background:var(--card2);padding:8px 14px;font-size:.85rem;
  outline:none;transition:border-color .13s,background .13s}
.chat-in .real:focus{border-color:var(--primary);background:var(--card)}
.chat-in .real::placeholder{color:var(--muted)}

/* Emojis */
.emojis{position:absolute;bottom:52px;left:10px;z-index:80;
  background:var(--card);border:1px solid var(--line);border-radius:var(--rc);
  box-shadow:0 14px 34px rgba(0,0,0,.5);padding:9px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:3px;width:224px}
.emojis button{font-size:1.15rem;line-height:1;padding:6px;border-radius:7px;
  transition:background .1s}
.emojis button:hover{background:var(--card2)}

/* Mensajes programados */
.prog{margin:0 13px 9px;padding:8px 11px;border:1px dashed var(--warn);
  border-radius:var(--r);background:var(--warn-bg);font-size:.78rem;color:var(--warn)}
.prog b{display:block;color:var(--fg);font-weight:600;margin-bottom:1px}
.prog .x{color:var(--muted);font-weight:400}
.prog{position:relative;padding-right:38px}
.prog .ibtn{position:absolute;top:5px;right:5px;width:26px;height:26px;font-size:.75rem;color:var(--muted)}
.prog.mal{border-color:var(--danger);background:var(--danger-bg);color:var(--danger)}
.prog .err{display:block;color:var(--danger);font-weight:500;margin-top:3px}


/* ── v6: el lienzo de flujos ───────────────────────────────────────── */
.lienzo-w{display:grid;grid-template-columns:186px 1fr 254px;gap:11px;
  height:calc(100vh - 210px);min-height:440px}

.paleta-n,.config-n{background:var(--card);border:1px solid var(--line);
  border-radius:var(--rc);padding:11px;overflow-y:auto}
.paleta-t{font-size:.63rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.paso-b{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card2);
  font-size:.78rem;font-weight:500;margin-bottom:5px;text-align:left;
  transition:border-color .12s,background .12s}
.paso-b:hover{border-color:var(--primary);background:var(--card)}

.valida{font-size:.72rem;color:var(--warn);background:var(--warn-bg);
  border:1px solid color-mix(in srgb,var(--warn) 26%,transparent);
  border-radius:var(--r);padding:8px 10px;line-height:1.45}
.valida.nota{color:var(--fg);background:var(--card2)}
.valida.ok{color:var(--ok);background:var(--ok-bg);
  border-color:color-mix(in srgb,var(--ok) 26%,transparent)}

.lienzo{border:1px solid var(--line);border-radius:var(--rc);overflow:auto;
  background:var(--bg);
  background-image:radial-gradient(circle at 1px 1px,var(--line) 1px,transparent 0);
  background-size:22px 22px}
.lienzo-in{position:relative}
.hilos{position:absolute;inset:0;pointer-events:none}
.hilo-et{fill:var(--muted);font-size:10px;font-family:var(--ui);text-anchor:middle}

.nodo{position:absolute;width:176px;min-height:74px;background:var(--card);
  border:1.5px solid var(--line);border-radius:var(--r);padding:8px 10px;
  cursor:grab;user-select:none;touch-action:none;
  box-shadow:0 2px 8px rgba(0,0,0,.28);transition:box-shadow .12s}
.nodo:active{cursor:grabbing}
.nodo.sel{box-shadow:0 0 0 3px var(--primary-s),0 4px 14px rgba(0,0,0,.36)}
.nodo-h{display:flex;align-items:center;gap:5px;font-size:.6rem;font-weight:700;
  letter-spacing:.07em;margin-bottom:4px}
.nodo-x{font-size:.72rem;color:var(--fg);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nodo-r{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;
  font-size:.63rem;color:var(--muted)}

.config-h{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:11px}
.config-h b{font-size:.85rem}

/* Tarjeta de flujo en la lista */
.flujo-c.off{opacity:.55}
.fl-meta{display:flex;gap:12px;margin-top:9px;font-size:.71rem;color:var(--muted)}
.fl-meta span::before{content:'';color:var(--line)}

@media(max-width:1100px){
  .lienzo-w{grid-template-columns:1fr;height:auto}
  .lienzo{height:400px}
  .paleta-n{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
  .paleta-n .paleta-t{width:100%;margin:0}
  .paso-b{width:auto;margin:0}
}


.vars{font-size:.68rem;color:var(--muted);line-height:1.7;margin:9px 0 0}
.vars .mono{background:var(--card2);padding:1px 4px;border-radius:4px;color:var(--primary-txt)}

/* ── v8: asistente de campaña ──────────────────────────────────────── */
.modal-c.ancho{max-width:560px}

.wz-pasos{display:flex;gap:5px;padding:11px 16px;border-bottom:1px solid var(--line2)}
.wz-p{flex:1;display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--muted);
  padding:6px 9px;border-radius:var(--r);background:var(--card2)}
.wz-p i{width:17px;height:17px;flex:none;border-radius:50%;background:var(--line);
  color:var(--muted);font-style:normal;font-size:.62rem;font-weight:700;
  display:grid;place-items:center}
.wz-p.on{background:var(--primary-s);color:var(--primary-txt);font-weight:600}
.wz-p.on i{background:var(--primary);color:#fff}
.wz-p.listo i{background:var(--ok);color:var(--bg)}

.plt-g{display:grid;gap:7px}
.plt{display:grid;gap:3px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card2);text-align:left;
  transition:border-color .12s,background .12s}
.plt:hover{border-color:var(--primary)}
.plt.on{border-color:var(--primary);background:var(--primary-s)}
.plt b{font-size:.76rem}
.plt>span:nth-child(2){font-size:.73rem;color:var(--muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plt .chip{justify-self:start;margin-top:2px}

.aud-g{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.aud-g.dos{grid-template-columns:repeat(2,1fr)}
.aud{display:grid;gap:2px;padding:12px 10px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card2);text-align:center;
  transition:border-color .12s,background .12s}
.aud:hover{border-color:var(--primary)}
.aud.on{border-color:var(--primary);background:var(--primary-s)}
.aud b{font-size:.76rem}
.aud span:last-child{font-size:.67rem;color:var(--muted);line-height:1.35}
.aud-ic{font-size:1.1rem;margin-bottom:3px}

.alerta-b{border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);
  background:var(--warn-bg);border-radius:var(--r);padding:10px 13px;
  font-size:.75rem;color:var(--fg);line-height:1.55}
.alerta-b b{color:var(--warn)}

.vel-g{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.vel{padding:9px 6px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card2);transition:border-color .12s,background .12s}
.vel:hover{border-color:var(--primary)}
.vel.on{border-color:var(--primary);background:var(--primary-s)}
.vel b{display:block;font-family:var(--display);font-size:1.05rem;font-weight:600}
.vel span{display:block;font-size:.63rem;color:var(--muted)}

.campo.fila{display:flex;align-items:center;justify-content:space-between;gap:12px}
.campo.fila>span{display:block}
.campo.fila i{display:block;font-style:normal;font-size:.68rem;color:var(--muted);
  font-weight:400;margin-top:1px}

.hrs{display:flex;gap:10px}
.hrs label{flex:1;font-size:.72rem;color:var(--muted);display:grid;gap:4px}

.wz-que{font-size:.8rem;line-height:1.55;color:var(--muted);margin:0 0 14px;max-width:62ch}
.wz-que b{color:var(--fg)}
.wz-vacio{border:1px dashed var(--line);border-radius:var(--r);padding:16px;display:grid;gap:8px;justify-items:start}
.wz-vacio p{margin:0;font-size:.78rem;color:var(--muted);line-height:1.5}
.wz-cuenta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;padding:11px 13px;margin:4px 0 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card2);font-size:.8rem}
.wz-cuenta b{font-family:var(--display);font-size:1rem}
.wz-cuenta i{font-style:normal;font-size:.7rem;color:var(--muted)}
.wz-frase{font-size:.82rem;line-height:1.6;margin:0 0 8px}
.resumen{border:1px solid var(--line);border-radius:var(--r);
  background:var(--card2);padding:12px 14px}
.res-t{font-size:.63rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.res-r{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:.78rem}
.res-r span{color:var(--muted)}
.res-r b{text-align:right}
.res-r.costo{border-top:1px solid var(--line);margin-top:7px;padding-top:9px}
.res-r.costo b{font-family:var(--display);font-size:1.1rem;color:var(--ok)}

@media(max-width:560px){
  .aud-g,.vel-g{grid-template-columns:repeat(2,1fr)}
  .wz-p span{display:none}
}


/* ── v9: catálogo y tienda pública ─────────────────────────────────── */
.tiendas{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tienda-t{padding:6px 12px;border:1px solid var(--line);border-radius:99px;
  background:var(--card2);font-size:.76rem;font-weight:500;color:var(--muted);
  transition:border-color .12s,color .12s,background .12s}
.tienda-t:hover{border-color:var(--primary);color:var(--fg)}
.tienda-t.on{background:var(--primary-s);border-color:var(--primary);
  color:var(--primary-txt);font-weight:600}
.tienda-t.nueva{border-style:dashed}

.tabla tr.apagado{opacity:.45}
.tabla tr.apagado b{font-weight:500}

/* ── La tienda pública ─────────────────────────────────────────────── */
.tienda-marco{width:100%;max-width:560px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rc);overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.6);display:flex;flex-direction:column;
  max-height:86vh;animation:sube .16s cubic-bezier(.22,1,.36,1)}
.tienda-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 13px;border-bottom:1px solid var(--line2);background:var(--card2)}

/* Adentro se pinta claro SIEMPRE: la tienda la ve un cliente en su
   teléfono, no el dueño en su panel oscuro. */
.tienda-scroll{overflow-y:auto;background:#f6f7f9;color:#14161a}
.t-banner{height:132px;position:relative;display:flex;align-items:flex-end;
  padding:16px 18px;color:#fff;
  background:linear-gradient(135deg,var(--tc),color-mix(in srgb,var(--tc) 45%,#000))}
.t-b-txt h2{font-family:var(--display);font-size:1.35rem;font-weight:600;margin:0 0 3px}
.t-b-txt p{font-size:.79rem;opacity:.92;margin:0;max-width:46ch;line-height:1.45}

.t-head{display:flex;align-items:center;gap:11px;padding:13px 18px;background:#fff;
  border-bottom:1px solid #e6e8ec}
.t-logo{width:38px;height:38px;flex:none;border-radius:10px;background:var(--tc);
  color:#fff;display:grid;place-items:center;font-family:var(--display);
  font-size:1.05rem;font-weight:700}
.t-head b{display:block;font-size:.92rem}
.t-head .mini{color:#6f767f}

.t-cats{display:flex;gap:6px;padding:12px 18px 4px;overflow-x:auto;background:#f6f7f9}
.t-c{padding:5px 13px;border-radius:99px;border:1px solid #dfe3e8;background:#fff;
  font-size:.76rem;color:#4a5158;white-space:nowrap}
.t-c.on{background:var(--tc);border-color:var(--tc);color:#fff;font-weight:600}

.t-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;padding:14px 18px 18px}
.t-card{background:#fff;border:1px solid #e6e8ec;border-radius:12px;overflow:hidden;
  box-shadow:0 1px 3px rgba(16,20,26,.06)}
.t-img{aspect-ratio:4/3;background:linear-gradient(135deg,#eef0f3,#e2e6ea);
  display:grid;place-items:center;font-family:var(--display);font-size:2rem;
  font-weight:600;color:#b9c0c7}
.t-body{padding:10px 12px 12px}
.t-body b{display:block;font-size:.82rem;line-height:1.35;margin-bottom:2px}
.t-body .mini{color:#6f767f;font-size:.7rem}
.t-precio{font-family:var(--display);font-size:1.05rem;font-weight:600;margin:7px 0 9px}
.t-precio s{font-size:.72rem;font-weight:400;color:#9aa1a8;margin-left:4px}
.t-precio.consultar{font-size:.82rem;color:#6f767f;font-weight:500}
.t-wa{width:100%;padding:8px;border-radius:9px;background:#25d366;color:#fff;
  font-size:.78rem;font-weight:600;display:flex;align-items:center;
  justify-content:center;gap:6px;transition:filter .12s}
.t-wa:hover{filter:brightness(.94)}
.t-pie{text-align:center;font-size:.7rem;color:#8b9299;padding:0 0 16px;margin:0}

@media(max-width:520px){.t-grid{grid-template-columns:1fr}}


/* ── v10: campañas — número emisor, huecos de plantilla y desglose ──── */
/* Ojo: estas reglas van SIEMPRE dentro de .num-g. Sin ese apellido
   pisaban a .num de las tablas, que marca las celdas numericas, y el
   valor de cada contacto salia metido en una cajita que rompia el
   renglon. */
.num-g{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.num-g .num{display:grid;gap:2px;padding:11px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card2);text-align:left;
  transition:border-color .12s,background .12s}
.num-g .num:hover{border-color:var(--primary)}
.num-g .num.on{border-color:var(--primary);background:var(--primary-s)}
.num-g .num b{font-size:.78rem}
.num-g .num .mono{font-size:.72rem;color:var(--fg)}
.num-m,.num-n{font-size:.67rem;color:var(--muted);line-height:1.4}
.num-n{font-style:italic}

.huecos{display:grid;gap:6px}
.hueco{display:flex;align-items:center;gap:8px}
.hueco .inp{flex:1}
.hk{flex:none;min-width:46px;text-align:center;padding:5px 7px;border-radius:var(--r);
  background:var(--card2);border:1px solid var(--line);font-size:.7rem;color:var(--muted)}
.hueco.fijo{font-size:.73rem;color:var(--muted)}
.hueco.fijo i{font-style:normal;color:var(--ok);margin-left:4px}

.prev-msg{margin-top:9px;padding:10px 12px;border-radius:var(--r);
  background:var(--card2);border:1px solid var(--line);font-size:.76rem;
  line-height:1.55;color:var(--fg)}
.prev-et{display:block;font-size:.62rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}

.res-r.sub{padding-left:14px;font-size:.74rem;position:relative}
.res-r.sub::before{content:'└';position:absolute;left:2px;color:var(--line)}
.res-r.sub b{font-weight:500;color:var(--muted)}
.res-r.apagada{opacity:.55}

/* La etiqueta que marca, dentro del chat, que ese mensaje salió de una
   campaña y no lo escribió nadie a mano. */
.msg .camp-et{display:block;font-size:.62rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;opacity:.75;margin-bottom:3px}

@media(max-width:560px){ .num-g{grid-template-columns:1fr} }


/* Texto de apoyo: la letra chiquita que explica sin gritar. Se usaba en
   doce lugares del panel sin que existiera la regla, asi que salia del
   tamano del cuerpo y en blanco. */
.mini{font-size:.71rem;color:var(--muted);line-height:1.5}
p.mini{margin:6px 0 0}
.mini b{color:var(--fg);font-weight:600}

/* ── v13: vista previa de la tienda y configuración de marca ────────── */
.prev-marco{width:min(1060px,94vw);max-height:90vh;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rc);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:sube .16s cubic-bezier(.22,1,.36,1)}
.prev-barra{display:flex;align-items:center;gap:10px;padding:9px 11px;
  border-bottom:1px solid var(--line2);background:var(--card2)}
.prev-modos{display:flex;gap:3px;background:var(--bg);border-radius:99px;padding:3px}
.prev-m{display:flex;align-items:center;gap:5px;padding:5px 11px;border-radius:99px;
  font-size:.72rem;font-weight:500;color:var(--muted);transition:background .12s,color .12s}
.prev-m:hover{color:var(--fg)}
.prev-m.on{background:var(--primary);color:#fff;font-weight:600}
.prev-url{flex:1;display:flex;align-items:center;gap:7px;min-width:0;
  padding:6px 12px;border-radius:99px;background:var(--bg);border:1px solid var(--line)}
.prev-url i{font-style:normal;font-size:.66rem;opacity:.65}
.prev-url b{font-size:.73rem;font-weight:500;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prev-lienzo{flex:1;overflow:auto;padding:18px;background:var(--bg)}
.prev-pie{padding:9px 14px;border-top:1px solid var(--line2);background:var(--card2)}
.prev-pie .mini{margin:0}

/* El marco de la tienda cambia de forma según el modo: en celular se ve
   el aparato, en compu se ve la página ancha. */
.prev-marco .tienda-marco{max-height:none;box-shadow:none;animation:none;margin:0 auto}
.tienda-marco.celular{max-width:392px;border-radius:26px;border:8px solid #17191d}
.tienda-marco.celular .tienda-scroll{border-radius:18px}
.tienda-marco.compu{max-width:none;width:100%;border-radius:10px}
.tienda-marco.compu .t-banner{height:186px}
.tienda-marco.compu .t-grid{grid-template-columns:repeat(auto-fill,minmax(204px,1fr));
  padding:16px 22px 22px}
.tienda-marco.compu .t-cats,.tienda-marco.compu .t-head{padding-left:22px;padding-right:22px}
.t-logo.img{background-size:cover;background-position:center;font-size:0}

/* ── La marca, dentro de la configuración ──────────────────────────── */
.cfg-marca{position:relative;height:108px;border-radius:var(--r);overflow:hidden;
  display:flex;align-items:flex-end;gap:11px;padding:13px 15px;margin-bottom:15px;
  color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.cfg-logo{width:44px;height:44px;flex:none;border-radius:11px;display:grid;
  place-items:center;font-family:var(--display);font-size:1.2rem;font-weight:700;
  color:#fff;text-shadow:none;box-shadow:0 2px 12px rgba(0,0,0,.4);
  background-size:cover;background-position:center}
.cfg-logo.img{background-color:#fff;font-size:0}
.cfg-marca-t{min-width:0}
.cfg-marca-t b{display:block;font-family:var(--display);font-size:1.05rem;font-weight:600}
.cfg-marca-t i{display:block;font-style:normal;font-size:.73rem;opacity:.94;
  line-height:1.4;max-width:46ch;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.cfg-colores{display:flex;gap:7px;flex-wrap:wrap}
.cfg-c{width:26px;height:26px;padding:0;border-radius:8px;border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .1s}
.cfg-c:hover{transform:scale(1.1)}
.cfg-c.on{border-color:var(--fg)}
.cfg-c.otro{position:relative;overflow:hidden;display:grid;place-items:center}
.cfg-c.otro::after{content:'✎';font-size:.68rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.cfg-c.otro input{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  padding:0;border:0;cursor:pointer}

.cfg-btns{display:flex;gap:7px;flex-wrap:wrap}
.cfg-g{display:grid;gap:13px;margin-bottom:13px}
.cfg-g.dos{grid-template-columns:1fr 1fr;align-items:end}

.cfg-liga{display:flex;align-items:stretch}
.cfg-liga i{display:flex;align-items:center;font-style:normal;font-size:.72rem;
  color:var(--muted);padding:0 8px 0 10px;background:var(--card2);
  border:1px solid var(--line);border-right:0;border-radius:var(--r) 0 0 var(--r)}
.cfg-liga .inp{flex:1;min-width:0;border-radius:0 var(--r) var(--r) 0}

@media(max-width:560px){
  .cfg-g.dos{grid-template-columns:1fr}
  .prev-url{display:none}
}


/* ── v14: la tienda a toda pantalla, cuando el navegador no deja abrir
   una pestana nueva ─────────────────────────────────────────────────── */
#tienda-real{position:fixed;inset:0;z-index:220;display:flex;flex-direction:column;
  background:#f6f7f9;animation:sube .16s cubic-bezier(.22,1,.36,1)}
.real-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 14px;background:var(--card2);border-bottom:1px solid var(--line2);flex:none}
.real-barra .mini{margin:0}
.real-scroll{flex:1;overflow:auto}
.tienda-scroll.real{max-width:1040px;margin:0 auto;min-height:100%}
.tienda-scroll.real .t-grid{grid-template-columns:repeat(auto-fill,minmax(206px,1fr))}
.tienda-scroll.real .t-banner{height:210px}
a.t-wa{text-decoration:none}
/* La fila de categorias se desliza; la barra del sistema estorba. */
.t-cats{scrollbar-width:none;-ms-overflow-style:none}
.t-cats::-webkit-scrollbar{display:none}

/* En el celular las tarjetas van a dos columnas y el boton se aprieta. */
.tienda-marco.celular .t-wa{font-size:.72rem;padding:8px 5px;gap:4px}
.tienda-marco.celular .t-body b{font-size:.79rem}


/* ── v15: editor de plantillas, atajos y auto-respuestas ───────────── */
.campo .op{font-style:normal;font-weight:400;color:var(--muted);opacity:.8;
  font-size:.68rem;margin-left:4px}
.pl-acc{display:flex;gap:5px;flex:none}

/* La vista previa se pinta como WhatsApp de verdad: es el único idioma
   visual que el dueño ya conoce. */
.wa-prev{background:#0b141a;border-radius:var(--r);padding:14px 12px;
  border:1px solid var(--line);display:grid;gap:5px;justify-items:end}
.wa-b{max-width:86%;background:#005c4b;color:#e9edef;border-radius:9px 2px 9px 9px;
  padding:7px 9px 5px;font-size:.79rem;line-height:1.45;display:grid;gap:3px;
  box-shadow:0 1px 1px rgba(0,0,0,.28);text-align:left;word-break:break-word}
.wa-enc{font-size:.82rem;font-weight:700}
.wa-txt{white-space:pre-wrap}
.wa-pie{font-size:.69rem;opacity:.62;margin-top:2px}
.wa-h{font-size:.62rem;opacity:.62;justify-self:end;margin-top:1px}
.wa-b .var{font-style:normal;background:rgba(255,255,255,.17);border-radius:4px;
  padding:0 3px;font-family:var(--mono);font-size:.72rem}
.wa-b .vacio{opacity:.5;font-style:italic}
.wa-bts{width:86%;display:grid;gap:2px}
.wa-bt{background:#005c4b;color:#53bdeb;border-radius:2px 2px 9px 9px;
  padding:7px;text-align:center;font-size:.76rem;font-weight:500;
  border-top:1px solid rgba(255,255,255,.12)}
.wa-bts .wa-bt:not(:last-child){border-radius:2px}

/* El resultado de la revisión: rojo lo tumba, ámbar sólo lo empeora. */
.chk{display:grid;gap:3px;margin-top:9px}
.chk-r{font-size:.72rem;line-height:1.45;padding-left:2px}
.chk-r.ok{color:var(--muted)}
.chk-r.mal{color:var(--danger);font-weight:600}
.chk-r.avisa{color:var(--warn)}

/* El menú de atajos, encima del campo de escribir. */
.chat-in{position:relative}
.atajos-pop{position:absolute;left:8px;right:8px;bottom:calc(100% + 7px);z-index:40;
  background:var(--card);border:1px solid var(--line);border-radius:var(--rc);
  box-shadow:0 16px 40px rgba(0,0,0,.55);overflow:hidden;max-height:264px;overflow-y:auto}
.atajo{display:grid;gap:1px;width:100%;text-align:left;padding:8px 12px;
  border-bottom:1px solid var(--line2)}
.atajo:hover,.atajo.on{background:var(--primary-s)}
.atajo b{font-size:.76rem;color:var(--primary-txt)}
.atajo span{font-size:.72rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;display:block}
.atajos-pie{padding:6px 12px;font-size:.65rem;color:var(--muted);background:var(--card2)}


/* ── v16: distribución de estrellas y respuesta a reseñas ────────── */
.dist{display:grid;gap:7px}
.dist-r{display:flex;align-items:center;gap:9px}
.dist-e{width:30px;flex:none;font-size:.72rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
.dist-b{flex:1;height:9px;border-radius:99px;background:var(--card2);overflow:hidden}
.dist-b i{display:block;height:100%;border-radius:99px;transition:width .25s}
.dist-n{width:22px;flex:none;text-align:right;font-size:.73rem;font-weight:600;
  font-variant-numeric:tabular-nums}

.res-resp{display:block;margin-top:5px;padding:6px 9px;border-radius:var(--r);
  background:var(--card2);border-left:2px solid var(--ok);font-size:.73rem;
  color:var(--muted);line-height:1.5}
.res-resp b{color:var(--ok);font-weight:600}
.row.res{align-items:flex-start}
/* En una resena el texto ES el contenido: no se recorta con puntos. */
.row.res .m{min-width:0}
.row.res .m>span,.res-resp{white-space:normal;overflow:visible;text-overflow:clip;
  line-height:1.5}


/* ── v17: agentes, reportes, ayuda y ajustes ───────────────────────── */
.lista-sabe.nunca li::marker{color:var(--danger)}
.lista-sabe.nunca li{color:var(--muted)}

.pb-hilo{max-height:240px;overflow-y:auto;padding:12px;border-radius:var(--r);
  background:var(--bg);border:1px solid var(--line);display:flex;
  flex-direction:column;gap:7px;margin-top:11px}
#pb .chat-in{border:1px solid var(--line);border-radius:var(--r);padding:5px 6px;
  display:flex;align-items:center;gap:7px;background:var(--card2)}
#pb .chat-in .real{flex:1;background:none;border:0;color:var(--fg);
  font-size:.8rem;padding:6px 4px;outline:none}

.rep-acc{margin-top:13px;display:flex;gap:9px;flex-wrap:wrap}

/* La ayuda: cada pregunta se abre y se cierra. */
.row.faq{flex-direction:column;align-items:stretch;gap:6px;cursor:pointer}
.row.faq b{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:.82rem;line-height:1.45}
.row.faq b i{font-style:normal;font-size:1rem;color:var(--muted);flex:none}
.row.faq.abierta b i{color:var(--primary)}
.row.faq .sub{white-space:normal;line-height:1.6;max-width:78ch}
.row.faq:hover b{color:var(--primary-txt)}

.row.apagado{opacity:.5}

/* ── Imprimir: el reporte tiene que caber en una hoja blanca ────────
   El panel es oscuro; una impresión oscura se come el tóner y no se lee.
   Al imprimir se tira el menú, los botones y el fondo. */
@media print{
  :root{--bg:#fff;--card:#fff;--card2:#fff;--fg:#111;--muted:#555;
        --line:#ccc;--line2:#e2e2e2}
  body{background:#fff;color:#111}
  nav,#nav,.side,.barra-demo,.aviso-demo,.rep-acc,.range,.acciones,
  .modal,.ia-lanza,.paleta,.top-acc,.ibtn,.btn{display:none !important}
  .card{border:1px solid #ccc;box-shadow:none;break-inside:avoid}
  .kpi{border:1px solid #ccc;box-shadow:none}
  .kpis{grid-template-columns:repeat(4,1fr)}
  .dist-b{border:1px solid #ddd}
  a[href]::after{content:''}
  @page{margin:14mm}
}


/* ── v18: acciones en la tarjeta del flujo ────────────────── */
.fl-acc{display:flex;gap:5px;margin-top:11px}
.fl-acc .btn.pri{flex:1}
.fl-acc .btn.gh{flex:none;padding-left:9px;padding-right:9px}
.fl-meta.pie{margin-top:5px;opacity:.65;font-size:.66rem}


/* ── v19: plantillas en dos pestañas y atajos en tarjetas ──────────── */
.tabs-pl{display:inline-flex;gap:3px;padding:3px;border-radius:var(--r);
  background:var(--card2);border:1px solid var(--line);margin-bottom:15px}
.tab-pl{display:flex;align-items:center;gap:6px;padding:7px 15px;border-radius:calc(var(--r) - 2px);
  font-size:.78rem;font-weight:500;color:var(--muted);transition:background .12s,color .12s}
.tab-pl:hover{color:var(--fg)}
.tab-pl.on{background:var(--card);color:var(--fg);font-weight:600;
  box-shadow:0 1px 3px rgba(0,0,0,.35)}

.sec-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:15px;
  padding:12px 15px;border:1px solid var(--line);border-radius:var(--rc);background:var(--card)}
.sec-barra>div:first-child{flex:1;min-width:230px;display:grid;gap:2px}
.sec-barra b{font-size:.82rem}
.sec-barra .mini{margin:0;max-width:66ch}

.pl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:11px}
.pl-card{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--rc);
  border:1px solid var(--line);background:var(--card);transition:border-color .12s}
.pl-card:hover{border-color:var(--primary)}
.pl-card-h{display:flex;align-items:center;gap:8px}
.pl-card-h>b{flex:1;min-width:0;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-ic{width:26px;height:26px;flex:none;border-radius:7px;display:grid;place-items:center;
  background:var(--primary-s);font-size:.82rem}
.pl-card-acc{display:flex;gap:2px;opacity:0;transition:opacity .12s}
.pl-card:hover .pl-card-acc,.pl-card:focus-within .pl-card-acc{opacity:1}
.pl-card-txt{flex:1;font-size:.77rem;line-height:1.55;color:var(--muted);
  padding:9px 11px;border-radius:var(--r);background:var(--card2)}
.pl-card-txt .var{font-style:normal;background:color-mix(in srgb,var(--warn) 22%,transparent);
  color:var(--warn);border-radius:4px;padding:0 3px;font-family:var(--mono);font-size:.72rem}
.pl-card-f{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pl-card-f .mini{margin:0}

.pl-adj{display:flex;align-items:center;gap:6px;font-size:.71rem;color:var(--muted);
  padding:5px 9px;border-radius:var(--r);background:var(--card2);border:1px dashed var(--line)}
.pl-adj.grande{font-size:.76rem;padding:9px 11px;justify-content:space-between}

/* Tarjeta de atajo: el /comando es lo primero que se busca con la vista. */
.at-chip{flex:1;min-width:0;justify-self:start;padding:3px 9px;border-radius:99px;
  font-size:.73rem;font-weight:600;background:color-mix(in srgb,var(--ok) 16%,transparent);
  color:var(--ok);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* El chip del atajo abraza su texto y empuja las acciones a la derecha:
   estirado de lado a lado parecia una barra, no una etiqueta. */
.pl-card.at .at-chip{flex:0 1 auto;margin-right:auto;max-width:70%}
.at-tit{font-size:.85rem;margin-bottom:-3px}
.at-inp{display:flex;align-items:stretch}
.at-inp i{display:flex;align-items:center;font-style:normal;font-size:.8rem;color:var(--muted);
  padding:0 10px;background:var(--card2);border:1px solid var(--line);border-right:0;
  border-radius:var(--r) 0 0 var(--r)}
.at-inp .inp{flex:1;min-width:0;border-radius:0 var(--r) var(--r) 0}
.campo .req{font-style:normal;color:var(--danger);margin-left:2px}

/* ── El editor de dos columnas ─────────────────────────────────────── */
.modal-c.doble{max-width:900px}
.pl-2col{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.modal-sub{flex:1;font-size:.72rem;color:var(--muted);font-weight:400;
  margin-left:10px;line-height:1.4}

.cuenta{display:flex;justify-content:flex-end;font-size:.68rem;color:var(--muted);
  margin-top:8px;font-variant-numeric:tabular-nums}
.cuenta.mal{color:var(--danger);font-weight:600}
.barra-c{height:3px;border-radius:99px;background:var(--card2);overflow:hidden;margin-top:3px}
.barra-c i{display:block;height:100%;background:var(--primary);transition:width .18s}
.cuenta.mal+.barra-c i{background:var(--danger)}

.vars-g{display:flex;flex-wrap:wrap;gap:5px}
.var-b{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--card2);font-size:.72rem;color:var(--muted);
  transition:border-color .12s,color .12s}
.var-b:hover{border-color:var(--primary);color:var(--fg)}
.var-b i{font-style:normal;font-family:var(--mono);font-size:.66rem;opacity:.7}

.lnk{font-size:.7rem;color:var(--primary-txt);font-weight:600;text-decoration:underline;
  text-underline-offset:2px;margin-left:auto}
.campo>span{display:flex;align-items:center;gap:6px}

.explica{border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);
  background:var(--primary-s);border-radius:var(--r);padding:11px 13px;margin-bottom:13px}
.explica b{font-size:.75rem;color:var(--primary-txt)}
.explica p{font-size:.72rem;line-height:1.55;color:var(--muted);margin:5px 0 0}
.explica .mono{color:var(--fg)}

/* ── La vista previa con cabecera de WhatsApp ──────────────────────── */
.wa-chat{border-radius:var(--rc);overflow:hidden;border:1px solid var(--line)}
.wa-chat-h{display:flex;align-items:center;gap:9px;padding:9px 12px;background:#1f2c33}
.wa-av{width:30px;height:30px;flex:none;border-radius:50%;background:#00a884;color:#fff;
  display:grid;place-items:center;font-family:var(--display);font-size:.82rem;font-weight:700}
.wa-chat-h b{display:block;font-size:.79rem;color:#e9edef}
.wa-chat-h i{display:block;font-style:normal;font-size:.66rem;color:#8696a0}
/* El papel tapiz de WhatsApp, insinuado con dos puntos repetidos. */
.wa-fondo{background:#0b141a;padding:14px 12px;min-height:150px;display:grid;gap:5px;
  justify-items:end;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   radial-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:22px 22px,22px 22px;background-position:0 0,11px 11px}
.wa-b.grande{max-width:92%}
.wa-adj{display:flex;align-items:center;gap:7px;padding:22px 12px;margin:-3px -5px 5px;
  border-radius:7px;background:rgba(255,255,255,.09);font-size:1.15rem}
.wa-adj i{font-style:normal;font-size:.71rem;opacity:.8}
.wa-b .var{font-style:normal;background:rgba(255,255,255,.17);border-radius:4px;
  padding:0 3px;font-family:var(--mono);font-size:.72rem}

.atajo b{display:flex;align-items:center;gap:7px}
.atajo b em{font-style:normal;font-size:.71rem;color:var(--muted);font-weight:500}
.atajo b u{text-decoration:none;font-size:.68rem;opacity:.7;margin-left:auto}

@media(max-width:820px){
  .pl-2col{grid-template-columns:1fr}
  .modal-sub{display:none}
}


/* ═══ v20 · Refinamiento visual ═══════════════════════════════════════
   Lo que hacía que el panel se leyera "de sistema" y no "de producto"
   eran cinco cosas medibles, no una sensación:

   1. Radios chicos (9/13). Un radio chico lee utilitario.
   2. Fondo gris neutro puro: un gris sin sesgo se lee como no elegido.
      Ahora el fondo, las tarjetas y las líneas comparten un sesgo azul.
   3. Tarjeta y fondo casi del mismo tono y sin sombra: nada flotaba.
   4. Poco aire: 24px de página y 16px de tarjeta aprietan el contenido.
   5. El encabezado de cada sección no tenía identidad — sólo texto.

   Va todo al nivel de token y de componente base, así que las 19
   secciones lo heredan sin tocar una sola vista.
   ══════════════════════════════════════════════════════════════════ */

:root,html[data-tema="oscuro"]{
  --bg:#0b0e13; --card:#141922; --card2:#1b212c; --side:#0d1117;
  --line:#242c38; --line2:#1c232e;
  --fg:#e8ecf2; --muted:#8b95a3;
  --soft:#182339;
  --r:11px; --rc:16px;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 10px 28px -16px rgba(0,0,0,.7);
  --sombra-alta:0 2px 4px rgba(0,0,0,.3),0 18px 44px -18px rgba(0,0,0,.8);
}
html[data-tema="claro"]{
  --bg:#f5f6f9; --card:#fff; --card2:#eff1f5; --side:#fff;
  --line:#e0e4ea; --line2:#eaedf2;
  --fg:#121620; --muted:#69717e;
  --soft:#eaf0fe;
  --sombra:0 1px 2px rgba(18,22,32,.05),0 8px 22px -14px rgba(18,22,32,.22);
  --sombra-alta:0 2px 5px rgba(18,22,32,.06),0 18px 40px -16px rgba(18,22,32,.26);
}

/* ── Aire ─────────────────────────────────────────────────────────── */
.body{padding:30px 28px 68px}
.hello{gap:16px;margin-bottom:24px;align-items:center}
.hello h1{font-size:clamp(1.5rem,3vw,1.9rem);letter-spacing:-.8px}
.hello p{margin-top:4px;font-size:.85rem;line-height:1.5}
.hello>div:first-of-type{flex:1;min-width:0}

/* El ícono de la sección, en el color de su grupo. Es lo que le da cara
   a cada pantalla: sin él todas se ven igual de anónimas. */
.hello-ic{width:48px;height:48px;flex:none;border-radius:15px;display:grid;
  place-items:center;font-size:1.35rem;line-height:1;
  background:var(--ac-s);color:var(--ac);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 22%,transparent)}
.hello-ic.g-azul  {--ac:#8ab4f8;--ac-s:#16233a}
.hello-ic.g-verde {--ac:#4ade80;--ac-s:#10291a}
.hello-ic.g-ambar {--ac:#fbbf24;--ac-s:#2c2109}
.hello-ic.g-morado{--ac:#a78bfa;--ac-s:#201a38}
.hello-ic.g-cian  {--ac:#22d3ee;--ac-s:#0c2a30}
.hello-ic.g-gris  {--ac:#8b95a3;--ac-s:#1b212c}
html[data-tema="claro"] .hello-ic.g-azul  {--ac:#1553e8;--ac-s:#e8f0fe}
html[data-tema="claro"] .hello-ic.g-verde {--ac:#15803d;--ac-s:#e7f6ec}
html[data-tema="claro"] .hello-ic.g-ambar {--ac:#a16207;--ac-s:#fdf3da}
html[data-tema="claro"] .hello-ic.g-morado{--ac:#6d28d9;--ac-s:#f0eafd}
html[data-tema="claro"] .hello-ic.g-cian  {--ac:#0e7490;--ac-s:#e2f5fa}
html[data-tema="claro"] .hello-ic.g-gris  {--ac:#69717e;--ac-s:#eff1f5}

/* ── Superficies ──────────────────────────────────────────────────── */
.card{box-shadow:var(--sombra)}
.card-h{padding:16px 20px}
.card-h b{font-size:.97rem}
.card-b{padding:20px}
.kpis{gap:16px;margin-bottom:20px}
.kpi{padding:19px 20px;box-shadow:var(--sombra)}
.kpi .v{font-size:1.65rem;margin-top:9px}
.kpi .l{font-size:.82rem}
.g2,.g3{gap:18px}

.rows{gap:10px}
.row{padding:13px 15px;border-color:var(--line);background:var(--card2);
  transition:border-color .13s,background .13s}
.rows>.row:hover{border-color:color-mix(in srgb,var(--primary) 40%,var(--line))}
.row .av{width:34px;height:34px;border-radius:11px}
.row .m b{font-size:.885rem}
.row .m span{font-size:.77rem}
.card-b.rows{gap:9px}

.chip{padding:5px 11px;font-size:.7rem}
.btn{padding:10px 18px;font-size:.82rem}
.btn.sm{padding:7px 13px;font-size:.765rem}
.btn.pri{box-shadow:0 1px 2px rgba(0,0,0,.2)}
.ibtn{width:36px;height:36px}

.inp{border-radius:var(--r)}
.top{height:62px;padding:0 24px;background:color-mix(in srgb,var(--card) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(10px)}

/* ── El buscador: ancho, alto y con lupa ──────────────────────────── */
.inp.busca{max-width:none;width:100%;padding:11px 14px 11px 38px;font-size:.82rem;
  background-repeat:no-repeat;background-position:13px center;background-size:15px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")}
.sec-barra{padding:16px 18px;box-shadow:var(--sombra);gap:14px}
.sec-barra .inp.busca{width:auto;flex:1;min-width:200px}

/* ── Menú lateral · v20 ───────────────────────────────────────────── */
.side{border-right-color:var(--line2)}
.nav{border-radius:var(--r);padding:9px 12px;margin:0 10px;width:calc(100% - 20px)}
.grp-t{padding:0 22px 7px}
.nav.on{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 26%,transparent)}

/* ── Tarjetas sueltas (plantillas, atajos, agentes, flujos) ───────── */
.pl-card,.pl-grid>*{box-shadow:var(--sombra)}
.pl-card{padding:17px;gap:9px}
.pl-card:hover{box-shadow:var(--sombra-alta);transform:translateY(-1px)}
.pl-card{transition:border-color .14s,box-shadow .14s,transform .14s}
.pl-grid{gap:14px}
.pl-card-txt{padding:11px 13px;font-size:.79rem}
.rows-cards{gap:14px}

/* ── Ventanas ─────────────────────────────────────────────────────── */
.modal-c{border-radius:calc(var(--rc) + 3px);box-shadow:var(--sombra-alta)}
.modal-h{padding:16px 20px}
.modal-b{padding:20px}
.modal-f{padding:14px 20px}
.modal{backdrop-filter:blur(3px)}

/* ── Detalles que se notan aunque no se vean ──────────────────────── */
/* La tarjeta de conexiones no cabia en su columna de 330px: el nombre
   del canal no se recortaba y forzaba el ancho minimo de toda la fila,
   asi que la tarjeta se salia de la pantalla. */
.g2>*>*,.conex,.conex>*{min-width:0}
.conex-i b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.tienda-marco,.prev-marco{border-radius:calc(var(--rc) + 2px)}
.fchip,.tienda-t{border-radius:999px}
.wa-chat,.wa-prev{border-radius:var(--rc)}


/* ── v21: los iconos de trazo ────────────────────────── */
.ic{width:17px;height:17px;flex:none;display:block}
.nav .ic{opacity:.85}
.nav.on .ic{opacity:1}
.hello-ic .ic{width:23px;height:23px;stroke-width:1.6}


/* ═══ v22 · Los campos de texto ═══════════════════════════════════════
   `.inp` se usaba en todo el panel y NUNCA tuvo regla propia: los campos
   eran inputs nativos del navegador con `padding:0` heredado del reset y
   la tipografía que el navegador le pone a los formularios (Arial), no la
   del panel. De ahí las dos cosas que se veían mal: el texto pegado al
   borde y la letra distinta al resto.
   ══════════════════════════════════════════════════════════════════ */
.inp{
  width:100%;
  font:inherit;
  font-size:.85rem;
  line-height:1.45;
  color:var(--fg);
  background:var(--card2);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:10px 13px;
  outline:none;
  transition:border-color .13s,background .13s,box-shadow .13s;
}
.inp::placeholder{color:var(--muted);opacity:1}
.inp:hover:not(:disabled){border-color:color-mix(in srgb,var(--primary) 34%,var(--line))}
.inp:focus{border-color:var(--primary);background:var(--card);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)}
.inp:disabled{opacity:.55;cursor:not-allowed}

textarea.inp{resize:vertical;line-height:1.55;padding:11px 13px}

/* El select nativo pinta su propia flecha y cada navegador la pone de un
   tamaño distinto. Se apaga y se dibuja una sola. */
select.inp{appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:34px;background-repeat:no-repeat;
  background-position:right 12px center;background-size:13px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
select.inp:focus{background-color:var(--card)}

/* ── Campos con prefijo: UN solo cuadro ───────────────────────────────
   El prefijo y el campo eran dos cajas con borde propio pegadas una a la
   otra, y se veía la costura. Ahora el borde y el fondo son del
   contenedor, y adentro no hay nada que dibuje línea. */
.at-inp,.cfg-liga{display:flex;align-items:stretch;background:var(--card2);
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .13s,background .13s,box-shadow .13s}
.at-inp:focus-within,.cfg-liga:focus-within{border-color:var(--primary);
  background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)}
.at-inp i,.cfg-liga i{display:flex;align-items:center;flex:none;
  font-style:normal;font-size:.85rem;color:var(--muted);
  padding:0 2px 0 13px;border:0;background:none;border-radius:0;line-height:1.45}
.cfg-liga i{font-size:.78rem;padding-right:0}
.at-inp .inp,.cfg-liga .inp{flex:1;min-width:0;border:0;background:none;
  border-radius:0;padding-left:5px;box-shadow:none}
.at-inp .inp:hover,.at-inp .inp:focus,
.cfg-liga .inp:hover,.cfg-liga .inp:focus{border:0;background:none;box-shadow:none}

/* La ayuda debajo de un campo respira antes de la siguiente etiqueta. */
.campo>.mini{margin-top:5px}
.campo{gap:6px}


/* ═══ v23 · El resumen con vida ═══════════════════════════════════════ */

/* ── Actividad reciente: una línea de tiempo, no una lista ─────────── */
.act{display:grid;gap:0;padding:8px 20px 14px}
.act-i{position:relative;display:flex;align-items:flex-start;gap:13px;
  width:100%;text-align:left;padding:13px 12px 13px 0;border-radius:var(--r);
  transition:background .13s}
.act-i:hover{background:var(--card2)}
/* El hilo que une los eventos. No lo lleva el último. */
.act-i::before{content:'';position:absolute;left:17px;top:44px;bottom:-1px;
  width:1px;background:var(--line)}
.act-i:last-child::before{display:none}
.act-ic{position:relative;z-index:1;width:35px;height:35px;flex:none;
  border-radius:50%;display:grid;place-items:center;
  background:var(--ac-s);color:var(--ac);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 26%,transparent),
             0 0 0 4px var(--card)}
.act-i:hover .act-ic{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ac) 26%,transparent),
             0 0 0 4px var(--card2)}
.act-ic .ic{width:16px;height:16px}
.act-ic.g-azul  {--ac:#8ab4f8;--ac-s:#16233a}
.act-ic.g-verde {--ac:#4ade80;--ac-s:#10291a}
.act-ic.g-ambar {--ac:#fbbf24;--ac-s:#2c2109}
.act-ic.g-morado{--ac:#a78bfa;--ac-s:#201a38}
html[data-tema="claro"] .act-ic.g-azul  {--ac:#1553e8;--ac-s:#e8f0fe}
html[data-tema="claro"] .act-ic.g-verde {--ac:#15803d;--ac-s:#e7f6ec}
html[data-tema="claro"] .act-ic.g-ambar {--ac:#a16207;--ac-s:#fdf3da}
html[data-tema="claro"] .act-ic.g-morado{--ac:#6d28d9;--ac-s:#f0eafd}

.act-m{flex:1;min-width:0;display:grid;gap:3px;padding-top:1px}
.act-m b{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:.885rem;font-weight:600;line-height:1.35}
.act-m b em{font-style:normal;font-size:.72rem;font-weight:500;color:var(--muted)}
.act-m>span{font-size:.79rem;color:var(--muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.act-t{flex:none;font-size:.72rem;color:var(--muted);padding-top:3px;
  font-variant-numeric:tabular-nums}

/* ── Mensajes por hora, recorrible ─────────────────────────────────── */
.horas{display:flex;align-items:flex-end;gap:3px;height:110px}
.hora-b{flex:1;height:100%;display:flex;align-items:flex-end;padding:0;
  background:none;border-radius:4px;transition:background .12s}
.hora-b i{display:block;width:100%;height:var(--alto);min-height:3px;
  border-radius:4px 4px 2px 2px;background:var(--primary);opacity:.55;
  transform-origin:bottom;
  animation:crece .5s cubic-bezier(.22,1,.36,1) backwards;
  transition:opacity .12s,background .12s}
.hora-b.cerrado i{background:var(--muted);opacity:.4}
.hora-b.pico i{opacity:1}
.hora-b:hover i,.hora-b:focus-visible i{opacity:1;background:var(--primary)}
.hora-b.cerrado:hover i,.hora-b.cerrado:focus-visible i{background:var(--warn-solid)}
.hora-b:hover,.hora-b:focus-visible{background:var(--card2);outline:none}
/* Al apuntar una, las demás se apagan: la que importa es la de abajo del dedo. */
.horas.apuntando .hora-b:not(:hover) i{opacity:.28}
@keyframes crece{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.hora-b:nth-child(n)   i{animation-delay:calc(var(--i,0) * 12ms)}

.horas-x{display:flex;justify-content:space-between;font-size:.68rem;
  color:var(--muted);margin-top:7px}
.horas-leyenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px;
  font-size:.71rem;color:var(--muted)}
.horas-leyenda span{display:flex;align-items:center;gap:6px}
.horas-leyenda .pt{width:9px;height:9px;border-radius:3px;display:block}
.horas-leyenda .pt.abierto{background:var(--primary)}
.horas-leyenda .pt.cerrado{background:var(--muted);opacity:.5}
#horas-lee b{color:var(--fg);font-weight:700}

/* ── La gráfica de días ────────────────────────────────────────────── */
.graf{position:relative}
.graf-guia{position:absolute;top:0;height:150px;width:1px;
  border-left:1px dashed color-mix(in srgb,var(--primary) 55%,transparent);
  pointer-events:none;transform:translateX(-.5px)}
.graf-pt{position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--primary);border:2.5px solid var(--card);pointer-events:none;
  transform:translate(-50%,-50%);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent)}
.graf-tip{position:absolute;transform:translateX(-50%);pointer-events:none;
  background:var(--card2);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 11px;font-size:.75rem;color:var(--muted);white-space:nowrap;
  box-shadow:var(--sombra);z-index:2}
.graf-tip b{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}
.graf-tip em{font-style:normal;display:block;font-size:.68rem;opacity:.8;margin-top:1px}
.graf-x{display:flex;justify-content:space-between;font-size:.68rem;
  color:var(--muted);margin-top:9px;font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .hora-b i{animation:none}
}


/* ═══ v24 · Conversaciones: tres columnas, tres scrolls ═══════════════
   La rejilla crecía con su contenido y era la PÁGINA la que hacía scroll,
   así que las tres columnas se estiraban juntas. Ahora la altura la fija
   JS contra el alto de la ventana y cada columna hace el suyo.

   La clave es `min-height:0`: sin eso una rejilla no deja encoger a sus
   hijos por debajo de su contenido, y `overflow:auto` no sirve de nada
   porque nunca hay nada que desbordar.
   ══════════════════════════════════════════════════════════════════ */
.chat-w{min-height:440px}
.chat-w>*,.chat-col,.chat-p,.ficha{min-height:0}
.chat-col .chat-list{flex:1;min-height:0;max-height:none;overflow-y:auto}
.chat-b{flex:1;min-height:0;max-height:none;overflow-y:auto}
.ficha{overflow-y:auto;overscroll-behavior:contain}
.chat-col .chat-list,.chat-b,.ficha{scrollbar-width:thin}

/* La barra de pestañas no debe deslizarse sola: caben las tres. */
.tabs{overflow-x:visible;flex-wrap:wrap}

/* ── La ficha, completa ────────────────────────────────────────────── */
.lnk-perfil{display:block;width:100%;margin-top:6px;font-size:.72rem;
  color:var(--primary-txt);font-weight:600}
.lnk-perfil:hover{text-decoration:underline;text-underline-offset:2px}

.ficha-campo{display:grid;gap:5px;margin-bottom:10px}
.ficha-campo>span{font-size:.7rem;font-weight:600;color:var(--muted)}
.ficha-campo .inp{font-size:.78rem;padding:8px 11px}
.ficha-vacio{font-size:.75rem;color:var(--muted)}

.attrs{display:grid;gap:6px;margin-bottom:7px}
.attr{display:grid;grid-template-columns:1fr 1fr 30px;gap:5px;align-items:center}
.attr .inp{font-size:.74rem;padding:7px 9px;min-width:0}
.attr .ibtn{width:30px;height:30px;font-size:.85rem}
.attr.nuevo .inp{border-style:dashed}

.embudo-p{display:flex;gap:3px;margin-top:9px}
.embudo-p i{flex:1;height:5px;border-radius:99px;background:var(--line)}
.embudo-p i.on{background:var(--primary)}

/* En pantalla angosta la ficha deja de ser columna y se apila al final. */
@media(max-width:1040px){
  .chat-w.con-ficha{grid-template-columns:260px 1fr}
  .ficha{display:none}
}


/* ═══ v25 · Contactos ═════════════════════════════════════════════════ */
.filtros-c{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.filtros-c .inp.busca{flex:1;min-width:230px;width:auto}
.filtros-c .sel{width:auto;min-width:168px;flex:none}

/* La palomita de fila. Un cuadrito propio: la casilla nativa no se puede
   pintar y desentona con todo lo demás. */
.check{width:17px;height:17px;flex:none;border:1.5px solid var(--line);
  border-radius:5px;background:var(--card2);display:block;position:relative;
  transition:border-color .12s,background .12s}
.check:hover{border-color:var(--primary)}
.check.on{background:var(--primary);border-color:var(--primary)}
.check.on::after{content:'';position:absolute;left:5px;top:1.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.tabla .col-check{width:38px;padding-right:0}
.tabla tr.sel{background:var(--primary-s)}
.tabla tr.sel:hover{background:var(--primary-s)}

/* El nombre es un botón: abre el detalle. No debe parecer otra cosa. */
.tabla .celda-p{width:100%;text-align:left;padding:0;background:none}
.tabla .celda-p:hover b{color:var(--primary-txt)}
.ibtn.mas{width:30px;height:30px;font-size:1.05rem;letter-spacing:1px}

.barra-sel{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px;
  padding:11px 16px;border-radius:var(--rc);background:var(--primary-s);
  border:1px solid color-mix(in srgb,var(--primary) 32%,transparent)}
.barra-sel b{font-size:.82rem;color:var(--primary-txt);margin-right:auto}

.menu-c{position:fixed;z-index:200;width:190px;padding:5px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--rc);
  box-shadow:var(--sombra-alta);display:grid;gap:1px;
  animation:sube .12s cubic-bezier(.22,1,.36,1)}
.menu-c button{display:block;width:100%;text-align:left;padding:8px 11px;
  border-radius:var(--r);font-size:.79rem;color:var(--fg);transition:background .1s}
.menu-c button:hover{background:var(--card2)}
.menu-c button.mal{color:var(--danger)}
.menu-c button.mal:hover{background:var(--danger-bg)}

/* ── El detalle ────────────────────────────────────────────────────── */
.hello.det{align-items:center}
.hello.det>div:not(.acciones){flex:1;min-width:0}
.hello.det h1{font-size:clamp(1.3rem,2.4vw,1.6rem)}
.hello.det p{font-size:.8rem}

.info-c{display:grid;gap:2px;padding:12px 14px}
.info-r{display:flex;align-items:flex-start;gap:11px;padding:9px 8px;border-radius:var(--r)}
.info-r:hover{background:var(--card2)}
.info-ic{width:24px;height:24px;flex:none;border-radius:7px;display:grid;place-items:center;
  background:var(--card2);color:var(--muted);font-size:.78rem}
.info-r i{display:block;font-style:normal;font-size:.68rem;color:var(--muted)}
.info-r b{display:block;font-size:.82rem;font-weight:600;word-break:break-word}

.linea{display:grid;gap:0}
.linea-i{position:relative;display:flex;align-items:flex-start;gap:13px;padding:12px 0}
.linea-i::before{content:'';position:absolute;left:16px;top:42px;bottom:-2px;width:1px;
  background:var(--line)}
.linea-i:last-child::before{display:none}
.linea-ic{position:relative;z-index:1;width:33px;height:33px;flex:none;border-radius:50%;
  display:grid;place-items:center;font-size:.85rem;box-shadow:0 0 0 4px var(--card)}
.linea-m{flex:1;min-width:0}
.linea-m b{display:block;font-size:.85rem;font-weight:600}
.linea-m span{display:block;font-size:.77rem;color:var(--muted);line-height:1.5}
.linea-d{flex:none;font-size:.71rem;color:var(--muted);padding-top:2px}

.det-chat{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto;
  padding:4px 2px}


/* ═══ v26 · Citas, mapa del equipo y armador de flujos ════════════════ */

/* ── El mapa de horas del equipo, recorrible ───────────────────────── */
.mapa-f i{cursor:pointer;transition:transform .1s,outline-color .1s;
  outline:1.5px solid transparent;outline-offset:1px}
.mapa-f i:hover{outline-color:var(--fg);transform:scaleY(1.35)}
.mapa.apuntando .mapa-f i:not(:hover){opacity:.22 !important}
#mapa-lee b{color:var(--fg);font-weight:700}

/* ── El armador de pasos ───────────────────────────────────────────── */
.pasos{display:grid;gap:0}
.paso{border:1px solid var(--line);border-radius:var(--rc);padding:12px;
  background:var(--card2)}
.paso.pregunta{border-color:color-mix(in srgb,var(--ok) 34%,var(--line));
  background:color-mix(in srgb,var(--ok) 5%,var(--card2))}
.paso-h{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.paso-h b{flex:1;font-size:.8rem}
.paso-n{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--primary);color:#fff;font-size:.68rem;font-weight:700}
.paso.pregunta .paso-n{background:var(--ok);color:var(--bg)}
.paso-tipo{width:auto;flex:none;font-size:.72rem;padding:5px 26px 5px 9px;
  background-position:right 8px center}
.paso-h .ibtn{width:27px;height:27px;font-size:.8rem}
.paso-h .ibtn[disabled]{opacity:.3;pointer-events:none}
.paso-h .ibtn.mal:hover{color:var(--danger);background:var(--danger-bg)}
.paso-flecha{text-align:center;color:var(--muted);font-size:.95rem;padding:5px 0;line-height:1}

.opciones{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line)}
.op-h{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:8px}
.op-h b{font-size:.74rem;color:var(--muted)}
.opcion{border:1px solid var(--line);border-radius:var(--r);padding:10px;
  background:var(--card);margin-bottom:7px}
.op-fila{display:flex;gap:6px;margin-bottom:8px}
.op-fila .inp{flex:1;min-width:0;font-weight:600}
.opcion .campo{gap:4px;margin-bottom:7px}
.opcion .campo:last-child{margin-bottom:0}
.opcion .campo>span{font-size:.67rem}
.opcion .inp{font-size:.75rem;padding:7px 10px}

/* ── Detalles de la cita ───────────────────────────────────────────── */
#ci-b .prev-msg{margin-top:4px}
.cal-c .cal-p{pointer-events:none}


/* ═══ v27 · El lienzo de flujos ═══════════════════════════════════════
   Se arrastra con el mouse en vez de con una barra: la barra tapaba
   parte del dibujo y obligaba a soltar el nodo para moverse. */
.lienzo{cursor:grab;scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior:contain;touch-action:none}
.lienzo::-webkit-scrollbar{display:none}
.lienzo.arrastrando{cursor:grabbing}
.lienzo.arrastrando .nodo{pointer-events:none}

.config-h{display:flex;align-items:center;gap:9px;margin-bottom:13px;
  padding-bottom:11px;border-bottom:1px solid var(--line2)}
.config-t{flex:1;min-width:0;font-size:.76rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase}
.config-h .ibtn{width:28px;height:28px;font-size:.85rem}
.config-h .ibtn.mal:hover{color:var(--danger);background:var(--danger-bg)}
.config-n .campo{margin-bottom:11px}
.config-n .campo>span{display:flex;align-items:center;gap:6px}
.config-n .mini{margin:-6px 0 11px}

.rama{border:1px solid var(--line);border-radius:var(--r);padding:9px;
  background:var(--card2);margin-bottom:7px}
.rama .op-fila{margin-bottom:6px}
.rama .inp{font-size:.74rem;padding:6px 9px}
.rama .mini{margin:4px 0 0}

.valida{margin-bottom:6px}
.vars{font-size:.7rem;color:var(--muted);line-height:1.6;margin:-4px 0 12px}
.vars .mono{color:var(--primary-txt);background:var(--primary-s);
  border-radius:4px;padding:1px 4px;font-size:.68rem}


/* ═══ v28 · Zoom del lienzo y auto-respuestas ═════════════════════════ */

/* ── Los controles de zoom ─────────────────────────────────────────────
   Van en un envoltorio y no dentro del lienzo: dentro se irían con el
   scroll y se perderían justo cuando hacen falta. */
/* min-width:0 no es adorno: sin el, la columna 1fr del grid crece hasta
   el ancho del dibujo y el lienzo deja de tener que scrollear. */
.lienzo-caja{position:relative;min-height:0;min-width:0;display:flex}
.lienzo-caja>.lienzo{flex:1;min-width:0}
.lienzo-sz{position:relative}
.lienzo-in{transform-origin:0 0;will-change:transform}

.zoom{position:absolute;left:11px;bottom:11px;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sombra);z-index:3}
.zoom-b{width:32px;height:30px;display:grid;place-items:center;background:none;
  border:0;border-bottom:1px solid var(--line2);color:var(--muted);
  font-size:.9rem;line-height:1;transition:background .12s,color .12s}
.zoom-b:last-child{border-bottom:0}
.zoom-b:hover{background:var(--card2);color:var(--fg)}
.zoom-b.n{font-size:.62rem;font-weight:700;letter-spacing:.02em;
  font-variant-numeric:tabular-nums}

/* ── Auto-respuestas: la lista ─────────────────────────────────────── */
.au-orden{font-size:.7rem;color:var(--muted);letter-spacing:.04em;
  margin:16px 0 -4px}
.au-c.off{opacity:.6}
.au-c .card-h{flex-wrap:wrap;gap:7px}
.au-c .card-h b{flex:none}
.au-n{width:24px;height:20px;flex:none;display:grid;place-items:center;
  border-radius:6px;background:var(--card2);border:1px solid var(--line);
  font-size:.62rem;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums}
.au-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px;
  font-size:.7rem;color:var(--muted)}
.au-meta span::before{content:'';color:var(--line)}

/* ── El probador ───────────────────────────────────────────────────── */
.pr-fila{display:flex;gap:8px;align-items:stretch}
.pr-fila .inp{flex:1;min-width:0}
.pr-fila .btn{flex:none;white-space:nowrap}
.pr-ops{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:10px;
  font-size:.75rem;color:var(--muted)}
.pr-ops .inp{width:auto;flex:none;font-size:.75rem;padding:6px 26px 6px 10px}
.pr-sep{width:1px;height:16px;background:var(--line);margin:0 3px}

.pr-gana{margin-top:13px;padding:12px;border-radius:var(--rc);
  background:var(--ok-bg);border:1px solid color-mix(in srgb,var(--ok) 26%,transparent)}
.pr-gana-h{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:.82rem}
.pr-gana-h b{color:var(--ok)}
.pr-gana .mini{margin:5px 0 10px}
.pr-gana .wa-chat{max-width:340px}
.pr-nadie{margin-top:13px;padding:12px;border-radius:var(--rc);
  background:var(--warn-bg);border:1px solid color-mix(in srgb,var(--warn) 26%,transparent);
  font-size:.8rem;color:var(--warn);display:grid;gap:3px}
.pr-nadie .mini{margin:0;color:var(--muted)}

.pr-fuera{margin-top:11px;font-size:.74rem}
.pr-fuera summary{color:var(--muted);cursor:pointer;padding:5px 0;
  list-style:none;display:flex;align-items:center;gap:6px}
.pr-fuera summary::-webkit-details-marker{display:none}
.pr-fuera summary::before{content:'▸';transition:transform .15s}
.pr-fuera[open] summary::before{transform:rotate(90deg)}
.pr-f{padding:6px 0 6px 15px;border-top:1px solid var(--line2);color:var(--muted)}
.pr-f b{color:var(--fg);font-weight:600}

/* ── Auto-respuestas: el editor ────────────────────────────────────── */
.au-tipos{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:13px}
.au-t{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:1px 8px;text-align:left;padding:10px;border-radius:var(--r);
  background:var(--card2);border:1px solid var(--line);
  transition:border-color .12s,background .12s}
.au-t:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
.au-t.on{border-color:var(--primary);background:var(--primary-s)}
.au-t-ic{grid-row:1/3;align-self:center;font-size:1rem;line-height:1}
.au-t b{font-size:.76rem}
.au-t i{font-size:.66rem;color:var(--muted);font-style:normal;line-height:1.35}
.au-t.on b{color:var(--primary-txt)}
/* Sin icono, el nombre y la explicacion caian en el mismo renglon:
   la rejilla esperaba una primera columna que no existia. */
.au-t.sin-ic{grid-template-columns:1fr}

.au-dias{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.au-d{padding:6px 11px;border-radius:999px;background:var(--card2);
  border:1px solid var(--line);font-size:.72rem;font-weight:600;color:var(--muted);
  transition:border-color .12s,background .12s,color .12s}
.au-d:hover{border-color:var(--primary)}
.au-d.on{background:var(--primary);border-color:var(--primary);color:#fff}

.au-vars{display:flex;flex-wrap:wrap;gap:9px;margin:-6px 0 4px}
.au-vars .lnk{font-size:.7rem;margin:0}

.au-sep{margin:18px 0 12px;padding-top:13px;border-top:1px solid var(--line2);
  font-size:.63rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted)}

.au-sw{display:flex;align-items:flex-start;gap:10px;margin:11px 0 13px}
.au-sw>span{display:grid;gap:2px;min-width:0}
.au-sw b{font-size:.78rem;font-weight:600}
.au-sw i{font-size:.68rem;color:var(--muted);font-style:normal;line-height:1.4}

.au-fila{display:grid;gap:4px}
.au-f{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r);
  background:var(--card2);border:1px solid transparent;font-size:.74rem}
.au-f b{flex:1;min-width:0;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.au-f>span:last-child{color:var(--muted);font-size:.68rem;
  font-variant-numeric:tabular-nums}
.au-f.yo{border-color:var(--primary);background:var(--primary-s)}
.au-f.yo b{font-weight:700;color:var(--primary-txt)}

#au-lado .wa-chat{margin-bottom:9px}
#au-lado .valida{margin-top:9px}

@media(max-width:1100px){
  .lienzo-caja{height:400px}
  .au-tipos{grid-template-columns:1fr}
}


/* ═══ v29 · Agentes IA ════════════════════════════════════════════════ */

/* ── La lista ──────────────────────────────────────────────────────── */
.ia-c.off{opacity:.6}
.ia-c .card-h b{flex:1;min-width:0}
.ia-av{width:32px;height:32px;flex:none;display:grid;place-items:center;
  border-radius:10px;background:var(--card2);border:1px solid var(--line);
  font-size:1rem;line-height:1}
.ia-av.chico{width:24px;height:24px;font-size:.82rem;border-radius:7px;
  display:inline-grid;vertical-align:-6px;margin-right:3px}
.ia-mod{font-size:.68rem;color:var(--muted);letter-spacing:.02em}
.ia-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.ia-meta{display:flex;flex-wrap:wrap;gap:11px;font-size:.7rem;color:var(--muted)}
.ia-meta span::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--line-strong);margin-right:6px;vertical-align:2px}
/* Tres botones no caben junto al texto en una columna de tarjetas:
   se van a su propio renglon y se reparten el ancho. */
.ia-c .row-f{flex-wrap:wrap;gap:9px}
.ia-c .cfg-btns{width:100%;display:flex;gap:6px}
.ia-c .cfg-btns .btn{flex:1;justify-content:center;white-space:nowrap}
.ia-c .cfg-btns .ibtn{flex:none}

/* ── Sencillo o avanzado ───────────────────────────────────────────── */
.ia-como{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ia-modo{display:grid;gap:5px;text-align:left;padding:15px;border-radius:var(--rc);
  background:var(--card2);border:1px solid var(--line);
  transition:border-color .13s,background .13s}
.ia-modo:hover{border-color:var(--primary);background:var(--card)}
.ia-modo-ic{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:var(--primary-s);font-size:1.05rem;line-height:1;margin-bottom:3px}
.ia-modo b{font-size:.86rem;display:flex;align-items:center;gap:7px}
.ia-modo>span:last-child{font-size:.72rem;color:var(--muted);line-height:1.45}
.ia-modo.ancho{grid-column:1/-1}

/* ── Lo que trajo tu asistente (Resumen) ───────────────────────────── */
.res-asis{margin-bottom:16px}
.res-asis-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:12px}
.res-asis-c{display:grid;gap:4px;align-content:start;padding:13px 15px;border-radius:var(--r);
  background:var(--card2);border:1px solid var(--line)}
.res-asis-c .l{font-size:.72rem;font-weight:600;color:var(--muted)}
.res-asis-c b{font-family:var(--display);font-size:1.55rem;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.15}
.res-asis-c .d{font-size:.74rem;color:var(--muted);line-height:1.45}

/* ── Plantilla por giro ────────────────────────────────────────────── */
#pl-wz .modal-c{max-width:680px}
#pl-wz .modal-b{min-height:270px}
.pl-cat{font-size:.72rem;font-weight:700;color:var(--muted);margin:4px 0 -6px}
.pl-lista{display:grid;gap:6px}
.pl-s{display:grid;grid-template-columns:26px minmax(0,1fr) 92px 116px;gap:8px;align-items:center;
  padding:6px 8px;border:1px solid var(--line);border-radius:var(--r);background:var(--card2);
  transition:border-color .13s,background .13s}
.pl-s.on{border-color:var(--primary);background:var(--primary-s)}
.pl-s.ya{grid-template-columns:26px minmax(0,1fr);opacity:.6}
.pl-ck{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:7px;
  border:1.5px solid var(--line);background:var(--card);color:#fff;font-size:.78rem;font-weight:700;line-height:1}
.pl-s.on .pl-ck,.pl-s.ya .pl-ck,.pl-ap.on .pl-ck{background:var(--primary);border-color:var(--primary)}
.pl-n{min-width:0;display:grid;gap:1px}
.pl-n .inp{background:transparent;border-color:transparent;padding:4px 7px;font-weight:600;font-size:.82rem}
.pl-n .inp:hover{border-color:var(--line)}
.pl-n b{font-size:.82rem;padding:0 7px}
.pl-n i{font-style:normal;font-size:.68rem;color:var(--muted);padding:0 7px;line-height:1.35}
.pl-dur,.pl-p{display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--muted);min-width:0}
.pl-dur .inp,.pl-p .inp{padding:7px 8px;font-size:.8rem;text-align:right;min-width:0;
  font-variant-numeric:tabular-nums}
.pl-hs{display:grid;gap:6px}
.pl-h{display:grid;grid-template-columns:minmax(0,86px) minmax(0,1fr) auto minmax(0,1fr) auto;gap:8px;align-items:center}
.pl-h b{font-size:.8rem}
.pl-h>span{font-size:.72rem;color:var(--muted)}
.pl-h .inp{padding:7px 9px;font-size:.8rem;min-width:0}
.pl-h.apagado b{color:var(--muted)}
.pl-q{display:grid;gap:7px;padding-bottom:11px;border-bottom:1px solid var(--line2)}
.pl-q>b{font-size:.82rem}
.pl-q .au-dias{margin:0}
.pl-dice{margin:0;font-size:.72rem;color:var(--primary-txt);line-height:1.45}
.pl-dice:empty{display:none}
.pl-ap{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:11px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card2);font-size:.78rem;font-weight:600}
.pl-ap i{display:block;font-style:normal;font-weight:400;font-size:.7rem;color:var(--muted);margin-top:2px}
.pl-vacio .card-b{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.pl-vacio .card-b>div{flex:1;min-width:220px}
.pl-vacio b{font-size:.88rem}
.pl-vacio .sub{margin:3px 0 0}
.pl-vacio .cfg-btns{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:560px){
  .pl-s{grid-template-columns:26px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"ck n n" "ck d p"}
  .pl-s.ya{grid-template-areas:"ck n"}
  .pl-s .pl-ck{grid-area:ck;align-self:start;margin-top:5px}
  .pl-s .pl-n{grid-area:n}
  .pl-dur{grid-area:d}
  .pl-p{grid-area:p}
  .pl-h{grid-template-columns:minmax(0,74px) minmax(0,1fr) auto minmax(0,1fr) auto;gap:6px}
}

/* ── El modo guiado ────────────────────────────────────────────────── */
.wz-barra{display:flex;gap:4px;padding:0 17px 13px}
.wz-barra i{flex:1;height:3px;border-radius:2px;background:var(--line);
  transition:background .2s}
.wz-barra i.on{background:var(--primary)}
#ia-wz .modal-c{max-width:620px}
#ia-wz .modal-b{min-height:270px}
.wz-prev{margin-top:14px;padding-top:13px;border-top:1px solid var(--line2)}
.wz-prev .wa-chat{max-width:100%}

.ia-avs{display:flex;flex-wrap:wrap;gap:6px}
.ia-avb{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
  background:var(--card2);border:1px solid var(--line);font-size:1.05rem;line-height:1;
  transition:border-color .12s,background .12s,transform .12s}
.ia-avb:hover{border-color:var(--primary);transform:translateY(-1px)}
.ia-avb.on{border-color:var(--primary);background:var(--primary-s)}

/* ── El editor ─────────────────────────────────────────────────────── */
/* El .modal-b generico es un grid con gap, y ahi la barra de pestañas se
   aplastaba a la altura de su padding. Este editor arma su propio espaciado. */
#ia-editor .modal-b{display:block;padding-top:0}

/* Pegadas arriba: la pestaña de herramientas es larga y sin esto se pierden
   apenas scrolleas, justo cuando quieres cambiar de pestaña. */
.ia-tabs{position:sticky;top:0;z-index:2;background:var(--card);
  display:flex;gap:3px;margin:0 -20px 15px;padding:20px 20px 11px;
  border-bottom:1px solid var(--line2);overflow-x:auto}
.ia-tab{flex:none;padding:7px 13px;border-radius:999px;background:none;border:1px solid transparent;
  font-size:.76rem;font-weight:600;color:var(--muted);white-space:nowrap;
  transition:background .12s,color .12s,border-color .12s}
.ia-tab:hover{color:var(--fg);background:var(--card2)}
.ia-tab.on{background:var(--card2);border-color:var(--line);color:var(--fg)}

.inp.chico{font-size:.72rem;line-height:1.55}

/* Las herramientas y los números: una fila que se prende */
.ia-grupo{margin:15px 0 7px;font-size:.63rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted)}
.ia-grupo:first-child{margin-top:9px}
.ia-h{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:10px 12px;margin-bottom:5px;border-radius:var(--r);
  background:var(--card2);border:1px solid var(--line);
  transition:border-color .12s,background .12s}
.ia-h:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
.ia-h.on{border-color:var(--primary);background:var(--primary-s)}
.ia-h-t{flex:1;min-width:0;display:grid;gap:1px}
.ia-h-t b{font-size:.78rem;font-weight:600}
.ia-h-t i{font-size:.67rem;color:var(--muted);font-style:normal;line-height:1.35}
.ia-h-c{width:20px;height:20px;flex:none;display:grid;place-items:center;
  border-radius:6px;border:1.5px solid var(--line);background:var(--card);
  font-size:.7rem;color:#fff;line-height:1}
.ia-h.on .ia-h-c{background:var(--primary);border-color:var(--primary)}

/* Los rieles que no se apagan */
.ia-rieles{margin:13px 0;padding:12px;border-radius:var(--rc);
  background:var(--ok-bg);border:1px solid color-mix(in srgb,var(--ok) 24%,transparent)}
.ia-rieles-t{font-size:.63rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ok);margin-bottom:9px}
.ia-riel{display:grid;gap:1px;margin-bottom:8px}
.ia-riel:last-child{margin-bottom:0}
.ia-riel b{font-size:.75rem;font-weight:600}
.ia-riel i{font-size:.67rem;color:var(--muted);font-style:normal;line-height:1.4}

/* Conocimiento */
.ia-nuevo-saber{display:grid;gap:7px;padding:12px;margin-bottom:13px;
  border-radius:var(--rc);background:var(--card2);border:1px dashed var(--line)}
.ia-nuevo-saber.editando{border-style:solid;border-color:var(--primary);
  background:var(--primary-s)}
.ia-edit-t{font-size:.68rem;font-weight:700;color:var(--primary-txt)}
.ia-nuevo-saber .au-vars{margin:0;gap:7px}

.ia-saber,.ia-file{display:flex;align-items:center;gap:10px;padding:10px 12px;
  margin-bottom:5px;border-radius:var(--r);background:var(--card2);
  border:1px solid var(--line)}
.ia-saber-ic{width:26px;height:26px;flex:none;display:grid;place-items:center;
  border-radius:8px;background:var(--primary-s);font-size:.8rem;line-height:1}
.ia-saber-t{flex:1;min-width:0;display:grid;gap:2px}
.ia-saber-t b{font-size:.76rem;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ia-saber-t i{font-size:.66rem;color:var(--muted);font-style:normal;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ia-saber .ibtn,.ia-file .ibtn{width:28px;height:28px;flex:none;font-size:.8rem}
.ia-saber .ibtn.mal:hover,.ia-file .ibtn.mal:hover{color:var(--danger);background:var(--danger-bg)}
.ia-file .inp{font-size:.68rem;padding:5px 9px}

.ia-seg{padding:12px;margin-bottom:7px;border-radius:var(--rc);
  background:var(--card2);border:1px solid var(--line)}
.ia-seg .campo{margin-bottom:9px}
.ia-seg .lnk.mal{color:var(--danger)}

/* El deslizador de "qué tan suelto" */
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:4px;
  border-radius:3px;background:var(--line);outline:none}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:16px;height:16px;border-radius:50%;background:var(--primary);
  border:2px solid var(--card);cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.4)}
input[type="range"]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:var(--primary);border:2px solid var(--card);cursor:pointer}

/* La prueba: las herramientas se marcan en el hilo */
.pb-tool{align-self:center;margin:5px auto;padding:4px 10px;border-radius:999px;
  background:var(--card2);border:1px dashed var(--line);
  font-size:.66rem;color:var(--muted);width:fit-content;max-width:90%;
  text-align:center;font-variant-numeric:tabular-nums}
#pb .modal-c{max-width:560px}

@media(max-width:640px){
  .ia-como{grid-template-columns:1fr}
}


/* ═══ v30 · El resumen del modo guiado ═════════════════════ */
.wz-res{margin:15px 0 13px;padding:13px;border-radius:var(--rc);
  background:var(--card2);border:1px solid var(--line)}
.wz-res-t{font-size:.62rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.wz-res-h{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.wz-res-h>span:last-child{display:grid;gap:2px;min-width:0}
.wz-res-h b{font-size:.85rem}
.wz-res-h i{font-size:.68rem;color:var(--muted);font-style:normal;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wz-res .ia-chips{margin:0}

.wz-prompt{margin-bottom:11px}
.wz-prompt summary{display:flex;align-items:center;gap:7px;padding:7px 0;
  font-size:.74rem;color:var(--muted);cursor:pointer;list-style:none}
.wz-prompt summary::-webkit-details-marker{display:none}
.wz-prompt summary::before{content:'▸';transition:transform .15s}
.wz-prompt[open] summary::before{transform:rotate(90deg)}
.wz-prompt summary i{font-style:normal;font-size:.66rem;opacity:.7}
.wz-prompt .mini{margin-top:5px}

/* ═══ v31 · El freno del sistema en el hilo de prueba ════════════ */
.pb-riel{align-self:center;margin:5px auto;padding:4px 10px;border-radius:999px;
  background:var(--ok-bg);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);
  color:var(--ok);font-size:.66rem;font-weight:600;width:fit-content;max-width:90%;
  text-align:center}

/* ═══ v32 · Reportes ══════════════════════════════════════════════════ */

.rep-barra{display:flex;align-items:center;flex-wrap:wrap;gap:11px}
.rep-barra .range{margin-left:0}
.rep-fechas{display:flex;align-items:center;gap:8px;margin-left:auto;
  font-size:.75rem;color:var(--muted)}
.rep-fechas i{font-style:normal;opacity:.6}
.rep-f{padding:7px 11px;border-radius:var(--r);background:var(--card2);
  border:1px solid var(--line);color:var(--fg);font-weight:600;
  font-variant-numeric:tabular-nums;white-space:nowrap}

.kpi .d b{font-weight:700}
.kpi .d b.sube{color:var(--ok)}
.kpi .d b.baja{color:var(--danger)}

.rep-pie{display:flex;align-items:center;flex-wrap:wrap;gap:11px;
  margin-top:15px;padding-top:13px;border-top:1px solid var(--line2)}
.rep-pie .sub{flex:1;min-width:200px}

/* ── La curva por día ───────────────────────────────────────────────── */
.cur-c{background:var(--card);border:1px solid var(--line);
  border-radius:var(--rc);padding:13px}
.cur-h{display:flex;align-items:baseline;justify-content:space-between;
  gap:9px;margin-bottom:9px}
.cur-h b{font-size:.85rem}

/* Dos curvas que se comparan entre si no pueden medir distinto: .g2 es
   1fr/330px porque casi siempre es "principal + lateral", aqui no. */
.g2.iguales{grid-template-columns:1fr 1fr}

.curva-w{position:relative}
/* Escala uniforme: el viewBox ya trae la proporcion, asi que height:auto
   saca el alto solo y el texto de los ejes no se deforma. */
.curva{display:block;width:100%;height:auto;overflow:visible;cursor:crosshair}
.cur-rej{stroke:var(--line2);stroke-width:1;vector-effect:non-scaling-stroke}
.cur-ty{fill:var(--muted);font-size:11px;font-family:var(--ui);text-anchor:end}
.cur-tx{fill:var(--muted);font-size:11px;font-family:var(--ui);text-anchor:middle}
.cur-guia{stroke:var(--fg);stroke-width:1;stroke-dasharray:3 3;
  vector-effect:non-scaling-stroke;transition:opacity .1s}
.cur-pt{stroke:var(--card);stroke-width:2;transition:opacity .1s}
.cur-fin{stroke:var(--card);stroke-width:2}

.cur-tip{position:absolute;top:-4px;transform:translateX(-50%);
  padding:5px 9px;border-radius:var(--r);pointer-events:none;
  background:var(--card2);border:1px solid var(--line);box-shadow:var(--sombra);
  font-size:.7rem;color:var(--muted);white-space:nowrap;transition:opacity .1s;z-index:2}
.cur-tip b{color:var(--fg);font-weight:700;font-variant-numeric:tabular-nums}
.cur-tip i{display:block;font-style:normal;font-size:.64rem;opacity:.8;margin-top:1px}

/* ── La tabla que se ordena ────────────────────────────────────────── */
.tabla.orden th{cursor:pointer;user-select:none;transition:color .12s}
.tabla.orden th:hover{color:var(--fg)}
.tabla.orden th i{font-style:normal;font-size:.6rem;margin-left:3px;
  color:var(--primary-txt)}
.tabla.orden th.ord{color:var(--fg)}

/* ── El editor del reporte ─────────────────────────────────────────── */
#rp-editor .modal-b{display:block}
.au-tipos.tres{grid-template-columns:repeat(3,1fr)}

.rp-dest{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 4px}
.rp-d{display:inline-flex;align-items:center;gap:4px;padding:5px 6px 5px 11px;
  border-radius:999px;background:var(--card2);border:1px solid var(--line);
  font-size:.73rem;font-variant-numeric:tabular-nums}
.rp-d .ibtn{width:20px;height:20px;font-size:.62rem}

.met{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.met-b{display:flex;align-items:center;gap:8px;padding:10px 12px;text-align:left;
  border-radius:var(--r);background:var(--card2);border:1px solid var(--line);
  font-size:.76rem;font-weight:600;color:var(--muted);
  transition:border-color .12s,background .12s,color .12s}
.met-b:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
.met-b.on{border-color:var(--primary);background:var(--primary-s);color:var(--primary-txt)}
.met-b span{font-size:.9rem;line-height:1}

#rp-lado .wa-prev{margin-bottom:9px}
.wa-sub{font-style:normal;font-size:.72rem;opacity:.72}

@media(max-width:820px){
  .au-tipos.tres,.met{grid-template-columns:1fr}
  .rep-fechas{margin-left:0}
}


/* ═══ v33 · Centro de ayuda, tour y vistas del calendario ═════════════ */

/* ── El centro de ayuda ────────────────────────────────────────────── */
.docs{display:grid;grid-template-columns:264px 1fr;gap:13px;align-items:start}

.docs-nav{background:var(--card);border:1px solid var(--line);
  border-radius:var(--rc);padding:11px;position:sticky;top:13px;
  max-height:calc(100vh - 150px);overflow-y:auto}
.docs-nav .busca{width:100%;margin-bottom:9px}
.docs-nav .mini{margin:-4px 0 9px}
.docs-cat{font-size:.62rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin:13px 0 5px;padding:0 2px}
.docs-cat:first-child{margin-top:2px}
.docs-a{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:7px 9px;border-radius:var(--r);background:none;border:1px solid transparent;
  font-size:.78rem;color:var(--muted);line-height:1.35;
  transition:background .12s,color .12s}
.docs-a span{flex:none;font-size:.82rem;line-height:1;width:16px;text-align:center}
.docs-a:hover{background:var(--card2);color:var(--fg)}
.docs-a.on{background:var(--primary-s);color:var(--primary-txt);font-weight:600;
  border-color:color-mix(in srgb,var(--primary) 30%,transparent)}

.docs-art{background:var(--card);border:1px solid var(--line);
  border-radius:var(--rc);padding:22px 24px}
.docs-h{display:flex;align-items:flex-start;gap:13px;margin-bottom:15px}
.docs-ic{width:44px;height:44px;flex:none;display:grid;place-items:center;
  border-radius:13px;background:var(--primary-s);font-size:1.25rem;line-height:1}
.docs-t{flex:1;min-width:0}
.docs-t h2{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin-top:2px}
.docs-t .docs-cat{margin:0;color:var(--primary-txt)}
.docs-h .btn{flex:none;white-space:nowrap}
.docs-tip{margin-bottom:18px}
.docs-res{margin-bottom:18px;font-size:.85rem}

.docs-pasos{display:grid;gap:0}
.docs-p{position:relative;display:flex;gap:14px;padding:0 0 20px}
/* El hilo que une los pasos. El último no lo lleva. */
.docs-p::before{content:'';position:absolute;left:13px;top:30px;bottom:2px;width:1px;
  background:var(--line)}
.docs-p:last-child{padding-bottom:4px}
.docs-p:last-child::before{display:none}
.docs-n{position:relative;z-index:1;width:27px;height:27px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:var(--primary);color:#fff;
  font-size:.72rem;font-weight:700}
.docs-p>div{flex:1;min-width:0;padding-top:2px}
/* Ojo con la especificidad: el titulo es el <b> hijo directo del bloque.
   Un `.docs-p b` a secas tambien agarra las negritas que el formateador
   mete dentro del parrafo y las pone en display:block, partiendolo. */
.docs-p>div>b{display:block;font-size:.9rem;font-weight:600;margin-bottom:4px}
.docs-p p{font-size:.82rem;color:var(--muted);line-height:1.62}
.docs-p code{font-family:var(--mono,ui-monospace,monospace);font-size:.75rem;
  background:var(--card2);border:1px solid var(--line);border-radius:5px;
  padding:1px 5px;color:var(--fg)}
.docs-p p b{display:inline;color:var(--fg);font-weight:600}

.docs-pie{display:flex;align-items:center;justify-content:space-between;gap:13px;
  margin-top:20px;padding-top:15px;border-top:1px solid var(--line2)}
.docs-pie .lnk{text-decoration:none;font-size:.78rem}
.docs-pie .lnk:hover{text-decoration:underline}

@media(max-width:900px){
  .docs{grid-template-columns:1fr}
  .docs-nav{position:static;max-height:none}
  .docs-art{padding:16px}
}

/* ── El tour ───────────────────────────────────────────────────────────
   El recorte no recorta nada: es un div del tamaño del elemento con una
   sombra gigante alrededor. Todo lo de fuera queda oscuro y el hueco
   queda limpio, sin tener que calcular una máscara. */
#tour{position:fixed;inset:0;z-index:300}
.tour-fondo{position:absolute;inset:0;background:rgba(0,0,0,.68)}
.tour-foco{position:fixed;border-radius:12px;pointer-events:none;
  border:2px solid var(--primary);
  box-shadow:0 0 0 9999px rgba(0,0,0,.68),0 0 0 5px var(--primary-s);
  transition:left .18s,top .18s,width .18s,height .18s}

.tour-globo{position:fixed;width:min(330px,calc(100vw - 24px));
  background:var(--card);border:1px solid var(--line);border-radius:var(--rc);
  padding:15px 16px;box-shadow:0 10px 40px -8px rgba(0,0,0,.7);
  transition:left .18s,top .18s}
.tour-globo.centro{left:50%;top:50%;transform:translate(-50%,-50%);width:min(400px,calc(100vw - 24px))}
.tour-globo>.ibtn{position:absolute;top:8px;right:8px;width:26px;height:26px;font-size:.72rem}
.tour-globo b{display:block;font-size:.92rem;font-weight:700;
  margin-bottom:6px;padding-right:26px}
.tour-globo p{font-size:.8rem;color:var(--muted);line-height:1.6}
.tour-globo code{font-family:var(--mono,ui-monospace,monospace);font-size:.72rem;
  background:var(--card2);border-radius:4px;padding:1px 4px;color:var(--fg)}
.tour-globo p b{display:inline;color:var(--fg);font-weight:600;padding:0}
.tour-f{display:flex;align-items:center;gap:7px;margin-top:14px}
.tour-c{flex:1;font-size:.64rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--primary-txt)}

/* ── Las tres vistas del calendario ────────────────────────────────── */
.cal-vistas{display:flex;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--card2)}
.cal-vistas button{padding:7px 15px;font-size:.75rem;font-weight:700;
  color:var(--muted);background:none;border:0;transition:.13s}
.cal-vistas button.on{background:var(--primary);color:#fff}
.cal-vistas button:not(.on):hover{color:var(--fg)}

/* Día */
.dia-rej{display:grid;gap:1px}
.dia-f{display:flex;align-items:stretch;gap:11px;min-height:38px}
.dia-h{width:44px;flex:none;padding-top:9px;font-size:.68rem;color:var(--muted);
  font-variant-numeric:tabular-nums;text-align:right}
.dia-f.ahora .dia-h{color:var(--danger);font-weight:700}
.dia-hueco{flex:1;border-top:1px dashed var(--line2);display:flex;align-items:center;
  padding-left:11px;font-size:.7rem;color:transparent;cursor:pointer;
  transition:color .12s,background .12s;border-radius:var(--r)}
.dia-hueco:hover{color:var(--primary-txt);background:var(--primary-s)}
.dia-c{flex:1;display:flex;align-items:center;gap:9px;padding:8px 11px;
  border-radius:var(--r);background:var(--card2);
  border:1px solid var(--line);border-left:3px solid var(--primary)}
.dia-c b{font-size:.8rem}
.dia-c span{flex:1;font-size:.71rem;color:var(--muted)}
.dia-c.libre{background:none;border-style:dashed;border-left-color:var(--line)}
.dia-c.libre b{color:var(--muted);font-weight:500}
.dia-f.ahora .dia-c{box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 30%,transparent)}

/* Semana */
.sem{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.sem-c{background:var(--card2);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;min-height:130px;cursor:pointer;transition:border-color .12s}
.sem-c:hover{border-color:var(--primary)}
.sem-c.hoy{border-color:color-mix(in srgb,var(--primary) 55%,var(--line))}
.sem-c.sel{border-color:var(--primary);background:var(--primary-s)}
.sem-h{position:relative;padding:8px 9px 9px;border-bottom:1px solid var(--line);
  text-align:center}
.sem-h span{display:block;font-size:.6rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.sem-h b{font-size:1rem;font-variant-numeric:tabular-nums}
.sem-c.hoy .sem-h b{color:var(--primary-txt)}
.sem-h i{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--primary)}
.sem-b{padding:6px;display:grid;gap:4px}
.sem-i{padding:5px 7px;border-radius:6px;background:var(--card);
  border-left:2px solid var(--primary);font-size:.66rem;line-height:1.35}
.sem-i b{display:block;font-variant-numeric:tabular-nums}
.sem-i span{color:var(--muted);display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sem-v{font-size:.66rem;color:var(--muted);opacity:.5;text-align:center;padding:9px 0}

@media(max-width:900px){
  .sem{grid-template-columns:repeat(2,1fr)}
}


/* ═══ v34 · Viñetas en los pasos y aviso de prerequisito ═════════ */
.docs-p ul{margin:6px 0 0;padding-left:17px;display:grid;gap:4px}
.docs-p li{font-size:.82rem;color:var(--muted);line-height:1.55}
.docs-p li::marker{color:var(--primary)}
.docs-p a,.tour-globo a{color:var(--primary-txt);text-decoration:underline}

.tour-globo ul{margin:5px 0 0;padding-left:16px;display:grid;gap:3px}
.tour-globo li{font-size:.78rem;color:var(--muted);line-height:1.5}
.tour-pre{margin-bottom:8px;padding:7px 9px;border-radius:var(--r);
  background:var(--warn-bg);border:1px solid color-mix(in srgb,var(--warn) 26%,transparent);
  font-size:.72rem;color:var(--warn);line-height:1.45}
.tour-pre b{display:inline;color:var(--warn);font-weight:700;padding:0;font-size:inherit}

/* ═══ v35 · Conectar con Meta ═════════════════════════════════════════ */

.cx-gar{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.cx-g{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;
  border-radius:var(--rc);background:var(--card);border:1px solid var(--line)}
.cx-g-ic{font-size:1.1rem;line-height:1;flex:none;margin-top:1px}
.cx-g div{display:grid;gap:3px;min-width:0}
.cx-g b{font-size:.82rem;font-weight:600}
.cx-g span{font-size:.71rem;color:var(--muted);line-height:1.5}

.cx-caminos{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.cx-c{position:relative;display:grid;gap:9px;align-content:start;
  padding:20px;border-radius:var(--rc);
  background:var(--card);border:1px solid var(--line)}
.cx-c.rec{border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 13%,transparent)}
.cx-rec{position:absolute;top:-9px;left:20px;padding:3px 10px;border-radius:999px;
  background:var(--primary);color:#fff;font-size:.62rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.cx-c-ic{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
  background:var(--card2);border:1px solid var(--line);font-size:1.15rem;line-height:1}
.cx-c.rec .cx-c-ic{background:var(--primary-s);border-color:transparent}
.cx-c>b{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.cx-c p{font-size:.79rem;color:var(--muted);line-height:1.6}
.cx-c p b{color:var(--fg);font-weight:600}
.cx-c ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.cx-c li{position:relative;padding-left:20px;font-size:.76rem;color:var(--muted);
  line-height:1.45}
.cx-c li::before{content:'✓';position:absolute;left:0;top:0;
  color:var(--ok);font-weight:700;font-size:.72rem}
.cx-c .btn{margin-top:4px;justify-content:center}

.cx-nos .ia-rieles{border-radius:var(--r)}

/* El alta simulada */
#cx-meta .modal-c{max-width:520px}
.docs-p.aqui .docs-n{box-shadow:0 0 0 3px var(--primary-s)}
.cx-listo{text-align:center;padding:6px 0 16px}
.cx-listo span{font-size:1.7rem;line-height:1;display:block;margin-bottom:7px}
.cx-listo b{display:block;font-size:1rem;margin-bottom:5px}
.cx-listo p{font-size:.78rem;color:var(--muted);line-height:1.6;
  max-width:42ch;margin:0 auto}

@media(max-width:900px){
  .cx-gar,.cx-caminos{grid-template-columns:1fr}
}


/* ═══ v36 · Importar contactos y duplicados ═══════════════════════════ */

#imp .modal-c{max-width:760px}
#imp .modal-b{display:block}

.imp-pasos{display:flex;align-items:center;gap:5px;margin-bottom:17px;
  flex-wrap:wrap}
.imp-p{display:flex;align-items:center;gap:7px;padding:6px 11px 6px 6px;
  border-radius:999px;font-size:.73rem;font-weight:600;color:var(--muted);
  background:var(--card2);border:1px solid var(--line)}
.imp-p i{width:19px;height:19px;flex:none;display:grid;place-items:center;
  border-radius:50%;background:var(--line);color:var(--muted);
  font-size:.62rem;font-weight:700;font-style:normal}
.imp-p.on{color:var(--fg);border-color:var(--primary)}
.imp-p.on i{background:var(--primary);color:#fff}
.imp-p.hecho i{background:var(--ok);color:var(--bg)}

.imp-zona{display:grid;place-items:center;gap:5px;width:100%;padding:34px 20px;
  border-radius:var(--rc);background:var(--card2);
  border:1px dashed var(--line);transition:border-color .13s,background .13s}
.imp-zona:hover{border-color:var(--primary);background:var(--primary-s)}
.imp-zona span{font-size:1.6rem;line-height:1;color:var(--muted)}
.imp-zona b{font-size:.9rem}
.imp-zona i{font-size:.73rem;color:var(--muted);font-style:normal}

.imp-tips{margin-top:14px;padding:13px 15px;border-radius:var(--rc);
  background:var(--card2);border:1px solid var(--line)}
.imp-tips>b{display:block;font-size:.76rem;margin-bottom:8px}
.imp-tips ul{margin:0 0 11px;padding-left:17px;display:grid;gap:5px}
.imp-tips li{font-size:.75rem;color:var(--muted);line-height:1.55}
.imp-tips li b{color:var(--fg);font-weight:600}
.imp-tips .mono{background:var(--card);border-radius:4px;padding:1px 4px;
  font-size:.7rem;color:var(--danger)}

.imp-map{display:grid;gap:6px;max-height:44vh;overflow-y:auto;padding-right:2px}
.imp-fila{display:flex;align-items:center;gap:11px;padding:9px 11px;
  border-radius:var(--r);background:var(--card2);border:1px solid var(--line)}
.imp-col{flex:1;min-width:0;display:grid;gap:2px}
.imp-col b{font-size:.78rem;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.imp-col i{font-size:.68rem;color:var(--muted);font-style:normal;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-fl{flex:none;color:var(--muted);font-size:.8rem}
.imp-fila .inp{width:190px;flex:none;font-size:.75rem;padding:7px 26px 7px 10px}

/* ── Duplicados ────────────────────────────────────────────────────── */
.dup-g{padding:13px;margin-bottom:9px;border-radius:var(--rc);
  background:var(--card2);border:1px solid var(--line)}
.dup-h{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.dup-h .mono{flex:1;min-width:0;font-size:.8rem;font-weight:600}
.dup-c{display:flex;align-items:center;gap:9px;padding:8px 10px;
  margin-bottom:5px;border-radius:var(--r);background:var(--card);
  border:1px solid var(--line2)}
.dup-c .m b{font-size:.79rem}
.dup-c .m span{font-size:.7rem;color:var(--muted)}
.dup-g .mini{margin:6px 0 0}

.btn.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.btn.warn:hover{background:var(--warn-bg)}

@media(max-width:700px){
  .imp-fila{flex-wrap:wrap}
  .imp-fila .inp{width:100%}
}


/* ═══ v37 · Historial, auto-asignación y razón de pérdida ═════════════ */

/* ── Quién lo movió ────────────────────────────────────────────────── */
.hist{display:grid;gap:0}
.hist-r{position:relative;display:flex;gap:13px;padding:11px 0 11px 3px;
  border-bottom:1px solid var(--line2)}
.hist-r:last-child{border-bottom:0}
.hist-t{width:112px;flex:none;font-size:.71rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
.hist-m{flex:1;min-width:0;font-size:.79rem;line-height:1.5}
.hist-m b{font-weight:600}
.hist-m i{display:block;font-size:.7rem;color:var(--muted);font-style:normal;
  margin-top:2px}

/* ── El editor de etapas ───────────────────────────────────────────── */
#et-ed .modal-c{max-width:540px}
#et-ed .modal-b{display:block}
.et-c{padding:13px;margin-bottom:9px;border-radius:var(--rc);
  background:var(--card2);border:1px solid var(--line)}
.et-c .op-fila{margin-bottom:0}
.et-n{width:26px;height:26px;flex:none;display:grid;place-items:center;
  border-radius:8px;color:#fff;font-size:.72rem;font-weight:700}
.et-auto{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line)}
.et-p{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.et-p .inp{flex:1;min-width:0;font-size:.75rem;padding:7px 10px}
.et-p .inp.num{flex:none;width:64px;text-align:right;
  font-variant-numeric:tabular-nums}
.et-pc{font-size:.73rem;color:var(--muted);margin-right:2px}
.et-p .ibtn{width:26px;height:26px;flex:none;font-size:.68rem}
.et-p .ibtn.mal:hover{color:var(--danger);background:var(--danger-bg)}
.et-sum{margin:7px 0 9px;font-size:.71rem;font-weight:600;color:var(--warn)}
.et-sum.ok{color:var(--ok)}


/* ═══ v38 · Campañas en curso ═════════════════════════════════════════ */
.camp-btns{display:flex;gap:5px;margin-top:6px;justify-content:flex-end}
.camp-barra.pausa i{background:var(--warn)}
.camp-m em.warn{color:var(--warn)}
.chip.info{background:var(--primary-s);color:var(--primary-txt)}

/* ═══ v40 · Ajustes en pestañas ═══════════════════════════════════════ */

/* Las pestañas: una barra, que en el teléfono se desliza de lado */
.aj-tabs{display:flex;width:fit-content;max-width:100%;gap:3px;padding:4px;margin:-4px 0 22px;
  overflow-x:auto;scrollbar-width:none;background:var(--card);border:1px solid var(--line);
  border-radius:calc(var(--r) + 4px);box-shadow:var(--sombra)}
.aj-tabs::-webkit-scrollbar{display:none}
.aj-tab{flex:none;display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r);
  font-size:.8rem;font-weight:500;color:var(--muted);white-space:nowrap;
  transition:background .12s,color .12s}
.aj-tab .ic{width:15px;height:15px;flex:none}
.aj-tab:hover{color:var(--fg);background:var(--card2)}
.aj-tab.on{background:var(--primary-s);color:var(--primary-txt);font-weight:600}
.aj-tab:focus-visible,.aj-tema:focus-visible,.aj-fondo:focus-visible,.aj-rol:focus-visible,
.perm-tab:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.aj-cuerpo{display:grid;gap:18px}
.aj-cuerpo>*{min-width:0}
.aj-cuerpo td.sub,.aj-cuerpo .tabla .sub{color:var(--muted);font-size:.78rem}
.aj-sec-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:13px}
.aj-sec-h>div:first-child{flex:1;min-width:220px;display:grid;gap:2px}
.aj-sec-h>div>b{font-family:var(--display);font-size:1.02rem;font-weight:600;letter-spacing:-.02em}
.aj-sec-h>div>span{font-size:.78rem;color:var(--muted)}
.aj-cupo{font-size:.72rem;font-weight:600;color:var(--muted);padding:5px 11px;border-radius:999px;
  background:var(--card2);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.aj-cupo.lleno{color:var(--warn);background:var(--warn-bg);
  border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}
.aj-cuerpo .ibtn.mal:hover{color:var(--danger);background:var(--danger-bg)}
button.chip{cursor:pointer;border:0;font-family:inherit}
button.chip:hover{filter:brightness(1.15)}

.btn.peligro{background:var(--danger);color:#fff}
.btn.peligro:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.modal-c.ancho{max-width:560px}
.aj-q{grid-template-columns:minmax(0,1fr)}
.aj-q p{font-size:.82rem;line-height:1.6}
.aj-q .aj-dl{margin:0}
.aj-q .ia-riel .btn{justify-self:start}
.aj-lista{margin:0;padding-left:18px;display:grid;gap:4px;font-size:.82rem}
.aj-menu{width:226px}

/* ── Números ─────────────────────────────────────────────────────────── */
.aj-nums{display:grid;gap:12px}
.aj-num{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:16px;
  align-items:center;padding:16px 18px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rc);box-shadow:var(--sombra);overflow:hidden}
.aj-num.caido{border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.aj-num.caido::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--danger)}
.aj-num-ic{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;
  background:color-mix(in srgb,#25d366 15%,var(--card2));color:#25d366}
.aj-num.caido .aj-num-ic{background:var(--danger-bg);color:var(--danger)}
.aj-num-ic .ic{width:20px;height:20px}
.aj-num-m{display:grid;gap:3px;min-width:0}
.aj-num-m>b{font-size:.93rem;font-weight:600}
.aj-num-m>.mono{color:var(--muted)}
.aj-chips{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 2px}
.aj-num-d{display:grid;gap:9px;margin:0;min-width:150px}
.aj-num-d div{display:grid;gap:1px}
.aj-num-d dt{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.aj-num-d dd{margin:0;font-size:.82rem;font-weight:600;font-variant-numeric:tabular-nums}
.aj-num-acc{display:flex;align-items:center;gap:6px;align-self:start}
@media(max-width:760px){
  .aj-num{grid-template-columns:auto minmax(0,1fr) auto}
  .aj-num-d{grid-column:2/-1;grid-row:2;grid-template-columns:1fr 1fr}
}

/* ── Equipo ──────────────────────────────────────────────────────────── */
.aj-eq td{padding-top:12px;padding-bottom:12px}
.aj-per{display:flex;align-items:center;gap:11px;min-width:0}
.aj-per .av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#fff;font-size:.72rem;font-weight:700;overflow:hidden}
.aj-per>span{display:grid;gap:1px;min-width:0}
.aj-per b{font-size:.82rem;font-weight:600;white-space:nowrap}
.aj-per em{font-style:normal;font-size:.72rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aj-tu{font-style:normal;font-size:.6rem;font-weight:700;color:var(--primary-txt);background:var(--primary-s);
  padding:1px 7px;border-radius:999px;margin-left:4px;vertical-align:1px}
.aj-eq tr.yo td{background:color-mix(in srgb,var(--primary-s) 45%,transparent)}
.av.con-foto{padding:0;overflow:hidden;background:var(--card2)}
.av.con-foto img,.aj-foto-av.con-foto img{width:100%;height:100%;object-fit:cover;display:block}

.aj-roles{display:grid;gap:7px}
.aj-rol{display:grid;gap:2px;text-align:left;padding:10px 12px;border-radius:var(--r);
  background:var(--card2);border:1px solid var(--line);transition:border-color .12s,background .12s}
.aj-rol b{font-size:.8rem;font-weight:600}
.aj-rol i{font-size:.7rem;font-style:normal;color:var(--muted);line-height:1.45}
.aj-rol:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
.aj-rol.on{border-color:var(--primary);background:var(--primary-s)}

.aj-liga{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;margin-bottom:10px;
  border-radius:var(--r);background:var(--card2);border:1px solid var(--line)}
.aj-liga .mono{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem}
.aj-inst-p{max-width:72ch;margin-bottom:12px}
.aj-inst-b{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.aj-inst-b .btn{justify-content:center}
@media(max-width:640px){.aj-inst-b{grid-template-columns:1fr}}

/* Permisos: navegación a la izquierda, lo de cada pestaña a la derecha */
#perm-ed .modal-c{max-width:760px;height:min(640px,88vh);max-height:88vh}
#perm-ed .modal-b{display:block;padding:0;flex:1;min-height:0;overflow:hidden}
#perm-ed .perm-ver{margin-right:auto}
.perm-w{display:grid;grid-template-columns:186px minmax(0,1fr);height:100%}
.perm-nav{display:grid;align-content:start;gap:3px;padding:14px 10px;
  border-right:1px solid var(--line2);background:var(--card2)}
.perm-tab{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r);
  font-size:.79rem;font-weight:500;color:var(--muted);text-align:left;white-space:nowrap}
.perm-tab:hover{color:var(--fg);background:var(--card)}
.perm-tab.on{color:var(--primary-txt);background:var(--primary-s);font-weight:600}
.perm-tab em{margin-left:auto;font-style:normal;font-size:.64rem;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums}
.perm-p{padding:18px 20px;overflow-y:auto;min-height:0}
.perm-h{display:grid;gap:3px;margin-bottom:12px}
.perm-h b{font-size:.92rem;font-weight:600}
.perm-h>span{font-size:.75rem;color:var(--muted);line-height:1.5}
.perm-rap{display:flex;gap:14px;margin-top:5px}
.perm-rap .lnk{margin-left:0}
.perm-ic{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:8px;
  background:var(--card);color:var(--muted);font-size:.8rem}
.perm-ic .ic{width:15px;height:15px}
.perm-ic.grande{width:46px;height:46px;font-size:1.3rem;border-radius:13px}
.perm-punto{width:10px;height:10px;border-radius:50%;display:block}
.perm-chk{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:6px;
  border:1.5px solid var(--line);font-size:.7rem;font-weight:700;color:#fff}
.ia-h.on .perm-chk{background:var(--primary);border-color:var(--primary)}
.perm-dias{display:grid;gap:6px;margin:12px 0 4px}
.perm-dia{display:grid;grid-template-columns:86px auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  gap:8px;font-size:.78rem}
.perm-dia b{font-weight:600}
.perm-dia .inp{padding:6px 9px;font-size:.78rem}
.perm-dia.off b{color:var(--muted)}
.perm-vis{display:flex;gap:13px;align-items:flex-start;padding:15px;border-radius:var(--rc);
  border:1px solid var(--line);background:var(--card2);transition:border-color .12s,background .12s}
.perm-vis.on{border-color:var(--primary);background:var(--primary-s)}
.perm-vis b{display:block;font-size:.84rem;font-weight:600;margin-bottom:4px}
.perm-vis p{font-size:.76rem;color:var(--muted);line-height:1.55}
.perm-admin{display:grid;place-items:center;align-content:center;text-align:center;gap:9px;
  padding:48px 30px;height:100%}
.perm-admin .mini{max-width:44ch}
@media(max-width:640px){
  .perm-w{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .perm-nav{grid-auto-flow:column;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line2)}
  .perm-dia{grid-template-columns:70px auto minmax(0,1fr) auto minmax(0,1fr)}
}
.hk-ev{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
@media(max-width:560px){.hk-ev{grid-template-columns:1fr}}

/* La barra de "así lo ve" */
.vc-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-6px 0 20px;padding:11px 15px;
  border-radius:var(--rc);background:var(--purple-s);
  border:1px solid color-mix(in srgb,var(--purple) 40%,var(--line));box-shadow:var(--sombra)}
.vc-barra>span{font-size:1.1rem}
.vc-barra>div{flex:1;min-width:220px;display:grid;gap:1px}
.vc-barra b{font-size:.84rem;font-weight:600}
.vc-barra i{font-style:normal;font-size:.72rem;color:var(--muted)}

/* ── General ─────────────────────────────────────────────────────────── */
.aj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.aj-grid>*{min-width:0}
.aj-grid>.full{grid-column:1/-1}
@media(max-width:980px){.aj-grid{grid-template-columns:minmax(0,1fr)}}
.aj-perfil{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.aj-foto-av{width:76px;height:76px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--display);font-size:1.5rem;font-weight:600;color:#fff;overflow:hidden;
  box-shadow:0 0 0 4px var(--card2)}
.aj-perfil-d{flex:1;min-width:210px;display:grid;gap:11px}
.aj-foto-b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.aj-temas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.aj-tema{display:grid;gap:3px;align-content:start;text-align:left;padding:8px 8px 11px;
  border-radius:var(--rc);border:1px solid var(--line);background:var(--card2);
  transition:border-color .12s,box-shadow .12s}
.aj-tema:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
.aj-tema.on{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.aj-tema b{font-size:.8rem;font-weight:600;margin-top:7px;padding:0 3px}
.aj-tema>span:last-child{font-size:.68rem;color:var(--muted);padding:0 3px;line-height:1.4}
/* Las miniaturas pintan cada tema con sus colores fijos: enseñan cómo se
   ve el otro tema, no el que está puesto. */
.aj-tema-m{height:62px;border-radius:9px;overflow:hidden;display:grid;padding:6px;gap:5px;
  grid-template-columns:24% 1fr;grid-template-rows:1fr 9px;border:1px solid rgba(128,128,128,.28)}
.aj-tema-m i{border-radius:4px;display:block}
.aj-tema-m i:nth-child(1){grid-row:1/3}
.aj-tema-m i:nth-child(3){width:42%}
.t-claro{background:#f5f6f9}
.t-claro i:nth-child(1),.t-claro i:nth-child(2){background:#fff;box-shadow:0 1px 2px rgba(18,22,32,.08)}
.t-claro i:nth-child(3){background:#1d6bff}
.t-oscuro{background:#0b0e13}
.t-oscuro i:nth-child(1){background:#0d1117;box-shadow:inset 0 0 0 1px #242c38}
.t-oscuro i:nth-child(2){background:#141922}
.t-oscuro i:nth-child(3){background:#3b82f6}
.t-auto{background:linear-gradient(135deg,#f5f6f9 50%,#0b0e13 50%)}
.t-auto i:nth-child(1),.t-auto i:nth-child(2){background:linear-gradient(135deg,#fff 50%,#141922 50%)}
.t-auto i:nth-child(3){background:#3b82f6}

.aj-fondos-w{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:20px;align-items:start}
@media(max-width:820px){.aj-fondos-w{grid-template-columns:minmax(0,1fr)}}
.aj-fondos{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:10px}
.aj-fondo{display:grid;gap:5px;text-align:center;font-size:.7rem;color:var(--muted)}
.aj-fondo b{font-weight:600}
.aj-fondo .fd{display:grid;place-items:center;height:56px;border-radius:10px;border:1px solid var(--line);
  font-size:1.05rem;color:var(--muted);background-size:cover;background-position:center;
  transition:border-color .12s,box-shadow .12s}
.aj-fondo:hover .fd{border-color:color-mix(in srgb,var(--primary) 45%,var(--line))}
.aj-fondo.on .fd{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.aj-fondo.on b{color:var(--fg)}
.fd-subir{border-style:dashed!important;background-color:var(--card2)}
.aj-fondo-prev{display:grid;gap:6px;justify-items:center}
.aj-fondo-prev .chat-b{width:100%;height:176px;flex:none;max-height:none;border-radius:var(--rc);
  border:1px solid var(--line);padding:14px 12px;overflow:hidden}
.aj-fondo-prev .msg{max-width:88%}

/* Los fondos: la misma regla pinta la miniatura y el chat de verdad.
   Todo va sobre --card2 y con color-mix, para que sirva en los dos temas. */
.fd-liso,html[data-fondo="liso"] .chat-b{background:var(--chat-bg)}
.fd-puntos,html[data-fondo="puntos"] .chat-b{
  background:radial-gradient(var(--chat-pt) 1.2px,transparent 1.7px) 0 0/18px 18px,var(--chat-bg)}
.fd-cuadros,html[data-fondo="cuadros"] .chat-b{
  background:linear-gradient(color-mix(in srgb,var(--fg) 7%,transparent) 1px,transparent 1px) 0 0/22px 22px,
    linear-gradient(90deg,color-mix(in srgb,var(--fg) 7%,transparent) 1px,transparent 1px) 0 0/22px 22px,var(--chat-bg)}
.fd-rayas,html[data-fondo="rayas"] .chat-b{
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--fg) 6%,transparent) 0 2px,transparent 2px 13px),var(--chat-bg)}
.fd-menta,html[data-fondo="menta"] .chat-b{
  background:radial-gradient(color-mix(in srgb,#34d399 36%,transparent) 1.2px,transparent 1.8px) 0 0/18px 18px,
    color-mix(in srgb,#34d399 10%,var(--chat-bg))}
.fd-lavanda,html[data-fondo="lavanda"] .chat-b{
  background:repeating-linear-gradient(45deg,color-mix(in srgb,#a78bfa 14%,transparent) 0 2px,transparent 2px 14px),
    color-mix(in srgb,#a78bfa 10%,var(--chat-bg))}
.fd-durazno,html[data-fondo="durazno"] .chat-b{
  background:linear-gradient(color-mix(in srgb,#fb923c 12%,transparent) 1px,transparent 1px) 0 0/20px 20px,
    linear-gradient(90deg,color-mix(in srgb,#fb923c 12%,transparent) 1px,transparent 1px) 0 0/20px 20px,
    color-mix(in srgb,#fb923c 9%,var(--chat-bg))}
.fd-confeti,html[data-fondo="confeti"] .chat-b{
  background-color:var(--chat-bg);background-size:46px 46px;
  background-image:
    radial-gradient(circle at 20% 30%,color-mix(in srgb,#f472b6 60%,transparent) 1.6px,transparent 2.3px),
    radial-gradient(circle at 70% 62%,color-mix(in srgb,#60a5fa 60%,transparent) 1.6px,transparent 2.3px),
    radial-gradient(circle at 44% 86%,color-mix(in srgb,#fbbf24 60%,transparent) 1.6px,transparent 2.3px),
    radial-gradient(circle at 86% 14%,color-mix(in srgb,#34d399 60%,transparent) 1.6px,transparent 2.3px)}
html[data-fondo="propia"] .chat-b{
  background:linear-gradient(color-mix(in srgb,var(--chat-bg) 45%,transparent),color-mix(in srgb,var(--chat-bg) 45%,transparent)),
    var(--fondo-img) center/cover,var(--chat-bg)}

.aj-slug{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.aj-slug .ibtn{width:28px;height:28px;font-size:.85rem}

.aj-uso-plan{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.aj-usos{display:grid;gap:13px}
.aj-uso{display:grid;gap:5px}
.aj-uso-h{display:flex;justify-content:space-between;gap:10px;font-size:.78rem}
.aj-uso-h b{font-weight:500}
.aj-uso-h span{color:var(--muted);font-variant-numeric:tabular-nums}
.aj-uso-b{height:6px;border-radius:99px;background:var(--card2);overflow:hidden}
.aj-uso-b i{display:block;height:100%;border-radius:inherit;background:var(--primary)}
.aj-uso.alto .aj-uso-b i{background:var(--warn-solid)}
.aj-uso.alto .aj-uso-h span{color:var(--warn);font-weight:600}

/* ── Facturación ─────────────────────────────────────────────────────── */
.aj-banda{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}
.aj-banda>span{flex:1;min-width:240px}
.aj-fac-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:stretch}
@media(max-width:980px){.aj-fac-top{grid-template-columns:minmax(0,1fr)}}
.aj-eyebrow{font-size:.63rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.aj-plan-n{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:15px}
.aj-plan-n h2{font-size:1.75rem;font-weight:600;letter-spacing:-.04em;line-height:1}
.aj-inc{list-style:none;display:grid;gap:7px;margin:0 0 17px;padding:0}
.aj-inc li{position:relative;padding-left:22px;font-size:.8rem;line-height:1.5;color:var(--muted)}
.aj-inc li b{color:var(--fg);font-weight:600}
.aj-inc li::before{content:'✓';position:absolute;left:0;top:0;color:var(--ok);font-weight:700}
.aj-plan-acc{display:flex;gap:8px;flex-wrap:wrap}
.aj-monto{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.aj-monto b{font-family:var(--display);font-size:1.95rem;font-weight:600;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.aj-monto span{font-size:.8rem;color:var(--muted)}
.aj-dl{display:grid;gap:7px;margin:0 0 14px;padding:12px 0;border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line2)}
.aj-dl div{display:flex;justify-content:space-between;gap:12px;font-size:.78rem}
.aj-dl dt{color:var(--muted)}
.aj-dl dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.aj-dl .tot{padding-top:8px;border-top:1px dashed var(--line)}
.aj-dl .tot dt,.aj-dl .tot dd{color:var(--fg);font-weight:700}
.aj-tarj-min{display:flex;align-items:center;gap:9px;font-size:.78rem;margin-bottom:10px}
.aj-marca{width:44px;height:29px;flex:none;border-radius:6px;display:grid;place-items:center;
  font-size:.6rem;font-weight:800;letter-spacing:.05em;color:#fff;
  background:linear-gradient(135deg,#1a1f71,#2d44c4)}
.aj-marca.mc{background:linear-gradient(135deg,#d6001a,#f59b1b)}
.aj-tarj-min .aj-marca{width:34px;height:23px;font-size:.52rem}
.aj-pie-seg{padding:11px 16px;border-top:1px solid var(--line2);font-size:.72rem;color:var(--muted);text-align:center}

.aj-compl{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:11px}
.aj-c{display:grid;gap:7px;grid-template-rows:auto 1fr auto;padding:14px;border-radius:var(--rc);
  background:var(--card2);border:1px solid var(--line)}
.aj-c.tiene{border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.aj-c.pronto{border-style:dashed}
.aj-c-h{display:flex;align-items:center;gap:9px}
.aj-c-h b{flex:1;min-width:0;font-size:.84rem;font-weight:600}
.aj-c-ic{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;
  background:var(--card);font-size:.9rem}
.aj-c p{font-size:.74rem;color:var(--muted);line-height:1.5}
.aj-c-p{display:flex;align-items:center;gap:8px;margin-top:3px}
.aj-c-p b{font-family:var(--display);font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums}
.aj-c-p>span{flex:1;font-size:.7rem;color:var(--muted)}

.aj-meta-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;margin-bottom:16px}
@media(max-width:700px){.aj-meta-top{grid-template-columns:minmax(0,1fr)}}
.aj-meta-tot{display:grid;gap:1px;padding:14px 18px;border-radius:var(--rc);background:var(--card2);
  border:1px solid var(--line);min-width:190px}
.aj-meta-tot span{font-size:.63rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.aj-meta-tot b{font-family:var(--display);font-size:1.6rem;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.aj-meta-tot i{font-style:normal;font-size:.72rem;color:var(--muted)}
.aj-meta-top p{font-size:.8rem;color:var(--muted);line-height:1.65;max-width:64ch}
.aj-meta-top p b{color:var(--fg)}
.aj-meta-t td.sub{max-width:34ch}
.aj-meta-t .sub{font-size:.72rem;line-height:1.4}
/* En el celular la tabla de Meta cabe completa: el subtotal es lo que importa. */
@media(max-width:560px){
  .aj-meta-t th,.aj-meta-t td{padding-left:6px;padding-right:6px}
  .aj-meta-t th:first-child,.aj-meta-t td:first-child{padding-left:2px}
  .aj-meta-t th:last-child,.aj-meta-t td:last-child{padding-right:2px}
}

.aj-vacio{display:grid;justify-items:center;text-align:center;gap:6px;padding:22px 16px}
.aj-vacio b{font-size:.88rem}
.aj-vacio span{font-size:.76rem;color:var(--muted);max-width:52ch;line-height:1.55}
.aj-vacio .btn{margin-top:6px}
.df-err{color:var(--danger);font-size:.76rem;font-weight:600;min-height:1.2em}
.df-err:empty{display:none}
.aj-fecha{white-space:nowrap}
.aj-motivo{display:block;font-size:.7rem;color:var(--danger);margin-top:3px;max-width:52ch;line-height:1.45}
.aj-pagos td:nth-child(2) b{font-weight:500}
.aj-cancelar{text-align:center;padding:2px 0 6px}
.aj-cancelar .lnk{color:var(--muted);font-size:.74rem}

#plan-ed .modal-c{max-width:880px}
#plan-ed .modal-b{display:block}
.aj-planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:760px){.aj-planes{grid-template-columns:minmax(0,1fr)}}
.aj-pl{display:grid;gap:9px;align-content:start;padding:16px;border-radius:var(--rc);
  border:1px solid var(--line);background:var(--card2)}
.aj-pl.actual{border-color:var(--primary);background:var(--primary-s)}
.aj-pl-h{display:flex;align-items:center;gap:8px}
.aj-pl h3{font-size:1.1rem}
.aj-pl-p{font-family:var(--display);font-size:1.45rem;font-weight:600;font-variant-numeric:tabular-nums}
.aj-pl-p span{font-family:var(--ui);font-size:.72rem;font-weight:500;color:var(--muted)}
.aj-pl ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.aj-pl li{font-size:.76rem;color:var(--muted);padding-left:18px;position:relative}
.aj-pl li::before{content:'✓';position:absolute;left:0;color:var(--ok);font-weight:700}
.aj-pl .btn{justify-content:center;margin-top:4px}

/* La factura se pinta como papel, clara aunque el panel esté oscuro:
   es un documento, no una pantalla del panel. */
#fac-ver .modal-c{max-width:620px}
#fac-ver .modal-b{display:grid;gap:11px}
.fac-hoja{padding:22px 24px;border-radius:var(--r);background:#fff;color:#16181d;font-size:.78rem;line-height:1.5;
  border:1px solid #e3e6eb}
.fac-top{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:2px solid #16181d}
.fac-top>div{display:grid;gap:2px}
.fac-marca{font-family:var(--display);font-size:1.3rem;letter-spacing:-.03em;color:#16181d}
.fac-top span{font-size:.7rem;color:#5b6270}
.fac-folio{text-align:right}
.fac-folio b{font-family:var(--mono);font-size:.9rem;color:#16181d}
.fac-demo{margin:12px 0;padding:6px 10px;border-radius:6px;background:#fff4d6;color:#7a5200;
  font-size:.7rem;font-weight:700;text-align:center;letter-spacing:.02em}
.fac-rec{display:grid;gap:2px;margin-bottom:14px}
.fac-rec span{font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#5b6270}
.fac-rec b{font-size:.86rem;color:#16181d}
.fac-rec i{font-style:normal;font-size:.72rem;color:#3d434d}
.fac-t{width:100%;border-collapse:collapse}
.fac-t th{text-align:left;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#5b6270;
  padding:7px 0;border-bottom:1px solid #d7dbe1}
.fac-t td{padding:8px 0;border-bottom:1px solid #eceff3;color:#16181d}
.fac-t .der{text-align:right;font-variant-numeric:tabular-nums}
.fac-t tfoot td{border:0;padding:4px 0;color:#3d434d}
.fac-t tfoot .tot td{padding-top:8px;border-top:2px solid #16181d;font-weight:700;font-size:.9rem;color:#16181d}
.fac-uuid{display:grid;gap:2px;margin-top:14px;padding-top:12px;border-top:1px dashed #d7dbe1}
.fac-uuid span{font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#5b6270}
.fac-uuid code{font-size:.74rem;color:#16181d;word-break:break-all}
@media print{
  html.fac-print body>*:not(#fac-ver){display:none!important}
  html.fac-print #fac-ver.modal{display:block!important;position:static;inset:auto;background:none;
    backdrop-filter:none;padding:0}
  html.fac-print #fac-ver .modal-c{max-width:none;max-height:none;box-shadow:none;border:0;background:#fff}
  html.fac-print #fac-ver .modal-h,html.fac-print #fac-ver .modal-f,html.fac-print #fac-ver .mini{display:none!important}
  html.fac-print #fac-ver .modal-b{padding:0;overflow:visible}
  html.fac-print .fac-hoja{border:0;padding:0}
}

/* ── Canales ─────────────────────────────────────────────────────────── */
.aj-canales{display:grid;gap:13px}
.aj-canal{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:start;padding:18px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--rc);box-shadow:var(--sombra)}
.aj-canal.pronto{box-shadow:none;border-style:dashed;background:transparent}
.aj-canal-ic{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;font-size:1.15rem;
  font-weight:700;background:color-mix(in srgb,var(--c) 15%,var(--card2));color:var(--c)}
.aj-canal-m{display:grid;gap:4px;min-width:0}
.aj-canal-m>b{font-size:.94rem;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aj-canal-m>p{font-size:.78rem;color:var(--muted);line-height:1.55;max-width:70ch}
.aj-canal-m>p b{color:var(--fg)}
.aj-canal-x{display:grid;gap:11px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line2)}
.aj-canal .au-sw{margin:0}
.aj-canal-sel{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:-4px 0 0 48px;
  font-size:.74rem;color:var(--muted)}
.aj-canal-sel .inp{width:auto;padding:6px 10px;font-size:.78rem}
@media(max-width:640px){
  .aj-canal{grid-template-columns:auto minmax(0,1fr)}
  .aj-canal>.btn{grid-column:1/-1;justify-self:start}
  .aj-canal-sel{margin-left:0}
}

/* ── Desarrolladores ─────────────────────────────────────────────────── */
.hook-u{font-family:var(--mono);font-size:.76rem!important;font-weight:500!important;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.api-k{display:flex;align-items:center;gap:9px;padding:9px 9px 9px 13px;border-radius:var(--r);
  background:var(--card2);border:1px dashed color-mix(in srgb,var(--primary) 45%,var(--line))}
.api-k code{flex:1;min-width:0;overflow-wrap:anywhere;font-size:.75rem}
.api-pre{margin:0;padding:12px 14px;border-radius:var(--r);background:#0a0d12;color:#cfe3ff;
  font-family:var(--mono);font-size:.71rem;line-height:1.65;overflow-x:auto;white-space:pre;tab-size:2}
.api-pre.res{color:#b6f0c8}
.api-grupo{margin:18px 0 7px;font-size:.63rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.api-e{border:1px solid var(--line);border-radius:var(--r);background:var(--card2);margin-bottom:6px}
.api-e summary{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;list-style:none;
  font-size:.78rem;border-radius:var(--r)}
.api-e summary::-webkit-details-marker{display:none}
.api-e summary::after{content:'›';flex:none;margin-left:8px;color:var(--muted);font-size:1rem;line-height:1;
  transition:transform .15s}
.api-e[open] summary::after{transform:rotate(90deg)}
.api-e summary:hover{background:color-mix(in srgb,var(--primary) 6%,transparent)}
.api-e summary:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.api-e summary code{font-size:.76rem;font-weight:600;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.api-sum{flex:1;min-width:0;font-size:.76rem;font-weight:600}
.api-e summary>span:last-of-type{flex:1;min-width:0;text-align:right;color:var(--muted);font-size:.73rem}
.api-m{flex:none;min-width:54px;text-align:center;padding:2px 7px;border-radius:6px;
  font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.03em}
.api-m.get{background:var(--ok-bg);color:var(--ok)}
.api-m.post{background:var(--primary-s);color:var(--primary-txt)}
.api-m.patch{background:var(--warn-bg);color:var(--warn)}
.api-m.delete{background:var(--danger-bg);color:var(--danger)}
.api-x{display:grid;gap:8px;padding:2px 12px 12px;grid-template-columns:minmax(0,1fr)}
.api-x p{font-size:.74rem;color:var(--muted);line-height:1.55}
.api-x p b,.api-x p code{color:var(--fg)}
.api-params{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.api-params div{padding:10px 12px;border-radius:var(--r);background:var(--card2);border:1px solid var(--line)}
.api-params span{display:block;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.api-params b{font-size:.82rem}
@media(max-width:560px){.api-params{grid-template-columns:minmax(0,1fr)}
  .api-e summary>span:last-of-type{display:none}}
.aj-otp{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
@media(max-width:900px){.aj-otp{grid-template-columns:minmax(0,1fr)}}
.otp-caja{display:grid;gap:10px;padding:15px;border-radius:var(--rc);background:var(--card2);border:1px solid var(--line)}
.otp-caja>b{font-size:.82rem}
.otp-wa{padding:10px 12px;border-radius:11px;border-top-left-radius:3px;background:var(--card);
  border:1px solid var(--line2);font-size:.79rem;line-height:1.5}
.otp-wa b{font-family:var(--mono);letter-spacing:.06em}
.otp-wa em{display:block;font-style:normal;font-size:.7rem;color:var(--muted);margin-top:4px}
.otp-res{font-size:.76rem;font-weight:600}
.otp-res.ok{color:var(--ok)}
.otp-res.mal{color:var(--danger)}
.aj-mcp{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.aj-mcp .aj-liga{margin:0}
.aj-cuerpo code,.aj-q code{font-family:var(--mono);font-size:.72rem;padding:1px 5px;border-radius:5px;background:var(--card2)}
.api-pre code,.api-k code,.fac-uuid code,.api-e summary code{padding:0;background:none}

/* La ayuda en el teléfono se salía 4 px: 1fr deja que el contenido más
   ancho empuje la columna. Con minmax(0,1fr) manda la columna. */
.docs>*{min-width:0}
@media(max-width:900px){.docs{grid-template-columns:minmax(0,1fr)}}

/* ═══ v41 · Más premium ═══════════════════════════════════════════════
   Diego comparó lado a lado con Lumin: la nuestra se veía más gris y más
   plana. No era una cosa, eran varias, y todas medibles:

   1. Las superficies eran GRIS (#1b212c en el chat, la ficha y las filas).
      Las suyas son azul marino muy oscuro. Gris se lee "apagado"; marino
      se lee "de noche".
   2. Todo iba en 700 y 800. Tanto bold hace que el texto se vea más
      brillante de lo que es y que nada destaque. Títulos en 600, lo demás
      en 500.
   3. Los íconos de sección eran trazo de color sobre un cuadro oscuro. Los
      suyos son un cuadro con degradado y un brillo abajo: eso es lo que se
      lee "vibrante".
   4. Chips sólidos. Traslúcidos con un filo del mismo color se ven de
      vidrio.
   5. Luz: un filo claro de 1 px arriba de cada tarjeta, como si la luz
      viniera de arriba, y un brillo azul muy tenue detrás del encabezado.
   6. Emoji en la barra de arriba (☀️ 🔊 🔔 🔍) y barras de scroll grises
      del sistema: las dos cosas delatan "hecho a mano".
   7. Letra: Geist en vez de Archivo + Sora. Más compacta y más neutra, y
      los números salen en la misma letra que el texto.
   ══════════════════════════════════════════════════════════════════ */

:root,html[data-tema="oscuro"]{
  --bg:#060a12; --side:#070b14;
  --card:#0c121d; --card2:#111926; --soft:#152035;
  --line:#1a2333; --line2:#131b29;
  --fg:#e9eef6; --fg2:#c7d0dd; --muted:#8290a5;
  --primary:#2f6cf6; --primary-d:#2459d8; --primary-s:#0f1d39; --primary-txt:#88aeff;
  --purple:#a78bfa; --purple-s:#1a1532; --cyan:#22d3ee;
  --ok:#34d399; --ok-bg:#0a2a20;
  --warn:#fbbf24; --warn-bg:#241906; --warn-solid:#f59e0b;
  --danger:#f87171; --danger-bg:#2a1115;
  --r:9px; --rc:14px;
  --inp:#090e18;
  --chat-bg:#080c15; --chat-pt:rgba(148,163,184,.12);
  --b-in:#141c2b; --b-out:#0c6b4f; --b-out2:#085640; --b-out-fg:#effcf6;
  --sombra:inset 0 1px 0 rgba(255,255,255,.035),0 1px 2px rgba(0,0,0,.35),0 14px 34px -22px rgba(0,0,0,.95);
  --sombra-alta:inset 0 1px 0 rgba(255,255,255,.05),0 2px 6px rgba(0,0,0,.35),0 30px 70px -28px rgba(0,0,0,1);
}
html[data-tema="claro"]{
  --bg:#f4f6fa; --side:#fbfcfe;
  --card:#ffffff; --card2:#f3f6fa; --soft:#eaf0fb;
  --line:#e2e7ef; --line2:#edf1f6;
  --fg:#0f1623; --fg2:#2d3747; --muted:#667085;
  --primary:#2563eb; --primary-d:#1d4fd1; --primary-s:#eaf1ff; --primary-txt:#1d4ed8;
  --purple:#6d28d9; --purple-s:#f1ebfe;
  --ok:#059669; --ok-bg:#e6f7ef;
  --warn:#b45309; --warn-bg:#fdf4e2; --warn-solid:#f59e0b;
  --danger:#dc2626; --danger-bg:#fdecec;
  --inp:#ffffff;
  --chat-bg:#eef2f7; --chat-pt:rgba(15,22,35,.09);
  --b-in:#ffffff; --b-out:#d9f6e8; --b-out2:#cdefdd; --b-out-fg:#0b3024;
  --sombra:0 1px 2px rgba(16,24,40,.05),0 8px 24px -16px rgba(16,24,40,.18);
  --sombra-alta:0 2px 6px rgba(16,24,40,.06),0 24px 48px -20px rgba(16,24,40,.28);
}

/* ── La luz ──────────────────────────────────────────────────────────── */
body{background:
  radial-gradient(1100px 440px at 68% -180px,color-mix(in srgb,var(--primary) 9%,transparent),transparent 70%)
  fixed,var(--bg);letter-spacing:-.003em}
b,strong{font-weight:600}
h1,h2,h3,.kpi .v,.kpi-v{font-weight:600;letter-spacing:-.028em}
.mono{font-family:var(--mono)}
input[type=checkbox],input[type=radio]{accent-color:var(--primary)}
:where(button,a,[tabindex]):focus-visible{outline:2px solid color-mix(in srgb,var(--primary) 75%,transparent);
  outline-offset:2px}

/* Barras de scroll delgadas y del color del panel, no las grises del sistema */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fg) 15%,transparent) transparent}

/* ── Barra lateral ───────────────────────────────────────────────────── */
.side{background:var(--side);border-right:1px solid var(--line2)}
.brand{border-bottom-color:var(--line2)}
.brand b{font-weight:600;letter-spacing:-.02em}
.brand-m{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px -6px color-mix(in srgb,var(--primary) 70%,transparent)}
.search{background:color-mix(in srgb,var(--fg) 3%,transparent);border-color:var(--line);color:var(--muted)}
.search .ic{width:15px;height:15px}
.search:hover{border-color:color-mix(in srgb,var(--primary) 50%,var(--line))}
.search kbd{background:color-mix(in srgb,var(--fg) 7%,transparent);color:var(--muted);font-weight:500}
.grp{margin-top:18px}
.grp-t{font-size:.65rem;font-weight:600;letter-spacing:.11em}
.nav{color:var(--fg2);font-weight:500;padding:8px 12px}
.nav .ic{opacity:.62}
.nav:hover{background:color-mix(in srgb,var(--fg) 5%,transparent);color:var(--fg)}
.nav:hover .ic{opacity:.9}
.nav.on{background:var(--primary-s);color:var(--primary-txt);font-weight:600;box-shadow:none}
.nav.on .ic{opacity:1}
.nav .n{font-weight:600;background:var(--primary);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 8px -2px color-mix(in srgb,var(--primary) 70%,transparent)}
.nav .new{font-weight:600}
.chk{background:color-mix(in srgb,var(--fg) 2.5%,transparent);border-color:var(--line2)}
.chk-h{font-weight:600}
.userc{background:transparent;border-color:transparent;transition:background .13s}
.userc:hover{background:color-mix(in srgb,var(--fg) 4%,transparent)}
.userc b{font-weight:600}
.userc .av{font-weight:600}

/* ── Arriba ──────────────────────────────────────────────────────────── */
.top{background:color-mix(in srgb,var(--bg) 80%,transparent);border-bottom:1px solid var(--line2);
  backdrop-filter:saturate(1.5) blur(14px)}
.crumb b{font-weight:600}
.ibtn .ic{width:18px;height:18px}
.top-r .ibtn{color:var(--muted)}
.punto{box-shadow:0 0 0 2px var(--bg);font-weight:600}
.demo{background:linear-gradient(90deg,
    color-mix(in srgb,var(--warn-solid) 7%,var(--bg)),
    color-mix(in srgb,var(--warn-solid) 13%,var(--bg)) 50%,
    color-mix(in srgb,var(--warn-solid) 7%,var(--bg)));
  border-bottom:1px solid color-mix(in srgb,var(--warn-solid) 24%,transparent);
  color:color-mix(in srgb,var(--warn) 90%,var(--fg));font-weight:500}
.demo a{background:linear-gradient(180deg,#fcc444,#f59e0b);color:#2a1a00;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 16px -8px rgba(245,158,11,.8)}

/* ── Encabezado de sección ───────────────────────────────────────────── */
.hello h1{font-size:clamp(1.45rem,2.6vw,1.8rem);font-weight:600;letter-spacing:-.032em}
.hello p{color:var(--muted)}
.hello-ic{width:46px;height:46px;border-radius:13px;color:#fff;
  background:linear-gradient(145deg,var(--g1),var(--g2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.12),
             0 12px 28px -12px color-mix(in srgb,var(--g2) 85%,transparent)}
.hello-ic .ic{stroke-width:1.8}
.hello-ic.g-azul  {--g1:#5b93ff;--g2:#2356e6}
.hello-ic.g-verde {--g1:#3ddc97;--g2:#059669}
.hello-ic.g-ambar {--g1:#fcc444;--g2:#ea7a0b}
.hello-ic.g-morado{--g1:#b691ff;--g2:#7c3aed}
.hello-ic.g-cian  {--g1:#3fd8f2;--g2:#0e8fc2}
.hello-ic.g-gris  {--g1:#8d9dcc;--g2:#435079}
html[data-tema="claro"] .hello-ic{color:#fff}

/* ── Superficies ─────────────────────────────────────────────────────── */
.card,.kpi{background:var(--card);border-color:var(--line);box-shadow:var(--sombra)}
.card-h{border-bottom-color:var(--line2)}
.card-h b{font-weight:600;letter-spacing:-.012em}
.kpi .l{font-weight:500}
.kpi .v{font-size:1.75rem;letter-spacing:-.035em}
.kpi .d .up,.kpi .d .dn{font-weight:600}
.row{border-color:var(--line2)}
.row .m b,.ci .m b,.lead-t b,.col-h b,.ficha-top b,.act-m b,.pl-n{font-weight:600}
.row .av,.ci .av,.lead-t .av{font-weight:600}
.tabla th{font-weight:600}
.tabla tbody tr:hover{background:color-mix(in srgb,var(--fg) 3%,transparent)}
.col{background:color-mix(in srgb,var(--card) 50%,var(--bg));border-color:var(--line2)}
.lead{background:var(--card2);border-color:var(--line)}
.col-h .n,.tab-n{font-weight:600}

/* Chips de vidrio: el color a 13 % y un filo del mismo color */
.chip{font-weight:600;letter-spacing:.005em}
.chip.ok  {background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 24%,transparent)}
.chip.warn{background:color-mix(in srgb,var(--warn) 13%,transparent);color:var(--warn);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 24%,transparent)}
.chip.dg  {background:color-mix(in srgb,var(--danger) 13%,transparent);color:var(--danger);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 24%,transparent)}
.chip.info{background:color-mix(in srgb,var(--primary) 15%,transparent);color:var(--primary-txt);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 30%,transparent)}
.chip.pur {background:color-mix(in srgb,var(--purple) 14%,transparent);color:var(--purple);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--purple) 26%,transparent)}
.chip.mute{background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--muted);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent)}
.vivo{background:color-mix(in srgb,var(--ok) 12%,transparent);font-weight:500;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 24%,transparent)}

/* ── Botones ─────────────────────────────────────────────────────────── */
.btn{font-weight:600;letter-spacing:-.005em;color:var(--fg);
  background:color-mix(in srgb,var(--fg) 4%,transparent);border-color:var(--line)}
.btn:hover{background:color-mix(in srgb,var(--fg) 8%,transparent);
  border-color:color-mix(in srgb,var(--fg) 16%,var(--line))}
.btn.gh{background:color-mix(in srgb,var(--fg) 4%,transparent);border-color:var(--line);color:var(--fg)}
.btn.gh:hover{background:color-mix(in srgb,var(--fg) 8%,transparent)}
.btn.pri{color:#fff;border-color:color-mix(in srgb,var(--primary) 72%,#000);
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 86%,#fff),var(--primary));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.3),
             0 8px 20px -10px color-mix(in srgb,var(--primary) 85%,transparent)}
.btn.pri:hover{background:linear-gradient(180deg,var(--primary),var(--primary-d))}
.btn.wa{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);
  border-color:color-mix(in srgb,var(--ok) 28%,transparent)}
.btn.wa:hover{background:color-mix(in srgb,var(--ok) 20%,transparent)}
.btn.peligro{color:#fff;border-color:#b91c1c;background:linear-gradient(180deg,#f47272,#dc2626);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 20px -10px rgba(220,38,38,.8)}
.btn.warn{background:color-mix(in srgb,var(--warn) 6%,transparent)}
.btn:disabled,.btn:disabled:hover{filter:none}
.range{background:color-mix(in srgb,var(--fg) 3%,transparent)}
.range button{font-weight:600}
.range button.on{background:var(--primary-s);color:var(--primary-txt)}
.ia-btn{border:0;font-weight:600;
  background:linear-gradient(135deg,#5c8dff,#2f6cf6 48%,#7657ff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 30px -10px rgba(47,108,246,.75)}
.ia-btn:hover{filter:brightness(1.07);background:linear-gradient(135deg,#5c8dff,#2f6cf6 48%,#7657ff)}

/* Interruptor: la bola siempre blanca, y el encendido con brillo */
.sw{background:color-mix(in srgb,var(--fg) 14%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 6%,transparent)}
.sw i{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.sw.on{background:linear-gradient(180deg,#3ddc97,#10b981);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 4px 12px -4px rgba(16,185,129,.6)}
html[data-tema="claro"] .sw:not(.on){background:#d3d9e3}

/* ── Campos: hundidos, más oscuros que la tarjeta ────────────────────── */
.inp,.chat-in .real,.at-inp,.cfg-liga{background-color:var(--inp)}
.inp:focus,select.inp:focus,.chat-in .real:focus{background-color:var(--inp)}
.at-inp:focus-within,.cfg-liga:focus-within{background-color:var(--inp)}
.inp{border-color:var(--line)}

/* ── Conversaciones ──────────────────────────────────────────────────── */
.chat-b{background-color:var(--chat-bg)}
.ficha{background:color-mix(in srgb,var(--card) 55%,var(--bg))}
.ci{border-bottom-color:var(--line2)}
.ci:hover{background:color-mix(in srgb,var(--fg) 3.5%,transparent)}
.ci.on{background:var(--primary-s);box-shadow:inset 2px 0 0 var(--primary)}
.msg{border-radius:14px;font-size:.84rem;line-height:1.5}
.msg.in{background:var(--b-in);border:1px solid color-mix(in srgb,var(--fg) 5%,transparent);
  border-top-left-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.22)}
.msg.out{background:linear-gradient(160deg,var(--b-out),var(--b-out2));color:var(--b-out-fg);
  border-top-right-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 1px rgba(0,0,0,.22)}
.msg.out .t{color:color-mix(in srgb,var(--b-out-fg) 68%,transparent);opacity:1}
.msg.out .who{color:#d3c6ff}
.msg.out .ck.env,.msg.out .ck.ent{color:inherit;opacity:.6}
.msg.out .ck.lei{color:#67e8f9}
html[data-tema="claro"] .msg.in{border-color:#e4e9f0}
html[data-tema="claro"] .msg.out .who{color:#6d28d9}
html[data-tema="claro"] .msg.out .ck.lei{color:#0284c7}
html[data-tema="claro"] .msg.out .voz-play{background:rgba(11,48,36,.12)}
html[data-tema="claro"] .msg.out .voz-onda i,
html[data-tema="claro"] .msg.out .voz-avance{background:#0c6b4f}
html[data-tema="claro"] .msg.out .voz-dur,
html[data-tema="claro"] .msg.out .voz-et{color:rgba(11,48,36,.72)}
html[data-tema="claro"] .msg.out .voz-txt{border-top-color:rgba(11,48,36,.16)}
.chat-busca .ic,.paleta-top .ic{width:16px;height:16px;color:var(--muted)}

/* ── Ventanas y menús ────────────────────────────────────────────────── */
.modal{background:rgba(2,5,11,.62);backdrop-filter:blur(6px) saturate(1.2)}
html[data-tema="claro"] .modal{background:rgba(15,22,35,.3)}
.modal-c{background:var(--card);border:1px solid var(--line);box-shadow:var(--sombra-alta)}
.modal-h b{font-weight:600}
.menu-c,.pop,.paleta-caja,.mv-menu,.emojis{box-shadow:var(--sombra-alta);border-color:var(--line)}
.paleta{background:rgba(2,5,11,.55);backdrop-filter:blur(6px)}
html[data-tema="claro"] .paleta{background:rgba(15,22,35,.28)}

/* ── Lo que salió al revisarlo pantalla por pantalla ─────────────────── */
/* avatar() sin tamaño de contexto (el encabezado del chat, las tarjetas
   del equipo) salía como un cuadrito con las letras encimadas. */
.av{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;
  color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -10px 16px -8px rgba(0,0,0,.18)}

/* Los filtros (Todos, Faciales, Neutral…) no tenían estilo: eran texto suelto. */
.fchip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  font-size:.76rem;font-weight:500;color:var(--fg2);
  background:color-mix(in srgb,var(--fg) 4%,transparent);box-shadow:inset 0 0 0 1px var(--line);
  transition:background .12s,color .12s,box-shadow .12s}
.fchip:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 8%,transparent)}
.fchip.on{background:var(--primary);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 16px -8px color-mix(in srgb,var(--primary) 80%,transparent)}
.fchip-n{font-weight:600;background:color-mix(in srgb,var(--fg) 8%,transparent)}

.tag{background:color-mix(in srgb,var(--purple) 14%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--purple) 24%,transparent)}
.chip:not(.ok):not(.warn):not(.dg):not(.info):not(.pur):not(.mute){
  background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 9%,transparent)}
/* Las herramientas de un agente, en morado como todo lo de IA */
.ia-chips .chip:not(.ok):not(.warn):not(.dg):not(.info):not(.pur):not(.mute){
  background:color-mix(in srgb,var(--purple) 14%,transparent);color:var(--purple);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--purple) 26%,transparent)}
.ia-av{background:linear-gradient(145deg,color-mix(in srgb,var(--purple) 24%,var(--card2)),var(--card2));
  border-color:color-mix(in srgb,var(--purple) 30%,var(--line))}

/* En una laptop de 1280 el nombre y el teléfono se partían en cinco
   renglones. Ahora el nombre guarda su lugar en un renglón, y si no
   caben, son los botones los que bajan. */
.chat-h{flex-wrap:wrap;row-gap:8px}
.chat-h>.av+span{min-width:150px!important}
.chat-h b,.chat-h b+span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Tarjetas del equipo: el rol siempre a la derecha, y lo largo se recorta,
   para que las tres tengan la misma altura. */
.eq-quien{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.eq-quien>span{min-width:0}
.eq-quien b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq-quien .sub{display:block;margin:0;font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* La ficha del chat: el avatar grande heredaba display:block y las iniciales
   quedaban pegadas arriba. */
.ficha-top .av.lg{display:grid;place-items:center;margin:0 auto 9px}

/* ═══ Cobros ═══════════════════════════════════════════════════════════
   Una lista, no una tabla: en el teléfono una tabla de seis columnas se
   vuelve ilegible, y lo que el dueño busca es "¿ya pagó?" con el monto. */
.cob-inicio .card-b{padding:22px}
.cob-inicio h2{font-size:1.125rem;font-weight:600;letter-spacing:-.01em}
.cob-inicio p{color:var(--muted);margin-top:6px;max-width:62ch}
.cob-pasos{margin:16px 0 18px;padding-left:20px;display:grid;gap:8px;max-width:62ch;color:var(--fg)}
.cob-pasos li::marker{color:var(--muted);font-variant-numeric:tabular-nums}
.cob-pasos b{font-weight:600}

.cob-cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cob-cifras>*{background:var(--card);border:1px solid var(--line);border-radius:var(--rc);padding:13px 15px;
  display:grid;gap:2px;text-align:left;font:inherit;color:inherit;min-width:0}
.cob-cifras span{font-size:.75rem;color:var(--muted)}
.cob-cifras b{font-size:1.25rem;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cob-cifras i{font-style:normal;font-size:.75rem;color:var(--muted)}
.cob-cifras button{cursor:pointer}
.cob-cifras button:hover{border-color:var(--muted)}
.cob-cifras button.hay{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:var(--danger-bg)}
.cob-cifras button.hay b{color:var(--danger)}

.cob-lista{display:grid}
.cob-fila{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"quien monto chip" "det det det";
  gap:4px 14px;align-items:center;text-align:left;width:100%;padding:13px 18px;border:0;border-top:1px solid var(--line2);
  background:none;color:inherit;font:inherit;cursor:pointer}
.cob-fila:first-child{border-top:0}
.cob-fila:hover{background:var(--card2)}
.cob-quien{grid-area:quien;display:grid;min-width:0}
.cob-quien b{font-weight:600;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cob-quien span{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cob-monto{grid-area:monto;font-weight:600;font-variant-numeric:tabular-nums;font-size:.9375rem}
.cob-chip{grid-area:chip;justify-self:end}
.cob-det{grid-area:det;font-size:.75rem;color:var(--muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.cob-banco{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--primary-s);color:var(--primary-txt);font-weight:600;font-size:.8125rem}

/* Las ventanas */
.cob-subir{display:grid;gap:3px;padding:16px;border:1.5px dashed var(--line);border-radius:var(--rc);
  text-align:center;cursor:pointer;background:var(--card2)}
.cob-subir:hover,.cob-subir:focus-within{border-color:var(--primary)}
.cob-subir b{font-weight:600;color:var(--primary-txt)}
.cob-subir span{font-size:.75rem;color:var(--muted)}
.cob-o{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--muted);font-size:.75rem}
.cob-o::before,.cob-o::after{content:"";flex:1;height:1px;background:var(--line)}
.cob-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cob-res{margin-top:12px;padding:13px 14px;border-radius:var(--rc);background:var(--card2);border:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center}
.cob-res b{font-variant-numeric:tabular-nums;justify-self:end}
.cob-res p{grid-column:1/-1;font-size:.8125rem;color:var(--muted);line-height:1.5}
.cob-cabeza{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cob-cabeza b{font-size:1.5rem;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cob-porque{margin:8px 0 4px;color:var(--fg);font-size:.875rem;line-height:1.5}
.cob-bloque{margin-top:14px;border:1px solid var(--line);border-radius:var(--rc);padding:4px 14px 8px}
.cob-bloque.ok{border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
.cob-bloque h4{font-size:.75rem;font-weight:600;color:var(--muted);margin:10px 0 4px}
.cob-dato{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-top:1px solid var(--line2);font-size:.8125rem}
.cob-dato:first-of-type{border-top:0}
.cob-dato span{color:var(--muted);flex:none}
.cob-dato b{font-weight:500;text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.cob-dato b.cob-mono{font-family:var(--mono);font-size:.75rem;letter-spacing:-.01em}
.cob-m .modal-f{flex-wrap:wrap;justify-content:flex-end}

@media(max-width:760px){
  .cob-cifras{grid-template-columns:1fr 1fr}
  .cob-cifras>button{grid-column:1/-1}
  .cob-fila{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"quien monto" "chip chip" "det det";padding:13px 14px}
  .cob-chip{justify-self:start}
  .cob-2{grid-template-columns:1fr}
  .cob-m .modal-f .btn{flex:1 1 auto}
}

/* La ventana de 24 h cerrada: en lugar del renglón para escribir */
.chat-24{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);
  background:var(--warn-bg)}
.chat-24 p{flex:1 1 260px;font-size:.8125rem;line-height:1.45;color:var(--fg)}
.chat-24 b{font-weight:600}
.pc-prev{white-space:pre-wrap;font-size:.8125rem;line-height:1.5;background:var(--card2);border:1px solid var(--line);
  border-radius:var(--rc);padding:11px 13px;margin:4px 0 8px}
@media(max-width:760px){
  .chat-w.ver-chat .chat-24{padding:10px max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .chat-24 .btn{flex:1 1 100%}
}

/* ═══ v42 · El teléfono como pantalla principal ═══════════════════════
   El dueño abre esto desde su teléfono, casi siempre desde el ícono de la
   pantalla de inicio. Hasta aquí era la versión de escritorio encogida:
   la lista de conversaciones desaparecía, el menú quedaba debajo de la
   hora del iPhone y no se podía tocar, y cada ventana flotaba a media
   pantalla. Esta capa va AL FINAL a propósito: gana la cascada sin
   !important (salvo dos, comentados).

   Tres ideas:
   · Márgenes seguros. Con la app instalada el contenido se dibuja debajo
     de la barra de estado; env(safe-area-inset-*) vale 0 en la compu.
   · Barra de pestañas abajo, donde llega el pulgar. El menú completo
     sigue en "Más".
   · Conversaciones como en WhatsApp: la lista, tocas una, pantalla
     completa, y regresas.
   ══════════════════════════════════════════════════════════════════ */

/* ── Márgenes seguros (valen 0 fuera del iPhone instalado) ─────────── */
.top{padding-top:env(safe-area-inset-top);height:calc(58px + env(safe-area-inset-top));
  padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
.side{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}

/* Con el tema claro y la app instalada, iOS pinta la hora en blanco sobre
   la barra blanca y no se lee. La franja de la barra de estado va oscura. */
@media(display-mode:standalone){
  html[data-tema="claro"] .top,
  html[data-tema="claro"] .chat-w.ver-chat .chat-h{box-shadow:inset 0 env(safe-area-inset-top) 0 0 #10141b}
}

/* ── Avisos flotantes ("Guardado", "Listo") ────────────────────────── */
.aviso-t{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;
  max-width:calc(100% - 32px);width:max-content;text-align:center;
  background:var(--fg);color:var(--bg);padding:11px 20px;border-radius:999px;
  font-size:13px;font-weight:600;line-height:1.35}

/* ── Pestañas de abajo: sólo en teléfono ───────────────────────────── */
.tabbar{display:none}
.chat-volver,.enviar-ic,.chat-est-m{display:none}

@media(max-width:760px){
  .tabbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--card);
    border-top:1px solid var(--line);
    padding:5px max(6px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))}
  .tb{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;min-height:50px;border-radius:10px;color:var(--muted);
    font-size:.6875rem;font-weight:600;letter-spacing:.01em}
  .tb .ic{width:23px;height:23px;stroke-width:1.6}
  .tb.on{color:var(--primary-txt)}
  .tb:active{background:var(--soft)}
  .tb .n{position:absolute;top:3px;left:calc(50% + 5px);min-width:18px;height:18px;padding:0 5px;
    border-radius:999px;background:var(--primary);color:#fff;font-size:.625rem;font-weight:700;
    display:grid;place-items:center;font-variant-numeric:tabular-nums}

  /* El menú de tres rayas lo hace "Más"; dos botones para lo mismo, no. */
  .burger{display:none}
  .crumb #crumb-g,.crumb>span:nth-child(2){display:none}
  .crumb b{font-size:1.0625rem;font-weight:600}

  /* Abajo, espacio para las pestañas Y para "Pregúntale a Retoma": sin él, lo
     último de cada sección quedaba debajo del botón. */
  .body{padding:16px max(14px,env(safe-area-inset-right)) calc(136px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
  .aviso-t{bottom:calc(76px + env(safe-area-inset-bottom))}
  /* "Pregúntale a Retoma" va ARRIBA de las pestañas: encima tapaba Citas y Más.
     Dentro de una conversación se esconde: tapaba el botón de enviar y el de
     "Mandar una plantilla" (Diego, 29-sep-2026). */
  .ia-btn{right:max(14px,env(safe-area-inset-right));bottom:calc(72px + env(safe-area-inset-bottom))}
  body.en-chat .ia-btn{display:none}

  /* El menú completo, como cajón */
  .side{width:min(86vw,320px)}
  .nav{padding:12px 18px;font-size:.9375rem}

  /* ── Encabezado de cada sección ── */
  .hello{flex-wrap:wrap;gap:12px}
  .hello>div:not(.range):not(.hello-ic):not(.acciones){flex:1;min-width:0}
  .hello h1{font-size:1.5rem}
  .hello .range{margin-left:0;flex-basis:100%;display:flex}
  .hello .range button{flex:1;padding:10px 0}

  /* ── Conversaciones: la lista primero ── */
  .chat-w,.chat-w.con-ficha{grid-template-columns:minmax(0,1fr);min-height:0}
  .chat-col{display:flex;border-right:0}
  .chat-w:not(.ver-chat) .chat-p{display:none}
  .chat-w.ver-chat .chat-col{display:none}
  .chat-w .ficha{display:none}
  .card:has(>.chat-w:not(.ver-chat)){border-radius:var(--rc);overflow:hidden}
  /* En escritorio la lista tiene flex:1 dentro de una caja de alto fijo;
     aquí la caja no tiene alto y flex:1 la dejaba en cero. Y la regla vieja
     de ≤820px la escondía (display:none): por eso el teléfono no veía la
     lista. Aquí fluye con la página, como en WhatsApp. */
  .chat-col .chat-list{display:block;flex:none;overflow:visible}
  .chat-busca{padding:12px 14px}
  /* Los filtros, en un solo renglón que se desliza: partidos en dos
     renglones se comían el espacio de la primera conversación. */
  .tabs{padding:8px 10px;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  /* En la lista del teléfono no hay ninguna conversación abierta: resaltar
     "la activa" era señalar algo que no está en pantalla. */
  .chat-w:not(.ver-chat) .ci.on{background:none;box-shadow:none}
  /* Los números del resumen, de dos en dos: uno por renglón era bajar
     media pantalla para ver cuatro cifras. */
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

  /* Los botones de cada sección, en su renglón y no apretados junto al
     título; la acción principal primero y a todo lo ancho. */
  .hello .acciones{flex-basis:100%}
  .hello .acciones .btn{flex:1}
  .hello .acciones .btn.pri{order:-1;flex-basis:100%}

  /* El directorio: de tabla a lista. Arriba quién es y su menú; abajo, en
     un renglón que se acomoda solo, su estado, etapa, valor y etiquetas. */
  .tabla.directorio thead{display:none}
  .tabla.directorio,.tabla.directorio tbody{display:block}
  .tabla.directorio tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
    padding:12px 14px;border-bottom:1px solid var(--line2)}
  .tabla.directorio td{display:block;padding:0;border:0}
  .tabla.directorio td.col-check{order:0}
  .tabla.directorio td:nth-child(2){order:1;flex:1 1 calc(100% - 110px);min-width:0}
  .tabla.directorio td:nth-child(8){order:2}
  .tabla.directorio td:nth-child(n+3):nth-child(-n+7){order:3}
  .tabla.directorio td:nth-child(3){margin-left:34px}
  .tabla.directorio td:has(>.vac:only-child){display:none}
  .tabla.directorio td.vac{flex-basis:100%;margin-left:34px;font-size:.75rem}
  .tabla.directorio .celda-p b{font-size:.9375rem}
  .kpi{padding:14px}
  .kpi .v{font-size:1.625rem}
  .ci{padding:13px 16px;min-height:70px;gap:12px}
  .ci .av{width:46px;height:46px;font-size:.875rem}
  .ci .m b{font-size:.9375rem}
  .ci .m>span:first-of-type{font-size:.8125rem}
  .ci .t{font-size:.72rem}

  /* ── …y al tocar una, la conversación a pantalla completa ──
     Mide lo que mide la parte VISIBLE de la pantalla (--vvh, desde JS):
     cuando sale el teclado, la caja se encoge y el renglón para escribir
     queda justo arriba del teclado, no escondido detrás. */
  .chat-w.ver-chat{position:fixed;left:0;right:0;top:var(--vvt,0px);z-index:55;
    height:var(--vvh,100dvh);background:var(--card)}
  .chat-w.ver-chat .chat-p{height:100%}
  body.en-chat .top,body.en-chat .tabbar{display:none}
  body.en-chat{overflow:hidden}

  .chat-w.ver-chat .chat-h{flex-wrap:nowrap;gap:6px;
    padding:calc(8px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 8px max(4px,env(safe-area-inset-left))}
  /* La regla de escritorio le da 150px fijos al nombre; en un teléfono de
     360px eso empujaba los botones fuera de la pantalla. */
  .chat-h>.av+span{min-width:0!important}
  .chat-volver{display:grid;place-items:center;width:40px;height:44px;border-radius:10px;
    color:var(--primary-txt);flex:none}
  .chat-volver .ic{width:24px;height:24px;stroke-width:2}
  .chat-volver:active{background:var(--soft)}
  .chat-h .lbl,.chat-h>.chip{display:none}
  .chat-est-m{display:inline}
  .chat-h .btn.sm{padding:0;width:40px;min-height:40px}

  .chat-w.ver-chat .chat-b{padding:14px 12px}
  .msg{max-width:84%;font-size:.9375rem;line-height:1.42}
  .msg .t{font-size:.6875rem}

  .chat-w.ver-chat .chat-in{gap:4px;
    padding:8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
  .chat-in .real{min-width:0}
  .chat-in [data-enviar] .lbl{display:none}
  .chat-in [data-enviar]{width:44px;height:44px;padding:0;border-radius:50%;flex:none}
  .enviar-ic{display:block;width:20px;height:20px}

  /* ── Ventanas: hojas que suben desde abajo ── */
  .modal{align-items:flex-end;padding:0;overflow:hidden}
  .modal-c,.modal-c.ancho,.modal-c.doble{max-width:none;width:100%;max-height:92dvh;overflow-y:auto;
    border-radius:16px 16px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);
    animation:hoja .24s cubic-bezier(.22,1,.36,1)}
}
@keyframes hoja{from{transform:translateY(28px);opacity:.5}to{transform:none;opacity:1}}

/* ── Dedos, no mouse ───────────────────────────────────────────────── */
@media(pointer:coarse){
  html{-webkit-tap-highlight-color:transparent}
  button,a,.ci,.nav,.tab,.tb{touch-action:manipulation}
  button,.tb,.nav{-webkit-user-select:none;user-select:none}
  .ibtn{width:42px;height:42px}
  .btn{min-height:40px}
  .btn.sm{min-height:36px}
  .tab{padding:9px 12px}
  .ci:active,.nav:active{background:var(--soft)}
  .search kbd{display:none}
  /* El teclado de su teléfono ya trae emojis. */
  .chat-in [data-emojis]{display:none}
  /* iPhone hace zoom a toda la página al tocar un campo con letra menor a
     16px, y ya no regresa. Es lo que más delata "página web". Por eso el
     !important: varios campos traen su tamaño con más especificidad. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}
}
@media(prefers-reduced-motion:reduce){.modal-c{animation:none}}
/* ═══ Azul tinta · paso 1 (12-oct-2026) ════════════════════════════════
   El rediseño del lienzo "Panel Retoma" (retoma-panel/docs/rediseno-azul), aplicado a lo que el panel YA tiene.
   Paso 1: colores en oscuro y claro, un solo acento, la "r" del logo y nada de degradados. Va al final para ganarle
   a las capas de arriba; para regresar, se quita este bloque (respaldo: retoma-respaldos/antes-rediseno-azul-20261012
   y la etiqueta de git "antes-rediseno-azul"). */
:root,html[data-tema="oscuro"]{
  --bg:#0A0F1A; --side:#0A0F1A; --card:#0D1320; --card2:#121A2A; --soft:#1C2740; --inp:#121A2A;
  --line:#1A2335; --line2:#162033; --line-strong:#283552;
  --fg:#E6EAF2; --fg2:#C7CFDD; --fg3:#A4AEC2; --muted:#8D98AE; --faint:#6C7791;
  --primary:#7C9CF5; --primary-d:#93AEF7; --primary-s:#18233A; --primary-txt:#AFC4FF; --primary-ink:#0A0F1A;
  --sel:#16203A;
  --purple:#AFC4FF; --purple-s:#18233A; --cyan:#AFC4FF;
  --ok:#6FCFA6; --ok-bg:rgba(63,185,138,.10);
  --warn:#D9B45A; --warn-bg:rgba(217,180,90,.10); --warn-solid:#D9B45A;
  --danger:#E8957A; --danger-bg:rgba(232,149,122,.10);
  --chat-bg:#0A0F1A; --chat-pt:rgba(230,234,242,.04);
  --b-in:#172034; --b-out:#1C2740; --b-out2:#2C3A58; --b-out-fg:#E6EAF2;
  --logo-bg:#E6EAF2; --logo-fg:#0A0F1A;
  --sombra:none; --sombra-alta:0 18px 40px rgba(0,0,0,.45);
  --r:7px; --rc:10px;
}
html[data-tema="claro"]{
  --bg:#F5F7FB; --side:#FFFFFF; --card:#FFFFFF; --card2:#F0F3F8; --soft:#E3E9F4; --inp:#FFFFFF;
  --line:#E3E8F0; --line2:#EDF0F5; --line-strong:#D0D8E6;
  --fg:#0F1729; --fg2:#2A3550; --fg3:#46516B; --muted:#5B6680; --faint:#6B7590;
  --primary:#4C6FE0; --primary-d:#3A5BC7; --primary-s:#EAF0FE; --primary-txt:#3A5BC7; --primary-ink:#FFFFFF;
  --sel:#EAF0FE;
  --purple:#3A5BC7; --purple-s:#EAF0FE; --cyan:#3A5BC7;
  --ok:#1C8A5C; --ok-bg:rgba(28,138,92,.10);
  --warn:#9A7414; --warn-bg:rgba(154,116,20,.10); --warn-solid:#C9962A;
  --danger:#C2532F; --danger-bg:rgba(194,83,47,.09);
  --chat-bg:#EEF1F6; --chat-pt:rgba(15,23,41,.06);
  --b-in:#FFFFFF; --b-out:#E3E9F4; --b-out2:#D0D8E6; --b-out-fg:#0F1729;
  --logo-bg:#0F1729; --logo-fg:#F5F7FB;
  --sombra:0 1px 2px rgba(15,23,41,.05); --sombra-alta:0 18px 40px rgba(15,23,41,.16);
}
/* Plano: sin la luz de fondo ni los degradados de antes. */
body{background:var(--bg)}
/* La "r" del logo, en Instrument Serif cursiva. */
.brand-m{width:30px;height:30px;border-radius:8px;background:var(--logo-bg);color:var(--logo-fg);box-shadow:none;
  display:grid;place-items:center;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:21px;
  line-height:1;font-weight:400}
/* Un solo acento: el ícono de cada sección ya no va en el color de su grupo. */
.hello-ic[class][class]{width:40px;height:40px;border-radius:10px;background:var(--card2);color:var(--primary-txt);
  box-shadow:inset 0 0 0 1px var(--line-strong)}
.hello-ic[class][class] .ic{width:20px;height:20px;stroke-width:1.6}
/* Lo que va relleno del acento lleva el texto que contrasta con él (oscuro sobre el pervinca, blanco sobre el azul). */
.nav .n,.chk .dot,.range button.on,.btn.pri,.tab.on .tab-n,.voz-play,.ia-btn,.ia-msg.yo,.ia-f button,.wz-p.on i,
.prev-m.on,.paso-n,.docs-n,.cal-vistas button.on,.cx-rec,.imp-p.on i,.fchip.on,.tb .n{color:var(--primary-ink)}
.btn.pri{background:var(--primary);border-color:var(--primary);box-shadow:none;font-weight:600}
.btn.pri:hover{background:var(--primary-d);border-color:var(--primary-d)}
.btn.peligro{background:var(--danger);border-color:var(--danger);color:var(--primary-ink);box-shadow:none}
.ia-btn,.ia-btn:hover{background:var(--primary);filter:none;box-shadow:0 10px 26px -12px rgba(0,0,0,.55)}
.ia-btn:hover{background:var(--primary-d)}
.sw.on{background:var(--primary);box-shadow:none}
.msg.out{background:var(--b-out);border:1px solid var(--b-out2);box-shadow:none}
.msg.out .who{color:var(--primary-txt)}
.msg.in{box-shadow:none}
.sug-ic{color:var(--primary-txt);background:var(--card2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.sug-ic .ic{width:18px;height:18px}
/* Lo elegido en un selector (7 / 30 / 90 días, Día / Semana / Mes): fondo suave, no relleno de acento. */
.range button.on,.cal-vistas button.on{background:var(--soft);color:var(--fg);box-shadow:none}
/* Los campos con la letra del panel (en Safari salían con la del sistema). El tamaño se queda: a menos de 16 px
   el iPhone hace zoom al escribir. */
input,textarea,select{font-family:inherit}
/* Las iniciales, neutras: el color era por persona y competía con el acento. */
.av[style]{background:var(--soft)!important;color:var(--fg2)}
.cal-c.sel,.cal-c.sel .cal-n,.cal-c.sel .cal-p{color:var(--primary-ink)}
html[data-tema="claro"] .msg.out .who{color:var(--primary-txt)}
/* ═══ Azul tinta · Conversaciones ════════════════════════════════════ */
/* De orilla a orilla: sin el margen de la página ni la tarjeta; las columnas se separan con 1 px. */
@media(min-width:761px){
  body.sec-chats .body{padding:0}
  body.sec-chats .body>.card:has(>.chat-w){border:0;border-radius:0;box-shadow:none;background:var(--card);margin:0}
  body.sec-chats .ia-btn{display:none}
}
.chat-col{border-right:1px solid var(--line)}
.ficha{border-left:1px solid var(--line);background:var(--card)}
.pdot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:1px;flex:none}
/* La lista */
.chat-col .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:8px 10px;gap:4px}
.chat-col .tabs::-webkit-scrollbar{display:none}
.chat-col .tab{white-space:nowrap;flex:none}
.ci .t{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right}
.ci.nl .m b{font-weight:700}
.ci.nl .m>span:not(.ci-tags){color:var(--fg2)}
.ci.nl .t>span:first-child{color:var(--primary-txt)}
.nl-n{min-width:19px;height:19px;padding:0 6px;border-radius:10px;background:var(--primary);color:var(--primary-ink);
  font-family:var(--mono);font-size:.66rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.ci-tags{gap:8px;align-items:center}
.ci-tags em{display:inline-flex;align-items:center;gap:4px;font-size:.66rem;font-weight:500;color:var(--fg3)}
.ci-tags em .ic{width:12px;height:12px}
.ci-tags em.et{border:1px solid var(--line-strong);border-radius:5px;padding:1px 6px;color:var(--fg3)}
.ci-tags em.et i{width:6px;height:6px;border-radius:50%}
.ci-tags em.ia{color:var(--primary-txt)}
.ci-tags em.hot{color:var(--danger);font-weight:600}
.ci-tags em.hot i{width:6px;height:6px;border-radius:50%;background:var(--danger)}
/* El encabezado, en un renglón */
.chat-h{flex-wrap:nowrap;gap:8px;padding:10px 14px;min-height:60px}
.chat-h-q{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.chat-h-q b{font-size:.875rem;font-weight:600}
.chat-h-s{font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-h-s .et-d{display:inline-block;width:6px;height:6px;border-radius:50%;margin:0 4px 1px 0;vertical-align:middle}
.chat-h .ibtn{width:32px;height:32px;flex:none;border-radius:8px;color:var(--fg3);display:grid;place-items:center;
  border:1px solid var(--line-strong);background:var(--card2)}
.chat-h .ibtn:hover{color:var(--fg);border-color:var(--primary)}
.chat-h .ibtn .ic{width:17px;height:17px}
.chat-h .ia-chip{display:inline-flex;align-items:center;gap:5px;flex:none;background:var(--primary-s);color:var(--primary-txt);
  border:1px solid color-mix(in srgb,var(--primary) 30%,transparent)}
.chat-h .ia-chip .ic{width:13px;height:13px}
/* Avisos dentro del chat */
.evento{display:flex;align-items:center;gap:8px;margin:4px 0;color:var(--muted);font-size:.72rem}
.evento::before,.evento::after{content:'';flex:1;height:1px;background:var(--line)}
.evento span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:7px;border:1px solid var(--line);
  background:var(--card);max-width:80%}
.evento .ic{width:13px;height:13px;color:var(--primary-txt);flex:none}
.evento em{font-style:normal;font-family:var(--mono);color:var(--faint)}
/* Tomar control / Devolver */
.ctl{display:flex;align-items:center;gap:10px;padding:9px 16px;border-top:1px solid var(--line);font-size:.8rem;color:var(--fg3)}
.ctl span{flex:1;min-width:0}
.ctl b{color:var(--fg);font-weight:600}
.ctl-p{width:8px;height:8px;border-radius:50%;flex:none}
.ctl-p.ia{background:var(--primary)}
.ctl-p.tu{background:var(--warn)}
/* Para escribir: el campo se queda con el espacio; en angosto, Enviar es sólo la flecha y no hay botón de emoji */
.chat-in .ibtn{display:grid;place-items:center;color:var(--fg3)}
.chat-in .ibtn .ic{width:18px;height:18px}
.chat-in .real{flex:1 1 auto;min-width:96px}
.chat-in.bloq .real{opacity:.6;cursor:not-allowed}
.chat-in [disabled]{opacity:.45;cursor:not-allowed}
@media(max-width:1180px){
  .chat-in .ci-emoji{display:none}
  .chat-in [data-enviar] .lbl{display:none}
  .chat-in [data-enviar] .enviar-ic{display:block;width:18px;height:18px}
  .chat-h .ia-chip .ia-n{display:none}
}
/* Con la ficha abierta el chat queda angosto hasta en el iPad acostado: lo mismo hasta 1440 px. */
@media(max-width:1440px){
  .chat-w.con-ficha .chat-in .ci-emoji{display:none}
  .chat-w.con-ficha .chat-in [data-enviar] .lbl{display:none}
  .chat-w.con-ficha .chat-in [data-enviar] .enviar-ic{display:block;width:18px;height:18px}
  .chat-w.con-ficha .chat-h .ia-chip .ia-n{display:none}
}
.chat-h>.av+.chat-h-q{min-width:72px!important}
/* En el teléfono la ficha no se ve: su botón sobra. */
@media(max-width:760px){.chat-h [data-ficha]{display:none}}
/* Lo que contestó el asistente, en su propio azul: se distingue de lo que mandó una persona. */
:root,html[data-tema="oscuro"]{--b-ai:#1A2C55;--b-ai-l:#26407A}
html[data-tema="claro"]{--b-ai:#E4ECFF;--b-ai-l:#C9D7FB}
.msg.out.ia{background:var(--b-ai);border-color:var(--b-ai-l)}
.ficha .valor input{width:0}
/* ═══ Azul tinta · Resumen (12-oct-2026) ════════════════════════════
   La pantalla de entrada de siempre (7/30/90, Lo que trajo tu asistente, Para sacarle más) con el estilo nuevo:
   sin el cuadro del ícono, las cifras en un solo panel partido con líneas, renglones en vez de cajitas dentro de
   tarjetas y un solo botón relleno. Lo que comparten las secciones ya rediseñadas (encabezado, cifras, paneles) va con body.az (AZ en pintar);
   lo que es sólo del Resumen, con body[data-sec="resumen"]. */
body.az .hello{align-items:flex-end;margin-bottom:18px}
body.az .hello h1{font-size:1.375rem;font-weight:600;letter-spacing:-.02em;line-height:1.2}
body.az .hello h1 span{color:inherit}
body.az .hello p{font-size:.8rem;color:var(--muted);margin-top:4px}
body.az .range{padding:3px;gap:2px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
body.az .range button{height:28px;padding:0 12px;border-radius:6px;font-size:.75rem;font-weight:500;color:var(--muted)}
body.az .range button.on{background:var(--soft);color:var(--fg)}
/* Las cuatro cifras: un panel, separadas por 1 px */
body.az .kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--rc);overflow:hidden;margin-bottom:16px}
body.az .kpis .kpi{border:0;border-radius:0;box-shadow:none;background:var(--card);padding:14px 18px 16px}
body.az .kpi .l{font-size:.75rem;color:var(--muted)}
body.az .kpi .v{font-family:inherit;font-size:1.625rem;font-weight:500;letter-spacing:-.02em;line-height:1.1;margin-top:6px}
body.az .kpi .d{font-size:.72rem;color:var(--muted);margin-top:6px;line-height:1.45}
body.az .kpi .d .up,body.az .kpi .d .down,body.az .kpi .d .dn{font-family:var(--mono);font-weight:500;font-size:.7rem}
.kpi .d .down{color:var(--danger)}
@media(max-width:900px){body.az .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Los paneles: plano, el título sin raya abajo */
body.az .card{box-shadow:none}
body.az .card-h{border-bottom:0;padding:16px 18px 4px;gap:10px}
body.az .card-h b{font-size:.875rem;font-weight:600;letter-spacing:-.01em}
body.az .card-h .sub{font-size:.72rem;color:var(--muted)}
body.az .card-b{padding:12px 18px 16px}
.card-lnk{background:none;border:0;padding:0;font:inherit;font-size:.75rem;font-weight:500;color:var(--fg3);cursor:pointer;white-space:nowrap}
.card-lnk:hover{color:var(--fg)}
.card-lnk:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
body.az .g2 .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--rc);box-shadow:none;padding:16px 18px}
body.az .g2 .kpi .nota{border-top-color:var(--line2);font-size:.75rem;line-height:1.5}
/* Lo que trajo tu asistente: dos cifras partidas por una línea, sin cajas adentro */
body[data-sec="resumen"] .res-asis-g{padding:0;margin-top:12px;gap:1px;background:var(--line);border-top:1px solid var(--line);
  border-radius:0 0 var(--rc) var(--rc);overflow:hidden}
body[data-sec="resumen"] .res-asis-c{background:var(--card);border:0;border-radius:0;padding:14px 18px 16px;gap:5px}
body[data-sec="resumen"] .res-asis-c .l{font-size:.75rem;font-weight:500}
body[data-sec="resumen"] .res-asis-c b{font-family:inherit;font-size:1.625rem;font-weight:500}
body[data-sec="resumen"] .res-asis .card-b .mini{color:var(--muted)}
/* Para sacarle más: renglones */
body[data-sec="resumen"] .sug-g{padding:0;margin-top:12px;gap:0;border-top:1px solid var(--line)}
body[data-sec="resumen"] .sug-i{background:none;border:0;border-radius:0;padding:12px 18px;border-top:1px solid var(--line2)}
body[data-sec="resumen"] .sug-i:first-child{border-top:0}
body[data-sec="resumen"] .sug-ic{width:28px;height:28px;border-radius:7px}
body[data-sec="resumen"] .sug-ic .ic{width:15px;height:15px}
body[data-sec="resumen"] .sug-t b{font-weight:600}
/* Tu embudo */
body[data-sec="resumen"] .bars{gap:12px}
body[data-sec="resumen"] .bar-h{font-size:.75rem;color:var(--fg2)}
body[data-sec="resumen"] .bar-h b{font-family:var(--mono);font-size:.7rem;font-weight:500;color:var(--muted)}
body[data-sec="resumen"] .bar{height:6px;border-radius:3px;background:var(--card2)}
body[data-sec="resumen"] .bar i{border-radius:3px}
/* La gráfica: líneas guía punteadas y la cifra de arriba */
.graf-y{position:absolute;left:0;transform:translateY(-100%);padding-bottom:2px;font-family:var(--mono);font-size:.62rem;
  color:var(--faint);pointer-events:none;font-variant-numeric:tabular-nums}
.graf-x,.horas-x{font-family:var(--mono);font-size:.62rem;color:var(--faint)}
/* Conexiones: renglones de orilla a orilla del panel */
body[data-sec="resumen"] .card-b.conex{padding:8px 0 4px;gap:0}
body[data-sec="resumen"] .conex-i{background:none;border:0;border-radius:0;padding:10px 18px;border-top:1px solid var(--line2)}
body[data-sec="resumen"] .conex-i:first-child{border-top:0}
.cx-ic{width:28px;height:28px;flex:none;border-radius:7px;display:grid;place-items:center;color:var(--fg3);
  box-shadow:inset 0 0 0 1px var(--line-strong)}
.cx-ic .ic{width:14px;height:14px}
body[data-sec="resumen"] .conex-i b{font-size:.8rem;font-weight:500}
body[data-sec="resumen"] .conex .chip{font-size:.68rem;font-weight:500;letter-spacing:0;box-shadow:none}
body[data-sec="resumen"] .conex .chip.ok{background:none;padding:0;color:var(--ok);display:inline-flex;align-items:center;gap:5px}
body[data-sec="resumen"] .conex .chip.ok::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
body[data-sec="resumen"] .conex .chip.mute{background:none;color:var(--fg3);padding:2px 7px;border-radius:5px;
  box-shadow:inset 0 0 0 1px var(--line-strong)}
/* Actividad reciente: renglones, sin el hilo ni los círculos de colores */
body[data-sec="resumen"] .card-b.act{padding:8px 0 4px}
body[data-sec="resumen"] .act-i{align-items:center;gap:12px;padding:10px 18px;border-radius:0;border-top:1px solid var(--line2)}
body[data-sec="resumen"] .act-i:first-child{border-top:0}
body[data-sec="resumen"] .act-i::before{display:none}
body[data-sec="resumen"] .act-ic[class]{width:28px;height:28px;--ac:var(--fg3);--ac-s:var(--card2);
  box-shadow:inset 0 0 0 1px var(--line)}
body[data-sec="resumen"] .act-ic.g-ambar{--ac:var(--warn);--ac-s:var(--warn-bg)}
body[data-sec="resumen"] .act-i:hover .act-ic{box-shadow:inset 0 0 0 1px var(--line-strong)}
body[data-sec="resumen"] .act-ic .ic{width:14px;height:14px}
body[data-sec="resumen"] .act-m{gap:2px;padding-top:0}
body[data-sec="resumen"] .act-m b{font-size:.8rem;font-weight:500}
body[data-sec="resumen"] .act-m>span{font-size:.75rem;-webkit-line-clamp:1}
body[data-sec="resumen"] .act-t{font-family:var(--mono);font-size:.66rem;color:var(--faint);padding-top:0}
/* Mensajes por hora */
body[data-sec="resumen"] .horas{border-bottom:1px solid var(--line-strong)}
/* El celular */
@media(max-width:760px){
  body.az .hello{margin-bottom:14px}
  body.az .hello h1{font-size:1.5rem}
  body.az .hello .range button{height:32px;padding:0}
  body.az .kpis .kpi{padding:13px 14px}
  body.az .kpi .v{font-size:1.5rem}
  body.az .card-h{padding:14px 14px 4px}
  body.az .card-b{padding:12px 14px 14px}
  body[data-sec="resumen"] .res-asis-c,body[data-sec="resumen"] .sug-i,body[data-sec="resumen"] .conex-i,
  body[data-sec="resumen"] .act-i{padding-left:14px;padding-right:14px}
  body[data-sec="resumen"] .card-b.conex,body[data-sec="resumen"] .card-b.act{padding:6px 0 2px}
  body[data-sec="resumen"] .card-b.res-asis-g,body[data-sec="resumen"] .card-b.sug-g{padding:0}
}
/* ═══ Azul tinta · Contactos (12-oct-2026) ══════════════════════════
   La lista como la tabla del lienzo (encabezados en mono, etapa con su punto, teléfono en mono) y la persona con
   todo su detalle en un solo panel por secciones. Las mismas funciones de antes. */
body.az .hello h1 .h-n{font-family:var(--mono);font-size:.8rem;font-weight:400;color:var(--faint);letter-spacing:0;
  margin-left:8px;vertical-align:2px}
body.az .hello .acciones{gap:8px}
.btn .ic{width:15px;height:15px;flex:none}
.btn.sm .ic{width:14px;height:14px}
body.az .btn.sm{min-height:32px;padding:0 12px;border-radius:7px;font-size:.78rem;font-weight:500}
body.az .btn:not(.pri):not(.peligro){background:var(--card2);border-color:var(--line-strong)}
body.az .btn:not(.pri):not(.peligro):hover{border-color:color-mix(in srgb,var(--fg) 24%,var(--line-strong))}
body.az .btn.warn{color:var(--warn)}
/* Buscar y filtrar, en un renglón */
body.az .filtros-c{gap:8px;margin-bottom:16px;align-items:center}
.busca-w{position:relative;flex:1;min-width:230px;display:flex;align-items:center}
.busca-w>.ic{position:absolute;left:11px;width:15px;height:15px;color:var(--faint);pointer-events:none}
.busca-w>.inp{width:100%;padding-left:34px;background-image:none}
body.az .filtros-c .inp{min-height:34px;padding-top:6px;padding-bottom:6px;font-size:.8rem;background-color:var(--card)}
body.az .filtros-c .sel{min-width:0;padding-right:30px}
body.az .barra-sel{background:var(--card);border:1px solid var(--line-strong);border-radius:var(--rc);padding:8px 10px 8px 14px;
  box-shadow:none}
body.az .barra-sel b{color:var(--fg)}
/* La tabla */
body.az .tabla.directorio th{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.08em;color:var(--faint);
  padding:10px 16px;border-bottom:1px solid var(--line);background:none}
body.az .tabla.directorio td{padding:10px 16px}
body.az .tabla.directorio tbody tr:hover{background:var(--card2)}
body.az .tabla.directorio tr.sel,body.az .tabla.directorio tr.sel:hover{background:var(--sel)}
body.az .tabla.directorio .av{width:30px;height:30px;font-size:.66rem}
body.az .celda-p b{font-weight:500;font-size:.8125rem}
body.az .celda-p span span{font-size:.72rem;color:var(--muted);margin-top:1px}
body.az .celda-p span span.mono{font-family:var(--mono);font-size:.68rem}
body.az .tabla .celda-p:hover b{color:var(--fg)}
body.az .chip-e{font-size:.75rem;font-weight:500}
.et-chip{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 7px;border-radius:5px;border:1px solid var(--line-strong);
  font-size:.7rem;font-weight:500;color:var(--fg2);white-space:nowrap}
.et-chip i{width:6px;height:6px;border-radius:50%;flex:none}
body.az .tabla.directorio .num{font-family:var(--mono);font-weight:500;font-size:.75rem}
body.az .tabla.directorio td.ult{font-family:var(--mono);font-size:.7rem;white-space:nowrap}
.ibtn.mas{display:inline-grid;place-items:center;color:var(--fg3)}
.ibtn.mas .ic{width:18px;height:18px}
/* Las etiquetas, con borde y sin color (un solo acento) */
.tag{background:none;border:1px solid var(--line-strong);color:var(--fg2);border-radius:6px;box-shadow:none}
.tag.mini{border-radius:5px;padding:1px 6px;font-size:.66rem}
.tag-add{border-radius:6px;border-color:var(--line-strong);color:var(--fg3)}
/* El menú de cada fila */
.menu-c button{display:flex;align-items:center;gap:9px}
.menu-c button .ic{width:15px;height:15px;color:var(--fg3)}
.menu-c button.mal .ic{color:inherit}
/* La persona */
body.az .hello.det{gap:12px;align-items:center}
.ibtn.atras{width:32px;height:32px;flex:none;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:8px;
  color:var(--fg3);background:var(--card2)}
.ibtn.atras:hover{color:var(--fg)}
.ibtn.atras .ic{width:16px;height:16px}
body.az .hello.det .av.lg{width:46px;height:46px;border-radius:50%;font-size:.95rem}
body.az .hello.det h1{font-size:1.25rem}
body.az .hello.det p.mono{font-family:var(--mono);font-size:.75rem;color:var(--muted);margin-top:3px}
.ficha-c>section{padding:14px 18px;border-top:1px solid var(--line)}
.ficha-c>section:first-child{border-top:0}
.sec-t{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;font-family:var(--mono);
  font-size:.62rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.sec-t span{letter-spacing:0;text-transform:none;font-size:.68rem}
.kv{display:grid;gap:9px;margin:0}
.kv>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.8rem}
.kv dt{color:var(--muted);flex:none}
.kv dd{margin:0;font-weight:500;text-align:right;word-break:break-word;min-width:0}
.kv dd.mono{font-family:var(--mono);font-size:.75rem}
.kv dd.vacio{color:var(--faint);font-weight:400}
.ficha-c .et-nom{display:block;font-size:.82rem;font-weight:500}
.ficha-c .embudo-p i{height:4px;border-radius:2px}
.ficha-c .embudo-p i.on{background:var(--primary)}
.ficha-c .mini{margin:8px 0 0}
.ficha-c textarea{min-height:84px;font-size:.8rem}
.imp-zona span .ic{width:26px;height:26px}
body.az .est{min-height:28px;padding:0 10px;border-radius:14px;border-color:var(--line-strong);font-size:.72rem;font-weight:500;
  display:inline-flex;align-items:center;color:var(--fg2);background:none}
body.az .est.on{border-color:var(--fg3);background:var(--soft);color:var(--fg);font-weight:600}
/* Lo que ha pasado */
body.az .tabs-pl{padding:3px;gap:2px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
body.az .tab-pl{min-height:28px;padding:0 12px;border-radius:6px;font-size:.75rem;font-weight:500;color:var(--muted)}
body.az .tab-pl.on{background:var(--soft);color:var(--fg);box-shadow:none;font-weight:500}
body.az .linea-i{padding:10px 0;gap:12px}
body.az .linea-i::before{left:12px;top:36px}
body.az .linea-ic{width:24px;height:24px;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.linea-ic .ic{width:13px;height:13px}
body.az .linea-m b{font-size:.8rem;font-weight:500}
body.az .linea-m span{font-size:.75rem}
body.az .linea-d{font-family:var(--mono);font-size:.66rem;color:var(--faint)}
@media(max-width:760px){
  body.az .filtros-c .busca-w{flex-basis:100%}
  body.az .filtros-c .sel{flex:1 1 0}
  body.az .tabla.directorio tr{padding:10px 14px;gap:6px 10px}
  body.az .tabla.directorio td{padding:0}
  body.az .tabla.directorio td:nth-child(3),body.az .tabla.directorio td.vac{margin-left:27px}
  body.az .tabla.directorio td.vac.ult{flex-basis:auto;margin-left:auto}
  body.az .tabla.directorio .av{width:34px;height:34px;font-size:.72rem}
  body.az .tabla.directorio .celda-p b{font-size:.875rem}
  body.az .hello.det .acciones{flex-basis:100%;display:flex;gap:8px}
  body.az .hello.det .acciones .btn{order:0;flex:1 1 0;min-height:40px}
  body.az .det-g>:last-child{order:-1}
}
/* ═══ Azul tinta · Embudo (13-oct-2026) ════════════════════════════
   Personas: el tablero del lienzo (columnas en un panel, tarjetas con teléfono en mono, la etapa con su punto, Chat
   y Mover sin emojis). En el celular, como en el lienzo del iPhone: arriba las etapas en cuadritos con su número y
   abajo sólo las personas de la que tocaste. Dinero: cifras en un panel y la tabla por etapa en renglones. */
.seg-emb{border-radius:8px;padding:3px;gap:2px;background:var(--card);border:1px solid var(--line)}
.seg-emb button{min-height:28px;padding:0 12px;border-radius:6px;font-size:.75rem;font-weight:500}
.seg-emb button.on{background:var(--soft);color:var(--fg);box-shadow:none}
body.az .hello p b.n{font-family:var(--mono);font-weight:500;color:var(--fg2)}
body.az .filtros{margin-bottom:14px}
body.az .filtros .busca-w{flex:0 1 320px;min-width:220px}
body.az .filtros .inp{min-height:34px;padding-top:6px;padding-bottom:6px;font-size:.8rem;background-color:var(--card)}
/* La tira de etapas: en computadora, una barra partida según cuántos hay; los cuadritos son del celular */
.et-tira{display:flex;gap:3px;height:6px;margin-bottom:14px}
.et-tira i{flex:var(--n) 1 0;min-width:24px;border-radius:3px;background:var(--c)}
.et-tira i.cero{opacity:.25}
.et-cel{display:none}
/* Las columnas */
body.az .kan{gap:12px;grid-auto-columns:minmax(168px,1fr)}
body.az .card+.kan{margin-top:16px}
body.az .col{background:var(--card);border:1px solid var(--line);border-radius:var(--rc);padding:8px}
body.az .col-h{padding:2px 4px 10px;margin-bottom:2px;border-bottom:0;gap:8px}
body.az .col-h .dot{width:7px;height:7px}
body.az .col-h b{font-size:.78rem;font-weight:600}
body.az .col-h .n{margin-left:0;background:none;padding:0;font-family:var(--mono);font-size:.68rem;font-weight:500;color:var(--muted)}
body.az .col-v{margin-left:auto;font-family:var(--mono);font-size:.68rem;color:var(--faint)}
body.az .col-vacia{border:1px dashed var(--line-strong);border-radius:8px;color:var(--faint);padding:22px 8px;background:none}
/* La tarjeta */
body.az .lead{background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:11px 12px 10px;margin-bottom:8px;
  box-shadow:none;display:flex;flex-direction:column;gap:8px}
body.az .lead:last-child{margin-bottom:0}
body.az .lead-t .av{width:28px;height:28px;font-size:.62rem}
body.az .lead-t b{font-size:.8rem;font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.az .lead-t span span{display:block;font-family:var(--mono);font-size:.66rem;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;letter-spacing:-.02em}
body.az .lead-msg{margin:0;font-style:normal;font-size:.75rem;color:var(--fg3);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
body.az .lead-meta{margin:0;gap:8px;font-size:.68rem;color:var(--muted)}
body.az .lead-meta .cuando{font-family:var(--mono);font-size:.66rem}
body.az .lead-meta .quien{display:inline-flex;align-items:center;gap:4px;color:var(--fg3)}
body.az .lead-meta .quien .ic{width:12px;height:12px}
body.az .lead-v{margin-left:auto;font-family:var(--mono);font-weight:500;font-size:.68rem;color:var(--fg2)}
body.az .lead-a{padding-top:8px;border-top:1px solid var(--line);gap:6px}
body.az .lead-a .btn{flex:1;min-height:28px;padding:0 8px;font-size:.72rem}
body.az .lead-a .mv{flex:1;display:flex}
body.az .lead-a .mv .btn{width:100%}
.mv-menu .ck .ic{width:14px;height:14px}
/* Dinero */
body.az .aviso{background:var(--card);border:1px solid var(--line-strong);color:var(--fg2);font-size:.8rem}
.pl-fila .pl-n{display:flex;align-items:center;gap:8px;font-size:.8rem;font-weight:500;min-width:0}
.pl-fila .pl-n .dot{width:7px;height:7px;border-radius:50%;flex:none}
.pl-fila .pl-n em{background:none;padding:0;font-family:var(--mono);font-size:.68rem;color:var(--muted);font-style:normal}
.pl-fila .pl-barra{height:6px;border-radius:3px;background:var(--card2)}
.pl-fila .pl-barra i{border-radius:3px}
.pl-fila .pl-v{display:block;text-align:right;font-family:var(--mono);font-weight:500;font-size:.75rem}
.pl-fila .pl-p{display:block;text-align:right;font-family:var(--mono);font-weight:500;font-size:.75rem;color:var(--primary-txt)}
.pl-cab{display:grid;grid-template-columns:190px 1fr 90px 90px;gap:12px;padding:0 0 8px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.pl-cab span:nth-child(n+3){text-align:right}
body.az .col-sum{font-family:var(--mono);font-weight:500;font-size:.8rem;padding:0 4px 10px;border-bottom:1px solid var(--line);margin-bottom:8px}
body.az .col-sum em{font-family:inherit;font-size:.62rem;color:var(--faint)}
body.az .pl-monto{font-family:var(--mono);font-size:.85rem;font-weight:500;margin:0}
@media(max-width:760px){
  /* Las etapas en cuadritos; abajo, sólo la que tocaste */
  .et-tira{display:none}
  body.az .filtros .busca-w{flex:1 1 100%}
  .et-cel{display:grid;grid-template-columns:repeat(var(--k),minmax(0,1fr));gap:4px;margin-bottom:12px}
  .et-c{min-height:60px;padding:8px 4px 6px;border-radius:10px;border:1px solid var(--line);background:var(--card);
    display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--fg)}
  .et-c i{width:100%;height:4px;border-radius:2px;background:var(--c)}
  .et-c b{font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums}
  .et-c span{font-size:.66rem;color:var(--muted);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .et-c.on{border-color:var(--fg3);background:var(--soft)}
  .et-c.on span{color:var(--fg)}
  body[data-sec="embudo"] .kan{display:block;overflow:visible}
  body[data-sec="embudo"] .kan .col:not(.cel-on){display:none}
  body[data-sec="embudo"] .col{padding:0;background:none;border:0}
  body[data-sec="embudo"] .lead{padding:13px 14px 12px;border-radius:12px;background:var(--card)}
  body[data-sec="embudo"] .lead-t .av{width:38px;height:38px;font-size:.75rem}
  body[data-sec="embudo"] .lead-t b{font-size:.95rem}
  body[data-sec="embudo"] .lead-a .btn{min-height:40px;font-size:.82rem}
  body[data-sec="pipeline"] .kan{display:grid;grid-auto-flow:row;grid-auto-columns:auto;overflow:visible}
  body[data-sec="pipeline"] .kan .col.vacia{display:none}
  .pl-cab{grid-template-columns:1fr 70px}
  .pl-cab span:nth-child(2),.pl-cab span:nth-child(3){display:none}
}
/* ═══ Azul tinta · Citas (13-oct-2026) ═════════════════════════════
   El mes sin cajitas (el día elegido con fondo suave, hoy en azul, el número de citas en mono), la lista del día con
   la hora a la izquierda y el estado con su punto (como el lienzo del iPhone), y Día y Semana sin las rayas de color
   a un lado. Las mismas funciones: Asistió, No asistió, Mover, Cancelar y Chat. */
.cal-vistas{border-radius:8px;padding:3px;gap:2px;background:var(--card);border:1px solid var(--line);overflow:visible}
.cal-vistas button{min-height:28px;padding:0 12px;border-radius:6px;font-size:.75rem;font-weight:500;color:var(--muted)}
.cal-vistas button.on{background:var(--soft);color:var(--fg)}
body.az .barra-h{gap:4px}
body.az .barra-h .ibtn{width:30px;height:30px;display:grid;place-items:center;border-radius:7px;color:var(--fg3)}
body.az .barra-h .ibtn:hover{background:var(--card2);color:var(--fg)}
body.az .barra-h .ibtn .ic{width:16px;height:16px}
body.az .cal-w{gap:16px}
body.az .cal-h{gap:2px}
body.az .cal-h span{font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.08em;color:var(--faint)}
body.az .cal{gap:2px}
body.az .cal-c{aspect-ratio:auto;min-height:54px;border:1px solid transparent;border-radius:8px;background:none}
body.az .cal-c:hover{background:var(--card2);border-color:transparent}
body.az .cal-c.vacia:hover{background:none}
body.az .cal-c.hoy{border-color:transparent}
body.az .cal-c.hoy .cal-n{color:var(--primary-txt);font-weight:700}
body.az .cal-c.sel,body.az .cal-c.sel:hover{background:var(--soft);border-color:var(--fg3)}
body.az .cal-c.sel .cal-n{color:var(--fg)}
body.az .cal-c.sel.hoy .cal-n{color:var(--primary-txt)}
body.az .cal-n{font-size:.8rem;font-weight:500}
body.az .cal-p,body.az .cal-c.sel .cal-p{background:none;padding:0;min-width:0;font-family:var(--mono);font-size:.6rem;
  font-weight:500;color:var(--primary-txt)}
/* La lista del día */
body.az .card-b.rows{gap:0;padding:4px 0 6px}
body.az .cita-fila{background:none;border:0;border-top:1px solid var(--line2);border-radius:0;padding:12px 18px;
  gap:8px 12px;align-items:flex-start;box-shadow:none}
body.az .cita-fila:first-child{border-top:0}
.cita-h{width:46px;flex:none;font-family:var(--mono);font-size:.78rem;color:var(--fg2);padding-top:1px}
body.az .cita-fila .m b{font-size:.84rem;font-weight:600}
body.az .cita-fila .m span{font-size:.75rem}
body.az .cita-fila.libre .m b,body.az .cita-fila.libre .cita-h{color:var(--muted);font-weight:500}
.cita-e{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--fg3);white-space:nowrap;padding-top:2px}
.cita-e i{width:6px;height:6px;border-radius:50%;flex:none}
body.az .cita-acc{padding-left:58px;gap:6px}
body.az .cita-acc .btn{min-height:28px;padding:0 10px;font-size:.72rem}
/* Día */
body.az .dia-h{font-family:var(--mono);font-size:.66rem;color:var(--faint)}
body.az .dia-c{border:1px solid var(--line);border-radius:8px;background:var(--card2)}
body.az .dia-c.libre{background:none;border-style:dashed}
body.az .dia-c .btn{min-height:28px;padding:0 8px}
body.az .dia-hueco:hover{background:var(--card2);color:var(--fg3)}
body.az .dia-f.ahora .dia-h{color:var(--danger)}
/* Semana */
body.az .sem{gap:6px}
body.az .sem-c{background:var(--card2);border-color:var(--line);border-radius:8px}
body.az .sem-c:hover{border-color:var(--line-strong)}
body.az .sem-c.hoy{border-color:var(--line-strong)}
body.az .sem-c.sel{border-color:var(--fg3);background:var(--soft);padding:0;border-radius:8px}
body.az .sem-h span{font-family:var(--mono);font-weight:500;color:var(--faint)}
body.az .sem-h b{font-weight:600}
body.az .sem-i{border-left:0;border:1px solid var(--line);background:var(--card)}
body.az .sem-i b{font-family:var(--mono);font-weight:500}
@media(max-width:760px){
  body.az .cal-c{min-height:42px}
  body.az .cita-fila{padding:12px 14px}
  body.az .cita-acc{padding-left:0}
  body.az .cita-acc .btn{min-height:36px;flex:1 1 auto}
  body.az .barra-h{width:auto;margin-left:auto}
  body.az .cal-w>.card:first-child .card-h .sub{flex-basis:100%;margin-left:0}
  /* Semana: un día por renglón, el día a la izquierda y sus citas a la derecha */
  body.az .sem{grid-template-columns:1fr;gap:6px}
  body.az .sem-c{display:flex;min-height:52px}
  body.az .sem-h{width:62px;flex:none;border-bottom:0;border-right:1px solid var(--line);display:flex;flex-direction:column;
    justify-content:center;padding:6px 4px}
  body.az .sem-h i{top:0;bottom:0;left:auto;right:-1px;width:2px;height:auto}
  body.az .sem-b{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-content:center;gap:6px;padding:8px}
  body.az .sem-i{font-size:.75rem;padding:5px 8px}
  body.az .sem-v{padding:0 4px;text-align:left}
}
/* ═══ Azul tinta · Asistente IA (13-oct-2026) ══════════════════════
   Las mismas tarjetas, editor y prueba, sin emojis: cada agente lleva la inicial de su nombre (ya no se escoge un
   emoji de avatar), el tono y los objetivos tienen íconos de línea, las pestañas del editor van sin símbolos y en la
   prueba las herramientas y los frenos se marcan con una llave y un escudo. */
.ia-av,body.az .ia-av{background:var(--card2);color:var(--fg2);border:0;box-shadow:inset 0 0 0 1px var(--line-strong);
  border-radius:8px;font-size:.8rem;font-weight:600}
.ia-av .ic{width:15px;height:15px;color:var(--primary-txt)}
.ia-av.chico .ic{width:13px;height:13px}
body.az .ia-c .card-h{padding:14px 16px 4px;gap:10px}
body.az .ia-c .card-b{padding:10px 16px 14px}
body.az .ia-mod{font-family:var(--mono);font-size:.66rem;color:var(--faint)}
body.az .ia-chips .chip,
body.az .ia-chips .chip:not(.ok):not(.warn):not(.dg):not(.info):not(.pur):not(.mute){background:none;
  box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--fg2);font-weight:500;border-radius:5px}
body.az .ia-chips .chip.warn{color:var(--warn);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 40%,var(--line-strong))}
body.az .ia-meta span::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--line-strong);
  margin-right:6px;vertical-align:2px}
body.az .ia-c .row-f{padding-top:10px;border-top:1px solid var(--line);margin-top:12px}
body.az .ia-c .cfg-btns .ibtn{width:32px;height:32px;display:grid;place-items:center}
body.az .ia-c .cfg-btns .ibtn .ic{width:16px;height:16px}
body.az .aviso{line-height:1.55}
.ia-modo-ic{color:var(--fg3);background:var(--card2);box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:8px}
.ia-modo-ic .ic{width:17px;height:17px}
.au-t-ic .ic{width:17px;height:17px;color:var(--fg3)}
.au-t.on .au-t-ic .ic{color:var(--primary-txt)}
.ia-tab{border-radius:6px}
.ia-tab.on{background:var(--soft);border-color:transparent}
.ia-saber-ic{color:var(--fg3)}
.ia-saber-ic .ic{width:14px;height:14px}
.ia-saber .ibtn,.ia-file .ibtn{display:grid;place-items:center}
.ia-saber .ibtn .ic,.ia-file .ibtn .ic{width:15px;height:15px}
.ia-h-c .ic{width:12px;height:12px;stroke-width:2.4}
.ia-riel b{display:flex;align-items:center;gap:6px}
.ia-riel b .ic{width:13px;height:13px;color:var(--ok);flex:none}
.pb-tool,.pb-riel{display:flex;align-items:center;gap:6px}
.pb-tool .ic,.pb-riel .ic{width:13px;height:13px;flex:none}
.ic.en-linea{display:inline-block;width:14px;height:14px;vertical-align:-2px}
.lnk .ic{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:5px}
/* ═══ Azul tinta · Cobros y Ajustes (13-oct-2026) ══════════════════
   Las cifras de Cobros en un panel, el estado de cada pago con su punto, los filtros como selector, las filas de
   ajustes en renglones (sin cajitas dentro de las tarjetas), los menús y botones con íconos de línea y los canales
   en gris (un solo acento). */
body.az .rows{gap:0}
body.az .rows>.row:not(.cita-fila){background:none;border:0;border-top:1px solid var(--line2);border-radius:0;padding:12px 2px;
  box-shadow:none}
body.az .rows>.row:not(.cita-fila):first-child{border-top:0}
body.az .card-b.rows>.row:not(.cita-fila){padding-left:18px;padding-right:18px}
body.az .card-b.rows{padding:4px 0 6px}
/* Cobros */
body.az .cob-cifras{gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rc);overflow:hidden}
body.az .cob-cifras>*{border:0;border-radius:0;background:var(--card);padding:14px 18px 16px;box-shadow:none}
body.az .cob-cifras b{font-family:inherit;font-size:1.5rem;font-weight:500;letter-spacing:-.02em}
body.az .cob-cifras button:hover{background:var(--card2);border:0}
body.az .cob-cifras button.hay{background:var(--card);border:0}
body.az .cob-cifras button.hay:hover{background:var(--card2)}
.cob-e{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--fg3);white-space:nowrap}
.cob-e i{width:6px;height:6px;border-radius:50%;flex:none}
body.az .cob-monto{font-family:var(--mono);font-weight:500;font-size:.85rem}
body.az .cob-banco{background:var(--card2);color:var(--fg2);box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:8px}
/* Ajustes */
body.az .aj-tabs{border-radius:8px;padding:3px;gap:2px;background:var(--card);border:1px solid var(--line)}
body.az .aj-tab{min-height:30px;padding:0 12px;border-radius:6px;font-size:.78rem;font-weight:500}
body.az .aj-tab.on{background:var(--soft);color:var(--fg);font-weight:500}
body.az .aj-sec-h>div>b{font-family:inherit;font-size:.95rem}
body.az .aj-cupo{font-family:var(--mono);font-weight:500;background:none;box-shadow:inset 0 0 0 1px var(--line-strong)}
body.az .aj-num-ic{background:var(--card2);color:var(--fg3);box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:10px}
body.az .aj-canal-ic,body.az .canal-ic,.cx-c-ic{color:var(--fg3);background:var(--card2);box-shadow:inset 0 0 0 1px var(--line-strong);
  border-radius:10px;border:0}
body.az .aj-canal-ic .ic,body.az .canal-ic .ic,.cx-c-ic .ic{width:18px;height:18px}
.perm-ic.grande .ic{width:22px;height:22px}
.vc-barra>span .ic{width:18px;height:18px}
.cx-listo span .ic{width:30px;height:30px;color:var(--ok)}
body.az .tabla .chip{background:none;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--fg2);font-weight:500;border-radius:5px}
.eq-e{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--fg2);white-space:nowrap}
.eq-e i{width:6px;height:6px;border-radius:50%;flex:none}
/* Una etiqueta dentro del título de un renglón (El tuyo, Muy pronto) no se estira a todo lo ancho. */
.row .m b .chip{display:inline-block;width:auto;vertical-align:1px;margin-left:6px;overflow:visible}
/* ═══ Azul tinta · Campañas, Plantillas, Respuestas rápidas, Auto-respuestas y Flujos (13-oct-2026) ═══
   Sin emojis: los íconos de cada flujo, de cada tipo de auto-respuesta, de los pasos del lienzo y de los adjuntos
   salen de icoE (traduce el emoji guardado a un ícono de línea). Filtros como selector, un solo botón relleno por
   pantalla y los avisos de "esto se contradice" sin el triángulo. */
.chip .ic,.au-c .chip .ic{width:12px;height:12px;flex:none}
body.az .au-c .card-h .chip{display:inline-flex;align-items:center;gap:5px;background:none;color:var(--fg2);font-weight:500;
  box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:5px}
body.az .au-c .card-h .chip.ok{color:var(--ok);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 35%,var(--line-strong))}
.fl-ic{color:var(--fg3)}
.fl-ic .ic{width:16px;height:16px}
body.az .fl-ic{background:var(--card2);box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:8px}
body.az .fl-acc .btn{min-height:30px}
body.az .fl-acc .btn .ic{width:15px;height:15px}
.paso-b>span .ic,.config-t .ic,.nodo-h .ic{width:14px;height:14px;flex:none}
.config-t{display:inline-flex;align-items:center;gap:6px}
.nodo-h>span{display:inline-grid;place-items:center}
.zoom-b .ic{width:15px;height:15px}
.aud-ic .ic{width:18px;height:18px}
.pl-adj .ic,.adj-atajo .ic,.wa-adj .ic{display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-right:4px;color:var(--fg3)}
.wa-adj .ic{margin-right:0}
.pop-atajos u .ic{width:12px;height:12px;vertical-align:-2px}
body.az .pl-card-acc .ibtn,body.az .pl-acc .btn.gh[aria-label]{display:inline-grid;place-items:center}
body.az .pl-card-acc .ibtn .ic,body.az .pl-acc .ic{width:15px;height:15px}
body.az .sec-barra{background:var(--card);border:1px solid var(--line);box-shadow:none}
body.az .at-chip{background:none;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--primary-txt)}
body.az .pl-card{box-shadow:none}
body.az .camp-btns .btn .ic{width:13px;height:13px}
/* El nombre de la plantilla y la fecha de una campaña, en su renglón (salían partidos en tres). */
.row .m span span.mono{display:inline}
/* Tres cifras: tres columnas (en cuatro quedaba un hueco gris). */
body.az .kpis:has(>.kpi:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
body.az .kpis:has(>.kpi:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){body.az .kpis:has(>.kpi:nth-child(3):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  body.az .kpis>.kpi:nth-child(3):last-child{grid-column:1/-1}}
/* ═══ Azul tinta · Reseñas, Recompra, Reportes, Catálogo, Equipo, Ayuda, buscador y campana (13-oct-2026) ═══
   La última tanda: estrellas dibujadas (no ★ de texto), íconos de línea en el buscador Ctrl+K, la campana, la ayuda
   y los reportes, y el resto de botones sin símbolos. Con esto el panel ya no pinta emojis propios: los que
   quedan son de los mensajes que reciben los clientes. */
.stars{display:inline-flex;gap:1px;align-items:center}
.stars .ic{width:12px;height:12px;color:var(--line-strong)}
.stars .ic.llena{color:var(--warn);fill:currentColor}
.res-n{display:inline-flex;align-items:center;gap:3px;font-family:var(--mono);font-weight:500}
.res-n .ic{width:11px;height:11px;fill:currentColor}
body.az .row.res .av{background:var(--card2)!important;color:var(--fg2);box-shadow:inset 0 0 0 1px var(--line-strong);font-size:.72rem}
.dist-e{display:inline-flex;align-items:center;gap:3px}
.dist-e .ic{width:10px;height:10px;fill:currentColor}
.kpi .v .de{font-size:.8rem;font-weight:400;color:var(--muted);margin-left:4px;letter-spacing:0}
.pitem .pic{color:var(--fg3);background:var(--card2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.pitem .pic .ic{width:14px;height:14px}
.pitem.sel .pic{color:var(--primary-txt)}
.noti-ic[style]{background:var(--card2)!important;color:var(--fg3)!important;box-shadow:inset 0 0 0 1px var(--line-strong)}
.noti-ic .ic{width:14px;height:14px}
.docs-a>span .ic{width:15px;height:15px}
.docs-ic{color:var(--fg3)}
.docs-ic .ic{width:22px;height:22px}
body.az .docs-ic{background:var(--card2);box-shadow:inset 0 0 0 1px var(--line-strong)}
.marca-ia[style],.marca-ia{background:var(--card2)!important;color:var(--primary-txt);box-shadow:inset 0 0 0 1px var(--line-strong)}
.marca-ia .ic{width:17px;height:17px}
.hito-ic[style]{background:var(--card2)!important}
.hito-ic .ic{width:14px;height:14px}
.rep-f{display:inline-flex;align-items:center;gap:6px}
.rep-f .ic{width:14px;height:14px;color:var(--fg3)}
.tabla.orden th i .ic{display:inline-block;width:11px;height:11px;vertical-align:-1px}
.met-b>span .ic,.au-c .chip .ic{width:13px;height:13px}
.met-b>span{display:inline-grid;place-items:center}
.cx-g-ic .ic{width:18px;height:18px;color:var(--fg3)}
.prev-m>span .ic{width:14px;height:14px}
.prev-url i .ic{width:11px;height:11px;vertical-align:-1px}
.voz-play .ic{width:14px;height:14px;fill:currentColor}
.msg-doc .ic{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:4px}
.burger .ic{width:20px;height:20px}
.vivo .pdot{background:currentColor}
.fl-meta span::before,.au-meta span::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--line-strong);margin-right:6px;vertical-align:2px}
.cfg-c.otro::after{content:'+';font-size:.85rem}
.pl-acc .btn,.cfg-btns .btn{white-space:nowrap}
.ia-chips .chip{display:inline-flex;align-items:center;gap:5px}
.ia-chips .chip .ic{width:12px;height:12px}
.row.res.atender{border-color:var(--warn-solid)}
body.az .fchip.on{background:var(--soft);color:var(--fg);border-color:var(--fg3);box-shadow:none}
body.az .rows>.row.res.atender{border-color:var(--line2)}
body.az .tienda-t.on{background:var(--soft);border-color:var(--fg3);color:var(--fg)}
/* ═══ Azul tinta · Inicio con estadísticas (13-oct-2026) ════════════ */
.ini-h{align-items:flex-end}
.ini-fecha{display:block;font-family:var(--mono);font-size:.7rem;color:var(--faint);margin-bottom:4px}
.ini-h p b.n{font-family:var(--mono);font-weight:500;color:var(--fg)}
.ini-esp{font-size:inherit;color:var(--primary-txt);text-decoration:none;font-weight:500}
.ini-espera{display:none}
.ini-kpis .kpi{display:flex;align-items:stretch;gap:12px}
.ini-g1 .card-lnk,.ini-g2 .card-lnk{margin-left:auto}
.ini-kpi-t{flex:1;min-width:0}
.ini-ray{width:84px;height:30px;flex:none;align-self:flex-end;color:var(--primary);opacity:.9}
.kpi .d .dn{color:var(--danger)}
.ini-g1{display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:16px;margin-bottom:16px}
.ini-g2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.ini-g1>.card,.ini-g2>.card{min-width:0;display:flex;flex-direction:column}
.ini-vol .card-h{flex-wrap:wrap;row-gap:6px}
.ini-t{display:flex;flex-direction:column;gap:2px;flex:1 1 220px;min-width:0}
.ini-t .sub{margin:0}
.ini-ley{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--fg3);white-space:nowrap}
.ini-ley i{width:8px;height:8px;border-radius:2px}
.ini-ley i.as,.ini-col i.as{background:color-mix(in srgb,var(--primary) 60%,var(--card))}
.ini-col.hoy i.as{background:var(--primary)}
.ini-ley i.eq,.ini-col i.eq{background:var(--line-strong)}
.ini-ley i.sin,.ini-col i.sin{background:repeating-linear-gradient(135deg,var(--line) 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px var(--line)}
.ini-barras{display:flex;gap:8px;height:190px}
.ini-y{display:flex;flex-direction:column;justify-content:space-between;font-family:var(--mono);font-size:.62rem;color:var(--faint);
  text-align:right;width:22px}
.ini-cols{flex:1;display:flex;align-items:flex-end;gap:clamp(4px,1vw,10px);border-bottom:1px solid var(--line-strong);
  background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 50%;min-width:0}
.ini-col{flex:1;display:flex;flex-direction:column;gap:2px;min-height:2px;min-width:0}
.ini-col i{flex-basis:0;display:block;min-height:0;border-radius:3px 3px 0 0}
.ini-col i+i{border-radius:0}
.ini-x{display:flex;gap:clamp(4px,1vw,10px);margin:6px 0 0 30px;font-family:var(--mono);font-size:.62rem;color:var(--faint)}
.ini-x span{flex:1;text-align:center;min-width:0}
.ini-filas{display:flex;flex-direction:column}
.ini-fila{display:flex;align-items:center;gap:10px;width:100%;padding:9px 18px;border:0;border-top:1px solid var(--line2);
  background:none;text-align:left;color:inherit;font:inherit;cursor:pointer}
.ini-fila:first-child{border-top:0}
.ini-fila:hover{background:var(--card2)}
.ini-fila .av{width:28px;height:28px;font-size:.62rem}
.ini-fila-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ini-fila-a{display:flex;justify-content:space-between;gap:8px}
.ini-fila-a b{font-size:.8rem;font-weight:500}
.ini-fila-a em{font-style:normal;font-family:var(--mono);font-size:.64rem;color:var(--faint);white-space:nowrap}
.ini-fila-b{display:flex;align-items:center;gap:8px}
.ini-fila-b .txt{flex:1;min-width:0;font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ini-st{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;white-space:nowrap}
.ini-st i{width:5px;height:5px;border-radius:50%;background:currentColor}
.ini-cita{display:flex;align-items:center;gap:12px;padding:9px 18px;border-top:1px solid var(--line2)}
.ini-cita:first-child{border-top:0}
.ini-cita .h{width:42px;font-family:var(--mono);font-size:.75rem;color:var(--fg2)}
.ini-cita>i{width:2px;align-self:stretch;border-radius:1px;background:var(--line-strong)}
.ini-cita>i.as{background:var(--primary)}
.ini-cita .m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ini-cita .m b{font-size:.8rem;font-weight:500}
.ini-cita .m span{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ini-cita .por{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;color:var(--muted);white-space:nowrap}
.ini-cita .por .ic{width:12px;height:12px}
.ini-ag{display:flex;flex-direction:column;gap:7px;padding:11px 18px;border-top:1px solid var(--line2)}
.ini-ag:first-child{border-top:0}
.ini-ag-a{display:flex;align-items:center;gap:10px}
.ini-ag-ic{width:24px;height:24px;flex:none;border-radius:7px;display:grid;place-items:center;color:var(--primary-txt);
  background:var(--b-ai,var(--card2));box-shadow:inset 0 0 0 1px var(--b-ai-l,var(--line-strong))}
.ini-ag-ic .ic{width:13px;height:13px}
.ini-ag .m{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ini-ag .m b{font-size:.8rem;font-weight:500}
.ini-ag .m span{font-size:.72rem;color:var(--muted)}
.ini-ag .pct{font-family:var(--mono);font-size:.75rem;color:var(--fg)}
.ini-ag-b{height:4px;border-radius:2px;background:var(--card2);display:flex}
.ini-ag-b i{border-radius:2px;background:var(--primary)}
.ini-ag.off .ini-ag-b i{background:var(--faint)}
.ini-pie{margin-top:auto;padding:10px 18px 12px;font-size:.72rem;color:var(--faint)}
.ini-emb .card-b{display:flex;flex-direction:column;gap:12px;flex:1}
.ini-emb-f{display:flex;flex-direction:column;gap:5px}
.ini-emb-a{display:flex;justify-content:space-between;font-size:.75rem;color:var(--fg2)}
.ini-emb-a>span:last-child{display:flex;gap:10px}
.ini-emb-a em{font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--faint)}
.ini-emb-a b{font-family:var(--mono);font-size:.7rem;font-weight:500;color:var(--fg);min-width:34px;text-align:right}
.ini-emb-b{height:6px;border-radius:3px;background:var(--card2);display:flex}
.ini-emb-b i{border-radius:3px}
.ini-emb-pie{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);display:flex;justify-content:space-between;
  font-size:.75rem;color:var(--muted)}
.ini-emb-pie b{font-family:var(--mono);font-weight:500;color:var(--fg)}
.res-asis .card-h .range{margin-left:auto}
.res-asis .card-h .range+.sub{display:none}
@media(max-width:1180px){
  .ini-g1{grid-template-columns:1fr}
  .ini-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ini-g2>.ini-emb{grid-column:1/-1}
}
@media(max-width:1300px){.ini-ray{width:60px}}
@media(max-width:900px){.ini-ray{display:none}}
@media(max-width:760px){
  .ini-h p .ini-esp{display:none}
  .ini-espera{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 14px;margin:0 0 14px;border-radius:12px;
    background:var(--card);border:1px solid var(--line-strong);color:var(--fg);text-align:left;font:inherit;cursor:pointer}
  .ini-espera-ic{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--danger);
    background:var(--danger-bg)}
  .ini-espera-ic .ic{width:17px;height:17px}
  .ini-espera>span:nth-child(2){flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .ini-espera b{font-size:.95rem;font-weight:600}
  .ini-espera i{font-style:normal;font-size:.8rem;color:var(--muted)}
  .ini-espera>.ic{width:16px;height:16px;color:var(--faint)}
  .ini-g2{grid-template-columns:1fr}
  .ini-barras{height:150px}
  .ini-x span:nth-child(odd){visibility:hidden}
  .ini-ley{font-size:.68rem}
}
/* ═══ Azul tinta · Chat: sugerencias y ficha (13-oct-2026) ═══════════
   Tres respuestas sugeridas encima del campo (al picar una se pone en el campo; no se manda sola) y la ficha de la
   derecha como en el lienzo: por qué te lo pasó, próxima cita, detalles, actividad. En el iPad y el celular la
   ficha sale encima al tocar el nombre. */
/* Encabezado: Asignar (con quién) y Resumen, con su nombre escrito */
.chat-h .hbtn{height:32px;flex:none;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:8px;
  border:1px solid var(--line-strong);background:var(--card2);color:var(--fg2);font-size:.76rem;font-weight:500;white-space:nowrap}
.chat-h .hbtn:hover{color:var(--fg);border-color:var(--primary)}
.chat-h .hbtn .ic{width:16px;height:16px;flex:none}
.chat-h .hbtn .av.xs{width:20px;height:20px;font-size:.55rem;flex:none}
@media(max-width:1300px){.chat-w.con-ficha .chat-h .hbtn .lbl{display:none}.chat-w.con-ficha .chat-h .hbtn{padding:0 7px}}
@media(max-width:900px){.chat-h .hbtn .lbl{display:none}.chat-h .hbtn{padding:0 7px}}
/* El nombre abre la ficha */
.chat-h .chat-h-q{background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;text-align:left;cursor:pointer;
  align-items:stretch;border-radius:6px}
.chat-h .chat-h-q:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-strong)}
.chat-h .chat-h-q:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media(min-width:761px) and (max-width:1100px){.chat-h [data-ficha]{display:grid}}

/* Sugerido */
.sugs{display:flex;align-items:center;gap:10px;padding:8px 14px 0;border-top:1px solid var(--line)}
.ctl+.sugs{border-top:0;padding-top:2px}
.sugs-t{display:inline-flex;align-items:center;gap:5px;flex:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--primary-txt)}
.sugs-t .ic{width:12px;height:12px}
.sugs-l{flex:1;min-width:0;display:flex;gap:6px}
.sug-op{flex:1 1 0;min-width:0;text-align:left;padding:6px 10px;border-radius:8px;border:1px solid var(--line-strong);
  background:var(--card2);color:var(--fg2);font-size:.74rem;line-height:1.35;transition:border-color .13s,background .13s,color .13s}
.sug-op>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sug-op:hover{border-color:var(--primary);color:var(--fg);background:var(--primary-s)}
.sug-op:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.sug-op.esq{display:block;height:34px;border-color:var(--line);animation:sugPulso 1s ease-in-out infinite alternate}
.sug-op.esq:nth-child(2){animation-delay:.15s}.sug-op.esq:nth-child(3){animation-delay:.3s}
@keyframes sugPulso{from{opacity:.4}to{opacity:.9}}
@media(prefers-reduced-motion:reduce){.sug-op.esq{animation:none;opacity:.6}}
.sugs .sugs-x{width:28px;height:28px;flex:none;color:var(--muted);display:grid;place-items:center}
.sugs .sugs-x .ic{width:15px;height:15px}
.sugs-err{flex:1;min-width:0;font-size:.74rem;color:var(--muted)}
.sugs-err .lnk{margin-left:8px;color:var(--primary-txt);font-weight:600}
@media(max-width:760px){
  .sugs{flex-wrap:wrap;gap:6px;padding:8px 10px 0}
  .sugs-l{order:3;flex-basis:100%;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
  .sugs-l::-webkit-scrollbar{display:none}
  .sug-op{flex:0 0 80%;scroll-snap-align:start;font-size:.8rem}
  .sugs .sugs-x{margin-left:auto}
}
/* El campo crece con el texto (hasta cinco renglones) */
.chat-in{align-items:flex-end}
.chat-in textarea.real{display:block;resize:none;line-height:1.4;min-height:36px;max-height:140px;overflow-y:auto;
  border-radius:18px;padding:8px 14px}

/* La ficha */
.ficha.fx{background:var(--card)}
.fx>section,.fx>.fx-mas{padding:14px 18px;border-top:1px solid var(--line)}
.fx>.fx-top{border-top:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;padding-top:18px}
.fx .sec-t .lnk{font-family:inherit;text-transform:none;letter-spacing:0;font-size:.72rem;color:var(--primary-txt);font-weight:600}
.fx-top .av.lg{width:44px;height:44px;margin:0}
.fx-id b{display:block;font-size:.95rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-id span{display:block;font-size:.74rem;color:var(--muted);margin-top:2px}
.fx-bts{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.fx-bts .btn{justify-content:center;gap:6px}
.fx-bts .btn .ic{width:15px;height:15px}
.fx-pase{display:flex;gap:10px;padding:10px 12px;border-radius:8px;
  border:1px solid color-mix(in srgb,var(--warn) 35%,var(--line));background:var(--warn-bg)}
.fx-pase .ic{width:16px;height:16px;color:var(--warn);flex:none;margin-top:1px}
.fx-pase p{margin:0;font-size:.78rem;line-height:1.45;color:var(--fg2)}
.fx-pase em{font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--muted);white-space:nowrap}
.fx-cita{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:0;background:none;border:0;
  color:inherit;cursor:pointer;border-radius:8px}
.fx-cita:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.fx-cal{width:44px;flex:none;border:1px solid var(--line-strong);border-radius:8px;text-align:center;background:var(--card2)}
.fx-cal i{display:block;font-style:normal;font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding-top:4px}
.fx-cal b{display:block;font-size:1.05rem;font-weight:600;line-height:1.15;padding-bottom:5px;font-variant-numeric:tabular-nums}
.fx-cita-m{min-width:0}
.fx-cita-m b{display:block;font-size:.84rem;font-weight:600}
.fx-cita-m span{display:block;font-size:.74rem;color:var(--muted);margin-top:2px}
.fx-cita:hover .fx-cita-m b{color:var(--primary-txt)}
.fx-kv{display:grid;gap:4px;margin:0}
.fx-kv>div{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px}
.fx-kv dt{font-size:.76rem;color:var(--muted);flex:none}
.fx-kv dd{margin:0;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:2px;font-size:.78rem;font-weight:500;
  color:var(--fg);text-align:right;overflow:hidden;text-overflow:ellipsis}
.fx-kv dd .pdot{margin-right:2px}
.fx-kv .vac{color:var(--faint);font-weight:400}
.fx-kv .lnk{color:var(--primary-txt);font-weight:600;font-size:.76rem}
.fx-selw{position:relative;display:inline-flex;align-items:center;min-width:0}
.fx-sel{appearance:none;-webkit-appearance:none;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--fg);
  font:inherit;font-size:.78rem;font-weight:500;padding:4px 22px 4px 6px;text-align:right;max-width:170px;cursor:pointer;
  text-overflow:ellipsis}
.fx-sel:hover,.fx-sel:focus{border-color:var(--line-strong);background:var(--card2);outline:none}
.fx-sel option{background:var(--card);color:var(--fg)}
.fx-selw .ic{position:absolute;right:5px;width:13px;height:13px;color:var(--muted);pointer-events:none}
.fx .valor.fx-valor{width:118px;padding:3px 8px;gap:5px;background:transparent;border-color:transparent}
.fx .valor.fx-valor:hover,.fx .valor.fx-valor:focus-within{border-color:var(--line-strong);background:var(--card2)}
.fx .valor.fx-valor input{font-size:.8rem;text-align:right;font-variant-numeric:tabular-nums}
.fx .valor.fx-valor input{-moz-appearance:textfield;appearance:textfield}
.fx .valor.fx-valor input::-webkit-inner-spin-button,.fx .valor.fx-valor input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.fx-sub{font-size:.72rem;color:var(--muted);margin:12px 0 4px}
.fx-pago{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.76rem;padding:3px 0}
.fx-pago .mono{font-variant-numeric:tabular-nums;color:var(--fg)}
.fx-pago-e{display:inline-flex;align-items:center;gap:6px;color:var(--fg3);text-align:right;min-width:0}
.fx-pago-e i{width:6px;height:6px;border-radius:50%;background:var(--muted);flex:none}
.fx-pago-e.ok i{background:var(--ok)}.fx-pago-e.info i{background:var(--primary)}
.fx-pago-e.dg i{background:var(--danger)}.fx-pago-e.warn i{background:var(--warn)}
.fx-act{list-style:none;margin:0;padding:0}
.fx-act li{position:relative;display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:8px;align-items:start;padding:5px 0;
  font-size:.76rem;line-height:1.4;color:var(--fg2)}
.fx-act li>i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);margin:5px 0 0 3px;position:relative;z-index:1}
.fx-act li:first-child>i{background:var(--primary)}
.fx-act li:not(:last-child)::before{content:'';position:absolute;left:6px;top:17px;bottom:-6px;width:1px;background:var(--line)}
.fx-act em{font-style:normal;font-family:var(--mono);font-size:.66rem;color:var(--faint);white-space:nowrap;padding-top:1px}
.fx-act small{display:block;color:var(--muted);font-size:.72rem;margin-top:2px}
.fx-act.largo li{padding:7px 0;font-size:.8rem}
.fx textarea{min-height:70px}
.fx-mas summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:500;color:var(--fg2)}
.fx-mas summary::-webkit-details-marker{display:none}
.fx-mas summary span{color:var(--muted);font-weight:400;font-size:.72rem}
.fx-mas summary::after{content:'';margin-left:auto;width:6px;height:6px;border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.fx-mas[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.fx-mas[open]>summary{margin-bottom:12px}
.fx-mas .mini{margin:6px 0 0}
/* En el iPad y el celular: encima, al tocar el nombre */
.hoja-fondo{display:none}
.hoja-h{display:none}
@media(max-width:1100px){
  .hoja-fondo{display:block;position:fixed;inset:0;z-index:238;background:rgba(5,9,18,.55)}
  .ficha.fx.hoja{display:block;position:fixed;z-index:239;top:0;right:0;bottom:0;width:min(380px,92vw);
    border-left:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--sombra-alta);
    animation:hojaDer .24s cubic-bezier(.22,1,.36,1)}
  .hoja-h{display:flex;justify-content:flex-end;padding:8px 10px 0;position:sticky;top:0;z-index:2;background:var(--card)}
  .hoja-h .ibtn{width:32px;height:32px;display:grid;place-items:center;color:var(--fg3)}
  .hoja-h .ibtn .ic{width:17px;height:17px}
  .ficha.fx.hoja>.fx-top{padding-top:6px}
}
@media(max-width:760px){
  .ficha.fx.hoja{top:auto;left:0;width:auto;max-height:88dvh;border-left:0;border-top:1px solid var(--line);
    border-radius:14px 14px 0 0;padding-bottom:env(safe-area-inset-bottom);animation-name:hojaArriba}
  .hoja-h{justify-content:center;padding:8px 10px 2px}
  .hoja-asa{display:block;width:36px;height:4px;border-radius:2px;background:var(--line-strong)}
  .hoja-h .ibtn{position:absolute;right:8px;top:4px}
  .fx .sec-t .lnk,.fx-kv .lnk{padding:6px 0}
}
@media(min-width:1101px){.ficha.fx.hoja,.hoja-fondo{display:none}}
@keyframes hojaDer{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes hojaArriba{from{transform:translateY(48px);opacity:.3}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.ficha.fx.hoja{animation:none}}

/* ═══ Azul tinta · Agentes IA a pantalla completa (13-oct-2026) ═════
   Tres columnas de orilla a orilla: tus asistentes, el editor en secciones y la prueba con sus números. Abajo de
   1280 px la prueba sale encima con "Probar"; en el celular, la lista y el editor son dos pantallas. */
@media(min-width:761px){body[data-sec="agentesia"] .body{padding:0}}
body[data-sec="agentesia"] .body>.aviso-real{margin:12px 16px}
.iaw{display:grid;grid-template-columns:248px minmax(0,1fr) 372px;background:var(--card);border-top:1px solid var(--line);
  min-height:420px;overflow:hidden}
.iaw.vacia{grid-template-columns:248px minmax(0,1fr)}
.iaw>*{min-height:0;min-width:0}
/* La lista */
.iaw-l{display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;border-right:1px solid var(--line);background:var(--bg)}
.iaw-l-h{display:flex;align-items:center;justify-content:space-between;padding:16px 12px 10px 18px}
.iaw-l-h b{font-size:.95rem;font-weight:600}
.iaw-l-h .ibtn{width:30px;height:30px;display:grid;place-items:center;color:var(--fg3);border-radius:7px}
.iaw-l-h .ibtn:hover{color:var(--fg);background:var(--card2)}
.iaw-l-h .ibtn .ic{width:17px;height:17px}
.iaw-lista{display:grid;gap:2px;padding:0 10px 12px}
.iaw-ag{display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:9px 10px;border-radius:8px;
  border:1px solid transparent;color:var(--fg2)}
.iaw-ag:hover{background:var(--card2)}
.iaw-ag.on{background:var(--card2);border-color:var(--line-strong);color:var(--fg)}
.iaw-ag:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.iaw-ag>span{min-width:0;display:grid;gap:2px}
.iaw-ag b{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iaw-ag span>i{font-style:normal;font-size:.7rem;color:var(--muted);display:inline-flex;align-items:center}
.iaw-ag span>i .pdot{background:var(--faint)}
.iaw-ag span>i.ok .pdot{background:var(--ok)}
.iaw-ag em{font-style:normal;font-size:.66rem;color:var(--warn)}
.iaw-l-s{margin-top:auto;padding:16px 18px 18px;border-top:1px solid var(--line)}
.iaw-l-s p{margin:0;font-size:.74rem;line-height:1.55;color:var(--fg3)}
.iaw-l-s .lnk{color:var(--primary-txt);font-weight:600}
.iaw-l-eq{margin-top:16px}
.iaw-l-eq span{text-transform:none;letter-spacing:0;font-family:inherit;color:var(--faint)}
.iaw-p{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;padding:5px 0}
.iaw-p b{display:block;font-size:.76rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iaw-p i{display:block;font-style:normal;font-size:.66rem;color:var(--muted)}
.iaw-p em{font-style:normal;font-size:.74rem;color:var(--fg2);font-variant-numeric:tabular-nums}
/* El editor */
.iaw-c{overflow-y:auto;overscroll-behavior:contain}
.iaw-h{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:14px;padding:16px 28px;background:var(--card);
  border-bottom:1px solid var(--line)}
.iaw-h-t{flex:1;min-width:0}
.iaw-h h1{margin:0;font-size:1.15rem;font-weight:600;display:flex;align-items:center;gap:10px;min-width:0}
.iaw-h h1>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iaw-h p{margin:3px 0 0;font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iaw-est{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:.68rem;font-weight:500;color:var(--fg3);
  padding:2px 8px;border-radius:999px;border:1px solid var(--line-strong)}
.iaw-est i{width:6px;height:6px;border-radius:50%;background:var(--faint)}
.iaw-est.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,var(--line))}
.iaw-est.ok i{background:var(--ok)}
.iaw-h-b{display:flex;gap:8px;flex:none}
.iaw-h-b .btn{display:inline-flex;align-items:center;gap:6px}
.iaw-h-b .btn .ic{width:15px;height:15px}
.iaw-h-b .btn[disabled]{opacity:.45;cursor:default;pointer-events:none}
.iaw-volver,.iaw-h-b .iaw-probar-b{display:none}
@media(min-width:1280px){body[data-sec="agentesia"] .ia-btn{display:none}}
.iaw-c-b{max-width:1000px;margin:0 auto;padding:0 28px 48px}
.iaw-s{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:26px 0;border-bottom:1px solid var(--line)}
.iaw-s:last-child{border-bottom:0}
.iaw-s-t h2{margin:0;font-size:.92rem;font-weight:600}
.iaw-s-t p{margin:4px 0 0;font-size:.76rem;line-height:1.5;color:var(--muted);max-width:62ch}
.iaw-s-b{min-width:0;display:grid;gap:12px;align-content:start}
.iaw-s-b>.campo,.iaw-s-b .mini{margin:0}
@media(min-width:1600px){.iaw-s{grid-template-columns:220px minmax(0,1fr);gap:32px}}
.iaw-f{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.iaw-f-sep{justify-content:space-between}
.iaw-et{font-size:.78rem;color:var(--fg3);min-width:96px}
.iaw-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:2px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card2)}
.iaw-seg button{padding:6px 12px;border-radius:6px;font-size:.78rem;font-weight:500;color:var(--fg3)}
.iaw-seg button:hover{color:var(--fg)}
.iaw-seg button.on{background:var(--soft);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-strong)}
.iaw-seg button:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
/* Conocimiento: una lista en un solo marco */
.iaw-docs{border:1px solid var(--line-strong);border-radius:10px;overflow:hidden}
.iaw-doc{display:grid;grid-template-columns:20px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 12px;
  border-bottom:1px solid var(--line)}
.iaw-doc.on{background:var(--primary-s)}
.iaw-doc-t{min-width:0;display:grid;gap:2px}
.iaw-doc-t b{font-size:.8rem;font-weight:600}
.iaw-doc-t i{font-style:normal;font-size:.72rem;color:var(--muted);line-height:1.4}
.iaw-doc-t .inp{font-size:.74rem;padding:6px 9px;margin-top:4px}
.iaw-doc .ibtn{width:30px;height:30px;display:grid;place-items:center;color:var(--fg3)}
.iaw-doc .ibtn .ic{width:15px;height:15px}
.iaw-doc .ibtn.mal:hover{color:var(--danger)}
.iaw-doc-mas{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:11px;font-size:.78rem;color:var(--fg3)}
.iaw-doc-mas:hover{color:var(--fg);background:var(--card2)}
.iaw-doc-mas .ic{width:15px;height:15px}
.iaw-s .ia-nuevo-saber{margin:0}
/* Permisos: interruptores en dos columnas */
.iaw-g{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.iaw-perms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.ia-h.iaw-perm{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding:10px 0;gap:14px;margin:0}
.ia-h.iaw-perm.on{background:none;border-color:var(--line)}
.ia-h.iaw-perm .ia-h-t b{font-size:.8rem}
.ia-h.iaw-perm .ia-h-t i{font-size:.7rem}
.ia-h.iaw-perm .sw{pointer-events:none}
.ia-h.iaw-perm.pronto{opacity:.6}
.ia-h.iaw-perm:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
/* La prueba */
.iaw-r{display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line);background:var(--card)}
.iaw-ms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.iaw-m{display:grid;gap:2px;padding:12px 14px;border-left:1px solid var(--line);min-width:0}
.iaw-m:first-child{border-left:0}
.iaw-m span{font-size:.68rem;color:var(--muted)}
.iaw-m b{font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums}
.iaw-m i{font-style:normal;font-size:.64rem;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iaw-ms-n{margin:0;padding:5px 14px;font-family:var(--mono);font-size:.62rem;color:var(--faint);border-bottom:1px solid var(--line)}
.iaw-pb-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.iaw-pb-h b{flex:1;font-size:.86rem;font-weight:600}
.iaw-pb-h .lnk{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;color:var(--fg3)}
.iaw-pb-h .lnk .ic{margin:0}
.iaw-pb-x{display:none}
.iaw-hilo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px;display:flex;flex-direction:column;gap:8px;
  background:var(--chat-bg)}
.iaw-hilo .msg{max-width:88%;margin:0}
.iaw-hilo .msg.in{align-self:flex-start}
.iaw-hilo .msg.out{align-self:flex-end}
.iaw-pv{align-self:center;font-family:var(--mono);font-size:.62rem;color:var(--muted);padding:3px 8px;border:1px solid var(--line);
  border-radius:6px;background:var(--card)}
.iaw-pb-vacio{margin:auto 8px;text-align:center;line-height:1.5}
.iaw-pb-in{display:flex;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.iaw-pb-in .real{flex:1;min-width:0;border:1px solid var(--line-strong);border-radius:99px;background:var(--card2);padding:9px 14px;
  font-size:.84rem;color:var(--fg);outline:none}
.iaw-pb-in .real:focus{border-color:var(--primary)}
.iaw-pb-in .ibtn{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--primary);color:var(--primary-ink)}
.iaw-pb-in .ibtn .ic{width:17px;height:17px}
.iaw-fondo{display:none}
/* Sin agentes */
.iaw-vacio{max-width:720px;margin:0 auto;padding:48px 28px}
.iaw-vacio h1{margin:0;font-size:1.3rem;font-weight:600}
.iaw-vacio>p{margin:6px 0 22px;color:var(--muted);font-size:.86rem}
/* iPad y compu angosta: la prueba sale encima */
@media(max-width:1279px){
  .iaw,.iaw.vacia{grid-template-columns:224px minmax(0,1fr)}
  .iaw-h-b .iaw-probar-b{display:inline-flex}
  .iaw-r{display:none}
  .iaw.con-prueba .iaw-r{display:flex;position:fixed;z-index:245;top:0;right:0;bottom:0;width:min(400px,94vw);
    box-shadow:var(--sombra-alta);animation:hojaDer .24s cubic-bezier(.22,1,.36,1)}
  .iaw.con-prueba .iaw-fondo{display:block;position:fixed;inset:0;z-index:244;background:rgba(5,9,18,.55)}
  .iaw-pb-x{display:grid;width:30px;height:30px;place-items:center;color:var(--fg3)}
  .iaw-pb-x .ic{width:17px;height:17px}
  .iaw-h,.iaw-c-b{padding-left:20px;padding-right:20px}
  .iaw-c-b{padding-bottom:96px}   /* que "Pregúntale a Retoma" no tape lo último */
  .iaw-vacio{padding:36px 20px}
}
@media(max-width:1000px){.iaw-perms{grid-template-columns:minmax(0,1fr)}}
/* Celular: la lista y el editor son dos pantallas */
@media(max-width:760px){
  .iaw,.iaw.vacia{grid-template-columns:minmax(0,1fr);border-top:0}
  .iaw.m-lista:not(.vacia) .iaw-c,.iaw.m-editor .iaw-l,.iaw.vacia .iaw-l{display:none}
  .iaw-l{background:var(--card);border-right:0}
  .iaw-ag{padding:12px}
  .iaw-volver{display:grid;width:34px;height:34px;place-items:center;flex:none;color:var(--fg2)}
  .iaw-volver .ic{width:19px;height:19px}
  .iaw-h{flex-wrap:wrap;gap:8px 6px;padding:10px 12px}
  .iaw-h h1{font-size:1rem}
  .iaw-h p{display:none}
  .iaw-h-b{width:100%}
  .iaw-h-b .btn{flex:1;justify-content:center}
  .iaw-c-b{padding:0 14px 96px}
  .iaw-s{padding:20px 0}
  .iaw.con-prueba .iaw-r{width:100%;animation-name:hojaArriba}
  .iaw-pb-in{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .iaw-vacio{padding:24px 14px}
  .iaw-l-s{padding-bottom:96px}
}
@media(prefers-reduced-motion:reduce){.iaw.con-prueba .iaw-r{animation:none}}

/* ═══ Azul tinta · Citas como el lienzo (13-oct-2026) ════════════════
   Día y Semana de orilla a orilla: la rejilla por hora con cada cita del tamaño de lo que dura, y a la derecha el
   mes, la cita que tocaste, cuántas agendó el asistente y el horario con el que agenda. Sin rayas: los días cerrados
   y las horas fuera de tu horario van con un tono liso. */
@media(min-width:761px){body.ag-full .body{padding:0}}
@media(min-width:1001px){body.ag-full .ia-btn{display:none}}
body.ag-full .body>.aviso-real{margin:12px 16px}
.agw{display:grid;grid-template-columns:minmax(0,1fr) 300px;background:var(--card);border-top:1px solid var(--line);
  min-height:420px;overflow:hidden}
.agw>*{min-height:0;min-width:0}
.agw-c{overflow-y:auto;overscroll-behavior:contain;position:relative}
.agw-top{position:sticky;top:0;z-index:4;background:var(--card)}
.agw-h{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 22px 14px}
.agw-h-t{min-width:0}
.agw-h h1{margin:0;font-size:1.3rem;font-weight:600;letter-spacing:-.01em}
.agw-h p{margin:2px 0 0;font-size:.78rem;color:var(--muted)}
.agw-nav{display:flex;align-items:center;gap:4px}
.agw-nav .ibtn{width:30px;height:30px;display:grid;place-items:center;border-radius:7px;color:var(--fg3)}
.agw-nav .ibtn:hover{background:var(--card2);color:var(--fg)}
.agw-nav .ibtn .ic{width:16px;height:16px}
.agw-h-b{display:flex;align-items:center;gap:8px;margin-left:auto}
.agw-h-b .btn .ic{width:15px;height:15px}
/* Los nombres de los días */
.agw-dh{display:grid;grid-template-columns:52px repeat(var(--n),minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.agw-dn{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 4px;font-size:.78rem;color:var(--fg3);
  border-left:1px solid var(--line);min-width:0}
button.agw-dn:hover{background:var(--card2);color:var(--fg)}
.agw-dn b{font-size:.86rem;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums}
.agw-dn.hoy b{background:var(--primary);color:var(--primary-ink);min-width:24px;height:24px;border-radius:12px;display:inline-grid;
  place-items:center;padding:0 6px}
/* La rejilla */
.agw-g{display:grid;grid-template-columns:52px repeat(var(--n),minmax(0,1fr));padding-bottom:24px}
.agw-horas{position:relative}
.agw-horas span{position:absolute;right:8px;transform:translateY(-50%);font-family:var(--mono);font-size:.64rem;color:var(--faint)}
.agw-col{position:relative;border-left:1px solid var(--line);cursor:pointer;
  background-image:linear-gradient(to bottom,var(--line) 1px,transparent 1px);background-size:100% var(--h)}
.agw-col.hoy{background-color:color-mix(in srgb,var(--primary) 4%,transparent)}
.agw-col.cerrado{background-color:var(--bg);cursor:default}
.agw-cerrado{position:absolute;top:10px;left:0;right:0;text-align:center;font-size:.72rem;color:var(--faint)}
.agw-fuera{position:absolute;left:0;right:0;background:color-mix(in srgb,var(--bg) 70%,transparent);pointer-events:none}
.agw-ci{position:absolute;z-index:1;display:flex;flex-direction:column;gap:1px;padding:6px 8px;text-align:left;overflow:hidden;
  border-radius:7px;border:1px solid var(--line-strong);background:var(--card2);color:var(--fg);cursor:pointer;
  transition:border-color .13s,background .13s}
.agw-ci:hover{border-color:var(--primary);z-index:2}
.agw-ci.on{border-color:var(--primary);background:var(--primary-s);box-shadow:inset 0 0 0 1px var(--primary);z-index:2}
.agw-ci:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.agw-ci b{display:flex;align-items:center;gap:5px;font-size:.74rem;font-weight:600;min-width:0}
.agw-ci b .t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:inherit;font-size:inherit;color:inherit}
.agw-ci b .ic{width:11px;height:11px;flex:none;color:var(--primary-txt)}
.agw-ci>span{font-family:var(--mono);font-size:.64rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agw-ci.bajo{flex-direction:row;align-items:center;gap:6px;padding:3px 7px}
.agw-ci.bajo>span{flex:1;min-width:0}
.agw-ci.e-asistio{opacity:.72}
.agw-ci.e-no_asistio{opacity:.6;border-style:dashed}
.agw-ci.e-recordatorio b::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--primary);flex:none}
.agw-ahora{position:absolute;left:-4px;right:0;height:2px;background:var(--primary);z-index:3;pointer-events:none}
.agw-ahora::before{content:'';position:absolute;left:0;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--primary)}
.agw-fant{position:absolute;left:3px;right:3px;height:24px;border:1px dashed var(--primary);border-radius:7px;pointer-events:none;
  font-family:var(--mono);font-size:.64rem;color:var(--primary-txt);display:flex;align-items:center;padding:0 7px;
  background:color-mix(in srgb,var(--primary) 8%,transparent)}
.agw-cel{display:none}
/* El panel de la derecha */
.agw-r{border-left:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;background:var(--card)}
.agw-r>section{padding:16px 18px;border-top:1px solid var(--line)}
.agw-r>section:first-child{border-top:0}
.agw-r .sec-t span{text-transform:none;letter-spacing:0}
.agw-mini-h{display:flex;align-items:center;gap:2px;margin-bottom:10px}
.agw-mini-h b{flex:1;font-size:.86rem;font-weight:600}
.agw-mini-h .ibtn{width:26px;height:26px;display:grid;place-items:center;border-radius:6px;color:var(--fg3)}
.agw-mini-h .ibtn:hover{background:var(--card2);color:var(--fg)}
.agw-mini-h .ibtn .ic{width:14px;height:14px}
.agw-mini-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px 0}
.agw-mini-g .h{font-family:var(--mono);font-size:.6rem;color:var(--faint);text-align:center;padding-bottom:4px}
.agw-mini-g button{height:28px;font-size:.74rem;color:var(--fg2);font-variant-numeric:tabular-nums;border-radius:0}
.agw-mini-g button:hover{color:var(--fg);background:var(--card2)}
.agw-mini-g button.en{background:var(--soft);color:var(--fg)}
.agw-mini-g button.hoy{color:var(--primary-ink);font-weight:600;background:var(--primary);border-radius:14px;
  box-shadow:0 0 0 2px var(--card)}
.agw-mini-g button.en.hoy{box-shadow:0 0 0 2px var(--soft)}
.agw-sel-t{display:block;font-size:.95rem;font-weight:600}
.agw-sel-h{margin:3px 0 12px;font-size:.76rem;color:var(--muted)}
.agw-bot{color:var(--primary-txt)}
.agw-acc{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.agw-acc .btn{justify-content:center;gap:6px}
.agw-acc .btn .ic{width:15px;height:15px}
.agw-acc2{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px}
.agw-acc2 .lnk{font-size:.76rem;color:var(--fg3);font-weight:500}
.agw-acc2 .lnk:hover{color:var(--fg)}
.agw-acc2 .lnk.mal{color:var(--danger)}
.agw-barra{height:6px;border-radius:3px;background:var(--soft);overflow:hidden;margin:4px 0 10px}
.agw-barra i{display:block;height:100%;background:var(--primary);border-radius:3px}
.agw-kv{display:grid;gap:6px;margin:0}
.agw-kv>div{display:flex;align-items:center;justify-content:space-between;gap:10px}
.agw-kv dt{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--fg3)}
.agw-kv dt i{width:8px;height:8px;border-radius:2px;background:var(--line-strong)}
.agw-kv dt i.ia{background:var(--primary)}
.agw-kv dd{margin:0;font-size:.76rem;color:var(--fg)}
.agw-kv dd.vac{color:var(--faint)}
.agw-editar{display:inline-flex;align-items:center;gap:4px;margin-top:12px;font-size:.76rem;color:var(--primary-txt);font-weight:600}
.agw-editar .ic{width:13px;height:13px;margin:0}
.agw-hoja,.agw-hoja-fondo{display:none}
/* Compu angosta e iPad: el panel abajo de la rejilla y la cita en una hoja encima */
@media(max-width:1180px){.agw{grid-template-columns:minmax(0,1fr) 270px}}
@media(max-width:1000px){
  .agw{display:block;overflow-y:auto;overscroll-behavior:contain}
  .agw-c{overflow:visible}
  .agw-r{border-left:0;border-top:1px solid var(--line);overflow:visible;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .agw-r>section{border-top:0;border-right:1px solid var(--line)}
  .agw-r>.agw-elegida{display:none}
  .agw-hoja-fondo{display:block;position:fixed;inset:0;z-index:238;background:rgba(5,9,18,.55)}
  .agw-hoja{display:block;position:fixed;z-index:239;top:0;right:0;bottom:0;width:min(360px,92vw);padding:0 18px 18px;
    background:var(--card);border-left:1px solid var(--line);overflow-y:auto;box-shadow:var(--sombra-alta);
    animation:hojaDer .24s cubic-bezier(.22,1,.36,1)}
  .agw-hoja .hoja-h{display:flex;justify-content:flex-end;padding:8px 0 4px;margin:0 -8px}
  .agw-hoja .hoja-h .ibtn{width:32px;height:32px;display:grid;place-items:center;color:var(--fg3)}
  .agw-hoja .hoja-h .ibtn .ic{width:17px;height:17px}
}
/* Celular: la semana como lista (un día por renglón); el día, la misma rejilla */
@media(max-width:760px){
  .agw{border-top:0}
  .agw-h{padding:12px 14px;gap:10px}
  .agw-h h1{font-size:1.1rem}
  .agw-h-b{margin-left:0;width:100%}
  .agw-h-b .btn.pri{margin-left:auto}
  .agw.sem .agw-dh,.agw.sem .agw-g{display:none}
  .agw.sem .agw-cel{display:block;padding:0 12px 12px}
  .agw-dh{grid-template-columns:44px repeat(var(--n),minmax(0,1fr))}
  .agw-g{grid-template-columns:44px repeat(var(--n),minmax(0,1fr))}
  .agw-r{grid-template-columns:minmax(0,1fr);padding-bottom:84px}
  .agw-r>section{border-right:0;border-top:1px solid var(--line)}
  .agw-hoja{top:auto;left:0;width:auto;max-height:85dvh;border-left:0;border-top:1px solid var(--line);border-radius:14px 14px 0 0;
    padding-bottom:calc(18px + env(safe-area-inset-bottom));animation-name:hojaArriba}
  .agw-hoja .hoja-h{justify-content:center;position:relative;margin:0}
  .agw-hoja .hoja-asa{display:block;width:36px;height:4px;border-radius:2px;background:var(--line-strong)}
  .agw-hoja .hoja-h .ibtn{position:absolute;right:-6px;top:2px}
}
@media(prefers-reduced-motion:reduce){.agw-hoja{animation:none}}

/* ═══ Azul tinta · Contactos con la ficha a la derecha (14-oct-2026) ═══
   En la compu, de orilla a orilla: la lista (filtros rápidos con su número, la tabla y "Mostrando N de M") y la ficha
   fija a la derecha, la misma del chat. En el iPad parado y el celular, la lista sola y la persona en su página. */
@media(min-width:1001px){body.ct-full .body{padding:0}}
@media(min-width:1001px){body.ct-full .ia-btn{display:none}}
body.ct-full .body>.aviso-real{margin:12px 16px}
.ctw{display:grid;grid-template-columns:minmax(0,1fr) 360px;background:var(--card);border-top:1px solid var(--line);min-height:420px;overflow:hidden}
.ctw>*{min-width:0;min-height:0}
.ctw-l{display:flex;flex-direction:column;min-height:0}
.ctw-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 22px 12px}
.ctw-h h1{margin:0;font-size:1.3rem;font-weight:600;letter-spacing:-.01em;flex:1;min-width:0}
.ctw-h h1 .h-n{font-family:var(--mono);font-size:.8rem;font-weight:400;color:var(--faint);margin-left:8px;vertical-align:2px}
.ctw-h .acciones{display:flex;gap:8px;flex-wrap:wrap}
.ctw-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 22px 14px}
.ctw-f .busca-w{flex:1 1 220px;min-width:180px}
.ctw-f .inp{min-height:34px;padding-top:6px;padding-bottom:6px;font-size:.8rem;background-color:var(--card)}
.ctw-tipos{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line-strong);border-radius:8px;background:var(--card2)}
.ctw-tipos button{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:6px;font-size:.76rem;font-weight:500;color:var(--fg3);white-space:nowrap}
.ctw-tipos button span{font-family:var(--mono);font-size:.64rem;color:var(--faint)}
.ctw-tipos button:hover{color:var(--fg)}
.ctw-tipos button.on{background:var(--soft);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-strong)}
.ctw-tipos button.on span{color:var(--fg3)}
.ctw-sels{display:inline-flex;gap:6px}
.ctw-sels .sel{width:auto;min-width:0;padding-right:28px}
.ctw-l>.barra-sel{margin:0 22px 12px}
.ctw-t{flex:1;min-height:0;overflow:auto;border-top:1px solid var(--line)}
.ctw-t .tabla{width:100%}
.ctw-t thead th{position:sticky;top:0;z-index:1;background:var(--card)}
.tabla.directorio.v2 td{vertical-align:middle}
.tabla.directorio.v2 tbody tr{cursor:pointer}
.tabla.directorio.v2 tbody tr.on,.tabla.directorio.v2 tbody tr.on:hover{background:var(--sel)}
.tabla.directorio.v2 .celda-p b{display:inline-flex;align-items:center;gap:6px}
.tabla.directorio.v2 td.c-q{min-width:220px}
.tabla.directorio.v2 .celda-p b,.tabla.directorio.v2 .celda-p span span{white-space:nowrap}
.tabla.directorio.v2 td.c-menu{width:44px}
.tabla.directorio.v2 td.col-check{width:36px}
.c-est{width:6px;height:6px;border-radius:50%;flex:none}
.tabla.directorio.v2 .c-tags{white-space:nowrap}
.tabla.directorio.v2 .c-tags .tag{margin-right:4px}
.tabla.directorio.v2 .c-ult{font-family:var(--mono);font-size:.7rem;color:var(--muted);white-space:nowrap}
.c-at span{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;color:var(--fg2);white-space:nowrap}
.c-at span .ic{width:13px;height:13px;color:var(--fg3)}
.c-at span.ia{color:var(--primary-txt)}
.c-at span.ia .ic{color:var(--primary-txt)}
.ctw-pie{padding:10px 22px;border-top:1px solid var(--line);font-size:.72rem;color:var(--muted)}
/* La ficha */
.ctw-r{border-left:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;background:var(--card)}
.ctw-r>section{padding:14px 18px;border-top:1px solid var(--line)}
.ctw-r>section:first-child{border-top:0}
.ctw-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding-top:18px!important}
.ctw-top .av.lg{width:44px;height:44px;margin:0}
.ctw-top .fx-id span.mono{font-family:var(--mono);font-size:.72rem}
.ctw-top .fx-bts{grid-column:1/-1}
.ctw-top .ibtn.mas{width:30px;height:30px}
.ctw-r .sec-t span{text-transform:none;letter-spacing:0;color:var(--faint)}
.ctw-r .embudo-p{display:flex;gap:4px;margin:2px 0 8px}
.ctw-r .embudo-p i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.ctw-r .embudo-p i.on{background:var(--primary)}
.ctw-r .et-nom{display:block;font-size:.84rem;font-weight:600}
.ctw-movs{margin-top:8px}
.ctw-r textarea{width:100%;min-height:70px;resize:vertical;font-size:.8rem}
/* iPad parado y celular: la lista sola, como página */
.ctw.angosto{display:block;border:0;background:none;overflow:visible;min-height:0}
.ctw.angosto .ctw-h{padding:0 0 12px}
.ctw.angosto .ctw-f{padding:0 0 14px}
.ctw.angosto .ctw-l>.barra-sel{margin:0 0 12px}
.ctw.angosto .ctw-t{border:1px solid var(--line);border-radius:var(--rc);background:var(--card);overflow:visible}
.ctw.angosto .ctw-t thead th{position:static}
.ctw.angosto .ctw-pie{padding:10px 2px;border:0}
@media(max-width:1280px) and (min-width:1001px){.ctw{grid-template-columns:minmax(0,1fr) 316px}
  body.az .tabla.directorio.v2 td,body.az .tabla.directorio.v2 th{padding-left:10px;padding-right:10px}
  .tabla.directorio.v2 td.c-q{min-width:190px}
  .ctw-h,.ctw-f{padding-left:16px;padding-right:16px}}
/* Con la ficha al lado no caben las etiquetas en una pantalla mediana: siguen en la ficha. */
@media(max-width:1380px) and (min-width:1001px){.tabla.directorio.v2 th:nth-child(4),.tabla.directorio.v2 td.c-tags{display:none}}
@media(max-width:760px){
  .ctw-h h1{font-size:1.15rem}
  .ctw-h .acciones{flex-basis:100%}
  .ctw-h .acciones .btn{flex:1}
  .ctw-h .acciones .btn.pri{order:-1;flex-basis:100%}
  .ctw-tipos{width:100%;overflow-x:auto;scrollbar-width:none}
  .ctw-tipos::-webkit-scrollbar{display:none}
  .ctw-tipos button{flex:1;justify-content:center}
  .ctw-sels{width:100%}
  .ctw-sels .sel{flex:1}
  /* La tabla como lista: quién es y su menú arriba; etapa, etiquetas, cuándo y quién atiende abajo */
  .tabla.directorio.v2 td{margin:0}
  .tabla.directorio.v2 td.col-check{order:0}
  .tabla.directorio.v2 td.c-q{order:1;flex:1 1 calc(100% - 110px);min-width:0}
  .tabla.directorio.v2 td.c-menu{order:2}
  .tabla.directorio.v2 td.c-et{order:3;margin-left:34px}
  .tabla.directorio.v2 td.c-tags{order:4}
  .tabla.directorio.v2 td.c-at{order:5}
  .tabla.directorio.v2 td.c-ult{order:6;flex-basis:auto;margin-left:auto;font-size:.7rem}
}

/* ═══ Azul tinta · Embudo como el lienzo (14-oct-2026) ═══════════════
   La tarjeta con quién la atiende abajo, el chat en un ícono y "Mover" chico ("Ganado" en la última etapa), la nota
   de que el asistente mueve gente (sólo si algún agente tiene ese permiso) y arrastrar entre columnas en la compu. */
.emb-nota{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:.74rem;color:var(--fg3)}
.emb-nota .ic{width:13px;height:13px;color:var(--primary-txt)}
body.az .lead-a{display:flex;align-items:center;gap:6px}
body.az .lead-a .btn{flex:none}
body.az .lead-a .mv{flex:none;display:block}
body.az .lead-a .mv .btn{width:auto}
.lead-at{flex:1;min-width:0;display:inline-flex;align-items:center;gap:5px;font-size:.72rem;color:var(--fg3);white-space:nowrap;overflow:hidden}
.lead-at .ic{width:12px;height:12px;flex:none}
.lead-at span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lead-at.ia{color:var(--primary-txt)}
.lead-chat{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:7px;color:var(--fg3)}
.lead-chat:hover{background:var(--soft);color:var(--fg)}
.lead-chat .ic{width:15px;height:15px}
body.az .lead-a .lead-mv{display:inline-flex;align-items:center;gap:4px;min-height:28px;padding:0 9px;font-size:.72rem}
.lead-mv .ic{width:13px;height:13px}
.lead-ganado{flex:none;font-size:.68rem;font-weight:600;color:var(--ok);padding:2px 8px;border-radius:999px;background:var(--ok-bg)}
.lead[draggable="true"]{cursor:grab}
.lead[draggable="true"]:active{cursor:grabbing}
.lead.arrastrando{opacity:.4}
body.az .kan .col.sobre{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--card))}
@media(hover:none){.lead[draggable="true"]{cursor:default}}
@media(max-width:760px){
  .emb-nota{margin-left:0;flex-basis:100%}
  .lead-chat{width:40px;height:40px}
  body[data-sec="embudo"] .lead-a .lead-mv{min-height:40px;padding:0 14px;font-size:.82rem}
}

/* ═══ Azul tinta · Equipo como el lienzo (14-oct-2026) ════════════════
   Una tabla con el asistente como un renglón más, la carga contra el máximo de cada quien e invitaciones pendientes;
   el mapa de horas con "Te escriben | Responde tu equipo". En el celular, una lista. */
.kpi .d .ok{color:var(--ok)}
.kpi .d .mal{color:var(--warn)}
.kpi .d .lnk{color:var(--primary-txt);font-weight:600;font-size:inherit}
.card.eqw{margin-bottom:13px;padding:0}
.eqw-t th{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.08em;color:var(--faint);text-transform:uppercase;
  padding:10px 16px;border-bottom:1px solid var(--line);background:none;text-align:left}
.eqw-t th.num,.eqw-t td.num{text-align:right}
.eqw-t td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:.8rem}
.eqw-t tbody tr:last-child td{border-bottom:0}
.eqw-t td.mono{font-family:var(--mono);font-size:.78rem}
.eqw-t .cel-et{display:none}
.eqw-q{display:flex;align-items:center;gap:10px;min-width:0}
.eqw-q .av,.eqw-q .ia-av,.eqw-sobre{width:32px;height:32px;flex:none}
.eqw-q .ia-av{display:grid;place-items:center;border-radius:8px}
.eqw-q b{display:block;font-size:.82rem;font-weight:600;white-space:nowrap}
.eqw-q i{display:flex;align-items:center;gap:5px;font-style:normal;font-size:.7rem;color:var(--muted);white-space:nowrap}
.eqw-q i.ok{color:var(--ok)}
.eqw-q i .pdot{background:var(--ok);margin:0}
.eqw-rol{display:inline-flex;height:22px;align-items:center;padding:0 8px;border-radius:6px;border:1px solid var(--line-strong);
  font-size:.7rem;color:var(--fg2);white-space:nowrap}
.eqw-carga{display:inline-block;width:110px;height:5px;border-radius:3px;background:var(--soft);vertical-align:middle;margin-right:10px;overflow:hidden}
.eqw-carga i{display:block;height:100%;background:var(--primary);border-radius:3px}
.eqw-carga i.lleno{background:var(--warn)}
.eqw-t td .mono{font-family:var(--mono);font-size:.72rem;color:var(--fg3)}
.eqw-sin{font-family:var(--mono);font-size:.72rem;color:var(--faint)}
.eqw-sobre{display:grid;place-items:center;border-radius:50%;border:1px dashed var(--line-strong);color:var(--fg3)}
.eqw-sobre .ic{width:15px;height:15px}
.eqw-inv b{font-family:var(--mono);font-weight:500}
.eqw-t .lnk{font-size:.76rem;color:var(--primary-txt);font-weight:600}
.eqw-mapa-b{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.eqw-ley{display:inline-flex;align-items:center;gap:3px;font-size:.66rem;color:var(--faint)}
.eqw-ley i{width:11px;height:11px;border-radius:2px;background:var(--primary)}
.eqw-ley i:first-of-type{margin-left:4px}.eqw-ley i:last-of-type{margin-right:4px}
@media(max-width:760px){
  .eqw-t thead{display:none}
  .eqw-t,.eqw-t tbody{display:block}
  .eqw-t tr{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .eqw-t td{display:none;padding:0;border:0}
  .eqw-t td:first-child{display:block;flex:1;min-width:0}
  .eqw-t td:nth-child(3){display:block;order:2}
  .eqw-t .cel-et{display:inline;font-size:.66rem;color:var(--muted)}
  .eqw-t tr.eqw-inv td:last-child{display:block}
  .eqw-ley{display:none}
  .eqw-mapa-b{margin:10px 0 0;width:100%}
}

/* ═══ Azul tinta · Campañas como el lienzo (14-oct-2026) ═════════════
   Una tabla para comparar campañas y, en el celular, una tarjeta por campaña. */
.campw{padding:0}
.campw .card-h{padding:14px 18px;gap:12px;flex-wrap:wrap}
.campw .card-h .h-n{font-family:var(--mono);font-size:.72rem;font-weight:400;color:var(--faint);margin-left:6px}
.campw .card-h .seg-emb{margin-left:auto}
.campw .seg-emb button span{font-family:var(--mono);font-size:.62rem;color:var(--faint);margin-left:3px}
.campw-t th{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.08em;color:var(--faint);text-transform:uppercase;
  padding:10px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:none;text-align:left;white-space:nowrap}
.campw-t th.num,.campw-t td.num{text-align:right}
.campw-t td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:.8rem}
.campw-t td.mono,.campw-t td .mono{font-family:var(--mono);font-size:.76rem}
.campw-n b{display:block;font-size:.84rem;font-weight:600}
.campw-n span{display:block;font-size:.72rem;color:var(--muted);margin-top:2px}
.campw-n .aj-motivo{margin-top:4px}
.camp-e{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;border:1px solid var(--line-strong);
  font-size:.7rem;color:var(--fg2);white-space:nowrap}
.camp-e i{width:6px;height:6px;border-radius:50%;background:var(--faint)}
.camp-e.ok i{background:var(--ok)}.camp-e.info i{background:var(--primary)}.camp-e.warn i{background:var(--warn)}
.campw-env{display:inline-grid;gap:5px;min-width:64px}
.campw-env i{display:block;height:3px;border-radius:2px;background:var(--soft);overflow:hidden}
.campw-env i b{display:block;height:100%;background:var(--primary);border-radius:2px}
.campw-a{white-space:nowrap;text-align:right}
.campw-a .btn{margin-left:4px}
.campw-cel{display:none}
.campw-nota{margin:0;padding:12px 18px;font-size:.7rem;line-height:1.5;color:var(--muted);border-top:1px solid var(--line)}
@media(max-width:760px){
  .campw-t{display:none}
  .campw-cel{display:grid;gap:10px;padding:0 12px 12px}
  .campw .card-h .seg-emb{margin-left:0;width:100%;overflow-x:auto;scrollbar-width:none}
  .campw .seg-emb button{white-space:nowrap;flex:none}
  .campw-c{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--card2)}
  .campw-c-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
  .campw-c-h b{font-size:.95rem;font-weight:600}
  .campw-c-s{display:block;font-size:.76rem;color:var(--muted);margin-top:4px}
  .campw-c-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
  .campw-c-g span{display:grid;gap:2px;font-size:.68rem;color:var(--muted)}
  .campw-c-g b{font-size:.95rem;color:var(--fg)}
  .campw-c-p{margin-top:12px}
  .campw-c-p .campw-env{width:100%}
  .campw-c-a{display:flex;gap:8px;margin-top:10px}
  .campw-c-a .btn{flex:1;justify-content:center}
  .campw-c .mini{margin:8px 0 0}
}

/* ═══ Azul tinta · Plantillas y Catálogo como el lienzo (14-oct-2026) ═════════════
   Plantillas: una acción por renglón, sugeridas a la derecha y el editor a pantalla completa. Catálogo: tabla con foto
   y descripción; el servicio se edita en un panel a la derecha. En el celular, tarjetas y un botón + redondo. */
.cel-mas,.cel-sub,.cel-solo{display:none}
.camp-e.dg i{background:var(--danger)}
.huecos .hk{min-width:118px;text-align:left}
body.plw-abierto{overflow:hidden}
.plw-chip{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid var(--line-strong);border-radius:5px;
  font-size:.68rem;color:var(--fg2);white-space:nowrap}
i.dato{font-style:normal;color:var(--primary-txt);background:var(--primary-s);border-radius:4px;padding:0 4px;white-space:nowrap}
.plw-grid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:16px;align-items:start}
.plw-lista{padding:0}
.plw-lista .card-h{padding:14px 18px;gap:12px;flex-wrap:wrap}
.plw-lista .card-h>b{font-size:.92rem;font-weight:600}
.plw-lista .card-h .seg-emb{margin-left:auto}
.plw-lista .seg-emb button span{font-family:var(--mono);font-size:.62rem;color:var(--faint);margin-left:3px}
.plw-fila{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:8px;row-gap:6px;padding:16px 18px;
  border-top:1px solid var(--line);cursor:pointer}
.plw-fila:hover{background:color-mix(in srgb,var(--card2) 55%,transparent)}
.plw-fila-t{grid-column:1;grid-row:1;display:flex;align-items:baseline;gap:10px;min-width:0;padding:0;border:0;background:none;
  color:var(--fg);font:inherit;text-align:left;cursor:pointer}
.plw-fila-t b{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plw-fila-t .mono{font-size:.68rem;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.plw-fila-t:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.plw-fila>.camp-e{grid-column:2/4;grid-row:1;justify-self:end;align-self:start}
.plw-txt{grid-column:1;margin:0;font-size:.8rem;line-height:1.55;color:var(--fg2);max-width:76ch}
.plw-txt .vac{color:var(--faint)}
.plw-meta{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.72rem;color:var(--muted)}
.plw-meta .mono{font-size:.7rem;color:var(--fg2)}
.plw-uso::before{content:"·";margin-right:10px;color:var(--faint)}
.plw-acc{grid-column:2;grid-row:2/4;align-self:center;padding-left:16px}
.plw-acc .btn{white-space:nowrap}
.plw-mas{grid-column:3;grid-row:2/4;align-self:center;width:30px;height:30px;padding:0;display:grid;place-items:center}
.plw-mas .ic{width:16px;height:16px}
.plw-alerta{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;margin-top:6px;padding:10px 12px;border-radius:9px;
  border:1px solid color-mix(in srgb,var(--danger) 35%,var(--line));background:color-mix(in srgb,var(--danger) 8%,transparent);cursor:auto}
.plw-alerta .ic{width:15px;height:15px;flex:none;margin-top:2px;color:var(--danger)}
.plw-alerta p{margin:0;font-size:.76rem;line-height:1.5;color:var(--fg2)}
.plw-alerta b{color:var(--danger);font-weight:600}
.plw-alerta.warn{border-color:color-mix(in srgb,var(--warn) 35%,var(--line));background:color-mix(in srgb,var(--warn) 8%,transparent)}
.plw-alerta.warn .ic,.plw-alerta.warn b{color:var(--warn)}
.plw-vacio{padding:28px 18px}
.plw-lado{display:grid;gap:16px;align-content:start}
.plw-sug{padding:0}
.plw-sug-h{padding:16px 18px 12px}
.plw-sug-h b,.plw-saber>b{display:block;font-size:.88rem;font-weight:600}
.plw-sug-h span{display:block;font-size:.72rem;color:var(--muted);margin-top:3px}
.plw-s{display:grid;gap:8px;padding:14px 18px 16px;border-top:1px solid var(--line)}
.plw-s-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.plw-s-h b{font-size:.82rem;font-weight:600}
.plw-s p{margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:.76rem;line-height:1.55;color:var(--fg2)}
.plw-s .mini{margin:0;line-height:1.45}
.plw-s .lnk{justify-self:start;display:inline-flex;align-items:center;gap:4px;font-size:.76rem;font-weight:600;color:var(--primary-txt)}
.plw-s .lnk .ic{width:13px;height:13px}
.plw-saber{padding:16px 18px}
.plw-saber p{margin:8px 0 0;font-size:.76rem;line-height:1.55;color:var(--fg2)}
.plw-saber .btn{margin-top:12px}
@media(max-width:1180px){
  .plw-grid{grid-template-columns:minmax(0,1fr)}
  .plw-lado{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}

/* El editor de plantillas, a pantalla completa */
.plw-ed{position:fixed;inset:0;z-index:260;display:flex;flex-direction:column;background:var(--bg)}
.plw-ed-h{display:flex;align-items:center;gap:16px;padding:10px 24px;min-height:60px;border-bottom:1px solid var(--line);background:var(--card)}
.plw-volver{display:inline-flex;align-items:center;gap:6px;flex:none;padding:6px 8px 6px 4px;border:0;border-radius:7px;background:none;
  color:var(--fg3);font:inherit;font-size:.8rem;cursor:pointer}
.plw-volver:hover{color:var(--fg);background:var(--card2)}
.plw-volver .ic{width:16px;height:16px}
.plw-ed-t{flex:1;min-width:0;display:flex;align-items:baseline;gap:12px;padding-left:16px;border-left:1px solid var(--line)}
.plw-ed-t b{font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;max-width:50%}
.plw-ed-t span{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.plw-ed-b{display:flex;gap:8px;flex:none}
.plw-ed-b .btn{display:inline-flex;align-items:center;gap:6px}
.plw-ed-b .btn .ic{width:15px;height:15px}
.plw-ed-c{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 480px}
.plw-f{overflow-y:auto;overscroll-behavior:contain;padding:28px 40px 56px;display:grid;gap:22px;align-content:start}
.plw-f>*{max-width:860px;width:100%}
.plw-p{overflow-y:auto;overscroll-behavior:contain;padding:28px 28px 40px;border-left:1px solid var(--line);background:var(--card)}
.plw-f .campo{margin:0;gap:7px}
.plw-f .campo>span:first-child{font-size:.8rem;color:var(--fg)}
.plw-f .mini{margin:0;color:var(--muted)}
.plw-f .mini b.mono{color:var(--fg2);font-weight:500}
.plw-dos{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.plw-cats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.plw-co{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:14px 16px;text-align:left;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--card);color:var(--fg);font:inherit;cursor:pointer}
.plw-co:hover:not([disabled]){border-color:var(--fg3)}
.plw-co.on{border-color:var(--primary);background:var(--primary-s);box-shadow:inset 0 0 0 1px var(--primary)}
.plw-co[disabled]{cursor:default}
.plw-co[disabled]:not(.on){opacity:.55}
.plw-co:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.plw-radio{width:16px;height:16px;margin-top:2px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center}
.plw-co.on .plw-radio{border-color:var(--primary)}
.plw-co.on .plw-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary)}
.plw-co-t b{display:block;font-size:.84rem;font-weight:600}
.plw-co-t span{display:block;margin-top:3px;font-size:.74rem;line-height:1.45;color:var(--muted)}
.plw-co em{font-style:normal;font-size:.72rem;color:var(--fg2);white-space:nowrap;margin-top:2px}
.plw-enc{justify-self:start}
.plw-lbl{display:flex !important;align-items:center;justify-content:space-between}
.plw-lbl em{font-style:normal;font-size:.7rem;font-weight:400;color:var(--faint)}
.plw-lbl em.mal{color:var(--danger)}
.plw-f textarea.inp{min-height:120px;resize:vertical;line-height:1.55}
.plw-datos{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:-10px}
.plw-datos>span{font-size:.74rem;color:var(--muted);margin-right:2px}
.plw-dato{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border:1px solid var(--line-strong);border-radius:999px;
  background:none;color:var(--fg2);font:inherit;font-size:.74rem;cursor:pointer}
.plw-dato:hover{border-color:var(--primary);color:var(--fg)}
.plw-dato .ic{width:12px;height:12px}
.plw-ayuda{margin-top:-14px !important;line-height:1.5}
.plw-bts{display:grid;gap:8px}
.plw-bt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.plw-bt>span .ic{width:14px;height:14px;color:var(--fg3)}
.plw-bt .ibtn .ic{width:14px;height:14px}
.plw-bt-mas{justify-self:start;display:inline-flex;align-items:center;gap:6px}
.plw-bt-mas .ic{width:13px;height:13px}
.plw-et{display:block;font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.plw-p>.plw-et{margin-bottom:10px}
.plw-p .wa-chat-h i{color:#8696a0}
.plw-nota{margin:10px 0 0;font-size:.72rem;line-height:1.5;color:var(--muted)}
.plw-chk-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:26px 0 10px}
.plw-chk-h b{font-size:.74rem;font-weight:600}
.plw-chk-h b.ok{color:var(--ok)}
.plw-chk-h b.mal{color:var(--danger)}
.plw-chk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 16px}
.plw-chk li{display:flex;gap:7px;align-items:flex-start;font-size:.74rem;line-height:1.4;color:var(--fg2)}
.plw-chk li .ic{width:13px;height:13px;flex:none;margin-top:2px}
.plw-chk li.ok .ic{color:var(--ok)}
.plw-chk li.mal,.plw-chk li.avisa{grid-column:1/-1}
.plw-chk li.mal{color:var(--fg)}
.plw-chk li.mal .ic{color:var(--danger)}
.plw-chk li.avisa .ic{color:var(--warn)}
@media(max-width:1180px){.plw-ed-c{grid-template-columns:minmax(0,1fr) 400px}.plw-f{padding:24px 24px 48px}}
@media(max-width:940px){
  .plw-ed-c{display:block;overflow-y:auto;overscroll-behavior:contain}
  .plw-f,.plw-p{overflow:visible}
  .plw-p{border-left:0;border-top:1px solid var(--line)}
  .plw-ed-t span{display:none}
}

/* Catálogo */
.catw{padding:0}
.catw .card-h{padding:12px 18px}
.catw-chips{display:flex;gap:8px;flex-wrap:wrap}
.catw-chips .fchip{display:inline-flex;align-items:center;gap:6px}
.catw-chips .fchip span{font-family:var(--mono);font-size:.62rem;opacity:.65}
.catw-t th{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.08em;color:var(--faint);text-transform:uppercase;
  padding:10px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:none;text-align:left;white-space:nowrap}
.catw-t th.num,.catw-t td.num{text-align:right}
.catw-t td{padding:10px 16px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:.8rem}
.catw-t td.mono{font-family:var(--mono);font-size:.76rem;white-space:nowrap}
.catw-t tr[data-cat-fila]{cursor:pointer}
.catw-t tr[data-cat-fila]:hover td{background:color-mix(in srgb,var(--card2) 55%,transparent)}
.catw-t tr[data-cat-fila]:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.catw-t tr.apagado .catw-s,.catw-t tr.apagado td.num,.catw-t tr.apagado .plw-chip{opacity:.5}
.catw-s{display:flex;align-items:center;gap:12px;min-width:0}
.catw-s>span{min-width:0;display:grid;gap:2px}
.catw-s b{font-size:.84rem;font-weight:600}
.catw-s i{font-style:normal;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52ch}
.catw-s i.vac{color:var(--faint)}
.catw-foto{width:40px;height:40px;flex:none;border-radius:8px;border:1px solid var(--line);background:var(--card2);display:grid;place-items:center;
  overflow:hidden;color:var(--faint)}
.catw-foto img{width:100%;height:100%;object-fit:cover;display:block}
.catw-foto .ic{width:16px;height:16px}
.catw-pr s{margin-left:6px;color:var(--faint);font-size:.7rem}
.catw-cel{display:none}
.catw-vacio{padding:28px 18px}
body.az .kpi .v small{font-size:.8rem;font-weight:400;color:var(--muted);letter-spacing:0}
body.az .kpi .v.catw-top{font-size:1.02rem;line-height:1.3;font-weight:600;letter-spacing:0}
body.az .kpi.catw-liga .v{font-size:.78rem;line-height:1.45;font-weight:400;letter-spacing:0;word-break:break-all}
.catw-liga-b{display:flex;gap:6px;margin-top:10px}
.catw-liga-b .btn{display:inline-flex;align-items:center;gap:5px}
.catw-liga-b .btn .ic{width:13px;height:13px}

/* El panel del servicio */
.catd{position:fixed;inset:0;z-index:255}
.catd-fondo{position:absolute;inset:0;background:rgba(2,5,11,.55)}
.catd-p{position:absolute;top:0;right:0;bottom:0;width:min(440px,100%);display:flex;flex-direction:column;background:var(--card);
  border-left:1px solid var(--line)}
.catd-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 14px 20px;border-bottom:1px solid var(--line)}
.catd-h b{font-size:1rem;font-weight:600}
.catd-h .ibtn .ic{width:16px;height:16px}
.catd-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 20px 24px;display:grid;gap:16px;align-content:start}
.catd-b .campo{margin:0}
.catd-b .campo>span:first-child{color:var(--fg)}
.catd-b .mini{margin:0}
.catd-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.catd-dur{display:flex;width:100%}
.catd-dur button{flex:1;padding-left:4px;padding-right:4px;line-height:1.1}
.catd-dur button small{display:block;font-size:.6rem;opacity:.7}
.catd-min,.catd-pesos{position:relative;display:block}
.catd-min .inp{width:100%;padding-right:40px}
.catd-min em,.catd-pesos em{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-style:normal;font-family:var(--mono);
  font-size:.62rem;color:var(--faint);pointer-events:none}
.catd-pesos i{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--faint);font-size:.82rem;pointer-events:none}
.catd-pesos .inp{width:100%;padding-left:24px}
.catd-foto{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:84px;border:1px dashed var(--line-strong);
  border-radius:10px;background:none;color:var(--fg3);font:inherit;font-size:.8rem;cursor:pointer}
.catd-foto:hover,.catd-foto.sobre{border-color:var(--primary);color:var(--fg)}
.catd-foto .ic{width:16px;height:16px}
.catd-foto-ya{display:flex;align-items:center;gap:12px}
.catd-foto-ya img{width:96px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.catd-foto-ya span{display:flex;gap:6px}
.catd-card{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border:1px solid var(--line);
  border-radius:10px;background:var(--bg)}
.catd-card>img,.catd-card-i{width:72px;height:72px;border-radius:8px;object-fit:cover;background:var(--card2);display:grid;place-items:center;color:var(--faint)}
.catd-card-i .ic{width:18px;height:18px}
.catd-card>span{min-width:0;display:grid;gap:3px}
.catd-card b{font-size:.86rem;font-weight:600}
.catd-card-d{font-size:.72rem;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.catd-card-p{display:flex;align-items:baseline;gap:7px;font-size:.82rem}
.catd-card-p b{font-size:.84rem}
.catd-card-p s{color:var(--faint);font-size:.72rem}
.catd-card-p em{font-style:normal;color:var(--ok);font-size:.72rem;font-weight:600}
.catd-card i{font-style:normal;font-size:.7rem;color:var(--faint)}
.catd-f{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line)}
.catd-of{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:none;color:var(--fg2);font:inherit;font-size:.8rem;cursor:pointer}
.catd-of .sw{display:inline-block;position:relative}
.catd-of:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:999px}
.catd-f-b{display:flex;gap:8px}
/* La tienda: la foto y lo que incluye, como en la de verdad */
.t-img.foto{background-size:cover;background-position:center;font-size:0}
.t-desc{display:block;margin-top:4px;font-size:.7rem;line-height:1.4;color:#5b636d}

@media(max-width:760px){
  body[data-sec="plantillas"] .hello .acciones,body[data-sec="catalogo"] .hello .acciones{display:none}
  body[data-sec="plantillas"] .hello,body[data-sec="catalogo"] .hello{position:relative;padding-right:58px}
  body[data-sec="plantillas"] .hello p:not(.cel-sub),body[data-sec="catalogo"] .hello p:not(.cel-sub){display:none}
  .cel-sub{display:block}
  .cel-solo{display:inline}
  .cel-mas{display:grid;place-items:center;position:absolute;top:0;right:0;width:46px;height:46px;border:0;border-radius:50%;
    background:var(--primary);color:#fff;cursor:pointer}
  .cel-mas .ic{width:20px;height:20px;stroke-width:2.2}
  /* Plantillas: una tarjeta por plantilla; se toca para abrirla */
  .plw-lista{background:none;border:0;box-shadow:none}
  .plw-lista .card-h{padding:0 0 12px}
  .plw-lista .card-h>b{display:none}
  .plw-lista .card-h .seg-emb{margin-left:0;width:100%;overflow-x:auto;scrollbar-width:none}
  .plw-lista .seg-emb button{white-space:nowrap;flex:none}
  .plw-filas{display:grid;gap:10px}
  .plw-fila{grid-template-columns:minmax(0,1fr) auto;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--card);row-gap:8px}
  .plw-fila:hover{background:var(--card)}
  .plw-fila-t .mono{display:none}
  .plw-fila>.camp-e{grid-column:2}
  .plw-txt{grid-column:1/-1}
  .plw-meta{grid-column:1}
  .plw-mas{grid-column:2;grid-row:auto;width:28px;height:28px}
  .plw-acc{display:none;grid-column:1/-1;grid-row:auto;padding:0}
  .plw-fila.rojo .plw-acc{display:block}
  .plw-acc .btn{width:100%;justify-content:center;min-height:40px}
  .plw-uso{display:none}
  .plw-lado{grid-template-columns:minmax(0,1fr)}
  /* El editor */
  .plw-ed-h{padding:8px 10px;gap:6px;min-height:54px}
  .plw-volver span{display:none}
  .plw-ed-t{border-left:0;padding-left:0}
  .plw-ed-t b{max-width:none}
  .plw-ed-b{position:fixed;left:0;right:0;bottom:0;z-index:2;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:var(--card);border-top:1px solid var(--line)}
  .plw-ed-b .btn{flex:1;justify-content:center;min-height:42px}
  .plw-ed-b .btn.gh{display:none}
  .plw-ed-c{padding-bottom:84px}
  .plw-f{padding:18px 16px 24px;gap:20px}
  .plw-p{padding:20px 16px 28px}
  .plw-dos,.plw-cats,.plw-chk{grid-template-columns:minmax(0,1fr)}
  /* Catálogo: la liga de la tienda arriba y una fila por servicio */
  body.az .kpis.catw-k{grid-template-columns:minmax(0,1fr);background:none;border:0}
  body.az .kpis.catw-k .kpi:not(.catw-liga){display:none}
  body.az .kpis.catw-k .kpi.catw-liga{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;
    padding:12px 14px;border:1px solid var(--line);border-radius:12px}
  body.az .kpi.catw-liga .v{grid-column:1;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}
  .catw-liga-b{grid-column:2;grid-row:1/3;margin:0}
  .catw-liga-b .btn[data-accion]{display:none}
  .catw{background:none;border:0;box-shadow:none}
  .catw .card-h{padding:0 0 6px}
  .catw-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}
  .catw-chips .fchip{flex:none}
  .catw-t{display:none}
  .catw-cel{display:grid}
  .catw-c{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line);cursor:pointer}
  .catw-c .catw-foto{width:48px;height:48px;border-radius:10px}
  .catw-c-t{min-width:0;display:grid;gap:3px}
  .catw-c-t>b{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .catw-c-t>span{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .catw-c-t .catw-pr{font-size:.8rem;font-weight:600;color:var(--fg)}
  .catw-c-t .catw-pr s{font-weight:400}
  .catw-c.apagado .catw-foto,.catw-c.apagado .catw-c-t{opacity:.5}
  .catw-cel-mas{display:flex;gap:18px;padding:16px 2px 4px}
  .catw-cel-mas .lnk{font-size:.78rem}
  .catd-2:not(.catd-precios){grid-template-columns:minmax(0,1fr)}
  .catd-p{width:100%;border-left:0}
}

/* ═══ Azul tinta · Recompra, Auto-respuestas, Respuestas rápidas y los estados del Embudo (14-oct-2026) ═════════ */
.cel-no{display:inline}
/* Embudo: filtros de estado con su punto de color (no son etiquetas) */
.emb-est{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.emb-est .fchip{display:inline-flex;align-items:center;gap:6px}
.emb-est .fchip i{width:7px;height:7px;border-radius:50%;flex:none}
.emb-est .fchip span{font-family:var(--mono);font-size:.62rem;opacity:.65}

/* Respuestas rápidas */
.atw-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.atw-barra .busca-w{flex:0 1 320px;min-width:200px}
.atw-temas{display:flex;gap:6px;flex-wrap:wrap}
.atw-cuenta{margin-left:auto;font-size:.76rem;color:var(--muted)}
.atw-cuenta b{color:var(--fg);font-weight:600}
.atw{padding:0}
.atw-t th{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.08em;color:var(--faint);text-transform:uppercase;
  padding:10px 16px;border-bottom:1px solid var(--line);background:none;text-align:left;white-space:nowrap}
.atw-t th.num,.atw-t td.num{text-align:right}
.atw-t td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:.8rem}
.atw-t tr:last-child td{border-bottom:0}
.atw-t tr[data-at-editar]{cursor:pointer}
.atw-t tr[data-at-editar]:hover td{background:color-mix(in srgb,var(--card2) 55%,transparent)}
.atw-t tr[data-at-editar]:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.atw-t td:first-child{width:1%;white-space:nowrap}
.atw-r{max-width:0;width:100%}
.atw-r>b{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600}
.atw-r>b em{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-weight:400;font-size:.7rem;color:var(--muted)}
.atw-r>b em .ic{width:12px;height:12px}
.atw-r>span{display:block;margin-top:2px;font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atw-mal{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font-style:normal;font-size:.7rem;color:var(--danger)}
.atw-mal .ic{width:12px;height:12px}
.atw-cel{display:none}
.atw-vacio{padding:28px 18px}
.at-chip{display:inline-flex;align-items:center;flex:none;height:24px;padding:0 8px;border:1px solid var(--line-strong);border-radius:6px;
  font-size:.74rem;color:var(--primary-txt);white-space:nowrap}
.catd-h-b{display:flex;gap:2px}
.atd-vars{margin-top:-6px}
.atd-ayuda{margin-top:-10px !important}
.atd-adj{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.atd-adj .btn{justify-content:center;display:inline-flex;align-items:center;gap:6px}
.atd-adj .btn .ic,.atd-adj-ya .ic{width:14px;height:14px}
.atd-adj-ya{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:.78rem}
.atd-adj-ya span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atd-demo{display:grid;gap:6px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.atd-pop{display:flex;align-items:center;gap:14px;padding:9px 12px;border-radius:7px;background:var(--primary-s);font-size:.78rem}
.atd-pop .mono{color:var(--primary-txt)}
.atd-pop b{font-weight:500}
.atd-campo{display:flex;align-items:center;gap:2px;padding:9px 12px;border:1px solid var(--primary);border-radius:8px;font-size:.8rem}
.atd-campo i{width:1px;height:15px;background:var(--fg);margin-left:2px;animation:atdCursor 1s steps(1) infinite}
.atd-campo em{margin-left:auto;font-style:normal;font-size:.64rem;color:var(--faint)}
@keyframes atdCursor{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.atd-campo i{animation:none}}

/* Auto-respuestas */
.auw-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.auw{padding:0}
.auw .card-h{padding:14px 18px;gap:10px;flex-wrap:wrap;justify-content:flex-start}
.auw .card-h>b{font-size:.92rem;font-weight:600}
.auw .card-h .mini{margin:0}
.auw-r{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;padding:14px 18px;border-top:1px solid var(--line);cursor:pointer}
.auw-r:hover{background:color-mix(in srgb,var(--card2) 55%,transparent)}
.auw-r.gana{background:var(--primary-s)}
.auw-r.off .auw-c{opacity:.55}
.auw-ord{display:grid;justify-items:center;align-content:start;gap:0}
.auw-ord b{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--fg2);line-height:1.6}
.auw-ord .ibtn{width:24px;height:20px;display:grid;place-items:center;color:var(--faint);border-radius:5px}
.auw-ord .ibtn:hover:not([disabled]){color:var(--fg);background:var(--card2)}
.auw-ord .ibtn[disabled]{opacity:.3;cursor:default}
.auw-ord .ibtn .ic{width:13px;height:13px}
.auw-c{min-width:0;display:grid;gap:6px}
.auw-c-h{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;min-width:0}
.auw-c-h b{font-size:.86rem;font-weight:600}
.auw-tipo{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border:1px solid var(--line-strong);border-radius:6px;
  font-size:.7rem;color:var(--fg2);white-space:nowrap}
.auw-tipo .ic{width:12px;height:12px}
.auw-cuando{font-size:.74rem;color:var(--muted);min-width:0}
.auw-txt{padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:.78rem;line-height:1.5;color:var(--fg2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.auw-aviso{display:flex;gap:6px;align-items:flex-start;font-size:.72rem;line-height:1.45;color:var(--warn)}
.auw-aviso.mal{color:var(--danger)}
.auw-aviso .ic{width:12px;height:12px;flex:none;margin-top:2px}
.auw-nota{font-size:.7rem;line-height:1.45;color:var(--muted)}
.auw-d{display:grid;justify-items:end;align-content:start;gap:8px}
.auw-d .mono{font-size:.68rem;color:var(--faint);white-space:nowrap}
.auw-mas{width:28px;height:28px;display:grid;place-items:center;color:var(--fg3);border-radius:7px}
.auw-mas:hover{color:var(--fg);background:var(--card2)}
.auw-mas .ic{width:15px;height:15px}
.auw-vacio{padding:28px 18px}
.auw-pr{padding:0;position:sticky;top:12px}
.auw-pr-h{padding:16px 18px 0}
.auw-pr-h b{display:block;font-size:.92rem;font-weight:600}
.auw-pr-h span{display:block;margin-top:3px;font-size:.74rem;color:var(--muted)}
.auw-pr-b{display:grid;gap:10px;padding:14px 18px 16px;border-bottom:1px solid var(--line)}
.auw-pr-ops{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.auw-pr-et{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--muted)}
.auw-pr-et .inp{height:30px;padding:0 26px 0 8px;font-size:.74rem;width:auto}
.auw-pr-chat{display:grid;gap:8px;align-content:start;min-height:220px;padding:16px 18px 18px;background:var(--bg);border-radius:0 0 var(--rc) var(--rc)}
.auw-pr-vacio{font-size:.76rem;color:var(--muted);line-height:1.5}
.auw-msg{max-width:88%;padding:9px 12px;border-radius:10px;font-size:.8rem;line-height:1.5}
.auw-msg.in{justify-self:end;background:var(--card2);color:var(--fg)}
.auw-msg.out{justify-self:start;background:var(--card);border:1px solid var(--line);color:var(--fg)}
.auw-msg-et{display:flex;align-items:center;gap:5px;margin-bottom:3px;font-size:.66rem;color:var(--muted)}
.auw-msg-et .ic{width:11px;height:11px}
.auw-veredicto{display:flex;gap:8px;align-items:flex-start;padding:9px 12px;border-radius:8px;border:1px solid var(--line);font-size:.76rem;line-height:1.45;color:var(--fg2)}
.auw-veredicto .ic{width:14px;height:14px;flex:none;margin-top:1px;color:var(--primary-txt)}
.auw-veredicto.ok{border-color:color-mix(in srgb,var(--ok) 35%,var(--line));background:color-mix(in srgb,var(--ok) 8%,transparent)}
.auw-veredicto.ok .ic{color:var(--ok)}
.auw-veredicto.mal{border-color:color-mix(in srgb,var(--warn) 35%,var(--line));background:color-mix(in srgb,var(--warn) 8%,transparent)}
.auw-veredicto.mal .ic{color:var(--warn)}
.auw-veredicto b{color:var(--fg);font-weight:600}
.auw-pr-chat .pr-fuera{font-size:.72rem}
@media(max-width:1180px){.auw-grid{grid-template-columns:minmax(0,1fr)}.auw-pr{position:static}}

/* Recompra */
.rcw-cel-plt{display:none}
.rcw-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.rcw{padding:0;display:flex;flex-direction:column}
body.az .rcw .card-h{padding:12px 18px}
.rcw-rangos{display:flex;gap:6px;flex-wrap:wrap}
.rcw-rangos .fchip{display:inline-flex;align-items:center;gap:6px}
.rcw-rangos .fchip span{font-family:var(--mono);font-size:.62rem;opacity:.65}
.rcw-t th{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.08em;color:var(--faint);text-transform:uppercase;
  padding:10px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:none;text-align:left;white-space:nowrap}
.rcw-t th.num,.rcw-t td.num{text-align:right}
.rcw-t td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:.8rem}
.rcw-t td:first-child,.rcw-t th:first-child{padding-left:18px;width:1%}
.rcw-t tr.fuera td:not(:first-child){opacity:.45}
.rcw-ck{width:17px;height:17px;accent-color:var(--primary);cursor:pointer}
.rcw-ck[disabled]{cursor:default;opacity:.4}
.rcw-p{display:flex;align-items:center;gap:10px;min-width:0}
.rcw-p>span{display:grid;gap:1px;min-width:0}
.rcw-p b{font-size:.84rem;font-weight:600;white-space:nowrap}
.rcw-p .mono{font-size:.7rem;color:var(--muted);white-space:nowrap}
.rcw-u b{display:block;font-size:.8rem;font-weight:500}
.rcw-u span{display:block;font-size:.7rem;color:var(--muted)}
.rcw-u .vac{color:var(--faint)}
.rcw-d{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font-family:var(--mono);font-size:.7rem;
  white-space:nowrap;color:var(--fg2);background:var(--card2)}
.rcw-d.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.rcw-d.dg{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,transparent)}
.rcw-est{white-space:nowrap;text-align:right}
.rcw-est .btn{margin-left:6px}
.rcw-e{font-size:.7rem;color:var(--muted)}
.rcw-e.ok{color:var(--ok)}.rcw-e.info{color:var(--primary-txt)}.rcw-e.warn{color:var(--warn)}
.rcw-cel{display:none}
.rcw-vacio{padding:28px 18px}
.rcw-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;margin-top:auto;
  border-top:1px solid var(--line);background:var(--card);border-radius:0 0 var(--rc) var(--rc)}
.rcw-bar-t{flex:1;min-width:0;font-size:.78rem;color:var(--fg2)}
.rcw-bar-t b{color:var(--fg)}
.rcw-bar-n{color:var(--muted)}
.rcw-bar-b{display:flex;gap:8px}
.rcw-bar-b .btn{display:inline-flex;align-items:center;gap:6px}
.rcw-bar-b .btn .ic{width:14px;height:14px}
.rcw-lado{display:grid;gap:16px;align-content:start}
.rcw-plt,.rcw-prev{padding:16px 18px;display:grid;gap:10px}
.rcw-plt .mini,.rcw-prev .mini{margin:0;line-height:1.5}
.rcw-warn{color:var(--warn) !important}
.rcw-ops{display:grid;gap:8px}
.rcw-op{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;text-align:left;
  border:1px solid var(--line-strong);border-radius:9px;background:none;color:var(--fg);font:inherit;cursor:pointer}
.rcw-op:hover{border-color:var(--fg3)}
.rcw-op.on{border-color:var(--primary);background:var(--primary-s)}
.rcw-op.on .plw-radio{border-color:var(--primary)}
.rcw-op.on .plw-radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary)}
.rcw-op b{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcw-op span{font-size:.7rem;color:var(--muted);white-space:nowrap}
.rcw-auto{display:flex;gap:12px;align-items:flex-start;padding:14px 18px}
.rcw-auto>span b{display:block;font-size:.82rem;font-weight:600}
.rcw-auto>span span{display:block;margin-top:2px;font-size:.72rem;line-height:1.45;color:var(--muted)}
@media(max-width:1180px){.rcw-grid{grid-template-columns:minmax(0,1fr)}.rcw-lado{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}

@media(max-width:760px){
  .cel-no{display:none}
  .emb-est{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}
  .emb-est .fchip{flex:none}
  body[data-sec="respuestas"] .hello .acciones,body[data-sec="autoresp"] .hello .acciones{display:none}
  body[data-sec="respuestas"] .hello,body[data-sec="autoresp"] .hello,body[data-sec="recompra"] .hello{position:relative;padding-right:58px}
  body[data-sec="respuestas"] .hello p:not(.cel-sub),body[data-sec="autoresp"] .hello p:not(.cel-sub),
  body[data-sec="recompra"] .hello p:not(.cel-sub){display:none}
  body[data-sec="recompra"] .hello .acciones{position:absolute;top:2px;right:0}
  body[data-sec="recompra"] .hello .acciones .btn{width:42px;height:42px;padding:0;justify-content:center}
  /* Respuestas rápidas */
  .atw-barra .busca-w{flex:1 1 100%}
  .atw-temas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}
  .atw-temas .fchip{flex:none}
  .atw-cuenta{display:none}
  .atw{background:none;border:0;box-shadow:none}
  .atw-t{display:none}
  .atw-cel{display:grid}
  .atw-c{display:grid;gap:6px;padding:14px 2px;border-bottom:1px solid var(--line);cursor:pointer}
  .atw-c-h{display:flex;align-items:center;gap:10px;min-width:0}
  .atw-c-h b{flex:1;min-width:0;font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .atw-c-h .mono{font-size:.68rem;color:var(--faint);white-space:nowrap}
  .atw-c p{margin:0;font-size:.8rem;line-height:1.5;color:var(--fg2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* Auto-respuestas: primero se prueban, luego la lista */
  body.az .kpis.auw-k{display:none}
  .auw-grid{display:flex;flex-direction:column-reverse;gap:14px}
  .auw .card-h{padding:12px 14px}
  .auw-r{grid-template-columns:28px minmax(0,1fr) auto;gap:10px;padding:12px 14px}
  .auw-ord .ibtn{display:none}
  .auw-ord b{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--card2);font-size:.74rem}
  .auw-tipo{display:none}
  .auw-txt{display:none}
  .auw-cuando{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .auw-d{align-content:center}
  .auw-d .mono,.auw-mas{display:none}
  .auw-pr-chat{min-height:0}
  /* Recompra */
  body.az .kpis.rcw-k{display:none}
  .rcw-cel-plt{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:12px 14px;
    border:1px solid var(--line);border-radius:12px;background:var(--card)}
  .rcw-cel-plt>span{min-width:0;font-size:.78rem;color:var(--muted)}
  .rcw-cel-plt i{display:block;font-style:normal;font-size:.7rem;margin-bottom:2px}
  .rcw-cel-plt b{color:var(--fg);font-weight:600}
  .rcw-cel-plt .lnk{flex:none;font-weight:600;color:var(--primary-txt)}
  .rcw-plt{display:none}
  .rcw{background:none;border:0;box-shadow:none}
  body.az .rcw .card-h{padding:0 0 8px}
  .rcw-rangos{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:100%}
  .rcw-rangos .fchip{flex:none}
  .rcw-t{display:none}
  .rcw-cel{display:grid}
  .rcw-c{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line)}
  .rcw-c .rcw-ck{width:22px;height:22px}
  .rcw-c-t{min-width:0;display:grid;gap:2px}
  .rcw-c-t b{font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rcw-c-t span{font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rcw-c-t i{font-style:normal;font-size:.7rem;color:var(--muted)}
  .rcw-c-t i.ok{color:var(--ok)}
  .rcw-c.fuera .rcw-c-t,.rcw-c.fuera .rcw-d{opacity:.45}
  .rcw-bar{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));z-index:3;margin:8px -16px 0;padding:12px 16px;border-radius:0;
    border-top:1px solid var(--line)}
  .rcw-bar-n{display:none}
  .rcw-bar-t{display:grid;gap:1px;font-size:.74rem}
  .rcw-bar-t>b{font-size:.84rem}
  .rcw-sep{display:none}
  /* La barra de "Escribirles" va donde flota "Pregúntale a Retoma": aquí se quita para que no se encimen. */
  body[data-sec="recompra"] .ia-btn{display:none}
  .rcw-bar-b .btn{min-height:42px}
  .rcw-bar-b .btn[data-rc-todos] .ic{display:none}
}

/* Lo que quedaba con símbolos (sin emojis): la lista de Configuración, Más herramientas, el botón de Retoma y
   las etiquetas del asistente dentro del chat. */
.chk-h{gap:8px}
.chk-bar{height:4px;border-radius:2px;margin:10px 0 10px}
.chk ul{gap:2px}
.chk li{min-height:24px;gap:9px}
.chk li .t{flex:1;min-width:0}
.chk li.d{text-decoration:none;color:var(--faint)}
.chk .dot{width:15px;height:15px}
.chk li.d .dot{background:var(--soft);color:var(--fg3)}
.chk li:not(.d) .dot{border:1px solid var(--line-strong)}
.chk .dot .ic{width:9px;height:9px;stroke-width:2.6}
.chk .chk-ir{width:12px;height:12px;color:var(--faint)}
.chk li:not(.d):hover{color:var(--fg)}
.chk li:not(.d):hover .chk-ir{color:var(--fg3)}
.nav .ic.nav-mas-f{width:14px;height:14px;margin:0 2px;opacity:.7}
.ia-btn .ic{width:16px;height:16px}
.ia-t .marca .ic{width:18px;height:18px}
.msg .who{display:flex;align-items:center;gap:4px}
.msg .who .ic{width:11px;height:11px;flex:none}
.sug-et{display:inline-flex;align-items:center;gap:4px}
.sug-et .ic{width:12px;height:12px}
.ia-sug.destacada .ic{display:inline-block;width:13px;height:13px;margin-right:6px;vertical-align:-2px}