/* Envoltorio del artifact */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
/* Estilo del prototipo v39 */
/* Layout: barra lateral en computadora, barra inferior en teléfono. Dos modos: Centro de operaciones (Carlos) y Vista del cliente (marca de cada cliente). */
:root{
  color-scheme: dark;
  --bg:#0f0f10; --panel:#18181a; --panel-2:#212124; --line:#2b2b2e; --line-2:#3b3b3f;
  --fg:#f5f4f0; --muted:#b5b4ae; --dim:#9c9b95;
  --gold:#d4af37; --gold-2:#b8921f;
  --accent:#d4af37;
  --gold-ink:#e3c25c; --accent-ink:var(--accent); --on-bad:#111111;
  --ok:#3fcf9e; --warn:#f2994a; --bad:#f07a86; --info:#7db1f6;
  --display:"Funnel Display",ui-sans-serif,system-ui,sans-serif;
  --body:"Funnel Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"Funnel Sans",ui-sans-serif,system-ui,sans-serif;
  --r:14px;
  /* 3. Escala de texto: 6 tamaños, los estilos de texto de Apple (caption 12, footnote 13, subheadline 15, headline 17, title 22, large title 34). En rem para respetar el tamaño de letra del teléfono */
  --fs-label:.75rem; --fs-note:.8125rem; --fs-body:.9375rem; --fs-head:1.0625rem; --fs-title:1.375rem; --fs-display:2.125rem;
  /* 7. Estados: tono fuerte para texto, fondo suave para etiquetas */
  --ok-bg:color-mix(in srgb,var(--ok) 15%,transparent); --warn-bg:color-mix(in srgb,var(--warn) 15%,transparent); --bad-bg:color-mix(in srgb,var(--bad) 15%,transparent); --info-bg:color-mix(in srgb,var(--info) 15%,transparent);
  /* 8. Tonos: etiqueta informativa (relleno) y control (borde) */
  --chip-bg:color-mix(in srgb,var(--fg) 8%,transparent); --ctl-line:var(--line-2);
  --press:color-mix(in srgb,var(--fg) 7%,transparent);
  --series-sales:#e9e8e3;
}
/* 14. Modo claro: solo si el teléfono o el visor lo piden */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --bg:#f5f5f3; --panel:#ffffff; --panel-2:#f3f3f1; --line:#e4e4e1; --line-2:#cbcbc7;
    --fg:#111111; --muted:#4a4a47; --dim:#62625e;
    --gold:#c9a227; --gold-2:#a8851a; --accent:#c9a227;
    --gold-ink:#7a5c00; --accent-ink:color-mix(in srgb,var(--accent) 60%,#000); --on-bad:#fff;
    --ok:#0a6746; --warn:#9a4a00; --bad:#a72837; --info:#1f54ab; --series-sales:#2b2b2b;
  }
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#f5f5f3; --panel:#ffffff; --panel-2:#f3f3f1; --line:#e4e4e1; --line-2:#cbcbc7;
  --fg:#111111; --muted:#4a4a47; --dim:#62625e;
  --gold:#c9a227; --gold-2:#a8851a; --accent:#c9a227;
  --gold-ink:#7a5c00; --accent-ink:color-mix(in srgb,var(--accent) 60%,#000); --on-bad:#fff;
  --ok:#0a6746; --warn:#9a4a00; --bad:#a72837; --info:#1f54ab; --series-sales:#2b2b2b;
}
/* 13. Más contraste si el teléfono lo pide */
@media (prefers-contrast: more){
  :root{ --muted:#dcd6cc; --dim:#c9c3b9; --line:#5a5b61; --line-2:#76777d; }
  :root[data-theme="light"]{ --muted:#33312d; --dim:#45423d; --line:#9d9a93; --line-2:#7d7a73; }
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:var(--fs-body);line-height:1.5;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100%}

/* Sidebar */
.side{background:var(--panel);border-right:1px solid var(--line);padding-block:18px;padding-inline:14px;display:flex;flex-direction:column;gap:16px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:center;gap:10px;padding:2px 6px}
.logo{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;color:var(--gold-ink);font-family:var(--display);font-weight:700;font-size:var(--fs-head)}
.brand b{display:block;font-family:var(--display);font-size:var(--fs-body);line-height:1.2}
.brand small{color:var(--dim);font-size:var(--fs-label)}
.navgrp{display:flex;flex-direction:column;gap:2px}
.navgrp h4{margin:0 0 4px;font-size:var(--fs-label);font-weight:600;color:var(--dim);padding-inline:8px}
.nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;color:var(--muted);background:none;border:0;text-align:left;width:100%}
.nav:hover{background:var(--panel-2);color:var(--fg)}
.nav.on{background:var(--bg);color:var(--fg);font-weight:600;box-shadow:inset 3px 0 0 var(--gold);border-radius:10px}
.nav.on svg{color:var(--gold-ink)}
.nav svg{color:var(--muted)}
.nav svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75}
.nav .count{margin-left:auto;font-family:var(--mono);font-size:var(--fs-label);color:var(--dim)}
.cl-dot{width:9px;height:9px;border-radius:50%;flex:none}
.me{margin-top:auto;display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:14px}
.avatar{width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold-ink);display:grid;place-items:center;font-weight:700;flex:none}
.me small{display:block;color:var(--dim);font-size:var(--fs-label)}

/* Main */
.main{padding-block:24px 48px;padding-inline:28px;min-width:0;display:flex;flex-direction:column;gap:20px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.mode{display:flex;gap:2px;border:1px solid var(--line-2);border-radius:11px;padding:3px;background:var(--panel)}
.mode button{background:none;border:0;padding:6px 14px;border-radius:8px;color:var(--muted);font-size:var(--fs-note)}
.mode button.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--fg);font-weight:600}
.sample{font-size:var(--fs-label);color:var(--gold-ink);border:1px dashed var(--gold-2);border-radius:999px;padding:3px 10px;white-space:nowrap}
.head h1{margin:0;font-family:var(--display);font-size:var(--fs-title);font-weight:600;letter-spacing:-.01em;text-wrap:balance}
.head p{margin:4px 0 0;color:var(--muted);font-size:var(--fs-note);max-width:64ch}
.seg{display:flex;gap:2px;border:1px solid var(--line-2);border-radius:10px;padding:3px;flex-wrap:wrap}
.seg button{background:none;border:0;padding:5px 11px;border-radius:7px;color:var(--muted);font-size:var(--fs-label)}
.seg button.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--fg);font-weight:600}
.row{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g32{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0}
.card h3{margin:0 0 2px;font-family:var(--display);font-size:var(--fs-head);font-weight:600}
.card .sub{color:var(--dim);font-size:var(--fs-label);margin:0 0 14px}
.kpi .lbl{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:var(--fs-label);letter-spacing:.02em}
.kpi .lbl svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75}
.kpi .v{font-family:var(--display);font-size:var(--fs-title);font-weight:600;line-height:1.15;margin-top:6px;letter-spacing:-.01em}
.kpi .spark{display:block;width:100%;height:30px;margin-top:8px}
.hero{display:flex;gap:28px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.hero .big{font-family:var(--display);font-size:var(--fs-display);font-weight:600;line-height:1;letter-spacing:-.02em}
.hero .big-l{color:var(--muted);font-size:var(--fs-note);margin-top:6px}
.hero .side-stats{display:flex;gap:22px;flex-wrap:wrap;padding-bottom:6px}
.hero .side-stats b{display:block;font-family:var(--display);font-size:var(--fs-title);font-weight:600}
.hero .side-stats span{color:var(--muted);font-size:var(--fs-label)}
.lc{position:relative}
.lc .tip{position:absolute;pointer-events:none;background:var(--panel-2);border:1px solid var(--line-2);border-radius:9px;padding:8px 10px;font-size:var(--fs-label);min-width:150px;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:2}
.lc .tip .d{color:var(--muted);margin-bottom:4px}
.lc .tip .r{display:grid;grid-template-columns:14px 1fr auto;gap:8px;align-items:center}
.lc .tip .r i{height:2px;border-radius:2px}
.lc .tip .r b{font-variant-numeric:tabular-nums}
.goalbar{height:12px;background:var(--panel-2);border-radius:99px;position:relative;overflow:visible;margin:14px 0 6px}
.goalbar .done{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:99px}
.goalbar .pace{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--accent) 30%,transparent);border-radius:99px}
.goalbar .tick{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--fg)}
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:150px;padding-top:18px}
.wk .col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.wk .bar{width:min(24px,70%);border-radius:4px 4px 0 0;background:var(--line-2)}
.wk .bar.best{background:var(--accent)}
.wk .v{font-size:var(--fs-label);color:var(--muted);font-variant-numeric:tabular-nums}
.wk .l{font-size:var(--fs-label);color:var(--dim)}
.team td .who{display:flex;align-items:center;gap:8px}
.team td .av{width:24px;height:24px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line-2);display:grid;place-items:center;font-size:var(--fs-label);font-weight:700;color:var(--muted)}
.kpi .h{font-size:var(--fs-label);color:var(--dim);margin-top:2px}

.kpi.main .v{color:var(--accent-ink)}
.good{color:var(--ok)} .badc{color:var(--bad)} .warnc{color:var(--warn)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label);padding:3px 9px;border-radius:999px;border:1px solid;white-space:nowrap}
.pill.ok{color:var(--ok);border-color:rgba(63,207,158,.35);background:rgba(63,207,158,.08)}
.pill.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.pill.bad{color:var(--bad);border-color:rgba(240,122,134,.4);background:rgba(240,122,134,.08)}
.chip{font-size:var(--fs-label);padding:2px 8px;border-radius:6px;background:var(--panel-2);color:var(--muted);border:1px solid var(--line);white-space:nowrap}

/* Alerts */
.alerts{display:flex;flex-direction:column;gap:8px}
.alert{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid color-mix(in srgb,var(--sev,var(--accent)) 60%,transparent);border-radius:10px;padding:12px 14px;background:none;width:100%;text-align:left}
.alert:hover{background:color-mix(in srgb,var(--sev,var(--accent)) 8%,transparent)}
.alert .ico{width:30px;height:30px;color:var(--sev,var(--accent))}
.alert .ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.75}
.alert .bar{display:none}
.alert b{font-weight:600}
.alert small{display:block;color:var(--muted);font-size:var(--fs-label)}
.linkbtn{background:none;border:1px solid var(--line-2);border-radius:10px;padding:5px 11px;font-size:var(--fs-label);color:var(--fg)}
.linkbtn:hover{border-color:var(--muted);background:var(--panel-2)}

/* Clients list */
.clients{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.ccard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-align:left;display:flex;flex-direction:column;gap:12px;width:100%}
.ccard:hover{border-color:var(--line-2)}
.ccard .t{display:flex;align-items:center;gap:10px}
.mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-family:var(--display);font-weight:700;color:#111;flex:none}
.ccard .t b{font-family:var(--display);font-size:var(--fs-body);font-weight:600;display:block;line-height:1.2}
.ccard .t small{color:var(--dim);font-size:var(--fs-label)}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mini div span{display:block;color:var(--dim);font-size:var(--fs-label)}
.mini div b{font-family:var(--mono);font-size:var(--fs-head);font-variant-numeric:tabular-nums}
.ccard .foot{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--muted);font-size:var(--fs-label);border-top:1px solid var(--line);padding-top:10px}

/* Funnel */
.fun{display:flex;flex-direction:column;gap:10px}
.frow{display:grid;grid-template-columns:110px minmax(0,1fr) 60px 56px;gap:10px;align-items:center;font-size:var(--fs-note)}
.frow .n{color:var(--muted)}
.track{height:22px;background:var(--panel-2);border-radius:6px;overflow:hidden}
.fill{height:100%;border-radius:6px;background:color-mix(in srgb,var(--muted) 38%,var(--panel-2))}
.frow.key .fill{background:var(--accent)}
.frow.key .n,.frow.key .num{color:var(--fg);font-weight:600}
.frow .num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.frow .pct{font-family:var(--mono);text-align:right;color:var(--dim);font-size:var(--fs-label)}

/* Chart */
.chart-wrap{overflow-x:auto}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--fs-label);color:var(--muted);margin-top:8px}
.legend span{display:flex;align-items:center;gap:6px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}

/* Tasks */
.tasks{display:flex;flex-direction:column;gap:6px}
.dayhead{font-size:var(--fs-label);font-weight:600;color:var(--muted);margin:12px 0 2px}
.task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.task.done{opacity:.5}
.task.done .tt{text-decoration:line-through}
.chk{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--line-2);background:none;display:grid;place-items:center;font-size:var(--fs-note)}
.chk.on{background:var(--gold);border-color:var(--gold);color:#1a1306}
.tt{font-weight:600;font-size:var(--fs-body)}
.tm{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:var(--fs-label);color:var(--muted);margin-top:2px}
.late{color:var(--bad)}
form.add{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end}
form.add label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-label);color:var(--dim)}
input,select,textarea{background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px;padding:8px 10px;width:100%;min-width:0}
textarea{resize:vertical;min-height:84px}
.btn{background:var(--accent);color:#111111;border:0;border-radius:10px;padding:9px 16px;font-weight:700;white-space:nowrap}
.btn.ghost{background:none;color:var(--fg);border:1px solid var(--line-2);font-weight:600}
.btn.ghost:hover{background:var(--panel-2);border-color:var(--muted)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters select{width:auto}

/* Webinars & notes */
.list{display:flex;flex-direction:column;gap:10px}
.wb{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px}
.date{border-radius:10px;background:var(--panel);border:1px solid var(--line-2);text-align:center;padding:6px 0}
.date b{display:block;font-family:var(--mono);font-size:var(--fs-title);line-height:1.1}
.date span{font-size:var(--fs-label);color:var(--muted)}
.note{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.note .nh{display:flex;justify-content:space-between;gap:8px;font-size:var(--fs-label);color:var(--muted);margin-bottom:6px;flex-wrap:wrap}
.note p{margin:0;white-space:pre-wrap;font-size:var(--fs-body)}
.empty{color:var(--dim);font-size:var(--fs-note);padding:14px;border:1px dashed var(--line-2);border-radius:10px;text-align:center}

/* Client detail header */
.chead{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.chead .mark{width:44px;height:44px;border-radius:12px;font-size:var(--fs-head)}
.back{background:none;border:0;color:var(--muted);padding:0;font-size:var(--fs-note)}
.back:hover{color:var(--fg)}
.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.sbox{background:var(--panel-2);border-radius:10px;padding:12px}
.sbox span{display:block;font-size:var(--fs-label);color:var(--dim)}
.sbox b{display:block;margin:4px 0 2px;font-size:var(--fs-body)}
.sbox small{color:var(--muted);font-size:var(--fs-label)}

/* Client view frame */
.client-frame{border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:20px;padding:20px;background:radial-gradient(1200px 400px at 0% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 60%),var(--bg);display:flex;flex-direction:column;gap:16px}
.ctop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ctop .who{display:flex;align-items:center;gap:12px}
.ctop .mark{width:40px;height:40px;border-radius:11px;font-size:var(--fs-head)}
.ctop h2{margin:0;font-family:var(--display);font-size:var(--fs-title);font-weight:600}
.ctop small{color:var(--muted);font-size:var(--fs-label)}
.donut-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.dleg{display:flex;flex-direction:column;gap:10px;flex:1;min-width:160px}
.dleg div{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;font-size:var(--fs-note)}
.dleg b{font-family:var(--mono)}
.foot-note{color:var(--dim);font-size:var(--fs-label)}

/* Deltas, resumen, tablas, pasos */
.kpi .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.delta{font-family:var(--mono);font-size:var(--fs-label);padding:2px 6px;border-radius:6px;white-space:nowrap}
.delta.up{color:var(--ok);background:rgba(63,207,158,.1)}
.delta.down{color:var(--bad);background:rgba(240,122,134,.1)}
.delta.flat{color:var(--dim);background:var(--panel-2)}
.summary{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.summary p.lead{margin:0;font-size:var(--fs-head);line-height:1.6;max-width:72ch}
.summary p.lead b{color:var(--fg);font-weight:700}
.steps{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.steps h4{margin:0;font-size:var(--fs-note);font-weight:600;color:var(--fg)}
.step{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;font-size:var(--fs-body)}
.step .n{width:22px;height:22px;border-radius:50%;background:var(--panel-2);color:var(--muted);display:grid;place-items:center;font-family:var(--mono);font-size:var(--fs-label);font-weight:600}
.fresh{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label);color:var(--muted)}
.fresh i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(63,207,158,.15)}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--fs-note);min-width:600px}
th{text-align:left;font-weight:600;color:var(--dim);font-size:var(--fs-label);padding:9px 10px;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;vertical-align:middle}
td.num,th.num{text-align:right;font-family:var(--mono)}
tr:last-child td{border-bottom:0}
.adname b{display:block;font-weight:600}
.adname small{color:var(--dim);font-size:var(--fs-label)}
.meter{height:8px;background:var(--panel-2);border-radius:99px;overflow:hidden;margin-top:10px;position:relative}
.meter i{display:block;height:100%;background:var(--accent);border-radius:99px}
.meter .goal{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--fg);opacity:.7}
.bench{display:flex;justify-content:space-between;font-size:var(--fs-label);color:var(--dim);margin-top:6px}
.src-row{display:grid;grid-template-columns:12px 1fr auto 46px;gap:10px;align-items:center;font-size:var(--fs-note)}
.src-row b{font-family:var(--mono)}
.src-row span.p{font-family:var(--mono);color:var(--dim);font-size:var(--fs-label);text-align:right}
.stack{display:flex;gap:2px;height:14px;border-radius:99px;overflow:hidden;margin:4px 0 14px}
.callrow{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--fs-note)}
.callrow:last-child{border-bottom:0}
.callrow .hr{font-family:var(--mono);color:var(--muted)}
.sources{font-size:var(--fs-label);color:var(--dim);line-height:1.6}
.sources a{color:var(--muted)}

