*,*::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}
.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}

.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)}
.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)}

/* ── Chat ──────────────────────────────────────────────────────────── */
.chat-w{display:grid;grid-template-columns:290px 1fr;min-height:520px}
@media(max-width:820px){.chat-w{grid-template-columns:1fr}.chat-list{display:none}}
.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}
.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}
.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)}

/* ── 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){
  .ia-panel{right:10px;left:10px;width:auto;bottom:10px;height:calc(100vh - 20px)}
  .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(308px,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,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}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-c{aspect-ratio:1;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}


/* ── 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.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}

.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:'● ';color:var(--line)}
/* 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}

/* ── 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-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}