/* Panel de seguimiento — El Especialista (7 Días). Sistema visual de la ficha. */
:root{
  --bg:#ffffff;
  --paper:#f6f5f1;
  --ink:#0a0a0a;
  --muted:#5c5c58;
  --faint:#8c8c86;
  --hair:rgba(10,10,10,.10);
  --hair-strong:rgba(10,10,10,.18);
  --accent:#ffd60a;
  --accent-ink:#000000;
  --band:#17181a;
  --band-ink:#f5f4f0;
  --band-muted:#b7b6b1;
  --band-hair:rgba(255,255,255,.12);
  --ok:#1f7a4d;
  --warn:#a86400;
  --bad:#b3261e;
  --live:#1c5fb8;
  --ok-bg:rgba(31,122,77,.10);
  --warn-bg:rgba(168,100,0,.10);
  --bad-bg:rgba(179,38,30,.09);
  --live-bg:rgba(28,95,184,.09);
  --display:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  --body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111214;--paper:#1a1b1e;--ink:#f2f1ec;--muted:#b1b0aa;--faint:#86857f;
    --hair:rgba(255,255,255,.10);--hair-strong:rgba(255,255,255,.18);
    --band:#000000;--band-ink:#f5f4f0;--band-muted:#aeada7;--band-hair:rgba(255,255,255,.14);
    --ok:#5fcf97;--warn:#f0b04a;--bad:#ff8a80;--live:#8ab8ff;
    --ok-bg:rgba(95,207,151,.12);--warn-bg:rgba(240,176,74,.12);--bad-bg:rgba(255,138,128,.11);--live-bg:rgba(138,184,255,.12);
  }
}
:root[data-theme="dark"]{
  --bg:#111214;--paper:#1a1b1e;--ink:#f2f1ec;--muted:#b1b0aa;--faint:#86857f;
  --hair:rgba(255,255,255,.10);--hair-strong:rgba(255,255,255,.18);
  --band:#000000;--band-ink:#f5f4f0;--band-muted:#aeada7;--band-hair:rgba(255,255,255,.14);
  --ok:#5fcf97;--warn:#f0b04a;--bad:#ff8a80;--live:#8ab8ff;
  --ok-bg:rgba(95,207,151,.12);--warn-bg:rgba(240,176,74,.12);--bad-bg:rgba(255,138,128,.11);--live-bg:rgba(138,184,255,.12);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
.wrap.narrow{max-width:880px}

/* Banda superior */
.band{background:var(--band);color:var(--band-ink);padding-block:22px 28px}
.band .wrap{display:grid;gap:16px}
.topline{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--band-muted);display:flex;flex-wrap:wrap;gap:6px 14px;margin:0}
.eyebrow b{color:var(--accent);font-weight:500}
.eyebrow a{color:var(--band-muted);text-decoration:none}
.eyebrow a:hover{color:var(--band-ink)}
h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(36px,6vw,60px);line-height:.95;letter-spacing:.005em;margin:0;text-wrap:balance}
.who{font-size:16px;color:var(--band-muted);margin:0;max-width:66ch}
.who strong{color:var(--band-ink);font-weight:500}
.sync{font-family:var(--mono);font-size:11.5px;color:var(--band-muted);display:flex;align-items:center;gap:10px}
#sync{display:inline-flex;align-items:center;gap:7px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);display:inline-block}
.dot.off{background:var(--bad)}
.dot.demo{background:var(--accent)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12.5px;font-weight:500;padding:5px 10px;border-radius:999px;border:1px solid var(--band-hair);color:var(--band-ink)}
.chip.hot{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

.actions{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-weight:600;font-size:14px;text-decoration:none;padding:10px 15px;border-radius:10px;border:1px solid var(--band-hair);color:var(--band-ink);background:transparent;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.small{padding:7px 11px;font-size:13px}
.btn:hover{filter:brightness(1.08)}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn:focus-visible,.copy:focus-visible,summary:focus-visible,.row:focus-visible,.filter:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;background:var(--band);border:1px solid var(--band-hair);border-radius:12px;overflow:hidden;margin:0}
.contact div{background:var(--band);box-shadow:0 0 0 .5px var(--band-hair);padding:10px 14px;display:grid;gap:2px;min-width:0}
.contact dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--band-muted)}
.contact dd{margin:0;font-size:14.5px;overflow-wrap:anywhere}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Embudo */
.funnel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;background:var(--band);border:1px solid var(--band-hair);border-radius:12px;overflow:hidden}
.funnel div{background:var(--band);box-shadow:0 0 0 .5px var(--band-hair);padding:14px 16px;display:grid;gap:4px;min-width:0}
.funnel span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--band-muted)}
.funnel strong{font-family:var(--display);font-weight:400;font-size:40px;line-height:1;font-variant-numeric:tabular-nums}
.funnel small{font-family:var(--mono);font-size:11.5px;color:var(--band-muted)}
.funnel .hot strong{color:var(--accent)}
@media (max-width:720px){.funnel{grid-template-columns:repeat(2,minmax(0,1fr))}.funnel div:last-child{grid-column:1/-1}}

/* Cuerpo */
main{padding-block:30px 60px}
main .wrap{display:grid;gap:40px}
section{display:grid;gap:14px;min-width:0;align-content:start}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:8px 16px;flex-wrap:wrap}
h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:26px;line-height:1;letter-spacing:.01em;margin:0}
h3{font-size:15px;font-weight:600;margin:0}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0}
.muted{color:var(--muted)}
.lead{font-size:16.5px;max-width:70ch;margin:0}
p{margin:0}
.empty{background:var(--paper);border:1px dashed var(--hair-strong);border-radius:12px;padding:16px 18px;color:var(--muted)}