/* Encabezado, accesos rápidos, tarjeta destacada, actividad */
.topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start}
.greet h1{margin:0;font-family:var(--display);font-size:var(--fs-title);font-weight:400;letter-spacing:-.01em}
.greet h1 b{font-weight:700}
.greet p{margin:4px 0 0;color:var(--muted);font-size:var(--fs-note)}
.search{display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);background:var(--panel);border-radius:12px;padding:0 12px;height:48px;transition:border-color .18s,box-shadow .2s}
.search kbd{font-family:var(--mono);font-size:var(--fs-label);color:var(--dim);border:1px solid var(--line-2);border-radius:6px;padding:2px 6px;white-space:nowrap}
.search:focus-within{border-color:var(--gold)}
.search svg{width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.75;flex:none}
.search input{background:none;border:0;padding:0;height:100%;outline:none}
.search:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 25%,transparent)}
.tb-right{display:flex;align-items:center;gap:12px}
.bell{width:42px;height:42px;border-radius:50%;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;position:relative}
.bell svg{width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.75}
.bell span{position:absolute;top:6px;right:6px;min-width:18px;height:18px;border-radius:99px;background:var(--bad);color:var(--on-bad);font-size:var(--fs-label);font-weight:700;display:grid;place-items:center;padding:0 4px}
.bell span:empty{display:none}
.avatar.big{width:42px;height:42px;font-size:var(--fs-head);border:2px solid var(--gold)}
.quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.qa{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:12px;text-align:left;min-height:104px}
.qa:hover{border-color:color-mix(in srgb,var(--gold) 50%,var(--line))}
.qa .ql{display:flex;flex-direction:column;gap:3px}
.qa .ql b{font-size:var(--fs-body);font-weight:600}
.qa .ql small{font-size:var(--fs-label);color:var(--muted)}
.qa .ring{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;flex:none}
.qa.primary .ring{background:var(--gold);border-color:var(--gold)}
.qa.primary .ring svg{stroke:#111111}
.qa.primary{border-color:color-mix(in srgb,var(--gold) 40%,var(--line))}
.qa .ring svg{width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.75}
.feature{border-radius:16px;padding:22px;background:var(--panel-2);border:1px solid var(--line-2);color:var(--fg);display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-height:190px;position:relative;overflow:hidden}

.feature h4{margin:0;font-family:var(--display);font-size:var(--fs-head);font-weight:600;color:var(--fg)}
.feature small{display:block;font-size:var(--fs-label);color:var(--muted)}
.feature .amt{font-family:var(--display);font-size:var(--fs-title);font-weight:700;color:var(--fg);line-height:1.1}
.feature .row2{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;color:var(--muted);font-size:var(--fs-label)}
.feature .row2 b{color:var(--gold-ink)}
.ring-stat{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ring-stat .vals{display:flex;flex-direction:column;gap:12px;text-align:center}
.ring-stat .vals b{display:block;font-family:var(--display);font-size:var(--fs-title)}
.ring-stat .vals span{font-size:var(--fs-label);color:var(--muted)}
.act{display:flex;flex-direction:column}
.act-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.act-row:last-child{border-bottom:0}
.act-row .dotb{width:20px;height:20px;border-radius:50%}
.act-row b{display:block;font-size:var(--fs-body);font-weight:600}
.act-row small{color:var(--muted);font-size:var(--fs-label)}
.act-row .amt{font-family:var(--display);font-weight:600;font-size:var(--fs-head);white-space:nowrap}
.chart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.chart-head .tot{font-family:var(--display);font-size:var(--fs-title);font-weight:700;line-height:1.1;margin-top:2px}
.lkey{display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:var(--fs-note)}
.lkey span{display:flex;align-items:center;gap:8px}
.lkey i{width:14px;height:14px;border-radius:50%}
.lc .tip{border-color:var(--accent)}
@media (max-width:1100px){.quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Encabezado: fecha, chips, próxima llamada, resultados de búsqueda, menú */
.greet p{margin:4px 0 0;color:var(--muted);font-size:var(--fs-body)}
.gchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gchip{background:var(--panel);border:1px solid var(--line-2);border-radius:99px;padding:5px 12px;font-size:var(--fs-label);color:var(--fg)}
.gchip:hover{border-color:var(--gold)}
.gchip.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.tb-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
.nextcall{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;text-align:left;width:100%;min-height:48px}
.nextcall:hover{border-color:color-mix(in srgb,var(--gold) 50%,var(--line))}
.nextcall .hr{font-family:var(--display);font-size:var(--fs-head);font-weight:700;color:var(--gold-ink);white-space:nowrap}
.nextcall .who{min-width:0}
.nextcall .who b{display:block;font-size:var(--fs-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nextcall .who small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--fs-label)}
.nextcall .lab{font-size:var(--fs-label);color:var(--dim);display:block}
.searchwrap{position:relative}
.qres{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--panel-2);border:1px solid var(--line-2);border-radius:12px;padding:6px;z-index:20;box-shadow:0 16px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px;animation:tip-in .14s ease-out}
.qr{display:grid;grid-template-columns:62px minmax(0,1fr);gap:10px;align-items:center;background:none;border:0;border-radius:8px;padding:8px 10px;text-align:left;width:100%}
.qr:hover,.qr:focus-visible{background:var(--panel);outline:none}
.qr .ty{font-size:var(--fs-label);color:var(--dim)}
.qr b{display:block;font-size:var(--fs-body);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qr small{color:var(--muted);font-size:var(--fs-label)}
.qres .none{padding:10px;color:var(--muted);font-size:var(--fs-note)}
.avmenu{position:relative}
.avatar.big{cursor:pointer;background:var(--panel)}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:12px;padding:6px;z-index:25;box-shadow:0 16px 40px rgba(0,0,0,.45);animation:tip-in .14s ease-out}
.menu-h{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.menu-h b{display:block;font-size:var(--fs-body)}
.menu-h small{color:var(--muted);font-size:var(--fs-label)}
.menu button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-radius:8px;padding:9px 10px;font-size:var(--fs-body);text-align:left}
.menu button:hover,.menu button:focus-visible{background:var(--panel);outline:none}
.menu button svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.75}
.proto-note{margin:8px 0 0;text-align:center;color:var(--dim);font-size:var(--fs-label)}
[hidden]{display:none !important}
.nextcall .who small span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:860px){
  .greet h1{font-size:var(--fs-title)}
  .tb-row{grid-template-columns:minmax(0,1fr)}
  .search kbd{display:none}
  .topbar{display:block;position:relative}
  .tb-right{position:absolute;top:0;right:0}
  .greet h1,.greet p{padding-right:104px}
  .nextcall{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .nextcall .pill{display:none}
  .quick{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .qa,.qa.primary{background:none;border:0;padding:2px 0;min-height:0;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;text-align:center}
  .qa:hover{transform:none}
  .qa .ql small{display:none}
  .qa .ql b{font-size:var(--fs-label);font-weight:400;color:var(--muted)}
  .qa.primary .ql b{color:var(--fg)}
  .qa .ring{width:54px;height:54px;background:var(--panel)}
  .qa .ring svg{width:22px;height:22px}
}
/* Piezas nuevas: notas en gráfico, comentarios, riesgo, ranking, compartir, cobros, webinars, fase 2 */
.notes-list{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.note-chip{display:grid;grid-template-columns:22px auto minmax(0,1fr);gap:10px;align-items:center;font-size:var(--fs-note)}
.note-chip .n{width:20px;height:20px;border-radius:50%;background:var(--accent);color:#111111;display:grid;place-items:center;font-size:var(--fs-label);font-weight:700}
.note-chip .dt{color:var(--muted);font-size:var(--fs-label);white-space:nowrap}
form.inline{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
form.inline input,form.inline select{width:auto;flex:1 1 140px}
.cm-btn{background:none;border:1px solid var(--line-2);border-radius:10px;padding:4px 9px;font-size:var(--fs-label);color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.cm-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75}
.cm-btn.on,.cm-btn:hover{border-color:var(--accent);color:var(--fg)}
.task .acts{display:flex;gap:6px;align-items:center}
.thread{grid-column:1/-1;border-top:1px solid var(--line);margin-top:6px;padding-top:10px;display:flex;flex-direction:column;gap:10px}
.cm{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px}
.cm .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-label);font-weight:700;background:var(--panel);border:1px solid var(--line-2)}
.cm .av.c{border-color:var(--gold);color:var(--gold-ink)}
.cm .meta{font-size:var(--fs-label);color:var(--muted)}
.cm .meta b{color:var(--fg);font-weight:600;margin-right:6px}
.cm p{margin:2px 0 0;font-size:var(--fs-body)}
.risk{display:flex;align-items:center;gap:10px;font-size:var(--fs-label);color:var(--muted)}
.risk .rbar{flex:1;height:6px;border-radius:99px;background:var(--panel-2);overflow:hidden}
.risk .rbar i{display:block;height:100%;border-radius:99px}
.rank{display:flex;flex-direction:column;gap:12px}
.rank-row{display:grid;grid-template-columns:24px 170px minmax(0,1fr) 64px 72px;gap:12px;align-items:center;font-size:var(--fs-note)}
.rank-row .pos{font-family:var(--display);font-weight:700;color:var(--muted);text-align:center}
.rank-row .pos.top{color:var(--gold-ink)}
.rank-row .nm{display:flex;align-items:center;gap:8px;min-width:0}
.rank-row .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-row .tr{height:10px;border-radius:0 4px 4px 0;background:var(--panel-2)}
.rank-row .tr i{display:block;height:100%;border-radius:0 4px 4px 0;background:color-mix(in srgb,var(--muted) 45%,var(--panel-2))}
.rank-row:first-child .tr i{background:var(--gold)}
.rank-row .v{font-family:var(--display);font-weight:600;text-align:right}
.rank-row .d{text-align:right}
.share{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.linkbox{display:flex;gap:8px;align-items:center;background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:6px 6px 6px 12px}
.linkbox code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:var(--fs-label);color:var(--fg)}
.opts{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;flex:1 1 200px;cursor:pointer}
.opt input{width:auto;margin-top:3px;accent-color:var(--accent)}
.opt b{display:block;font-size:var(--fs-note)}
.opt small{color:var(--muted);font-size:var(--fs-label)}
.cols{display:flex;align-items:flex-end;gap:18px;height:170px;padding:22px 6px 0;border-bottom:1px solid var(--line)}
.cols .c{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.cols .bar{width:min(36px,60%);border-radius:4px 4px 0 0;background:color-mix(in srgb,var(--muted) 45%,var(--panel-2))}
.cols .c:nth-last-child(2) .bar{background:var(--gold)}
.cols .bar.part{background:transparent;border:1.5px dashed var(--line-2);border-bottom:0}
.cols .v{font-size:var(--fs-label);font-family:var(--display);font-weight:600}
.cols-l{display:flex;gap:18px;padding:6px 6px 0}
.cols-l span{flex:1;text-align:center;font-size:var(--fs-label);color:var(--dim)}
.regbar{height:6px;border-radius:99px;background:var(--panel);margin-top:8px;overflow:hidden;max-width:260px}
.regbar i{display:block;height:100%;background:color-mix(in srgb,var(--muted) 60%,var(--panel-2));border-radius:99px}
.p2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.p2 .card{display:flex;flex-direction:column;gap:12px}
.p2 .ph{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.p2tag{font-size:var(--fs-label);font-weight:700;color:var(--gold-ink);border:1px solid var(--gold);border-radius:99px;padding:2px 9px;white-space:nowrap}
.wa{background:#0b141a;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:8px}
.wa .bub{background:#005c4b;color:#e9edef;border-radius:10px 10px 2px 10px;padding:9px 11px;font-size:var(--fs-note);line-height:1.5;align-self:flex-end;max-width:92%;white-space:pre-line}
.wa .bub.in{background:#202c33;border-radius:10px 10px 10px 2px;align-self:flex-start}
.wa .bub small{display:block;text-align:right;font-size:var(--fs-label);opacity:.7;margin-top:4px}
.ai{background:var(--bg);border:1px solid var(--line-2);border-radius:12px;padding:14px;font-size:var(--fs-note);display:flex;flex-direction:column;gap:8px}
.ai h5{margin:0;font-size:var(--fs-label);color:var(--muted);font-weight:600}
.ai ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:3px}
.plat{display:flex;flex-direction:column;gap:8px}
.plat div{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;font-size:var(--fs-body)}
.p2banner{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border:1px dashed var(--line-2);border-radius:var(--r);padding:16px 18px}
.p2banner b{display:block;font-family:var(--display);font-size:var(--fs-head)}
.p2banner span{color:var(--muted);font-size:var(--fs-note)}
@media (max-width:860px){.rank-row{grid-template-columns:20px minmax(0,1fr) 56px 60px}.rank-row .tr{display:none}.p2{grid-template-columns:minmax(0,1fr)}}
/* Bottom nav (phone) */
.tabbar{display:none}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g32{grid-template-columns:minmax(0,1fr)}.g3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .main{padding-inline:16px;padding-block:16px 120px}
  .g2{grid-template-columns:minmax(0,1fr)}
  form.add{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  form.add label:first-child{grid-column:1/-1}
  .status-grid{grid-template-columns:minmax(0,1fr)}
  .frow{grid-template-columns:86px minmax(0,1fr) 48px 46px;gap:8px;font-size:var(--fs-label)}
  .client-frame{padding:14px;border-radius:16px}
  .head h1{font-size:var(--fs-title)}
}
@media (max-width:420px){.kpi .v{font-size:var(--fs-title)}.mini div b{font-size:var(--fs-body)}}
/* ===== Movimiento =====
   Un solo momento orquestado: al cambiar de pantalla, las tarjetas suben en cascada,
   los números cuentan, las barras crecen y la línea del gráfico se dibuja.
   El resto del movimiento responde a una acción de la persona. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);--ease-pop:cubic-bezier(.23,1,.32,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes grow-x{from{transform:scaleX(0)}}
@keyframes grow-y{from{transform:scaleY(0)}}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes fade{from{opacity:0}}
@keyframes ring-in{from{stroke-dashoffset:var(--len)}}
@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
@keyframes ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}
@keyframes flash{from{background:color-mix(in srgb,var(--ok) 18%,transparent)}}
@keyframes slide-in{from{opacity:0;transform:translateX(-8px)}}
@keyframes tip-in{from{opacity:0;transform:translateY(4px)}}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,12px)}}
@keyframes strike{from{background-size:0 1.5px}to{background-size:100% 1.5px}}
.enter .card,.enter .qa,.enter .ccard,.enter .p2banner,.enter .client-frame{animation:rise .45s var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms)}
.enter .fill,.enter .goalbar .done,.enter .goalbar .pace,.enter .meter i,.enter .regbar i,.enter .rank-row .tr i,.enter .risk .rbar i{transform-origin:left;animation:grow-x .8s var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms + 180ms)}
.enter .cols .bar,.enter .wk .bar{transform-origin:bottom;animation:grow-y .7s var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms + 180ms)}
.enter .draw{stroke-dasharray:1;animation:draw 1.1s var(--ease-out) .25s both}
.enter .area-fill{animation:fade .8s ease .55s both}
.enter .fade-late{animation:fade .6s ease .8s both}
.enter .ring-arc{animation:ring-in 1s var(--ease-out) .3s both}
.lc .tip:not([hidden]){animation:tip-in .14s ease-out}
/* Microgestos */
.btn,.linkbtn,.qa,.chk,.cm-btn,.seg button,.mode button,.nav,.alert,.ccard,.bell,.tabbar button{transition:transform .16s var(--ease-out),background-color .18s,border-color .18s,box-shadow .2s,color .18s}
.btn:active,.linkbtn:active,.chk:active,.cm-btn:active,.seg button:active,.mode button:active,.bell:active,.tabbar button:active{transform:scale(.97)}
.ccard:hover,.qa:hover,.alert:hover{transform:translateY(-2px)}
.ccard:active,.qa:active,.alert:active{transform:translateY(0) scale(.99)}
.qa .ring{transition:transform .3s var(--ease-pop),box-shadow .3s,background-color .3s}
.qa:hover .ring{transform:rotate(-10deg) scale(1.06);box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 12%,transparent);background:color-mix(in srgb,var(--gold) 8%,transparent)}
.nav svg{transition:transform .2s var(--ease-out)}
.nav:hover svg{transform:none}
.btn:hover{box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent)}
.chk.pop{animation:pop .38s var(--ease-pop)}
.task.done .tt{text-decoration:none;background:linear-gradient(currentColor,currentColor) left 55%/100% 1.5px no-repeat}
.task.done.just .tt{animation:strike .35s ease-out both}
.task.just-added,.cm.just-added,.note-chip.just-added{animation:slide-in .35s var(--ease-out) both}
tr.flash td{animation:flash 1.4s ease-out}
.fresh i{position:relative}
.fresh i::after{content:none}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--line-2);border-left:3px solid var(--ok);color:var(--fg);border-radius:10px;padding:10px 14px;font-size:var(--fs-body);display:flex;align-items:center;gap:10px;box-shadow:0 12px 32px rgba(0,0,0,.45);z-index:30;animation:toast-in .25s var(--ease-out)}
.toast svg{width:16px;height:16px;stroke:var(--ok);fill:none;stroke-width:1.75;flex:none}
@media (max-width:860px){.toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
/* ===== Versión 3: origen de cada dato, conexiones, pestañas, app del cliente, alta de cliente, estados vacíos ===== */
:root{--src-ghl:#5f9cf0;--src-meta:#c48cf2}
.btn.sm{padding:6px 12px;font-size:var(--fs-note)}
.hbtns{display:flex;gap:8px;flex-wrap:wrap}
.mimg{object-fit:cover;background:var(--panel-2)}
.pill.info{color:var(--info);border-color:color-mix(in srgb,var(--info) 40%,transparent);background:color-mix(in srgb,var(--info) 10%,transparent)}
.count.bad{color:var(--bad);font-weight:700}

/* Tarjetas de números: alto parejo, la tendencia al fondo, la fuente abajo */
.kpi{display:flex;flex-direction:column}
.kpi .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.kpi .lbl svg{flex:none}
.kpi .vrow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:6px}
.kpi .vrow .v{margin-top:0}
.kpi .spark{margin-top:auto;padding-top:10px;height:40px}
.kpi .kfoot{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.kpi .h + .kfoot{margin-top:auto}
.kpi .dimv{color:var(--dim)}
.kpi.nodata,.kpi.ghost{border-style:dashed}
.kpi.ghost .lbl{color:var(--dim)}

/* Etiqueta de fuente: dice de dónde sale el número. Al tocarla explica el cálculo */
.src{background:none;border:0;padding:2px 0;font-size:var(--fs-label);color:var(--muted);display:inline-flex;align-items:center;gap:6px;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.src::before{content:"";width:8px;height:8px;border-radius:2px;flex:none}
.src-ghl::before{background:var(--src-ghl)}
.src-meta::before{background:var(--src-meta)}
.src-calc::before{border:1.5px solid var(--muted)}
.src:hover{color:var(--fg);text-decoration-color:var(--muted)}
.why{position:fixed;z-index:40;background:var(--panel-2);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;box-shadow:0 16px 40px rgba(0,0,0,.5);font-size:var(--fs-note);animation:tip-in .14s ease-out}
.why b{display:block;font-size:var(--fs-label);color:var(--dim);font-weight:600}
.why p{margin:2px 0 8px}
.why p:last-child{margin-bottom:0}
.why .wmut{color:var(--muted)}

/* Frescura del dato */
.fresh.warn{color:var(--warn)}
.fresh.warn i,.fresh.warn i::after{background:var(--warn)}
.fresh.info i,.fresh.info i::after{background:var(--info)}

/* Avisos de conexión */
.banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;border:1px solid;border-radius:12px;padding:12px 14px}
.banner > svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75}
.banner.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 7%,transparent)}
.banner.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 6%,transparent)}
.banner b{display:block;color:var(--fg);font-size:var(--fs-body)}
.banner span{display:block;color:var(--muted);font-size:var(--fs-note)}

/* Estados vacíos */
.empty.rich{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 16px}
.empty.rich svg{width:22px;height:22px;stroke:var(--warn);fill:none;stroke-width:1.75}
.empty.rich b{color:var(--fg);font-size:var(--fs-body)}
.empty.rich span{max-width:44ch}
.empty.rich.sm{padding:12px;align-items:flex-start;text-align:left}
.emptyc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;border-style:dashed}
.emptyc .eico{width:44px;height:44px;border-radius:12px;background:var(--panel-2);display:grid;place-items:center}
.emptyc .eico svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.75}
.emptyc h3{font-size:var(--fs-head)}
.emptyc p{margin:6px 0 12px;color:var(--muted);max-width:60ch}
.echeck{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px;max-width:360px}
.echeck li{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:var(--fs-body)}

/* Pestañas del detalle de cliente */
.ch1{margin:0;font-family:var(--display);font-size:var(--fs-title);font-weight:600;line-height:1.2}
.chsub{color:var(--muted);font-size:var(--fs-note)}
.tabwrap{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg)}
.tabwrap::before,.tabwrap::after{content:"";position:absolute;top:0;bottom:1px;width:36px;pointer-events:none;opacity:0;transition:opacity .15s var(--ease-out);z-index:1}
.tabwrap::before{left:0;background:linear-gradient(to right,var(--bg),transparent)}
.tabwrap::after{right:0;background:linear-gradient(to left,var(--bg),transparent)}
.tabwrap.fade-l::before,.tabwrap.fade-r::after{opacity:1}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;background:var(--bg)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;padding:11px 12px 12px;color:var(--muted);font-size:var(--fs-body);white-space:nowrap;position:relative;display:inline-flex;align-items:center;gap:7px;flex:none}
.tabs button::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform .22s var(--ease-out)}
.tabs button.on{color:var(--fg);font-weight:600}
.tabs button.on::after{transform:scaleX(1)}
.tabs button:hover{color:var(--fg)}
.tabs button:focus-visible{outline-offset:-3px;border-radius:8px}
.tdot{width:7px;height:7px;border-radius:50%;display:inline-block;flex:none}
.tdot.bad{background:var(--bad)} .tdot.warn{background:var(--warn)} .tdot.info{background:var(--info)}
.tcount{font-size:var(--fs-label);color:var(--dim);font-weight:400}
.nav .nl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav .tdot{margin-left:auto}
.strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.mes-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:center}
.bnum{font-family:var(--display);font-size:var(--fs-title)}

/* Llamadas: la hora en una línea */
.callrow{grid-template-columns:auto minmax(0,1fr) auto}
.callrow .hr{white-space:nowrap;font-family:var(--display);font-size:var(--fs-note);min-width:72px}
.awhy{display:block;font-size:var(--fs-label);color:var(--muted);margin-top:4px;max-width:28ch}
.team .who .chip{margin-left:4px}

/* ===== Vista del cliente: app propia con su marca ===== */
body.cli{background:radial-gradient(900px 380px at 50% -140px,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%) no-repeat,var(--bg)}
body.cli .side,body.cli .topbar,body.cli #tb-row,body.cli .proto-note,body.cli .tabbar{display:none !important}
body.cli .app{grid-template-columns:minmax(0,1fr)}
body.cli .main{max-width:1200px;margin-inline:auto;width:100%;padding-block:16px 56px}
.pv-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px 8px 14px;border:1px dashed var(--line-2);border-radius:12px;background:var(--panel);font-size:var(--fs-note);color:var(--muted)}
.pv-l{display:inline-flex;align-items:center;gap:8px}
.pv-l svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:1.75;flex:none}
.pv-bar select{width:auto;flex:1 1 160px;max-width:260px;padding:6px 10px}
.pv-bar .btn{margin-left:auto}
.capp{display:flex;flex-direction:column;gap:18px}
.capp-h{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:6px 14px;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,var(--line))}
.capp-h .who{display:flex;align-items:center;gap:12px;min-width:0}
.capp-h .mark{width:46px;height:46px;border-radius:13px;font-size:var(--fs-title)}
.capp-h h2{margin:0;font-family:var(--display);font-size:var(--fs-title);font-weight:600;line-height:1.2}
.ctabs{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px}
.ctabs button,.cbar button{background:none;border:0;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.ctabs button{border-radius:8px;padding:8px 14px;font-size:var(--fs-body)}
.ctabs svg,.cbar svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;flex:none}
.ctabs button.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--fg);font-weight:600}
.ctabs button.on svg{color:var(--accent-ink)}
.ctabs button:hover{color:var(--fg)}
.ctitle{margin:0;font-family:var(--display);font-size:var(--fs-title);font-weight:600;text-wrap:balance}
.cfoot{text-align:center;margin:6px 0 0}
.cbar{display:none}

/* ===== Conexiones ===== */
.csum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.csum div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.csum b{font-family:var(--display);font-size:var(--fs-title)}
.csum span{color:var(--muted);font-size:var(--fs-note)}
.acct{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center}
.conn-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.conn-card{display:flex;flex-direction:column;gap:10px}
.conn-card.bad{border-color:color-mix(in srgb,var(--bad) 40%,var(--line))}
.cname{background:none;border:0;padding:0;display:flex;align-items:center;gap:10px;text-align:left;min-width:0}
.cname b{display:block;font-family:var(--display);font-size:var(--fs-head)}
.cname small{color:var(--muted);font-size:var(--fs-label)}
.crow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px}
.crow.bad{border-color:color-mix(in srgb,var(--bad) 50%,var(--line))}
.crow.warn,.crow.pending{border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.crow.just{animation:flash 1.4s ease-out}
.cico{width:34px;height:34px;border-radius:10px;background:var(--panel);border:1px solid var(--line-2);display:grid;place-items:center;flex:none}
.cico svg{width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.75}
.cmain{min-width:0}
.cmain b{display:block;font-size:var(--fs-body)}
.cmain small{color:var(--muted);font-size:var(--fs-label);overflow-wrap:anywhere}
.cid{color:var(--dim)}
.cmsg{margin:6px 0 0;font-size:var(--fs-note);color:var(--fg)}
.cside{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.cside small{color:var(--muted);font-size:var(--fs-label);white-space:nowrap}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--info);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.measure{border-top:1px solid var(--line);padding-top:12px}
.measure summary{cursor:pointer;font-size:var(--fs-note);font-weight:600;color:var(--muted);list-style:none;display:flex;align-items:center;gap:8px}
.measure summary::-webkit-details-marker{display:none}
.measure summary::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .2s var(--ease-out)}
.measure[open] summary::before{transform:rotate(45deg)}
.measure[open] summary{margin-bottom:10px}
.measure summary:hover{color:var(--fg)}
.cside .linkbtn{border:0;padding:2px 0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;background:none}
.cside .linkbtn:hover{color:var(--fg);background:none}
.back{align-self:flex-start}
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mgrid label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-label);color:var(--dim)}
.mgrid select{font-size:var(--fs-note);padding:7px 8px}
.mnote{margin:8px 0 0;font-size:var(--fs-label);color:var(--muted)}

/* ===== Agregar cliente ===== */
.stepper{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:640px}
.stepper li{display:flex;align-items:center;gap:8px;font-size:var(--fs-note);color:var(--dim);padding-top:10px;border-top:2px solid var(--line-2);min-width:0}
.stepper li span{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-family:var(--display);font-size:var(--fs-label);flex:none}
.stepper li em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepper li.on{color:var(--fg);border-top-color:var(--gold)}
.stepper li.on span{border-color:var(--gold);color:var(--gold-ink)}
.stepper li.done{color:var(--muted);border-top-color:color-mix(in srgb,var(--gold) 45%,var(--line-2))}
.nw{display:flex;flex-direction:column;gap:14px;max-width:640px}
.nw h3{font-size:var(--fs-head)}
.nw .sub{margin:0}
.fl{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-note);color:var(--muted)}
.upl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.upl img,.upl .mark{width:48px;height:48px;border-radius:12px;object-fit:cover;font-size:var(--fs-title)}
.upl small{color:var(--dim);font-size:var(--fs-label)}
.vh{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
label.btn{cursor:pointer;display:inline-block}
.upl:focus-within label.btn{outline:2px solid var(--accent);outline-offset:2px}
.swatches{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sw{width:38px;height:38px;border-radius:10px;border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.sw.on{border-color:var(--fg);transform:scale(1.06)}
.swc{display:flex;align-items:center;gap:8px;font-size:var(--fs-note);color:var(--muted)}
.swc input{width:46px;height:38px;padding:2px;border-radius:10px}
.nwprev{background:radial-gradient(400px 160px at 0 0,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),var(--bg);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px;max-width:360px;transition:border-color .2s}
.nwprev .who{display:flex;align-items:center;gap:10px}
.nwprev .who b{display:block;font-family:var(--display)}
.nwprev .who small{color:var(--muted);font-size:var(--fs-label)}
.nwk{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:grid;gap:4px}
.nwk span{font-size:var(--fs-label);color:var(--muted)}
.nwk b{font-family:var(--display);font-size:var(--fs-title);color:var(--accent-ink)}
.nwk i{display:block;height:6px;border-radius:99px;background:var(--accent)}
.nwtabs{display:flex;gap:6px}
.nwtabs span{font-size:var(--fs-label);padding:5px 10px;border-radius:8px;color:var(--muted)}
.nwtabs span.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--fg);font-weight:600}
.picks{display:flex;flex-direction:column;gap:8px}
.pick{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;cursor:pointer}
.pick:has(input:checked){border-color:var(--gold);background:color-mix(in srgb,var(--gold) 6%,transparent)}
.pick.off{opacity:.6;cursor:not-allowed}
.pick input{width:auto;margin-top:3px;accent-color:var(--gold)}
.pick b{display:block;font-size:var(--fs-body)}
.pick small{color:var(--muted);font-size:var(--fs-label)}
.howto{background:var(--panel-2);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px}
.howto p{margin:0;font-size:var(--fs-note);color:var(--muted)}
.nwerr{margin:0;color:var(--bad);font-size:var(--fs-note)}
.nwerr:empty{display:none}
.nwnav{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:14px}

@media (max-width:1100px){
  .strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .strip .sbox{flex:0 0 220px;scroll-snap-align:start}
  .conn-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .ctabs{display:none}
  .cbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:10;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px))}
  .cbar button{flex-direction:column;justify-content:center;gap:3px;font-size:var(--fs-label);color:var(--dim);padding:6px 0}
  .cbar svg{width:22px;height:22px}
  .cbar button.on{color:var(--accent-ink)}
  body.cli .main{padding-block:12px 96px}
  .ctitle{font-size:var(--fs-title)}
}
@media (max-width:640px){
  .banner{grid-template-columns:auto minmax(0,1fr)}
  .banner .btn{grid-column:1/-1}
  .mes-grid{grid-template-columns:minmax(0,1fr)}
  .csum{gap:8px}
  .csum div{padding:10px;flex-direction:column;gap:0}
  .crow{grid-template-columns:auto minmax(0,1fr)}
  .cside{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;text-align:left}
  .mgrid{grid-template-columns:minmax(0,1fr)}
  .stepper li em{display:none}
  .stepper li.on em{display:inline}
  .emptyc{grid-template-columns:minmax(0,1fr)}
  .ch1{font-size:var(--fs-title)}
  /* Tablas como tarjetas apiladas */
  .tbl-wrap table,.tbl-wrap table[style]{min-width:0 !important}
  .tbl-wrap thead{display:none}
  .tbl-wrap tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px;padding:12px 0;border-bottom:1px solid var(--line)}
  .tbl-wrap tbody tr:last-child{border-bottom:0}
  .tbl-wrap td{border:0;padding:0;text-align:left !important}
  .tbl-wrap td:first-child,.tbl-wrap td.tact{grid-column:1/-1}
  .tbl-wrap td[data-l]::before{content:attr(data-l);display:block;font-size:var(--fs-label);color:var(--dim);font-family:var(--body);font-weight:400}
  .tbl-wrap td.tact .btn{width:100%}
  .kpi{padding:14px}
  .kpi .v{font-size:var(--fs-title)}
}

/* ===== Versión 4 ===== */
/* Periodo: rango personalizado */
.pwrap{display:flex;flex-direction:column;align-items:flex-end;gap:8px;min-width:0}
.rlabel{background:none;border:0;padding:0;font-size:var(--fs-label);color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.rlabel:hover{color:var(--fg)}
.rangebox{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;background:var(--panel-2);border:1px solid var(--line-2);border-radius:10px;padding:10px;animation:tip-in .14s ease-out}
.rangebox label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-label);color:var(--dim)}
.rangebox input{width:auto;padding:6px 8px}
.rerr{flex-basis:100%;color:var(--bad);font-size:var(--fs-label)}

/* Barra cuando Carlos ve como el asistente */
.as-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 10px 8px 14px;border:1px dashed color-mix(in srgb,var(--info) 55%,var(--line-2));border-radius:12px;background:color-mix(in srgb,var(--info) 7%,var(--panel));font-size:var(--fs-note);color:var(--muted)}
.as-bar b{color:var(--fg)}
.avatar.as,.avatar.big.as{color:var(--info);border-color:var(--info);background:color-mix(in srgb,var(--info) 12%,var(--panel))}

/* Equipo y permisos */
.people{display:flex;flex-direction:column;gap:10px}
.person{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--panel-2);border-radius:10px;padding:10px 12px}
.person b{display:block;font-size:var(--fs-body)}
.person small{color:var(--muted);font-size:var(--fs-label)}
.invite{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:var(--fs-note);color:var(--muted)}
.invrow{display:flex;gap:8px}
.sws{display:flex;flex-direction:column;gap:8px}
.sw-row{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--panel-2);border-radius:10px;padding:10px 12px;cursor:pointer}
.sw-row.fixed{cursor:default}
.sw-row b{display:block;font-size:var(--fs-body)}
.sw-row small{color:var(--muted);font-size:var(--fs-label)}
.switch{appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:99px;background:var(--line-2);border:0;padding:0;position:relative;flex:none;cursor:pointer;transition:background-color .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--fg);transition:transform .2s var(--ease-out)}
.switch:checked{background:var(--gold)}
.switch:checked::after{transform:translateX(18px);background:#111111}

/* Chat */
.chat{display:flex;flex-direction:column;gap:14px;padding:0;overflow:hidden}
.msgs{display:flex;flex-direction:column;gap:12px;padding:18px;max-height:min(62vh,640px);overflow-y:auto}
.msg{max-width:min(78%,560px);align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);border-radius:12px 12px 12px 4px;padding:10px 12px}
.msg.mine{align-self:flex-end;background:color-mix(in srgb,var(--gold) 9%,var(--panel-2));border-color:color-mix(in srgb,var(--gold) 28%,var(--line));border-radius:12px 12px 4px 12px}
.msg .mh{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:var(--fs-label);color:var(--muted)}
.msg .mh b{color:var(--fg);font-size:var(--fs-note)}
.mcli{display:inline-flex;align-items:center;gap:5px}
.msg p{margin:4px 0 0;font-size:var(--fs-body)}
.mact{margin-top:8px;display:flex}
.mact:empty{display:none}
.tlink{background:none;border:0;padding:0;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-label);color:var(--ok);text-align:left;margin-top:6px}
.tlink svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;flex:none}
.tlink:hover{text-decoration:underline}
.ctask{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.ctask label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-label);color:var(--dim)}
.ctask label:first-of-type{grid-column:1/-1}
.ctask .cbtns{grid-column:1/-1;display:flex;gap:10px;align-items:center}
.composer{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--panel)}
.tbadge{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:99px;background:var(--bad);color:var(--on-bad);font-size:var(--fs-label);font-style:normal;font-weight:700;display:grid;place-items:center;padding:0 4px}
.tabbar button{position:relative}

/* Agenda */
.alist{display:flex;flex-direction:column}
.arow{display:grid;grid-template-columns:76px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.arow:last-child{border-bottom:0}
.arow.just{animation:flash 1.4s ease-out}
.arow .hr{font-family:var(--display);font-size:var(--fs-note);white-space:nowrap;color:var(--muted)}
.aw{min-width:0}
.aw b{display:block;font-size:var(--fs-body);font-weight:600}
.aw small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--fs-label)}
.act.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
.act.two .act-row:nth-last-child(2){border-bottom:0}
.quick.q2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Calendario de webinars */
.cal{display:flex;flex-direction:column;gap:10px}
.calh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.calh h3{font-size:var(--fs-head);margin:0}
.calh .linkbtn{font-size:var(--fs-head);line-height:1;padding:4px 12px}
.cgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cgrid.whd span{font-size:var(--fs-label);color:var(--dim);text-align:center;padding-bottom:2px}
.cday{min-height:92px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:6px;text-align:left;display:flex;flex-direction:column;gap:4px;min-width:0}
.cday.off{background:none;border-color:transparent}
.cday .dn{font-size:var(--fs-label);color:var(--muted);font-family:var(--display)}
.cday.today .dn{color:var(--gold-ink);font-weight:700}
.cday.today{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.cday.sel{outline:2px solid var(--fg);outline-offset:-2px}
.cday:hover:not(.off){border-color:var(--line-2)}
.cev{display:flex;align-items:center;gap:5px;font-size:var(--fs-label);line-height:1.3;color:var(--fg);min-width:0}
.cev i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.cev.past{color:var(--muted)}
.cev.past i{background:transparent;border:1.5px solid var(--c)}
.cev em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdetail{background:var(--panel-2);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px}
.cdrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;font-size:var(--fs-body)}
.cdrow small{color:var(--muted);font-size:var(--fs-label)}

/* Importar tareas */
.imp{display:flex;flex-direction:column;gap:10px}
.impbtns{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.irows{display:flex;flex-direction:column;gap:6px}
.irow{display:grid;grid-template-columns:auto minmax(0,1.6fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.9fr);gap:10px;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:10px;padding:8px 10px}
.irow.miss{border-left-color:var(--warn)}
.irow.skip{opacity:.55;border-left-color:var(--line-2)}
.irow .it{min-width:0}
.irow .it b{display:block;font-size:var(--fs-body)}
.irow .it small{font-size:var(--fs-label);color:var(--muted)}
.irow.miss .it small{color:var(--warn)}
.irow select,.irow input{padding:6px 8px;font-size:var(--fs-note)}
.ichk input{width:18px;height:18px;accent-color:var(--gold)}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}

/* Reglas */
.rgrid{display:flex;flex-direction:column;gap:2px}
.rrow{display:grid;grid-template-columns:minmax(0,1fr) 150px 120px;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.rrow label b{display:block;font-size:var(--fs-body);font-weight:600;color:var(--fg)}
.rrow label small{color:var(--muted);font-size:var(--fs-label)}
.rin{display:grid;grid-template-columns:12px minmax(0,1fr) 14px;align-items:center;gap:6px;color:var(--muted)}
.rin input{text-align:right}
.rnow{font-size:var(--fs-label);text-align:right}
.rfoot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding-top:14px}
.wmut{color:var(--muted)}

/* Nota que crea tareas */
.ntasks{display:flex;flex-direction:column;gap:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:var(--fs-note)}
.ntasks small{color:var(--muted);font-size:var(--fs-label);margin-top:-4px}
.ntl{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.ntl input{width:16px;height:16px;margin-top:2px;accent-color:var(--gold);flex:none}
.ntmeta{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.ntmeta label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-label);color:var(--dim)}
.ntmeta select,.ntmeta input{width:auto;padding:6px 8px}