/* Estados */
.state{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.s-ok{background:var(--ok-bg);color:var(--ok)}
.s-warn{background:var(--warn-bg);color:var(--warn)}
.s-bad{background:var(--bad-bg);color:var(--bad)}
.s-live{background:var(--live-bg);color:var(--live)}
.s-hot{background:var(--accent);color:var(--accent-ink)}
.s-mute{background:var(--paper);color:var(--muted);border:1px solid var(--hair)}

/* Requiere atención */
.alerts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.alert{position:relative;background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:14px 16px 14px 20px;display:grid;gap:6px;overflow:hidden}
.alert::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--faint)}
.alert.alta::before{background:var(--bad)}
.alert.media::before{background:var(--warn)}
.alert.baja::before{background:var(--live)}
.alert header{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.alert p{font-size:14px;color:var(--muted)}
.alert a{font-size:13.5px;font-weight:600;text-decoration-thickness:1px;text-underline-offset:3px;justify-self:start}

/* Filtros */
.tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.filter{font-family:var(--body);font-size:13px;font-weight:500;padding:6px 11px;border-radius:999px;border:1px solid var(--hair-strong);background:var(--bg);color:var(--ink);cursor:pointer}
.filter[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.filter em{font-style:normal;font-family:var(--mono);font-size:11.5px;opacity:.7;margin-left:4px}
.search{font-family:var(--body);font-size:14px;padding:8px 12px;border-radius:10px;border:1px solid var(--hair-strong);background:var(--bg);color:var(--ink);width:min(260px,100%)}

/* Lista */
.list{border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.row{display:grid;grid-template-columns:minmax(0,2.2fr) 150px 60px 120px 120px minmax(0,1.2fr);gap:14px;align-items:center;padding:12px 16px;border-top:1px solid var(--hair);text-decoration:none;color:inherit}
.row:first-child{border-top:0}
.row.head{background:var(--paper);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding-block:9px}
a.row:hover{background:var(--paper)}
.row .name{display:grid;min-width:0}
.row .name strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .name span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .c{font-size:13.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flag{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px}
@media (max-width:760px){
  .row.head{display:none}
  .row{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .row .c.turnos,.row .c.inicio{display:none}
  .row .name{grid-area:1/1}
  .row>span:nth-child(2){grid-area:1/2;justify-self:end}
  .row .c.anuncio{grid-area:2/1}
  .row .c.ultima{grid-area:2/2;text-align:right}
  .funnel strong{font-size:32px}
  .funnel div{padding:12px 14px}
}

/* Ficha */
.cita{background:var(--ok-bg);border:1px solid var(--ok);border-radius:12px;padding:14px 16px;display:grid;gap:4px}
.cita strong{font-size:17px}
.lectura{background:var(--paper);border:1px solid var(--hair);border-radius:14px;padding:20px;display:grid;gap:18px}
.prio{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:baseline}
ul.dots,ol.qs{margin:0;padding-left:20px;display:grid;gap:8px;max-width:72ch}
.msgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:14px}
.msg{background:var(--bg);border:1px solid var(--hair);border-radius:12px;padding:14px 16px;display:grid;gap:10px;align-content:start}
.msg header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.msg header span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.msg pre{margin:0;white-space:pre-wrap;font-family:var(--body);font-size:14.5px;line-height:1.55}
.copy{font-family:var(--body);font-size:13px;font-weight:600;padding:6px 11px;border-radius:8px;border:1px solid var(--hair-strong);background:var(--bg);color:var(--ink);cursor:pointer}
.copy[data-done]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:30px}
.facts{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.facts li{padding:10px 12px;border:1px solid var(--hair);border-radius:10px;font-size:14.5px}

.timeline{margin:0;padding:0;list-style:none;display:grid;gap:0;border-left:2px solid var(--hair-strong);margin-left:5px}
.timeline li{position:relative;padding:0 0 14px 18px;display:grid;gap:2px}
.timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--faint)}
.timeline li.ok::before{border-color:var(--ok);background:var(--ok)}
.timeline li.warn::before{border-color:var(--warn)}
.timeline li.bad::before{border-color:var(--bad);background:var(--bad)}
.timeline time{font-family:var(--mono);font-size:11.5px;color:var(--faint)}
.timeline span{font-size:14.5px}
.timeline small{font-size:13px;color:var(--muted)}

details.conv{border:1px solid var(--hair);border-radius:12px}
details.conv summary{cursor:pointer;padding:14px 16px;font-weight:600;list-style-position:inside}
.chat{display:grid;gap:14px;padding:4px 16px 18px}
.turn{display:grid;gap:5px}
.turn.e{justify-items:start}
.role{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bubble{padding:10px 14px;border-radius:12px;max-width:72ch;white-space:pre-wrap;font-size:14.5px;overflow-wrap:anywhere}
.bubble.p{background:var(--paper);border:1px solid var(--hair)}
.bubble.e{border:1px solid var(--hair-strong)}
.bubble.fail{border-color:var(--bad);background:var(--bad-bg)}
.alerta{font-size:12.5px;color:var(--bad);font-weight:600}

.other{background:var(--paper);border:1px solid var(--hair);border-radius:14px;padding:18px}
.other dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 18px;margin:0}
.other dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.other dd{margin:2px 0 0;overflow-wrap:anywhere;font-size:14px}

.error{background:var(--bad-bg);border:1px solid var(--bad);color:var(--ink);border-radius:12px;padding:14px 16px}
.skeleton{height:14px;border-radius:6px;background:var(--hair);max-width:420px}
footer{padding-block:0 40px;color:var(--faint);font-family:var(--mono);font-size:11.5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}