/* Pantalla de entrada del cliente */
.clogin{min-height:min(78vh,720px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding-block:24px;border-radius:20px;background:radial-gradient(600px 300px at 50% 0,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%),var(--bg)}
.lcard{width:min(100%,380px);background:var(--panel);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:18px;padding:28px 22px;display:flex;flex-direction:column;align-items:stretch;gap:12px;text-align:center}
.lcard .mark{width:64px;height:64px;border-radius:18px;font-size:var(--fs-title);align-self:center}
.lcard h1{margin:4px 0 0;font-family:var(--display);font-size:var(--fs-title);font-weight:600}
.lsub{margin:-6px 0 6px;color:var(--muted);font-size:var(--fs-body)}
.lcard .fl{text-align:left}
.lcard .btn{padding:12px;font-size:var(--fs-head)}
.lnote{margin:0;color:var(--muted);font-size:var(--fs-label)}
.lfoot{margin:0;color:var(--dim);font-size:var(--fs-label)}

/* Menú Más (teléfono) */
.more-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:14}
.more{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--panel);border-top:1px solid var(--line-2);border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:4px;animation:sheet-in .25s var(--ease-out)}
@keyframes sheet-in{from{transform:translateY(40px);opacity:0}}
.more-h{font-family:var(--display);font-size:var(--fs-head);padding:0 4px 8px}
.more button{background:none;border:0;text-align:left;padding:12px 8px;border-radius:10px;font-size:var(--fs-head)}
.more button:hover{background:var(--panel-2)}
@media (min-width:861px){.more,.more-bg{display:none !important}}

@media (max-width:860px){
  .pwrap{align-items:stretch;width:100%}
  .composer{grid-template-columns:minmax(0,1fr) auto}
  .composer select{grid-column:1/-1}
  .msg{max-width:90%}
  .msgs{max-height:none}
  .cday{min-height:52px;padding:4px;align-items:center}
  .cev{justify-content:center}
  .cev em{display:none}
  .cday{flex-direction:column}
  .cday .cev{display:inline-flex}
  .irow{grid-template-columns:auto minmax(0,1fr)}
  .irow select,.irow input{grid-column:2}
  .rrow{grid-template-columns:minmax(0,1fr) 120px}
  .rnow{grid-column:1/-1;text-align:left}
  .act.two{grid-template-columns:minmax(0,1fr)}
  .act.two .act-row:nth-last-child(2){border-bottom:1px solid var(--line)}
}
@media (max-width:640px){
  .arow{grid-template-columns:84px minmax(0,1fr) auto}
  .arow .linkbtn{grid-column:2/-1;justify-self:start}
  .arow > span:last-child:empty{display:none}
  .ctask{grid-template-columns:minmax(0,1fr)}
  .person{grid-template-columns:auto minmax(0,1fr)}
  .person .btn,.person .pill{grid-column:2;justify-self:start}
  .invrow{flex-direction:column}
}

/* ===== Mensajes con clientes ===== */
.inbox{display:grid;grid-template-columns:300px minmax(0,1fr);height:640px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.clist{border-right:1px solid var(--line);overflow:auto;display:flex;flex-direction:column}
.clist-h{padding:14px 14px 10px;border-bottom:1px solid var(--line)}
.clist-h b{font-family:var(--display);font-size:var(--fs-head)}
.clist-h small{display:block;color:var(--muted);font-size:var(--fs-label)}
.citem{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;width:100%}
.citem:hover{background:var(--panel-2)}
.citem.on{background:var(--panel-2);box-shadow:inset 3px 0 0 var(--gold)}
.citem .mark{width:38px;height:38px;border-radius:11px}
.citem b{display:block;font-size:var(--fs-body);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.citem small{display:block;color:var(--muted);font-size:var(--fs-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.citem.unread small{color:var(--fg)}
.citem .side2{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:var(--fs-label);color:var(--dim)}
.ubadge{min-width:20px;height:20px;border-radius:99px;background:var(--gold);color:#111111;font-size:var(--fs-label);font-weight:700;display:grid;place-items:center;padding:0 5px}
.cv{display:flex;flex-direction:column;min-width:0;min-height:0}
.cv-h{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.cv-h .mark{width:36px;height:36px;border-radius:10px}
.cv-h b{display:block;font-size:var(--fs-body)}
.cv-h small{color:var(--muted);font-size:var(--fs-label);display:flex;align-items:center;gap:6px}
.cv-h .on-dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.cv-back{display:none;background:none;border:0;color:var(--muted);font-size:var(--fs-title);padding:0 4px}
.cv-b{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:radial-gradient(600px 300px at 100% 0%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 70%)}
.dsep{align-self:center;font-size:var(--fs-label);color:var(--dim);background:var(--panel-2);padding:3px 10px;border-radius:99px;margin:6px 0}
.bmsg{max-width:74%;padding:9px 12px 6px;border-radius:16px;font-size:var(--fs-body);line-height:1.45;overflow-wrap:anywhere}
.bmsg.me{align-self:flex-end;background:color-mix(in srgb,var(--accent) 22%,var(--panel-2));border-bottom-right-radius:5px}
.bmsg.them{align-self:flex-start;background:var(--panel-2);border-bottom-left-radius:5px}
.bmsg .who{display:block;font-size:var(--fs-label);color:var(--gold-ink);font-weight:600;margin-bottom:2px}
.bmsg .meta{white-space:nowrap;display:flex;justify-content:flex-end;align-items:center;gap:4px;font-size:var(--fs-label);color:var(--muted);margin-top:3px}
.bmsg .tick{font-size:var(--fs-label);letter-spacing:-3px;padding-right:3px}
.bmsg .tick.read{color:var(--ok)}
.mcard{background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;margin:2px 0 2px;min-width:190px}
.mcard small{display:block;color:var(--muted);font-size:var(--fs-label)}
.mcard b{display:block;font-family:var(--display);font-size:var(--fs-title);font-weight:700;color:var(--fg)}
.mcard span{font-size:var(--fs-label);color:var(--ok)}
.typing{align-self:flex-start;background:var(--panel-2);border-radius:16px;border-bottom-left-radius:5px;padding:12px 14px;display:flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dot 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.bmsg.just-added{animation:bmsg-in .28s var(--ease-pop) both}
@keyframes bmsg-in{from{opacity:0;transform:translateY(8px) scale(.96)}}
.qrep{display:flex;gap:8px;overflow-x:auto;padding:10px 16px 0;scrollbar-width:none}
.qrep button{flex:none;background:none;border:1px solid var(--line-2);border-radius:99px;padding:5px 11px;font-size:var(--fs-label);color:var(--fg)}
.qrep button:hover{border-color:var(--gold)}
.qrep button.card-btn{border-color:color-mix(in srgb,var(--gold) 55%,transparent);color:var(--gold-ink)}
.cv-f{display:flex;gap:8px;align-items:center;padding:10px 12px 12px}
.cv-f input{flex:1;border-radius:99px;padding:10px 14px}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:none;display:grid;place-items:center;flex:none}
.icon-btn svg{width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:1.75}
.send-btn{width:42px;height:42px;border-radius:50%;border:0;background:var(--accent);display:grid;place-items:center;flex:none}
.send-btn svg{width:22px;height:22px;stroke:#111111;fill:none;stroke-width:1.75}
/* ===== Barra inferior: 4 diseños ===== */
.tabbar{z-index:12}
.tabbar > *{background:none;border:0;color:var(--dim);position:relative;display:flex;align-items:center;justify-content:center}
.tabbar svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75}
.tabbar .lb{font-size:var(--fs-label)}
.tabbar .tb-badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;border-radius:99px;background:var(--bad);color:var(--on-bad);font-size:var(--fs-label);font-weight:700;display:grid;place-items:center;padding:0 4px;border:2px solid var(--panel)}
.tabbar.v-clasica{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.v-clasica > *{flex-direction:column;gap:3px;padding:2px 0}
.v-clasica .ic{width:52px;height:30px;border-radius:99px;display:grid;place-items:center;transition:background-color .2s}
.v-clasica > .on{color:var(--fg)}
.v-clasica > .on .ic{background:color-mix(in srgb,var(--gold) 20%,transparent);color:var(--gold-ink)}
.tabbar.v-flotante{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(5,1fr);align-items:end;background:color-mix(in srgb,var(--panel-2) 90%,transparent);backdrop-filter:blur(16px);border:1px solid var(--line-2);border-radius:24px;padding:8px 6px;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.v-flotante > *{flex-direction:column;gap:3px;padding:2px 0}
.v-flotante > .on{color:var(--gold-ink)}
.v-flotante > .on::after{content:"";position:absolute;bottom:-5px;width:4px;height:4px;border-radius:50%;background:var(--gold)}
.v-flotante .plus .ic{width:56px;height:56px;border-radius:50%;background:var(--gold);color:#111111;display:grid;place-items:center;margin-top:-30px;border:5px solid var(--bg);box-shadow:0 8px 22px color-mix(in srgb,var(--gold) 45%,transparent);transition:transform .25s var(--ease-pop)}
.v-flotante .plus .ic svg{width:22px;height:22px;stroke-width:1.75}
.v-flotante .plus:active .ic{transform:rotate(90deg) scale(.94)}
.v-flotante .plus .lb{color:var(--fg)}
.tabbar.v-pildora{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;gap:2px;background:color-mix(in srgb,var(--panel-2) 92%,transparent);backdrop-filter:blur(16px);border:1px solid var(--line-2);border-radius:99px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.v-pildora > *{flex-direction:row;gap:0;height:46px;padding:0 13px;border-radius:99px;transition:background-color .25s,color .25s,padding .25s}
.v-pildora .lb{max-width:0;overflow:hidden;white-space:nowrap;font-size:var(--fs-note);font-weight:600;transition:max-width .3s var(--ease-out),margin .3s}
.v-pildora > .on{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold-ink);padding:0 16px}
.v-pildora > .on .lb{max-width:90px;margin-left:8px}
.v-pildora .tb-badge{top:4px;left:26px}
.tabbar.v-minimal{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:var(--bg);border-top:1px solid var(--line);padding:12px 6px calc(12px + env(safe-area-inset-bottom,0px))}
.v-minimal > *{flex-direction:column;gap:6px}
.v-minimal svg{width:22px;height:22px}
.v-minimal .lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.v-minimal > .on{color:var(--fg)}
.v-minimal > *::after{content:"";width:5px;height:5px;border-radius:50%;background:transparent;transition:background-color .2s}
.v-minimal > .on::after{background:var(--gold)}
.tabbar.preview{position:relative !important;left:auto !important;right:auto !important;bottom:auto !important;transform:none !important;margin:0 auto;box-shadow:none;pointer-events:none;width:100%}
.tabbar.preview.v-pildora{width:max-content;max-width:100%}
.tabbar.preview.v-flotante{margin-top:26px}
@media (min-width:861px){#tabbar{display:none !important}}
/* Hojas inferiores */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s ease}
.sheet{width:min(560px,100%);max-height:88vh;overflow:auto;background:var(--panel);border:1px solid var(--line-2);border-bottom:0;border-radius:22px 22px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom,0px));animation:sheet-up .3s var(--ease-out)}
@keyframes sheet-up{from{transform:translateY(40px);opacity:0}}
.grab{width:40px;height:5px;border-radius:99px;background:var(--line-2);margin:4px auto 12px}
.sheet h3{margin:0 0 4px;font-family:var(--display);font-size:var(--fs-head)}
.sheet .sub{margin:0 0 14px;color:var(--muted);font-size:var(--fs-label)}
.srow{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;background:none;border:0;border-radius:12px;padding:10px 8px;text-align:left;font-size:var(--fs-body)}
.srow:hover,.srow:focus-visible{background:var(--panel-2);outline:none}
.srow .si{width:36px;height:36px;border-radius:10px;background:var(--panel-2);display:grid;place-items:center}
.srow .si svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.75}
.srow .cnt{font-size:var(--fs-label);color:var(--muted)}
.sdiv{height:1px;background:var(--line);margin:8px 0}
.ptiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ptile{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left}
.ptile:hover{border-color:var(--gold)}
.ptile .si{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--gold) 16%,transparent);display:grid;place-items:center}
.ptile .si svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.75}
.ptile b{font-size:var(--fs-body)}
.ptile small{color:var(--muted);font-size:var(--fs-label)}
.tbopt{display:flex;flex-direction:column;gap:10px;width:100%;background:var(--bg);border:1.5px solid var(--line-2);border-radius:16px;padding:14px;margin-bottom:10px;text-align:left}
.tbopt.on{border-color:var(--gold)}
.tbopt .th{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tbopt b{font-size:var(--fs-body)}
.tbopt small{display:block;color:var(--muted);font-size:var(--fs-label);margin-top:2px}
.tbopt .rad{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);flex:none}
.tbopt.on .rad{border:6px solid var(--gold)}
.tbopt .stage{display:block;background:var(--panel);border-radius:12px;padding:12px 10px;overflow:hidden}
@media (min-width:861px){.sheet-bg{align-items:center}.sheet{border-radius:22px;border-bottom:1px solid var(--line-2)}}
@media (max-width:860px){
  .inbox{grid-template-columns:minmax(0,1fr);height:calc(100vh - 300px);min-height:460px}
  .inbox.list-mode .cv{display:none}
  .inbox.thread-mode .clist{display:none}
  .cv-back{display:block}
  body.chat-focus .topbar,body.chat-focus #tb-row,body.chat-focus #view > .head,body.chat-focus .proto-note{display:none}
  body.chat-focus .inbox{height:calc(100dvh - 32px - 104px);min-height:0}
  .bmsg{max-width:84%}
    }

.inbox-team{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--info) 6%,transparent);text-align:left;width:100%}
.inbox-team:hover{background:color-mix(in srgb,var(--info) 12%,transparent)}
.inbox-team .avatar{width:38px;height:38px;border-radius:11px;color:var(--info);border:1px solid var(--info);background:var(--panel)}
.inbox-team b{display:block;font-size:var(--fs-body)}
.inbox-team small{display:block;color:var(--muted);font-size:var(--fs-label);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cli-chat{padding:0;overflow:hidden;display:flex;flex-direction:column;height:min(70vh,620px)}
.ctabs .ubadge,.cbar .ubadge{min-width:16px;height:16px;font-size:var(--fs-label)}
.cbar .ubadge{position:absolute;top:2px;left:calc(50% + 6px)}
.cbar button{position:relative}
@media (max-width:860px){
  .cli-chat{height:calc(100dvh - 210px)}
  .toast{bottom:calc(108px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}

.est{display:inline-block;font-size:var(--fs-label);font-weight:400;color:var(--dim);border:1px dashed var(--line-2);border-radius:6px;padding:0 6px;margin-left:6px;vertical-align:1px}
.pnote{font-size:var(--fs-label);color:var(--dim)}
.din{display:contents}
input[aria-invalid]{border-color:var(--bad)}
@media (max-width:640px){
  .att{order:-1}
  .hide-tel{display:none!important}
  .tasks.top3 > :nth-child(n+4){display:none}
}

/* ===== Micro interacciones y gestos =====
   Todo responde a una acción de la persona. Con "reducir movimiento" los cambios son inmediatos. */
body{overscroll-behavior-y:contain}
/* 1 y 2. Deslizar una tarea */
.swipe{position:relative;border-radius:10px;overflow:hidden}
.swipe .sw-bg{position:absolute;inset:0;display:none;align-items:center;justify-content:space-between;padding:0 6px 0 16px;border-radius:10px;font-weight:700;font-size:var(--fs-note)}
.swipe[data-dir] .sw-bg{display:flex}
.swipe[data-dir="r"] .sw-bg{background:var(--ok);color:#06261b}
.swipe[data-dir="l"] .sw-bg{background:var(--bad);color:#2a0a0e}
.swipe[data-dir="r"] .sw-del{visibility:hidden}
.swipe[data-dir="l"] .sw-l{visibility:hidden}
.sw-del{background:none;border:0;color:inherit;font-weight:700;font-size:var(--fs-note);height:100%;min-width:84px;margin-left:auto}
.swipe > .task{position:relative;touch-action:pan-y;transition:transform .25s var(--ease-out)}
.swipe.drag > .task{transition:none}
.tel-only{display:none}
@media (hover:hover) and (pointer:fine){
  .task .acts [data-del]{opacity:0;transition:opacity .15s var(--ease-out)}
  .task:hover .acts [data-del],.task:focus-within .acts [data-del]{opacity:1}
}
@media (max-width:860px){
  .task .acts [data-del]{display:none}
  .tel-only{display:block}
}
.hint{margin:0;font-size:var(--fs-label);color:var(--dim)}
/* 3. Jalar para sincronizar */
.ptr{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:50%;width:42px;height:42px;margin-left:-21px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line-2);display:grid;place-items:center;z-index:35;transform:translateY(-70px);opacity:0;pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.ptr svg{width:24px;height:24px;transform:rotate(-90deg)}
.ptr circle{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.ptr.spin svg{animation:spin .8s linear infinite}
.ptr.back{transition:transform .25s var(--ease-out),opacity .2s}
/* 4. Pestañas que siguen al dedo */
.tabbody{display:flex;flex-direction:column;gap:18px;min-width:0;touch-action:pan-y;transition:transform .25s var(--ease-out),opacity .25s}
.tabbody.drag{transition:none}
.tabs button.on::after{transform:translateX(var(--tx,0px)) scaleX(1)}
.tabs.drag button::after{transition:none}
/* 5. Hoja inferior */
.sheet{transition:transform .25s var(--ease-out)}
.sheet.drag{transition:none}
/* 6. Volver desde el borde */
.edge{position:fixed;left:0;top:50%;width:42px;height:42px;margin-top:-21px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line-2);display:grid;place-items:center;z-index:35;transform:translateX(-50px);pointer-events:none;color:var(--fg);box-shadow:0 8px 20px rgba(0,0,0,.4)}
.edge svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75}
.edge.ready{background:var(--accent);border-color:var(--accent);color:#111111}
.edge.back{transition:transform .2s var(--ease-out)}
/* 7 y 8. Mantener presionado */
.ccard,.kpi .v,.hero .big,.chart-head .tot,.feature .amt{-webkit-touch-callout:none}
.flash-copy{box-shadow:0 0 0 2px var(--accent);border-radius:6px}
/* 9. Cambio de periodo sin salto */
@keyframes numswap{from{opacity:0;transform:translateY(4px)}}
.pswap .kpi .v,.pswap .kpi .delta,.pswap .kpi .h,.pswap .hero .big,.pswap .hero .big-l,.pswap .side-stats b,.pswap .chart-head .tot,.pswap .chart-head .sub,.pswap .sbox b,.pswap .sbox small,.pswap .frow .num,.pswap .frow .pct,.pswap .lc,.pswap .spark,.pswap p.lead{animation:numswap .35s var(--ease-out) both}
/* 10. Botón con estado de carga */
.busy{position:relative;color:transparent !important;pointer-events:none}
.busy::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--fg);animation:spin .7s linear infinite}
.btn.busy::after{border-color:rgba(17,17,17,.3);border-top-color:#111111}
.okd{color:var(--ok) !important;border-color:color-mix(in srgb,var(--ok) 50%,transparent) !important}
.btn.okd{background:var(--ok);color:#06261b !important}
/* 11. Deshacer */
.toast.has-undo{padding-bottom:14px}
.toast .undo{background:none;border:0;color:var(--accent-ink);font-weight:700;font-size:var(--fs-body);padding:4px 2px;margin-left:6px}
.toast .tl{position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:2px;background:var(--line-2);overflow:hidden}
.toast .tl i{display:block;height:100%;background:var(--ok);transform-origin:left;animation:tl 5s linear forwards}
@keyframes tl{to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.toast .tl i{animation-duration:5s !important}}
/* 12. Gráfico en teléfono */
#lc-hit{touch-action:pan-y}
/* 13. Error que sacude el campo */
@keyframes shakex{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.shake-err{animation:shakex .32s ease-in-out}
/* 14. Contador que cambia */
@keyframes bump{from{transform:translateY(6px);opacity:0}}
.bump{animation:bump .25s var(--ease-out)}
/* 15. Barra de cobros */
.cobro{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.cobro .row{align-items:baseline;font-size:var(--fs-note);color:var(--muted)}
.cobro .row b{font-family:var(--display);color:var(--fg)}
.cobar{height:10px;background:var(--panel-2);border-radius:99px;overflow:hidden}
.cobar i{display:block;height:100%;background:var(--ok);border-radius:99px;transition:width .3s var(--ease-out)}

/* ===== Estilo Apple: más utilidad, menos ruido ===== */
/* 12. Letra del sistema en iPhone (Dynamic Type); la escala está en rem */
@supports (font: -apple-system-body){ html{font:-apple-system-body} body{font-family:var(--body)} }
/* 1. Un número héroe */
.p1{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
.khero .v{font-size:var(--fs-display)}
.khero .spark{height:56px}
.chart-head .tot{font-size:var(--fs-display)}
/* 16. Ancho reservado para que nada salte */
.kpi .vrow .v{display:inline-block;min-width:5.5ch}
.tnum{display:inline-block;min-width:4.5ch}
/* 2. Título grande en teléfono y barra que aparece al bajar */
.ttlbar{position:fixed;left:0;right:0;top:0;z-index:13;height:calc(52px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);display:none;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid var(--line);opacity:0;pointer-events:none;transition:opacity .2s}
.ttlbar span{font-family:var(--display);font-size:var(--fs-head);font-weight:600;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ttlbar.on{opacity:1}
/* 5. Menos bordes: el fondo separa, el borde queda para estados y controles */
.card,.ccard,.qa,.nextcall,.bell,.feature,.chip,.ctabs,.csum div,.person,.sw-row,.tbopt,.date,.summary,.share,.cico,.qa .ring{border-color:transparent}
.kpi.nodata,.kpi.ghost,.emptyc,.empty{border-color:var(--line-2)}
.seg{border-color:transparent;background:var(--panel-2)}
.card .seg,.capp .seg{background:color-mix(in srgb,var(--fg) 6%,transparent)}
/* 8. Etiquetas informativas con relleno, controles con borde */
.chip{background:var(--chip-bg);color:var(--muted)}
.linkbtn,.cm-btn,.gchip{border-color:var(--ctl-line)}
/* 7. Estados en dos tonos */
.pill,.pill.ok,.pill.warn,.pill.bad,.pill.info{border-color:transparent}
.pill.ok{background:var(--ok-bg)} .pill.warn{background:var(--warn-bg)} .pill.bad{background:var(--bad-bg)} .pill.info{background:var(--info-bg)}
.banner.bad{border-color:transparent;background:var(--bad-bg)} .banner.warn{border-color:transparent;background:var(--warn-bg)}
.gchip.bad{border-color:transparent;background:var(--bad-bg)}
.delta.up{background:var(--ok-bg)} .delta.down{background:var(--bad-bg)}
/* 4. Listas agrupadas: un bloque por grupo, líneas finas entre filas */
.tasks,.alerts,.list{gap:0;background:var(--panel-2);border-radius:12px;overflow:hidden}
.card .tasks,.card .alerts,.card .list{background:color-mix(in srgb,var(--fg) 4%,var(--panel))}
.tasks > .swipe{border-radius:0}
.tasks .task{border:0;border-radius:0;background:transparent}
.swipe > .task{background:var(--panel-2)}
.card .swipe > .task{background:color-mix(in srgb,var(--fg) 4%,var(--panel))}
.tasks > .swipe + .swipe > .task::before,.alerts > .alert + .alert::before,.list > * + *::before{content:"";position:absolute;left:14px;right:0;top:0;height:1px;background:var(--line)}
.tasks > .swipe + .swipe > .task::before{left:48px}
.alert{border:0;border-radius:0;position:relative;padding:13px 14px}
.alert .ico{width:22px;height:22px}
.alerts > .linkbtn{margin:10px 14px 12px}
.list > .wb,.list > .note{border:0;border-radius:0;background:transparent;position:relative}
.tasks > .empty,.alerts > .empty,.list > .empty{border:0;border-radius:0}
/* 6. Encabezados de grupo fijos */
.tgroups{display:flex;flex-direction:column;gap:14px}
.tgrp .dayhead{position:sticky;top:env(safe-area-inset-top,0px);z-index:4;background:var(--bg);margin:0;padding:8px 2px}
/* 10. Estado presionado en filas y tarjetas, sin saltos */
.ccard:hover,.qa:hover,.alert:hover{transform:none}
.alert:hover{background:var(--press)}
.task:active,.alert:active,.ccard:active,.srow:active,.citem:active,.arow:active,.wb:active,.note:active,.callrow:active,.qa:active,.nextcall:active,.inbox-team:active,.ptile:active,.cday:active{background-image:linear-gradient(var(--press),var(--press))}
.ccard:active,.qa:active,.alert:active{transform:none}
/* 15. Formas de carga */
@keyframes skel{50%{opacity:.5}}
.skel{display:block;height:12px;border-radius:6px;background:color-mix(in srgb,var(--fg) 9%,transparent);animation:skel 1.4s ease-in-out infinite}
.kpi.ghost{gap:0}
.loading .kpi .v,.loading .chart-head .tnum,.loading .hero .big,.loading .sbox b,.loading .kpi .delta{color:transparent !important;background:color-mix(in srgb,var(--fg) 9%,transparent) !important;border-radius:6px;animation:skel 1.4s ease-in-out infinite}
@media (max-width:1100px){
  .p1{grid-template-columns:repeat(3,minmax(0,1fr))}
  .p1 .khero{grid-column:1/-1}
}
@media (max-width:860px){
  .ttlbar{display:flex}
  .head h1,.greet h1,.ch1,.ctitle{font-size:var(--fs-display);line-height:1.15;letter-spacing:-.02em}
  .greet h1,.greet p{padding-right:104px}
  .tabwrap{top:calc(52px + env(safe-area-inset-top,0px));margin-inline:-16px}
  .tabs{padding-inline:6px;scroll-padding-inline:24px}
  .tgrp .dayhead{top:calc(52px + env(safe-area-inset-top,0px))}
}
@media (max-width:640px){
  .p1 .kpi:not(.khero){padding:12px}
  .p1 .kpi:not(.khero) .lbl{white-space:normal;align-items:flex-start}
  .p1 .kpi:not(.khero) .lbl svg{display:none}
  .p1 .kpi:not(.khero) .v{font-size:var(--fs-title)}
  .p1 .kpi:not(.khero) .vrow{flex-direction:column;align-items:flex-start;gap:4px}
  .p1 .kpi:not(.khero) .spark{display:none}
  .p1{gap:8px}
}
/* 9. Zona táctil mínima de 44 px: se agranda el área que se toca, no el dibujo */
@media (pointer:coarse),(max-width:860px){
  .src,.rlabel,.cm-btn,.chk,.gchip,.tlink,.cday,.calh .linkbtn{position:relative}
  .linkbtn:not(.busy){position:relative}
  .src::after,.rlabel::after,.cm-btn::after,.chk::after,.gchip::after,.tlink::after,.linkbtn:not(.busy)::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
  .seg button{min-height:36px}
  .back,.seg button,.btn.sm{position:relative}
  .back::after,.seg button::after{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
  .btn.sm::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
  .bell,.avatar.big{width:44px;height:44px}
  input:not([type=hidden]):not([type=color]):not([type=checkbox]),select,.btn:not(.sm){min-height:44px}
}

/* ===== Acabado profesional ===== */
/* Tu día */
.today{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.tday{background:var(--panel);border:0;border-radius:var(--r);padding:14px 16px;text-align:left;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:10px;row-gap:2px;align-items:center;min-height:96px}
.tday .ti{grid-row:1/span 1;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--chip-bg);color:var(--muted)}
.tday .ti svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75}
.tday b{font-family:var(--display);font-size:var(--fs-title);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.tday .tl{grid-column:1/-1;font-size:var(--fs-note);color:var(--fg);margin-top:8px}
.tday small{grid-column:1/-1;font-size:var(--fs-label);color:var(--dim)}
.tday.warn .ti{background:var(--warn-bg);color:var(--warn)} .tday.warn small{color:var(--warn)}
.tday.bad .ti{background:var(--bad-bg);color:var(--bad)} .tday.bad small{color:var(--bad)}
.tday.info .ti{background:var(--info-bg);color:var(--info)} .tday.info small{color:var(--info)}
.tday:hover{background:color-mix(in srgb,var(--fg) 3%,var(--panel))}
.tday:active{background-image:linear-gradient(var(--press),var(--press))}
.enter .today .tday{animation:rise .45s var(--ease-out) both;animation-delay:calc(var(--k,0) * 40ms + 60ms)}
.today .tday:nth-child(2){--k:1} .today .tday:nth-child(3){--k:2} .today .tday:nth-child(4){--k:3} .today .tday:nth-child(5){--k:4}
/* Mensajes recientes */
.mrow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 14px;border:0;background:transparent;text-align:left;width:100%;position:relative}
.mrow .mm{min-width:0}
.mrow b{display:block;font-size:var(--fs-body);font-weight:600}
.mrow small{display:block;color:var(--muted);font-size:var(--fs-note);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow.unread small{color:var(--fg)}
.mrow .side2{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:var(--fs-label);color:var(--dim)}
.mrow:active{background-image:linear-gradient(var(--press),var(--press))}
/* Tablas: encabezado que ordena, filas que se iluminan */
.thsort{background:none;border:0;padding:0;font:inherit;color:inherit;display:inline-flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap}
th.num .thsort{flex-direction:row-reverse}
.thsort:hover{color:var(--fg)}
.sarr{width:8px;height:8px;display:inline-block;opacity:0;transition:opacity .15s,transform .2s var(--ease-out)}
.sarr::before{content:"";display:block;width:6px;height:6px;margin:1px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-1px,-1px)}
th[aria-sort="ascending"] .sarr,th[aria-sort="descending"] .sarr{opacity:1}
th[aria-sort="ascending"] .sarr{transform:rotate(180deg)}
th[aria-sort="ascending"],th[aria-sort="descending"]{color:var(--fg)}
tbody tr{transition:background-color .15s}
tbody tr:hover{background:color-mix(in srgb,var(--fg) 3%,transparent)}
tr[data-row-open]{cursor:pointer}
tr[data-row-open]:active{background:var(--press)}
.ctbl .cwho{display:flex;align-items:center;gap:10px;min-width:0}
.ctbl .cwho b{display:block;font-weight:600}
.ctbl .cwho small{display:block;color:var(--dim);font-size:var(--fs-label)}
.ctbl td .spark{width:110px;height:28px;margin:0;display:block}
.ctbl td.num .delta{margin-left:4px}
/* Filas en cascada al entrar a la pantalla */
.enter tbody tr{animation:rise .4s var(--ease-out) both;animation-delay:calc(var(--r,0) * 32ms + 180ms)}
.pswap tbody td.num{animation:numswap .35s var(--ease-out) both}
/* Lo que está fuera de la pantalla espera a que llegues */
.await,.await *{animation-play-state:paused !important}
/* Gráfico: puntos que siguen al cursor */
#lc-pb,#lc-ps{pointer-events:none}
@media (max-width:1100px){ .today{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:860px){
  .today{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
  .today::-webkit-scrollbar{display:none}
  .tday{flex:0 0 46%;scroll-snap-align:start;min-height:88px}
}
@media (max-width:640px){
  /* En teléfono: una línea por cliente con nombre, llamadas y estado */
  .ctbl .c-opt,.ctbl td:nth-child(4){display:none}
  .ctbl tr{grid-template-columns:minmax(0,1fr) auto auto !important;align-items:center;gap:10px !important;padding:10px 0 !important}
  .ctbl td:first-child{grid-column:auto !important}
  .ctbl td[data-l]::before{display:none !important}
  .ctbl td:nth-child(2){order:3}
  .ctbl td:nth-child(3){order:2;text-align:right !important;white-space:nowrap}
  .ctbl td:nth-child(3) .delta{display:none}
}

/* ===== Movimiento revisado con las reglas de Emil Kowalski =====
   Entrar/salir: ease-out fuerte. Mover en pantalla: ease-in-out. Hojas: curva iOS.
   Interfaz bajo 300 ms. Gráficos (explican datos) hasta 700 ms. Sin rebotes: es un tablero. */
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes pop{from{transform:scale(.9)}}
@keyframes pop-in{from{opacity:0;transform:scale(.97);filter:blur(2px)}}
@keyframes numswap{from{opacity:0;filter:blur(2px);transform:translateY(3px)}}
@keyframes tabin{from{opacity:0;transform:translateX(calc(var(--dir,1) * 14px))}}
@keyframes sheet-up{from{transform:translateY(100%)}}
@keyframes sheet-fade-out{to{opacity:0}}
.enter .card,.enter .qa,.enter .ccard,.enter .p2banner,.enter .client-frame{animation-duration:.3s;animation-delay:calc(var(--i,0) * 40ms)}
.enter .fill,.enter .goalbar .done,.enter .goalbar .pace,.enter .meter i,.enter .regbar i,.enter .rank-row .tr i,.enter .risk .rbar i{animation-duration:.6s;animation-delay:calc(var(--i,0) * 40ms + 120ms)}
.enter .cols .bar,.enter .wk .bar{animation-duration:.55s;animation-delay:calc(var(--i,0) * 40ms + 120ms)}
.enter .draw{animation-duration:.7s;animation-delay:.15s;animation-timing-function:var(--ease-in-out)}
.enter .area-fill{animation-duration:.45s;animation-delay:.4s}
.enter .fade-late{animation-duration:.4s;animation-delay:.5s}
.enter .ring-arc{animation-duration:.6s;animation-delay:.2s}
.enter tbody tr,.enter .today .tday{animation-duration:.28s}
.chk.pop{animation:pop .16s var(--ease-out)}
.pswap .kpi .v,.pswap .kpi .delta,.pswap .kpi .h,.pswap .hero .big,.pswap .hero .big-l,.pswap .side-stats b,.pswap .chart-head .tot,.pswap .chart-head .sub,.pswap .sbox b,.pswap .sbox small,.pswap .frow .num,.pswap .frow .pct,.pswap .lc,.pswap .spark,.pswap p.lead,.pswap tbody td.num{animation:numswap .28s var(--ease-out) both}
.tswap .tabbody{animation:tabin .2s var(--ease-out) both}
/* Presionar: respuesta inmediata al tocar */
.tday,.qa,.ccard,.mrow,.srow,.ptile{transition:transform .16s var(--ease-out),background-color .15s ease}
.tday:active,.qa:active,.ccard:active,.ptile:active{transform:scale(.98)}
/* Hover decorativo solo con mouse */
.qa:hover .ring{transform:none;box-shadow:none;background:var(--panel)}
@media (hover:hover) and (pointer:fine){ .qa:hover .ring{background:color-mix(in srgb,var(--gold) 8%,var(--panel))} }
/* Popovers que crecen desde su botón */
.why{animation:pop-in .16s var(--ease-out)}
.menu{transform-origin:top right;animation:pop-in .16s var(--ease-out)}
.qres{transform-origin:top center;animation:pop-in .14s var(--ease-out)}
/* Avisos: entran y salen por abajo; la salida es más rápida */
.toast{transition:opacity .15s var(--ease-out),transform .15s var(--ease-out)}
.toast.out{opacity:0;transform:translate(-50%,8px)}
/* Hoja inferior: curva iOS al abrir, sale por el mismo camino */
.sheet{animation:sheet-up .32s var(--ease-drawer)}
.sheet-bg.closing{animation:sheet-fade-out .18s var(--ease-out) forwards}
.sheet-bg.closing .sheet{transform:translateY(100%);transition:transform .18s var(--ease-out)}
@media (min-width:861px){
  .sheet{animation:pop-in .2s var(--ease-out)}
  .sheet-bg.closing .sheet{transform:scale(.97);opacity:0;transition:transform .15s var(--ease-out),opacity .15s var(--ease-out)}
}
/* Carga: los indicadores que giran rápido hacen sentir la espera más corta */
.spin,.ptr.spin svg,.busy::after{animation-duration:.6s}
/* Tipografía: números grandes más juntos, texto pequeño un poco más abierto (apple-design) */
.khero .v,.chart-head .tot,.hero .big,.tday b,.ttlbar span{letter-spacing:-.02em}
.sub,.foot-note,th,.kpi .h,.tday small,.mrow small{letter-spacing:.01em}
/* Borde de desplazamiento suave bajo la barra de título, en vez de una línea */
.ttlbar{border-bottom-color:transparent}
.ttlbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px;background:linear-gradient(color-mix(in srgb,var(--bg) 70%,transparent),transparent);pointer-events:none}
/* Menos transparencia si el teléfono lo pide */
@media (prefers-reduced-transparency:reduce){ .ttlbar,.tabbar,.cbar{background:var(--bg) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important} }
/* Reducir movimiento = menos y más suave, no cero: se quitan desplazamientos y queda un fundido corto */
@media (prefers-reduced-motion:reduce){
  .enter .card,.enter .qa,.enter .ccard,.enter .p2banner,.enter .client-frame,.enter tbody tr,.enter .today .tday,.tswap .tabbody,.why,.menu,.qres,.sheet-bg:not([hidden]){animation:fade .2s ease both !important}
  .sheet{animation:none !important}
  .toast,.toast.out{transition:opacity .15s ease !important}
}

/* ===== Growth partner ===== */
.bnbar{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;gap:12px;align-items:center;background:var(--panel);border-radius:var(--r);padding:12px 16px}
.bnbar .bnk,.bnmain .bnk{font-size:var(--fs-label);color:var(--dim)}
.bnbar b{font-family:var(--display);font-size:var(--fs-head)}
.bnbar .bnv{color:var(--muted);font-size:var(--fs-note);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnbar .bnimp{font-family:var(--display);font-weight:600;color:var(--ok);white-space:nowrap}
.bnmain{display:flex;flex-direction:column;gap:6px;background:color-mix(in srgb,var(--fg) 4%,var(--panel));border-radius:12px;padding:14px 16px;margin-bottom:12px}
.bnl{font-family:var(--display);font-size:var(--fs-title);font-weight:600;line-height:1.15}
.bnev{margin:0;color:var(--muted);font-size:var(--fs-note)}
.bnimp2 b{display:block;color:var(--ok);font-family:var(--display);font-size:var(--fs-head)}
.bnimp2 small{color:var(--dim);font-size:var(--fs-label)}
.bnact{margin:4px 0 0;font-size:var(--fs-body)}
.bnact span{display:block;font-size:var(--fs-label);color:var(--dim)}
.bnbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.bnwarn{display:flex;gap:10px;align-items:flex-start;background:var(--warn-bg);border-radius:10px;padding:10px 12px;margin-bottom:12px;font-size:var(--fs-note)}
.bnwarn svg{width:16px;height:16px;flex:none;stroke:var(--warn);fill:none;stroke-width:1.75;margin-top:2px}
.lvgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.lv{display:grid;grid-template-columns:10px minmax(0,1fr);gap:8px;align-items:start;padding:8px 10px;border-radius:9px;background:color-mix(in srgb,var(--fg) 3%,transparent)}
.lv.main{box-shadow:inset 0 0 0 1.5px var(--accent)}
.lvd{width:8px;height:8px;border-radius:50%;margin-top:6px;background:var(--ok)}
.lv.warn .lvd{background:var(--warn)} .lv.bad .lvd{background:var(--bad)} .lv.na .lvd{background:transparent;box-shadow:inset 0 0 0 1.5px var(--dim)} .lv.info .lvd{background:var(--info)}
.lvt b{display:block;font-size:var(--fs-note);font-weight:600}
.lvt small{display:block;font-size:var(--fs-label);color:var(--dim)}
.lvtag{display:inline-block;font-size:var(--fs-label);padding:2px 8px;border-radius:99px;background:var(--chip-bg);color:var(--muted);white-space:nowrap}
.lvtag.bad{background:var(--bad-bg);color:var(--bad)} .lvtag.warn{background:var(--warn-bg);color:var(--warn)} .lvtag.ok{background:var(--ok-bg);color:var(--ok)} .lvtag.info{background:var(--info-bg);color:var(--info)}
.bl{display:flex;flex-direction:column;gap:14px}
.blrow{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:4px 12px;align-items:center}
.bll{grid-column:1/-1;font-size:var(--fs-note);color:var(--muted)}
.blbars{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center}
.blbars small{font-size:var(--fs-label);color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.blbar{display:block;height:10px;border-radius:99px;background:var(--panel-2);overflow:hidden}
.blbar i{display:block;height:100%;border-radius:99px}
.blbar.before i{background:color-mix(in srgb,var(--muted) 45%,var(--panel-2))}
.blbar.after i{background:var(--accent)}
.blch{font-family:var(--display);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.bl90{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.bl90 .row{align-items:baseline;font-size:var(--fs-note);color:var(--muted)}
.bl90 b{font-family:var(--display);font-size:var(--fs-head)}
.bl90 small{color:var(--dim);font-size:var(--fs-label)}
.ucmax{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--fg) 4%,var(--panel))}
.ucmax b{display:block}
.ucmax small{display:block;color:var(--muted);font-size:var(--fs-note);max-width:56ch}
.rcrow{display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 14px;position:relative}
.rcm{min-width:0}
.rcm b{display:block;font-size:var(--fs-body);font-weight:600}
.rcm b .rcc{display:inline;color:var(--dim);font-weight:400;font-size:var(--fs-label);margin-left:4px}
.rcm > small{display:block;color:var(--muted);font-size:var(--fs-note)}
.rcv{font-family:var(--display);font-weight:600;color:var(--ok);white-space:nowrap;font-variant-numeric:tabular-nums}
.rcico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--warn-bg);color:var(--warn)}
.rcico.lead{background:var(--info-bg);color:var(--info)}
.rcico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75}
.xtrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 14px;position:relative}
.xtm b{display:block;font-size:var(--fs-body);font-weight:600}
.xtm small{display:block;color:var(--dim);font-size:var(--fs-label)}
.xtb{display:flex;gap:6px;align-items:center}
.xtform{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end;margin-top:14px}
.xtform label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-label);color:var(--dim)}
.gtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tier{font-size:var(--fs-label);padding:3px 10px;border-radius:99px;background:var(--chip-bg);color:var(--fg)}
.tier.grande{background:var(--ok-bg);color:var(--ok)} .tier.medio{background:var(--info-bg);color:var(--info)}
.tierd{margin:-8px 0 0;color:var(--dim);font-size:var(--fs-note)}
.rvtext{white-space:pre-wrap;font-family:var(--body);font-size:var(--fs-body);line-height:1.55;background:var(--panel-2);border-radius:12px;padding:14px;margin:0 0 12px;max-height:46vh;overflow:auto}
.rvbtns{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:860px){
  .bnbar{grid-template-columns:auto minmax(0,1fr) auto;row-gap:4px}
  .bnbar .bnv{grid-column:1/-1;white-space:normal;order:5}
  .bnbar .linkbtn{grid-column:1/-1;justify-self:start;order:6}
  .xtform{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .xtform .xthyp{grid-column:1/-1}
  .rcrow{grid-template-columns:30px minmax(0,1fr) auto}
  .rcrow .btn{grid-column:2/-1;justify-self:start}
  .xtrow{grid-template-columns:minmax(0,1fr)}
  .lvgrid{grid-template-columns:minmax(0,1fr)}
}
.spark{clip-path:inset(-4px)}
.enter .spark{animation:sparkin .7s var(--ease-in-out) .15s both}
@keyframes sparkin{from{clip-path:inset(-4px 100% -4px -4px)}to{clip-path:inset(-4px)}}
.sbox .pill,.xtrow > .lvtag{justify-self:start;align-self:flex-start;width:fit-content}
@media (max-width:640px){.lvgrid{grid-template-columns:1fr 1fr !important}.lv small{font-size:var(--fs-label)}}

/* v17: navegación tipo app */
body{overflow-x:clip}
#view.nav-push{--nx:28px;animation:navin .3s var(--ease-drawer) backwards}
#view.nav-pop{--nx:-28px;animation:navin .3s var(--ease-drawer) backwards}
#view.nav-tab{animation:fade .16s ease-out backwards}
@keyframes navin{from{opacity:0;transform:translateX(var(--nx))}}
#view.nav-push :is(.card,.qa,.ccard,.p2banner,.client-frame,.today .tday,tbody tr),
#view.nav-pop :is(.card,.qa,.ccard,.p2banner,.client-frame,.today .tday,tbody tr),
#view.nav-tab :is(.card,.qa,.ccard,.p2banner,.client-frame,.today .tday,tbody tr){animation:none}
/* Clientes tipo historias (teléfono) */
.stories{display:none}
@media (max-width:860px){
  .stories{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;margin:0 -16px;padding:2px 16px 4px;scrollbar-width:none}
  .stories::-webkit-scrollbar{display:none}
}
.sty{flex:none;width:66px;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;color:var(--fg);font:inherit;scroll-snap-align:start;position:relative;min-height:44px}
.sty .sr{width:62px;height:62px;border-radius:50%;padding:3px;background:var(--line-2);display:grid;place-items:center;transition:transform .16s var(--ease-out)}
.sty .sr .mark{width:56px !important;height:56px !important;border-radius:50% !important;border:3px solid var(--bg);font-size:var(--fs-title)}
.sty .sr.add{background:var(--chip-bg)}
.sty .sr.add svg{width:24px;height:24px;stroke:var(--fg);fill:none;stroke-width:1.75}
.sty:active .sr{transform:scale(.94)}
.sty small{max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:var(--fs-label)}
.sty .sev{position:absolute;top:0;left:2px;width:20px;height:20px;border-radius:50%;background:var(--bad);color:var(--on-bad);font-weight:700;font-size:var(--fs-label);line-height:16px;text-align:center;border:2px solid var(--bg)}
.sty .sev.warn{background:var(--warn);color:var(--on-bad)}
.sty .sb{position:absolute;top:0;right:0;min-width:20px;height:20px;border-radius:99px;background:var(--bad);color:var(--on-bad);font-size:var(--fs-label);font-weight:700;display:grid;place-items:center;padding:0 5px;border:2px solid var(--bg)}
/* Pulso del negocio */
.pulse .pu{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.pulse .pu:first-of-type{border-top:0;padding-top:4px}
.pic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--chip-bg);color:var(--muted);flex:none;align-self:start}
.pu .pic{align-self:center}
#nbanner .pic{align-self:center}
.pic svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.pic.bad{background:var(--bad-bg);color:var(--bad)} .pic.warn{background:var(--warn-bg);color:var(--warn)} .pic.ok{background:var(--ok-bg);color:var(--ok)} .pic.info{background:var(--info-bg);color:var(--info)}
.pu .pt{min-width:0}
.pu .pt b{display:block;font-weight:600;line-height:1.3}
.pu .pt small{display:block;color:var(--muted);font-size:var(--fs-note);margin-top:2px}
.pu .pa{display:flex;align-items:center;gap:12px}
.pu .pamt{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.pu .pamt b{font-family:var(--display);font-weight:600;font-size:var(--fs-head);white-space:nowrap}
.pu .pamt small{color:var(--dim);font-size:var(--fs-label)}
.pace{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:2px 0 10px;font-size:var(--fs-note);color:var(--muted)}
.pace .pbar{flex:1 1 160px;height:6px;border-radius:99px;background:var(--chip-bg);position:relative;overflow:hidden;min-width:120px}
.pace .pbar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--gold)}
.pace .pbar s{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--fg);opacity:.55}
@media (max-width:640px){.pulse .pu{grid-template-columns:38px minmax(0,1fr)}.pu .pa{grid-column:2;justify-content:space-between}.pu .pamt{align-items:flex-start}}
/* Centro de alertas */
.alc h4{margin:16px 0 8px;font-size:var(--fs-note);color:var(--muted);font-weight:600;display:flex;gap:8px;align-items:center}
.alc h4 .n{margin-left:auto;color:var(--dim);font-weight:400}
.alc h4 i{width:8px;height:8px;border-radius:50%;background:var(--sv)}
.alrow{display:grid;grid-template-columns:36px minmax(0,1fr);gap:4px 12px;padding:12px;border-radius:14px;background:var(--panel-2);margin-bottom:8px;transition:opacity .18s var(--ease-out),transform .18s var(--ease-out)}
.alrow.gone{opacity:0;transform:translateX(24px)}
.alrow .pic{width:36px;height:36px}
.alrow .at{min-width:0}
.alrow .acl{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:var(--fs-label)}
.alrow .acl i{width:8px;height:8px;border-radius:50%;flex:none}
.alrow .at b{display:block;font-weight:600;line-height:1.3;margin-top:1px}
.alrow .at small.w{display:block;color:var(--muted);font-size:var(--fs-note);margin-top:2px}
.alrow .ab{grid-column:2;display:flex;gap:6px 12px;align-items:center;flex-wrap:wrap;margin-top:6px}
.alc .allok{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 8px;color:var(--muted);text-align:center}
.alc .allok svg{width:36px;height:36px;stroke:var(--ok);fill:none;stroke-width:1.75}
/* Aviso superior al abrir */
#nbanner{position:fixed;z-index:30;top:calc(10px + env(safe-area-inset-top,0px));left:12px;right:12px;margin:0 auto;max-width:420px;display:grid;grid-template-columns:38px minmax(0,1fr);gap:2px 12px;align-items:center;padding:12px 14px;border-radius:18px;background:var(--panel);background:color-mix(in srgb,var(--panel) 86%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line-2);box-shadow:0 14px 44px rgba(0,0,0,.35);color:var(--fg);text-align:left;font:inherit;animation:nb-in .38s var(--ease-drawer) both;touch-action:none}
#nbanner .pic{grid-row:span 2;width:38px;height:38px;border-radius:11px}
#nbanner b{font-weight:600;font-size:var(--fs-body)}
#nbanner small{color:var(--muted);font-size:var(--fs-note);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#nbanner.out{animation:nb-out .2s var(--ease-out) both}
@keyframes nb-in{from{transform:translateY(calc(-100% - 24px))}}
@keyframes nb-out{to{transform:translateY(calc(-100% - 24px));opacity:0}}
@media (min-width:861px){#nbanner{left:auto;right:24px;width:380px;animation-name:nb-in-d}#nbanner.out{animation-name:nb-out-d}}
@keyframes nb-in-d{from{transform:translateX(calc(100% + 32px))}}
@keyframes nb-out-d{to{transform:translateX(calc(100% + 32px));opacity:0}}
/* Más: cuadrícula de apps */
.appgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 6px;margin:8px 0 6px}
.appi{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:0;padding:4px 0;color:var(--fg);font:inherit;font-size:var(--fs-label);min-height:44px}
.appi .aic{position:relative;width:56px;height:56px;border-radius:16px;background:var(--chip-bg);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);transition:transform .16s var(--ease-out)}
.appi .aic svg{width:26px;height:26px;stroke:var(--fg);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.appi:active .aic{transform:scale(.94)}
.appi .abadge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:99px;background:var(--bad);color:var(--on-bad);font-style:normal;font-size:var(--fs-label);font-weight:700;display:grid;place-items:center;padding:0 5px;border:2px solid var(--panel)}
.appi span.al{max-width:76px;text-align:center;line-height:1.2}
/* Búsqueda */
.qres .qh{padding:8px 10px 2px;font-size:var(--fs-label);color:var(--dim)}
/* v18: el título de la página domina sobre los números de las tarjetas */
@media (min-width:861px){.greet h1,.head h1,.ch1{font-size:var(--fs-display);line-height:1.1;letter-spacing:-.02em}}
.tflag{margin-left:auto;min-width:18px;height:18px;padding:0 6px;border-radius:99px;font-size:var(--fs-label);font-weight:700;display:grid;place-items:center;line-height:1}
.tflag.bad{background:var(--bad);color:var(--on-bad)} .tflag.info{background:var(--info-bg);color:var(--info);font-weight:600}

/* v20: encabezado compacto fuera de Inicio, botón de crear y búsqueda en el encabezado */
.hbtn{width:44px;height:44px;border-radius:50%;background:var(--panel);border:1px solid var(--line);display:none;place-items:center;color:var(--fg)}
.hbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.hbtn.plusb{background:var(--gold);border-color:transparent;color:#111111}
@media (max-width:860px){ body.has-plus .hbtn.plusb{display:grid} }
body.sub .hbtn.srch{display:grid}
body.sub .greet{display:none}
body.sub .topbar{justify-content:flex-end;min-height:0}
@media (max-width:860px){
  body.has-plus .greet h1,body.has-plus .greet p{padding-right:160px}
  body.sub .topbar{display:flex;justify-content:flex-end}
  body.sub .tb-right{position:static}
}
.setrow .seg button{white-space:nowrap}
@media (max-width:640px){ .setg .setrow{grid-template-columns:minmax(0,1fr)} }
body.sub #tb-row{display:none}
body.sub #tb-row.open-q{display:grid;grid-template-columns:minmax(0,1fr)}
body.sub #tb-row.open-q #nextcall{display:none}
.hbtns .hmore{display:none}
@media (max-width:640px){
  .hbtns .sec{display:none}
  .hbtns .hmore{display:inline-grid;place-items:center;width:44px;padding:0}
  .hbtns{flex-wrap:nowrap}
}
/* v23: conexión por token */
.hsteps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-note);color:var(--muted)}
.nwtok{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.nwok{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-radius:10px;background:var(--ok-bg);font-size:var(--fs-body)}
.nwok:focus{outline:none}
/* Configuración */
.setg{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.setrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.setrow:first-child{border-top:0}
.setrow b{display:block;font-weight:600}
.setrow small{display:block;color:var(--muted);font-size:var(--fs-note);margin-top:2px}
.setrow .seg{flex-wrap:wrap}
.tgl{position:relative;width:52px;height:32px;border-radius:99px;border:0;background:var(--line-2);flex:none;transition:background-color .2s var(--ease-out)}
.tgl::before{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s var(--ease-out)}
.tgl[aria-checked="true"]{background:var(--ok)}
.tgl[aria-checked="true"]::before{transform:translateX(20px)}
.tbgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
@media (max-width:640px){.tbgrid{grid-template-columns:minmax(0,1fr)}}

/* v21 · 7. Un solo relleno naranja por pantalla */
.nextcall .hr{color:var(--fg)}
.avatar.big{border-color:var(--line-2);color:var(--fg)}
.hbtn.plusb{background:var(--panel);border:1px solid var(--line);color:var(--fg)}
@media (min-width:861px){
  .qa{padding:12px 16px;min-height:56px;align-items:center}
  .qa .ql small{display:none}
  .qa .ring{width:36px;height:36px}
  .qa .ring svg{width:16px;height:16px}
}
/* 8. Entrada completa solo la primera vez; después, un fundido corto */
#view.enterq{animation:fade .15s ease both}
.enter .card,.enter .qa,.enter .ccard,.enter .p2banner,.enter .client-frame{animation-duration:.28s;animation-delay:calc(var(--i,0) * 30ms)}
.enter .fill,.enter .goalbar .done,.enter .goalbar .pace,.enter .meter i,.enter .regbar i,.enter .rank-row .tr i,.enter .risk .rbar i,.enter .cols .bar,.enter .wk .bar{animation-duration:.4s;animation-delay:.12s}
.enter .draw,.enter .spark{animation-duration:.5s;animation-delay:.1s}
.enter .area-fill{animation-duration:.3s;animation-delay:.3s}
.enter .fade-late{animation:none}
.enter .ring-arc{animation-duration:.5s;animation-delay:.1s}
/* 9. Cada hoja tiene botón de cerrar */
.sheet{position:relative}
.sheet-x{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:0;background:var(--chip-bg);display:grid;place-items:center;color:var(--muted);z-index:1}
.sheet-x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
#sheet-body > h3:first-child{padding-right:52px}
#sheet-title:focus{outline:none}
/* 10. Interlineado por jerarquía */
body{line-height:1.45}
h1,h2,h3,h4,.card h3,.alert b,.pu .pt b,.alrow .at b,.bnl,.xtm b,.rcm b,.qr b,.setrow b{line-height:1.3}
.ch1,.head h1,.greet h1{line-height:1.15}

/* ===== v24: Tu día ===== */
.daycard .dyh{align-items:flex-start;gap:12px;margin-bottom:6px}
.aib svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linejoin:round}
.dylist{display:flex;flex-direction:column}
.dy{display:grid;grid-template-columns:76px 38px minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.dy:first-child{border-top:0}
.dyw{display:flex;flex-direction:column;line-height:1.2}
.dyw b{font-size:var(--fs-note);font-weight:600;font-variant-numeric:tabular-nums}
.dyw small{font-size:var(--fs-label);color:var(--dim)}
.dy.bad .dyw small{color:var(--bad)} .dy.warn .dyw small{color:var(--warn)}
.pic{position:relative}
.pic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sevm{position:absolute;right:-4px;top:-4px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:var(--fs-label);font-weight:700;line-height:1;background:var(--bad);color:var(--on-bad);border:2px solid var(--panel)}
.pic.warn .sevm{background:var(--warn);color:var(--on-bad)}
.dyt{min-width:0}
.dyt b{display:block;font-weight:600;line-height:1.3}
.dyt small{display:block;color:var(--muted);font-size:var(--fs-note);margin-top:2px}
.dya{display:flex;align-items:center;gap:12px}
.dya .pamt,.air .pamt{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.dya .pamt b,.air .pamt b{font-family:var(--display);font-weight:600;font-size:var(--fs-body);white-space:nowrap}
.dya .pamt small,.air .pamt small{color:var(--dim);font-size:var(--fs-label)}
.dymore{margin-top:6px}
.enter .dy{animation:rise .4s var(--ease-out) both;animation-delay:calc(var(--k,0) * 35ms + 80ms)}
@media (max-width:860px){
  .daycard .dyh{flex-direction:column}
  .dy{grid-template-columns:38px minmax(0,1fr);row-gap:8px}
  .dyw{grid-column:2;grid-row:1;flex-direction:row;gap:8px;align-items:baseline}
  .dy .pic{grid-column:1;grid-row:1/span 2;align-self:start}
  .dyt{grid-column:2}
  .dya{grid-column:2;justify-content:space-between;flex-wrap:wrap}
  .dya .pamt{align-items:flex-start;order:0}
}
/* Números clave */
.today{grid-template-columns:repeat(4,minmax(0,1fr))}
.tday b .of{font-size:var(--fs-body);font-weight:400;color:var(--muted)}
.tday.okt small{color:var(--ok)}
.tday .pbar{grid-column:1/-1;height:6px;border-radius:99px;background:var(--chip-bg);position:relative;overflow:hidden;margin-top:6px}
.tday .pbar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--gold)}
.tday .pbar s{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--fg);opacity:.6}
@media (max-width:1100px) and (min-width:861px){.today{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Más detalle */
.mdet>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;min-height:44px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:background-color .15s}
.mdet>summary::-webkit-details-marker{display:none}
.mdet>summary:hover{background:color-mix(in srgb,var(--fg) 3%,var(--panel))}
.mdet>summary span{display:flex;flex-direction:column;gap:2px;min-width:0}
.mdet>summary b{font-family:var(--display);font-weight:600;font-size:var(--fs-head)}
.mdet>summary small{color:var(--muted);font-size:var(--fs-note)}
.mdet .chev{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out)}
.mdet[open] .chev{transform:rotate(180deg)}
.mdet .mbody{display:flex;flex-direction:column;gap:20px;margin-top:20px}
.mdet[open] .mbody{animation:fade .2s ease both}
/* ===== Asistente ===== */
.ai-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:80;animation:fade .18s ease both}
.ai{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:81;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;box-shadow:-16px 0 40px rgba(0,0,0,.35);animation:ai-in .24s var(--ease-out) both}
@keyframes ai-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ai{animation:fade .2s ease both}}
.ai-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 16px 14px 20px;padding-top:max(16px,env(safe-area-inset-top));border-bottom:1px solid var(--line)}
.ai-h h2{margin:0;font-family:var(--display);font-size:var(--fs-head);font-weight:600;outline:none}
.ai-h small{display:block;color:var(--muted);font-size:var(--fs-label);margin-top:2px}
.ai-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold-ink)}
.ai-ic svg,.ai-x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ai-x{width:44px;height:44px;border-radius:50%;border:0;background:var(--chip-bg);color:var(--fg);display:grid;place-items:center}
.ai-log{flex:1;overflow:auto;padding:16px 20px;display:flex;flex-direction:column;gap:16px;overscroll-behavior:contain}
.aim{display:flex;flex-direction:column;gap:10px;font-size:var(--fs-body);line-height:1.45}
.aim p{margin:0}
.aim.me{align-self:flex-end;max-width:85%;background:var(--panel-2);border:1px solid var(--line);border-radius:14px 14px 4px 14px;padding:10px 14px}
.aisrc{font-size:var(--fs-label);color:var(--dim)}
.aip{font-weight:600}
.aib-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.ail{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:var(--bg);overflow:hidden}
.air{display:grid;grid-template-columns:38px minmax(0,1fr);gap:4px 12px;align-items:center;padding:12px 14px;border-top:1px solid var(--line)}
.air:first-child{border-top:0}
.airt{min-width:0}
.airt b{display:block;font-weight:600;font-size:var(--fs-note);line-height:1.3}
.airt small{display:block;color:var(--muted);font-size:var(--fs-label);margin-top:2px}
.aira{grid-column:2;display:flex;align-items:center;gap:10px;justify-content:space-between}
.aira .pamt{align-items:flex-start}
.aiacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.aikv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.aik{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.aik small{font-size:var(--fs-label);color:var(--muted)}
.aik b{font-family:var(--display);font-size:var(--fs-head);font-weight:600}
.aik span{font-size:var(--fs-label);color:var(--dim)}
.aik.bad span{color:var(--bad)} .aik.warn span{color:var(--warn)}
.aitask{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px}
.aitask div:first-child{grid-column:1/-1}
.aitask small{display:block;font-size:var(--fs-label);color:var(--muted)}
.aitask b{font-weight:600}
.aires{display:flex;flex-direction:column;gap:4px}
.aichips,.ai-sug{display:flex;gap:8px;flex-wrap:wrap}
.chipb{border:1px solid var(--line-2);background:none;color:var(--fg);border-radius:999px;padding:8px 14px;font-size:var(--fs-note);min-height:36px;transition:background-color .15s,border-color .15s,transform .16s var(--ease-out)}
.chipb:hover{background:var(--panel-2);border-color:var(--muted)}
.chipb:active{transform:scale(.97)}
.ai-foot{border-top:1px solid var(--line);padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.ai-f{display:flex;gap:8px}
.ai-f input{min-height:44px;font-size:var(--fs-body)}
.ai-note{margin:0;font-size:var(--fs-label);color:var(--dim)}
body.ai-on{overflow:hidden}
@media (max-width:860px){
  .ai{width:100vw;border-left:0;box-shadow:none}
  .ai-sug{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .ai-sug .chipb{flex:none;min-height:44px}
  .chipb{min-height:44px}
}
.qr .ty{white-space:nowrap}
/* ===== v24: sistema de botones. Tres tipos: principal (naranja, uno por pantalla), secundario y discreto ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 18px;font-size:var(--fs-body);font-weight:600;line-height:1.2;border-radius:10px}
.btn.sm{min-height:32px;padding:0 12px;font-size:var(--fs-note)}
.btn.ghost{background:var(--chip-bg);border:1px solid transparent;color:var(--fg);font-weight:600}
.btn.ghost:hover{background:color-mix(in srgb,var(--fg) 14%,transparent);border-color:transparent;box-shadow:none}
.linkbtn{border:0;background:none;color:var(--muted);font-weight:600;font-size:var(--fs-note);padding:6px 10px;border-radius:8px}
.linkbtn:hover{color:var(--fg);background:var(--chip-bg);border-color:transparent}
.calh .linkbtn{background:var(--chip-bg);color:var(--fg)}
@media (prefers-contrast:more){.btn.ghost,.linkbtn{border:1px solid var(--line-2)}}
/* ===== v26: acabado de vidrio. Tokens por tema, después las superficies ===== */
:root{
  --gl-body:#09090a; --gl-tint:rgba(20,20,22,.58); --gl-a:rgba(255,255,255,.045); --gl-b:rgba(255,255,255,.012);
  --gl-edge:rgba(255,255,255,.12); --gl-hi:rgba(255,255,255,.16); --gl-shadow:rgba(0,0,0,.55); --gl-over:rgba(18,18,20,.86);
  --gl-panel2:rgba(255,255,255,.05); --gl-well:rgba(0,0,0,.24); --gl-line:rgba(255,255,255,.08); --gl-line2:rgba(255,255,255,.16);
  --gl-rim:linear-gradient(140deg,rgba(255,255,255,.42),rgba(255,255,255,.08) 28%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.22)); --gl-spec:rgba(255,255,255,.035); --gl-lens:rgba(255,255,255,.13);
  --gl-glow1:rgba(212,175,55,.17); --gl-glow2:rgba(255,255,255,.07); --gl-facet:rgba(255,255,255,.055); --gl-facet2:rgba(0,0,0,.45);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --gl-body:#efefec; --gl-tint:rgba(255,255,255,.62); --gl-a:rgba(255,255,255,.62); --gl-b:rgba(255,255,255,.3);
    --gl-edge:rgba(255,255,255,.75); --gl-hi:rgba(255,255,255,.95); --gl-shadow:rgba(40,36,30,.16); --gl-over:rgba(250,249,246,.88);
    --gl-panel2:rgba(255,255,255,.5); --gl-well:rgba(255,255,255,.42); --gl-line:rgba(28,27,25,.09); --gl-line2:rgba(28,27,25,.18);
    --gl-rim:linear-gradient(140deg,#fff,rgba(255,255,255,.6) 30%,rgba(28,27,25,.07) 66%,rgba(255,255,255,.95)); --gl-spec:rgba(255,255,255,.6); --gl-lens:rgba(255,255,255,.75);
    --gl-glow1:rgba(201,162,39,.2); --gl-glow2:rgba(0,0,0,.05); --gl-facet:rgba(255,255,255,.45); --gl-facet2:rgba(28,27,25,.05);
  }
}
:root[data-theme="light"]{
  --gl-body:#efefec; --gl-tint:rgba(255,255,255,.62); --gl-a:rgba(255,255,255,.62); --gl-b:rgba(255,255,255,.3);
  --gl-edge:rgba(255,255,255,.75); --gl-hi:rgba(255,255,255,.95); --gl-shadow:rgba(40,36,30,.16); --gl-over:rgba(250,249,246,.88);
  --gl-panel2:rgba(255,255,255,.5); --gl-well:rgba(255,255,255,.42); --gl-line:rgba(28,27,25,.09); --gl-line2:rgba(28,27,25,.18);
  --gl-rim:linear-gradient(140deg,#fff,rgba(255,255,255,.6) 30%,rgba(28,27,25,.07) 66%,rgba(255,255,255,.95)); --gl-spec:rgba(255,255,255,.6); --gl-lens:rgba(255,255,255,.75);
    --gl-glow1:rgba(201,162,39,.2); --gl-glow2:rgba(0,0,0,.05); --gl-facet:rgba(255,255,255,.45); --gl-facet2:rgba(28,27,25,.05);
}
:root[data-finish="glass"]{ --panel:var(--gl-tint); --panel-2:var(--gl-panel2); --bg:var(--gl-well); --line:var(--gl-line); --line-2:var(--gl-line2); --gl-blur:20px }
@media (max-width:860px){ :root[data-finish="glass"]{ --gl-blur:14px } }
/* Fondo: dos luces suaves y planos de cristal. Fijo detrás de todo */
:root[data-finish="glass"] body{background:var(--gl-body)}
:root{--gl-img:url("/fondos/vidrio-1-8233c6881a.webp");--gl-img-tel:url("/fondos/vidrio-2-620361e5b3.webp");--gl-veil:rgba(9,9,10,.32)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--gl-img:url("/fondos/vidrio-3-60e001fdae.webp");--gl-img-tel:url("/fondos/vidrio-3-60e001fdae.webp");--gl-veil:rgba(239,239,236,.42)}}
:root[data-theme="light"]{--gl-img:url("/fondos/vidrio-3-60e001fdae.webp");--gl-img-tel:url("/fondos/vidrio-3-60e001fdae.webp");--gl-veil:rgba(239,239,236,.42)}
/* Fondo: cristal negro con reflejos dorados (generado con Higgsfield). En teléfono vertical, versión vertical */
:root[data-finish="glass"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--gl-veil),var(--gl-veil)),var(--gl-img) center/cover no-repeat,var(--gl-body)}
@media (max-width:860px) and (orientation:portrait){:root[data-finish="glass"] body::before{background:linear-gradient(var(--gl-veil),var(--gl-veil)),var(--gl-img-tel) center top/cover no-repeat,var(--gl-body)}}
:root[data-finish="glass"] .app,:root[data-finish="glass"] .main{background:transparent}
/* Superficies de vidrio: brillo arriba, borde de luz, sombra suave */
:root[data-finish="glass"] :is(.card,.ccard,.tday,.mdet>summary,.nextcall,.search,.side,.bell,.hbtn:not(.plusb),.avatar.big,.gchip,.composer,.inbox,.lcard,.bnbar,.pv-bar,.ctabs,.mode,.client-frame){
  background:linear-gradient(180deg,var(--gl-a),var(--gl-b)),var(--gl-tint);
  border-color:var(--gl-edge);
  box-shadow:inset 0 1px 0 var(--gl-hi),0 14px 34px -14px var(--gl-shadow);
  -webkit-backdrop-filter:blur(var(--gl-blur)) saturate(150%);backdrop-filter:blur(var(--gl-blur)) saturate(150%)}
:root[data-finish="glass"] .side{border-right-color:var(--gl-edge);box-shadow:inset -1px 0 0 var(--gl-hi)}
:root[data-finish="glass"] .client-frame{border-color:color-mix(in srgb,var(--accent) 35%,var(--gl-edge))}
/* Capas encima del contenido: más opacas para que se lean */
:root[data-finish="glass"] :is(.sheet,.menu,.qres,.why,.ai,.more,.tabwrap,.tgrp .dayhead,#nbanner,.cbar,.lc .tip,.toast,.ttlbar,.tabbar:not(.preview)){
  background:var(--gl-over);border-color:var(--gl-edge);
  -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%)}
:root[data-finish="glass"] .tabs{background:transparent}
:root[data-finish="glass"] .nav.on .count{color:var(--muted)}
:root[data-finish="glass"] .nav.on{background:var(--gl-panel2);box-shadow:inset 3px 0 0 var(--gold),inset 0 1px 0 var(--gl-hi),inset 0 0 0 1px var(--gl-line)}
/* Botones con luz de vidrio */
:root[data-finish="glass"] .btn:not(.ghost):not(.done){box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.12),0 8px 20px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
:root[data-finish="glass"] .btn.ghost,:root[data-finish="glass"] .chipb{box-shadow:inset 0 1px 0 var(--gl-hi)}
:root[data-finish="glass"] .hbtn.plusb{box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 8px 20px -8px color-mix(in srgb,var(--gold) 70%,transparent)}
:root[data-finish="glass"] .ai-bg,:root[data-finish="glass"] .sheet-bg,:root[data-finish="glass"] .more-bg{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* ===== v27: más iPhone. Borde de luz, brillo que sigue el cursor, cápsulas, esquinas concéntricas, barra flotante con lente ===== */
:root[data-finish="glass"]{ --r:22px }
:root[data-finish="glass"] :is(.card,.ccard,.tday,.mdet>summary,.nextcall,.search,.bell,.hbtn:not(.plusb),.avatar.big,.gchip,.composer,.inbox,.lcard,.bnbar,.pv-bar,.ctabs,.mode){
  border:1px solid transparent;
  background:
    radial-gradient(420px circle at var(--mx,20%) var(--my,-120%),var(--gl-spec),transparent 60%) padding-box,
    linear-gradient(180deg,var(--gl-a),var(--gl-b)) padding-box;
  background-color:var(--gl-tint);background-clip:padding-box}
/* Borde de luz con máscara: solo el anillo de 1 px, no pinta detrás del texto */
:root[data-finish="glass"] :is(.card,.ccard,.tday,.mdet>summary,.nextcall,.search,.bnbar,.composer,.inbox,.lcard,.pv-bar,.ctabs){position:relative}
:root[data-finish="glass"] :is(.card,.ccard,.tday,.mdet>summary,.nextcall,.search,.bnbar,.composer,.inbox,.lcard,.pv-bar,.ctabs,#tabbar.lg)::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--gl-rim);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
:root[data-finish="glass"] .mdet>summary{border-radius:var(--r)}
/* Cápsulas: botones, búsqueda, selectores de periodo y fichas */
:root[data-finish="glass"] :is(.btn,.linkbtn,.search,.seg,.seg button,.gchip,.mode,.mode button,.chipb,.ai-f input){border-radius:999px}
:root[data-finish="glass"] .btn{padding-inline:20px} :root[data-finish="glass"] .btn.sm{padding-inline:14px}
/* Esquinas concéntricas: lo de adentro de una tarjeta, más chico */
:root[data-finish="glass"] :is(.task,.wb,.note,.ail,.aik,.aitask,.rcrow,.empty,.alrow,.why,.menu,.qres){border-radius:14px}
:root[data-finish="glass"] .pic{border-radius:12px}
/* Toque con luz, como los botones de vidrio del iPhone */
:root[data-finish="glass"] :is(.btn,.chipb,.bell,.hbtn,.tday,.ccard,.tabbar button,.seg button):active{filter:brightness(1.15)}
/* Hojas flotantes en teléfono */
@media (max-width:860px){
  :root[data-finish="glass"] .sheet{margin:0 8px calc(8px + env(safe-area-inset-bottom,0px));border-radius:30px;border-bottom:1px solid var(--gl-edge);padding-bottom:20px;width:calc(100% - 16px)}
}
/* Barra inferior flotante con lente que se desliza */
:root[data-finish="glass"] #tabbar.tabbar.v-clasica.lg{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:6px;border:1px solid transparent;border-radius:999px;
  background:var(--gl-over);box-shadow:0 18px 40px -14px var(--gl-shadow),inset 0 1px 0 var(--gl-hi)}
#tabbar.lg > button{position:relative;z-index:1;border-radius:999px;padding:6px 0 5px}
#tabbar.lg .ic{background:none !important;height:26px;width:auto}
#tabbar.lg > .on{color:var(--gold-ink)}
.tb-lens{position:absolute;top:6px;bottom:6px;left:0;z-index:0;border-radius:999px;background:var(--gl-lens);box-shadow:inset 0 1px 0 var(--gl-hi),inset 0 0 0 1px var(--gl-line),0 4px 14px -6px var(--gl-shadow);transition:transform .38s cubic-bezier(.32,.72,0,1);pointer-events:none}
.tb-lens.go{animation:lens-sq .38s cubic-bezier(.32,.72,0,1)}
@keyframes lens-sq{40%{scale:1.14 .9}100%{scale:1 1}}
@media (prefers-reduced-motion:reduce){.tb-lens{transition:none}.tb-lens.go{animation:none}}
/* ===== v28: esqueleto, sesión, sin internet ===== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skwrap{display:flex;flex-direction:column;gap:20px}
.skwrap .skel{display:block}
.skrow{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.skrow:first-child{border-top:0}
.skc{width:38px;height:38px;border-radius:12px}
.skt{display:flex;flex-direction:column}
.sktoday .sktile{min-height:120px}
.skel{background:linear-gradient(90deg,color-mix(in srgb,var(--fg) 7%,transparent) 30%,color-mix(in srgb,var(--fg) 14%,transparent) 50%,color-mix(in srgb,var(--fg) 7%,transparent) 70%);background-size:300% 100%;animation:sk-shine 1.3s ease-in-out infinite}
@keyframes sk-shine{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:skel 1.6s ease-in-out infinite;background:color-mix(in srgb,var(--fg) 9%,transparent)}}
.errc .eico.bad{background:var(--bad-bg);color:var(--bad)}
body.authed-out .side,body.authed-out .ttlbar,body.authed-out .topbar,body.authed-out .tb-row,body.authed-out #tabbar,body.authed-out .proto-note,body.authed-out #as-bar{display:none !important}
body.authed-out .app{grid-template-columns:1fr}
body.authed-out .main{padding-bottom:24px}
.authwrap{min-height:calc(100vh - 80px);min-height:calc(100dvh - 80px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.authcard{gap:14px}
.authcard .logo{width:56px;height:56px;font-size:var(--fs-title);align-self:center}
.authcard h1{margin:0;font-family:var(--display);font-size:var(--fs-title);font-weight:700}
.authcard .lsub{margin:0}
.authcard .btn{width:100%}
.authcard .fl{width:100%}
.authnote{margin:0;width:100%}
.remember{display:flex;gap:8px;align-items:center;font-size:var(--fs-note);color:var(--muted);align-self:flex-start;min-height:44px}
.remember input{width:20px;height:20px;accent-color:var(--gold)}
.lfoot{color:var(--dim);font-size:var(--fs-label);text-align:center}
#netbar{position:fixed;left:50%;transform:translateX(-50%);width:max-content;top:calc(10px + env(safe-area-inset-top,0px));z-index:60;display:flex;gap:10px;align-items:center;max-width:min(560px,calc(100vw - 24px));padding:10px 16px;border-radius:16px;background:var(--panel-2);border:1px solid var(--line-2);color:var(--fg);font-size:var(--fs-note);box-shadow:0 12px 30px -10px rgba(0,0,0,.5);animation:msg-in .24s var(--ease-out) both}
:root[data-finish="glass"] #netbar{background:var(--gl-over);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
#netbar svg{width:20px;height:20px;flex:none;stroke:var(--warn);fill:none;stroke-width:1.75;stroke-linecap:round}
body.offline .main{padding-top:72px}
@media (max-width:860px){#netbar{width:calc(100vw - 24px)} body.offline .main{padding-top:92px}}
.simbtns{margin-top:4px;display:flex;flex-wrap:wrap;gap:8px}
/* v31: en claro, las etiquetas de estado llevan base blanca para leerse sobre el fondo de cristal */
@media (prefers-color-scheme: light){:root[data-finish="glass"]:not([data-theme="dark"]) :is(.pill.bad,.pill.warn,.pill.ok,.pill.info){background-color:color-mix(in srgb,currentColor 12%,#fff)}}
:root[data-finish="glass"][data-theme="light"] :is(.pill.bad,.pill.warn,.pill.ok,.pill.info){background-color:color-mix(in srgb,currentColor 12%,#fff)}
/* ===== v25: movimiento de botones. Corto, solo transform y opacidad, sin rebote ===== */
/* Principal: un brillo cruza una vez al pasar el cursor */
@media (hover:hover) and (pointer:fine){
  .btn:not(.ghost):not(.busy):not(.done){background-image:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);background-repeat:no-repeat;background-size:250% 100%;background-position:130% 0}
  .btn:not(.ghost):not(.busy):not(.done):hover{background-position:-30% 0;transition:background-position .45s var(--ease-out),box-shadow .2s,transform .16s var(--ease-out)}
  /* Secundario: el ícono se mueve un poco hacia donde lleva */
  .btn.ghost svg{transition:transform .2s var(--ease-out)}
  .btn.ghost:hover svg{transform:translateX(2px)}
  .aib:hover svg{transform:rotate(18deg) scale(1.12)}
  /* Discreto: la línea crece desde la izquierda */
  .linkbtn{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:10px calc(100% - 5px);background-size:0 1px;transition:background-size .22s var(--ease-out),color .15s ease,transform .16s var(--ease-out)}
  .linkbtn:hover{background:linear-gradient(currentColor,currentColor) no-repeat 10px calc(100% - 5px)/calc(100% - 20px) 1px transparent}
  .cside .linkbtn:hover,.calh .linkbtn:hover{background-image:none}
  .cside .linkbtn,.calh .linkbtn{background-image:none}
  /* Fichas: se levantan 1 px */
  .chipb:hover{transform:translateY(-1px)}
}
/* Confirmar: el botón se vuelve ✓ y se dibuja la palomita */
.btn.done{background:var(--ok-bg);color:var(--ok);pointer-events:none}
.ck{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.ck path{stroke-dasharray:22;stroke-dashoffset:22;animation:ck-draw .26s var(--ease-out) .04s forwards}
@keyframes ck-draw{to{stroke-dashoffset:0}}
.dy.leaving{animation:row-out .18s ease-in forwards}
@keyframes row-out{to{opacity:0;transform:translateX(12px)}}
/* Ver más: filas nuevas escalonadas */
.dy.rv{animation:msg-in .26s var(--ease-out) both;animation-delay:calc(var(--d,1) * 35ms)}
/* Asistente: puntos mientras revisa y respuesta que sube */
.aim.typing{flex-direction:row;gap:5px;align-self:flex-start;padding:12px 14px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px 14px 14px 4px}
.aim.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:dot 1s ease-in-out infinite}
.aim.typing span:nth-child(2){animation-delay:.15s} .aim.typing span:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.aim.fresh{animation:msg-in .26s var(--ease-out) both}
@keyframes msg-in{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){
  .ck path{animation:none;stroke-dashoffset:0}
  .dy.leaving{animation:fade-out .15s ease forwards}
  .dy.rv,.aim.fresh{animation:fade .18s ease both}
  .aim.typing span{animation:dot-r 1.2s ease-in-out infinite}
}
@keyframes fade-out{to{opacity:0}}
@keyframes dot-r{0%,100%{opacity:.3}50%{opacity:1}}
/* ===== Microgestos v32 ===== */
/* Fondo sólido para las explicaciones: con el acabado de vidrio el panel es translúcido */
:root{--tipbg:#1c1c1f}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--tipbg:#ffffff}}
:root[data-theme="light"]{--tipbg:#ffffff}
/* Minigráficas: meta, zona fuera de meta, punto y valor */
.spz{fill:color-mix(in srgb,var(--bad) 11%,transparent)}
.spg{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;opacity:.75}
.kpi .spark[tabindex]{touch-action:pan-y;cursor:crosshair;border-radius:8px;outline-offset:2px}
@media (hover:hover){ .kpi .spark[tabindex]:focus-visible{outline:2px solid var(--gold)} }
.kpi .spark[tabindex]:focus{outline:none}
@media (hover:hover){ .kpi .spark[tabindex]:focus-visible{outline:2px solid var(--gold)} }
#spdot{position:fixed;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--panel);pointer-events:none;z-index:90;opacity:0;transform:scale(.6);transition:opacity .12s ease,transform .16s var(--ease-out)}
#spdot.on{opacity:1;transform:none}
#sptip{position:fixed;left:0;top:0;z-index:91;pointer-events:none;display:flex;gap:6px;align-items:baseline;white-space:nowrap;padding:6px 10px;border-radius:10px;background:var(--tipbg);color:var(--fg);font-size:var(--fs-label);box-shadow:0 0 0 1px var(--line-2),0 8px 24px rgba(0,0,0,.28);opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .16s var(--ease-out)}
#sptip.on{opacity:1;transform:none}
#sptip .d{color:var(--muted)}
#sptip b{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
#sptip .off{color:var(--fg);font-weight:600;padding-left:6px;border-left:1px solid var(--line-2)}
/* Embudo: al pasar o tocar se ve cuánta gente se pierde en ese paso */
.fun{position:relative}
.frow{border-radius:8px;outline-offset:3px;transition:opacity .2s ease}
.frow:focus-visible{outline:2px solid var(--gold)}
.track{position:relative}
.track .fill{position:relative;z-index:1}
.track .lost{position:absolute;top:0;bottom:0;border-radius:0 6px 6px 0;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bad) 55%,transparent) 0 3px,transparent 3px 7px);opacity:0;transition:opacity .2s ease}
.frow.big .lost{opacity:.55}
.frow:focus-visible .lost,.frow.tap .lost{opacity:1}
.fdrop{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:3;pointer-events:none;padding:5px 10px;border-radius:10px;background:var(--tipbg);color:var(--fg);font-size:var(--fs-label);box-shadow:0 0 0 1px var(--line-2),0 8px 24px rgba(0,0,0,.28);opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .18s var(--ease-out)}
.frow:focus-visible .fdrop,.frow.tap .fdrop{opacity:1;transform:none}
.fun:has(.frow:focus-visible) .frow:not(:focus-visible),.fun:has(.frow.tap) .frow:not(.tap){opacity:.5}
.fbig{display:block;margin-top:6px;color:var(--muted)}
.fbig i{display:inline-block;width:18px;height:10px;margin-right:6px;vertical-align:-1px;border-radius:3px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--bad) 55%,transparent) 0 3px,transparent 3px 7px);box-shadow:inset 0 0 0 1px var(--line-2)}
@media (hover:hover) and (pointer:fine){
  .frow[tabindex]{cursor:default}
  .frow:hover .lost{opacity:1}
  .frow:hover .fdrop{opacity:1;transform:none}
  .fun:has(.frow:hover) .frow:not(:hover){opacity:.5}
}
/* Sincronizar: el ícono gira y luego confirma */
.syncb{display:inline-flex;align-items:center;gap:6px}
.syncb .sico{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.syncb.syncing{pointer-events:none;color:var(--fg)}
.syncb.syncing .sico{animation:spin .7s linear infinite}
.okw{color:var(--ok);font-weight:600;animation:okw .3s var(--ease-out) both}
@keyframes okw{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
/* Volver de un cliente: su fila se marca un momento */
tr[data-row-open] td{transition:background-color .3s ease}
tr.came-back td{background-color:color-mix(in srgb,var(--gold) 16%,transparent)}
.ccard{transition:transform .16s var(--ease-out),background-color .15s ease,box-shadow .3s ease}
.ccard.came-back{box-shadow:0 0 0 2px var(--gold)}
/* Ventas del mes: cuánto falta */
.tday{position:relative}
.tday .phit{grid-column:1/-1;display:block;padding:8px 0;margin:-2px 0 -8px}
.tday .phit .pbar{display:block;margin-top:0}
.tday .ptip{position:absolute;inset:6px;z-index:2;display:flex;align-items:center;padding:8px 12px;border-radius:10px;background:var(--tipbg);color:var(--fg);font-size:var(--fs-label);line-height:1.35;box-shadow:0 0 0 1px var(--line-2),0 6px 18px rgba(0,0,0,.22);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .15s ease,transform .18s var(--ease-out)}
.tday:focus-visible .ptip,.tday.tipon .ptip{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){ .tday:hover .ptip{opacity:1;transform:none} }

/* v36: proyección del mes, gráfica como tabla, foco de pestañas */
.mpace{margin:10px 0 0;font-size:var(--fs-body);color:var(--fg)}
.mpace b{font-weight:600}
.ctbl .mpv{display:block;white-space:nowrap}
.ctbl .mpv b{font-weight:600}
.ctbl td .pill{margin-top:3px}
.lctbl{margin-top:8px}
.lctbl summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;color:var(--muted);font-weight:600;font-size:var(--fs-note);list-style:none;border-radius:10px;padding:0 6px;margin-left:-6px}
.lctbl summary::-webkit-details-marker{display:none}
.lctbl summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease-out)}
.lctbl[open] summary::after{transform:translateY(2px) rotate(-135deg)}
@media (hover:hover) and (pointer:fine){ .lctbl summary:hover{color:var(--fg)} }
.lctw{max-height:320px;overflow:auto;margin-top:4px}
.lctw table{min-width:0}
.lctw thead th{position:sticky;top:0;background:var(--tipbg);z-index:1}
.lctw td small{display:block;color:var(--muted);font-size:var(--fs-label)}
html:not([data-kb]) :is(.tabs,.cbar,.ctabs,#tabbar) button:focus-visible{outline:none}

/* v37: datos parciales */
.pchip{white-space:nowrap}
.pmark{display:block;font-size:var(--fs-label);color:var(--warn);font-weight:400;white-space:nowrap}
@keyframes fade2{from{opacity:0}}
@keyframes navin2{from{opacity:0;transform:translateX(var(--nx))}}
#view[data-ab="b"].nav-push,#view[data-ab="b"].nav-pop{animation-name:navin2}
#view[data-ab="b"].nav-tab,#view[data-ab="b"].enterq{animation-name:fade2}

/* v38: comparar clientes */
.cmpbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:6px 0 12px}
.cmpchips{display:flex;flex-wrap:wrap;gap:8px}
.cchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 14px 4px 6px;border-radius:99px;border:1px solid var(--line-2);background:none;color:var(--muted);font-size:var(--fs-note);font-weight:600;transition:background-color .15s var(--ease-out),border-color .15s var(--ease-out)}
.cchip[aria-pressed="true"]{color:var(--fg);border-color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent)}
.cchip[aria-pressed="true"]::after{content:"✓";font-weight:700}
@media (hover:hover) and (pointer:fine){ .cchip:hover{color:var(--fg)} }
.cmptbl{table-layout:fixed}
.cmptbl thead th{vertical-align:bottom}
.cmptbl thead .cwho{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.cmptbl td.cmpl{color:var(--muted)}
.cmptbl td.best b{color:var(--fg)}
.bestt{display:inline-block;margin-left:6px;font-size:var(--fs-label);font-weight:600;color:var(--ok)}
.bestt::before{content:"▲ "}
.cmptbl td small.bn{display:block;font-size:var(--fs-label);color:var(--muted);font-weight:400;white-space:normal}
.cmpins{margin:12px 0 0;color:var(--fg)}
@media (max-width:860px){ .tbl-wrap .cmptbl tr{grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:4px 10px;padding:10px 0} .cmptbl td.cmpl{color:var(--fg);font-weight:600} .cmptbl .bestt{display:block;margin:2px 0 0} }
/* v38: columnas de la tabla de clientes */
.ctact{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.ctbl.h-estado :is(th,td):nth-child(2),.ctbl.h-llamadas :is(th,td):nth-child(3),.ctbl.h-asist :is(th,td):nth-child(4),.ctbl.h-costo :is(th,td):nth-child(5),
.ctbl.h-gasto :is(th,td):nth-child(6),.ctbl.h-meta :is(th,td):nth-child(7),.ctbl.h-cuello :is(th,td):nth-child(8),.ctbl.h-tend :is(th,td):nth-child(9){display:none}
/* Área táctil de 44 px en interruptores y enlaces dentro del texto */
.tgl::after{content:"";position:absolute;left:-4px;right:-4px;top:-6px;height:44px}
.sources a{position:relative}
.sources a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}

/* v39: detalles del teléfono */
.tap-only{display:none}
@media (hover:none),(pointer:coarse){ .tap-only{display:inline} }
@media (hover:none),(pointer:coarse){ .fine-only{display:none} }
@media (max-width:640px){ .ctact [data-sheet=cols]{display:none} }
@media (max-width:860px){ .kpi .lbl{white-space:normal;overflow:visible;text-overflow:clip;align-items:flex-start;flex-wrap:wrap;row-gap:2px;line-height:1.3} .kpi .lbl svg{margin-top:1px} }

/* v35: atajos de teclado y minigráfica del asistente */
.kbg{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.kbg h4{margin:0 0 4px;font-size:var(--fs-label);font-weight:600;color:var(--muted)}
.kbr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--fs-body)}
.kbr:last-child{border-bottom:0}
.kbk{display:inline-flex;gap:4px;align-items:center;color:var(--muted);font-size:var(--fs-label)}
kbd.k{font-family:var(--body);font-size:var(--fs-label);font-weight:600;color:var(--fg);background:var(--chip-bg);border-radius:6px;padding:2px 8px;min-width:24px;text-align:center;box-shadow:inset 0 -1px 0 var(--line-2)}
.aispark{display:flex;align-items:center;gap:12px;margin:10px 0 2px;padding:8px 12px;border-radius:12px;background:var(--chip-bg)}
.aispark .spark{width:140px;height:32px;margin:0;padding:0;flex:none}
.aispark small{color:var(--muted);font-size:var(--fs-label)}
@keyframes rowfade{from{opacity:.25}}

/* v34: vista rápida de un cliente */
.qv{position:fixed;z-index:60;width:340px;max-width:calc(100vw - 16px);padding:16px;border-radius:16px;background:var(--tipbg);color:var(--fg);box-shadow:0 0 0 1px var(--line-2),0 16px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .18s var(--ease-out)}
.qv.on{opacity:1;transform:none}
.qvh{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.qvh b{display:block;font-family:var(--display);font-size:var(--fs-body);line-height:1.2}
.qvh small{color:var(--muted);font-size:var(--fs-label)}
.qvn{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.qvn div{background:var(--chip-bg);border-radius:12px;padding:8px 10px;min-width:0}
.qvn span{display:block;font-size:var(--fs-label);color:var(--muted);line-height:1.25;min-height:2.5em}
.qvn b{font-family:var(--display);font-size:var(--fs-head);font-weight:600}
.qvn .delta{margin-left:4px}
.qvb,.qvc{margin:0;font-size:var(--fs-note);color:var(--muted)}
.qvb b{color:var(--fg);font-weight:600}
.qva{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sheet .qvn{margin:4px 0 12px}
tr[data-row-open]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (prefers-reduced-motion: reduce){ .qv{transition:opacity .12s ease;transform:none} }
/* v34: mejor día y hora */
.hm{display:grid;grid-template-columns:auto repeat(6,minmax(0,1fr));gap:4px;font-size:var(--fs-label);margin-top:4px}
.hm .hh{color:var(--muted);text-align:center;padding:2px 0}
.hm .hr{color:var(--muted);white-space:nowrap;padding-right:6px;display:flex;align-items:center}
.hm .hc{border-radius:8px;min-height:40px;display:grid;place-items:center;font-variant-numeric:tabular-nums;font-weight:600;color:var(--fg);background:color-mix(in srgb,var(--gold) calc(var(--lv,0) * 11% + 6%),transparent)}
.hm .hc.few{background:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-weight:400}
.hm .hc.best{box-shadow:inset 0 0 0 2px var(--gold)}
.hm .hc.worst{box-shadow:inset 0 0 0 2px var(--warn)}
.hmkey{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:var(--fs-label);color:var(--muted)}
.hmkey span{display:inline-flex;align-items:center;gap:6px}
.hmkey i{width:14px;height:14px;border-radius:4px;display:inline-block}
@media (max-width:860px){ .hm .hr{font-size:var(--fs-label);padding-right:2px} .hm{gap:3px} }

/* v33: periodo anterior, frase resumen y notas desde el globo */
.chsum{margin:2px 0 12px;font-size:var(--fs-body);line-height:1.45;color:var(--fg);max-width:70ch}
.chsum b{font-weight:600}
.cmpbtn{position:relative;display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;font:inherit;font-size:var(--fs-label);color:var(--muted);cursor:pointer}
.cmpbtn::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
.cmpbtn i{width:16px;border-top:2px dashed var(--dim);display:inline-block}
.cmpbtn[aria-pressed="false"]{color:var(--dim)}
.cmpbtn[aria-pressed="false"] i{opacity:.35}
.cmpbtn[aria-pressed="false"] span{text-decoration:line-through;text-decoration-color:var(--dim)}
.lc .tip.pin{pointer-events:auto;background:var(--tipbg)}
.lc .tip .rprev i{background:repeating-linear-gradient(90deg,var(--dim) 0 3px,transparent 3px 6px)}
.lc .tip .rprev small{color:var(--muted);font-weight:400;margin-left:4px}
.tipnote{display:block;width:100%;margin-top:8px;padding:7px 10px;border:0;border-radius:999px;background:var(--chip-bg);color:var(--fg);font-size:var(--fs-label);font-weight:600;text-align:center}
.tipform{display:flex;flex-direction:column;gap:6px;margin-top:8px;min-width:210px}
.tipform input{padding:7px 10px;font-size:var(--fs-note);border-radius:10px}
.tipform .tfb{display:flex;gap:6px;justify-content:flex-end}
.tipform .tfb button{padding:6px 12px;font-size:var(--fs-label)}
@media (hover:hover) and (pointer:fine){ .tipnote:hover{background:color-mix(in srgb,var(--fg) 12%,transparent)} }
@media (max-width:860px){ .tipnote,.tipform input,.tipform .tfb button{min-height:44px} }