/* ============================================================
   heyasia web · DESIGN SYSTEM HÍBRIDO (hub.css)
   Distribución de GitHub Copilot (sidebar + chat + panel, composer
   con modo/modelo/#contexto/slash) · cara cálida asia + Claude.
   Tokens reales de asia (tokens.ts). Tema light cream.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Inter:wght@400;500;600&display=swap');

:root{
  --bg:#FAF9F5; --surface:#FFFFFF; --surface-soft:#F2EFE8; --sidebar:#F4F1EA;
  --ink:#1A1A1A; --ink-soft:#5C5C5C; --ink-mute:#9A9A9A;
  --border:#E8E4DC; --border-soft:rgba(122,108,90,.16); --border-strong:#D4CEC0;
  --navy:#0A1F44; --navy-deep:#050E25;
  --orange:#D97757; --orange-soft:#FBEFE8; --orange-ink:#A8482A; --orange-deep:#C15F3C;
  --send:#FF6F61;
  --inacep:#E25A1B; --inacep-soft:#FCE9DC;
  --green:#2D7D5F; --green-soft:#E3F0EA; --amber:#C88B2D; --amber-soft:#FBF1DC; --red:#C0392B; --red-soft:#FBE7E4;
  --display:'Bricolage Grotesque',system-ui,sans-serif; --ui:'DM Sans',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
  --r:12px; --r-lg:16px; --r-xl:20px;
  --shadow-card:0 1px 2px rgba(0,0,0,.04); --shadow-pop:0 12px 32px -10px rgba(10,31,68,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;font-size:15px}
a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.muted{color:var(--ink-soft)} .mute2{color:var(--ink-mute)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;color:var(--ink)}

/* logo asia */
.iso{width:30px;height:30px;border-radius:8px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--ui);font-weight:700;font-size:18px;letter-spacing:-.05em;position:relative;flex:none}
.iso::after{content:"";position:absolute;right:5px;bottom:5px;width:5px;height:5px;border-radius:50%;background:var(--orange)}
.wm{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--ui);font-weight:700;font-size:18px;letter-spacing:-.04em;color:var(--ink)}
.wm .d{width:.34em;height:.34em;border-radius:50%;background:var(--orange);align-self:center;position:relative}
.wm.waves .d{animation:dBreath 2200ms ease-in-out infinite}
.wm.waves .d::before,.wm.waves .d::after{content:"";position:absolute;left:50%;top:50%;width:430%;height:430%;margin:-215% 0 0 -215%;border:1.4px solid var(--orange);border-radius:50%;opacity:0;transform:scale(.7);animation:dWave 2400ms cubic-bezier(.22,1,.36,1) infinite}
.wm.waves .d::after{animation-delay:1200ms}
@keyframes dBreath{0%,100%{opacity:.82}50%{opacity:1}}
@keyframes dWave{0%{opacity:.6;transform:scale(.7)}100%{opacity:0;transform:scale(2.2)}}

/* ───────── APP SHELL (distribución Copilot) ───────── */
.app{display:grid;grid-template-columns:264px 1fr;height:100vh;overflow:hidden}
.main{display:flex;min-width:0;overflow:hidden}
.chatcol{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}

/* SIDEBAR */
.side{display:flex;flex-direction:column;background:var(--sidebar);border-right:1px solid var(--border);min-height:0}
.side-top{padding:16px 14px 10px;display:flex;flex-direction:column;gap:12px}
.side-brand{display:flex;align-items:center;gap:9px}
.btn-new{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--border-strong);font-family:var(--ui);font-weight:600;font-size:13.5px;color:var(--ink);box-shadow:var(--shadow-card)}
.btn-new:hover{border-color:var(--orange)}
.side-scroll{flex:1;overflow:auto;padding:6px 8px}
.side-scroll::-webkit-scrollbar{width:0}
.side-sec{font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);padding:14px 8px 6px}
.side-item{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;font-family:var(--ui);font-weight:500;font-size:13.5px;color:var(--ink-soft);cursor:pointer}
.side-item:hover{background:rgba(0,0,0,.04);color:var(--ink)}
.side-item.active{background:var(--ink);color:#fff}
.side-item .ico{width:16px;height:16px;flex:none;display:grid;place-items:center}
.convo{display:block;padding:8px 9px;border-radius:8px;font-family:var(--ui);font-size:13px;color:var(--ink-soft);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.convo:hover{background:rgba(0,0,0,.04);color:var(--ink)}
.convo.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card)}
.side-foot{border-top:1px solid var(--border);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.apexpill{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--orange-soft);border:1px solid #F2D9CC;cursor:pointer}
.apexpill .d{color:var(--orange);font-size:14px}
.apexpill b{font-family:var(--ui);font-weight:700;font-size:13.5px;color:var(--orange-ink);font-variant-numeric:tabular-nums}
.apexpill span{font-family:var(--ui);font-weight:600;font-size:11px;color:var(--orange-ink);opacity:.8;text-transform:uppercase}
.userrow{display:flex;align-items:center;gap:9px;padding:6px 4px}
.uav{width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--ui);font-weight:700;font-size:11px;flex:none}

/* TOPBAR del chat */
.topbar{flex:none;display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border)}
.picker{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);font-family:var(--ui);font-weight:600;font-size:12.5px;color:var(--ink);cursor:pointer}
.picker .dim{color:var(--ink-mute);font-weight:500}
.topbar .sp{flex:1}
.iconbtn{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--ink-soft);border:1px solid transparent}
.iconbtn:hover{background:rgba(0,0,0,.04);color:var(--ink)}

/* THREAD (Claude: asia texto plano · usuario burbuja) */
.thread{flex:1;overflow:auto;padding:26px 0}
.thread::-webkit-scrollbar{width:8px}.thread::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px}
.tw{max-width:760px;margin:0 auto;padding:0 26px;display:flex;flex-direction:column;gap:22px}
.amsg{align-self:stretch;display:flex;flex-direction:column;gap:9px}
.amsg .who{display:flex;align-items:center;gap:7px;font-family:var(--ui);font-weight:600;font-size:12px;color:var(--ink-mute)}
.amsg .atext{font-family:var(--ui);font-weight:400;font-size:16px;line-height:25px;letter-spacing:-.1px;color:var(--ink)}
.amsg .atext b{font-weight:600}.amsg .atext .accent{color:var(--orange-ink);font-weight:500}
.umsg{align-self:flex-end;max-width:80%;background:var(--ink);color:#fff;font-family:var(--body);font-size:14.5px;line-height:21px;padding:11px 16px;border-radius:16px;border-bottom-right-radius:5px}
.conf{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:4px 10px;background:var(--surface);border:1px solid var(--border);border-radius:999px}
.conf .dot{width:6px;height:6px;border-radius:50%}.conf .lab{font-family:var(--ui);font-weight:600;font-size:10.5px}.conf .sep{width:1px;height:9px;background:var(--border)}.conf .src{font-family:var(--ui);font-weight:500;font-size:10.5px;color:var(--ink-mute)}
/* tool/referencias (Copilot) */
.refs{align-self:flex-start;display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 12px;max-width:100%}
.refs .h{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);display:flex;align-items:center;gap:7px}
.refchip{display:inline-flex;align-items:center;gap:6px;font-family:var(--ui);font-weight:500;font-size:12.5px;color:var(--ink)}
.refchip .sq{width:18px;height:18px;border-radius:5px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:9px;font-weight:700;flex:none}
/* follow-ups y slash */
.followups{align-self:flex-start;display:flex;flex-wrap:wrap;gap:8px}
.fchip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--border-strong);background:var(--surface);border-radius:999px;font-family:var(--ui);font-weight:500;font-size:13px;color:var(--ink);cursor:pointer}
.fchip:hover{border-color:var(--orange);background:var(--orange-soft)}
.fchip .pl{color:var(--orange);font-weight:700}

/* COMPOSER estilo Copilot (caja + toolbar) */
.composer{flex:none;padding:10px 0 18px}
.cwrap{max-width:760px;margin:0 auto;padding:0 26px}
.cbox{border:1px solid var(--border-strong);background:var(--surface);border-radius:16px;box-shadow:var(--shadow-pop);overflow:hidden}
.cctx{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 0}
.ctxchip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border:1px solid var(--border);background:var(--bg);border-radius:7px;font-family:var(--ui);font-weight:600;font-size:11.5px;color:var(--ink-soft)}
.ctxchip .x{color:var(--ink-mute)} .ctxchip .hash{color:var(--orange)}
.cinput{display:flex;align-items:flex-end;gap:10px;padding:10px 12px}
.cinput textarea{flex:1;border:0;outline:0;resize:none;background:transparent;font-family:var(--body);font-size:15px;line-height:22px;color:var(--ink);max-height:120px}
.cinput textarea::placeholder{color:var(--ink-mute)}
.ctools{display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--border)}
.tool{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface);font-family:var(--ui);font-weight:600;font-size:12px;color:var(--ink);cursor:pointer}
.tool:hover{border-color:var(--border-strong)} .tool .dim{color:var(--ink-mute);font-weight:500}
.ctools .sp{flex:1}
.mic{width:36px;height:36px;border-radius:50%;background:var(--surface-soft);display:grid;place-items:center;color:var(--ink);cursor:pointer}
.send{width:38px;height:38px;border-radius:50%;background:var(--send);display:grid;place-items:center;color:#fff;cursor:pointer;box-shadow:0 6px 16px -6px rgba(255,111,97,.6)}
.send.off{background:var(--surface-soft);color:var(--ink-mute);box-shadow:none}
.chint{max-width:760px;margin:7px auto 0;padding:0 28px;font-family:var(--ui);font-size:11px;color:var(--ink-mute);text-align:center}

/* EMPTY STATE (Copilot) */
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center}
.empty .big{width:54px;height:54px;border-radius:14px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--ui);font-weight:700;font-size:30px;letter-spacing:-.05em;position:relative;margin-bottom:6px}
.empty .big::after{content:"";position:absolute;right:9px;bottom:9px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.empty h1{font-size:1.7rem}
.suggs{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:540px;margin-top:18px;width:100%}
.sugg{text-align:left;padding:14px;border:1px solid var(--border);background:var(--surface);border-radius:14px;cursor:pointer}
.sugg:hover{border-color:var(--orange)}
.sugg .t{font-family:var(--ui);font-weight:600;font-size:14px;color:var(--ink)}
.sugg .s{font-family:var(--body);font-size:12.5px;color:var(--ink-soft);margin-top:3px}

/* PIZARRA (panel derecho · Claude artifacts / Copilot references) */
.panel{width:380px;flex:none;background:var(--surface-soft);border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.panel-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.panel-head .k{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.panel-body{flex:1;overflow:auto;padding:16px}
.psec{margin-bottom:20px}
.psec h4{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:10px}
.formula{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center;font-family:var(--ui);font-weight:600;font-size:24px}
.formula .pr{color:var(--orange)}
.check{display:flex;align-items:center;gap:10px;font-family:var(--ui);font-size:13px;color:var(--ink-soft);padding:8px 0;border-bottom:1px solid var(--border)}
.check .ic{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;flex:none}
.check .ic.ok{background:var(--green)}.check .ic.no{background:var(--red)}
.check .val{margin-left:auto;font-family:var(--ui);font-weight:600;color:var(--ink)}.check.fail .val{color:var(--red)}
.concl{margin-top:12px;background:var(--ink);color:#fff;border-radius:12px;padding:16px;display:flex;align-items:center;gap:14px}
.concl .ans{font-family:var(--display);font-weight:700;font-size:42px;letter-spacing:-.03em;color:var(--orange)}

/* genéricos: cards, botones, barras, ucl, ring (para flujo) */
.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ui);font-weight:600;font-size:14px;border-radius:12px;padding:12px 18px;cursor:pointer}
.btn-primary{background:var(--orange);color:#fff}.btn-dark{background:var(--ink);color:#fff}.btn-ghost{background:var(--surface);border:1px solid var(--border-strong);color:var(--ink)}
.bar{height:6px;background:rgba(0,0,0,.06);border-radius:999px;overflow:hidden}.bar>i{display:block;height:100%;border-radius:999px}
.s-green{background:var(--green)}.s-amber{background:var(--amber)}.s-red{background:var(--red)}
.ucl{padding:12px 14px;border:1px solid var(--border-soft);border-radius:12px;background:var(--surface);margin-bottom:10px}
.ucl.active{background:#FFF8F3;border-color:#F1D6C5;box-shadow:inset 3px 0 0 var(--orange)}
.ucl .top{display:flex;align-items:baseline;gap:8px}.ucl .code{font-family:var(--ui);font-weight:600;font-size:11px;color:var(--ink-mute)}.ucl .name{flex:1;font-family:var(--ui);font-weight:500;font-size:13.5px}.ucl .pct{font-family:var(--ui);font-weight:700}
.ring{width:128px;height:128px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) calc(var(--p,66)*1%),var(--surface-soft) 0)}.ring>div{width:100px;height:100px;border-radius:50%;background:var(--surface);display:grid;place-items:center;text-align:center}
.badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--ui);font-weight:600;font-size:.72rem;padding:.35em .8em;border-radius:999px}
.badge-green{background:var(--green-soft);color:var(--green)}.badge-inacep{background:var(--inacep-soft);color:var(--inacep)}.badge-orange{background:var(--orange-soft);color:var(--orange-ink)}

/* panel colapsado helper */
.panel.collapsed{display:none}
@media(max-width:1180px){.panel{display:none}}
@media(max-width:920px){.side{display:none}.app{grid-template-columns:1fr}}

/* ============================================================
   MULTI-SUITE · ASIA aloja sus suites (activity rail estilo VS Code/Copilot)
   rail(60) + suite-sidebar(248) + main(chat + workspace/pizarra)
   ============================================================ */
.hub{display:grid;grid-template-columns:60px 248px 1fr;height:100vh;overflow:hidden}
.hub.orq{grid-template-columns:60px 1fr}            /* orquestador: rail + chat/launcher */
.rail{background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:12px 0 10px;gap:4px}
.rail .logo{width:34px;height:34px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--ui);font-weight:700;font-size:19px;letter-spacing:-.05em;position:relative;margin-bottom:8px}
.rail .logo::after{content:"";position:absolute;right:5px;bottom:5px;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.railitem{width:46px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;border-radius:12px;color:var(--ink-soft);cursor:pointer;position:relative}
.railitem .ri{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:transparent}
.railitem .rl{font-family:var(--ui);font-weight:600;font-size:8.5px;letter-spacing:.01em;text-align:center;line-height:1.05;max-width:52px}
.railitem:hover{color:var(--ink)}.railitem:hover .ri{background:rgba(0,0,0,.05)}
.railitem.active{color:var(--ink)}
.railitem.active .ri{background:var(--ink);color:#fff}
.railitem.active::before{content:"";position:absolute;left:-12px;top:11px;width:3px;height:24px;border-radius:0 3px 3px 0;background:var(--orange)}
.railitem .dotacc{position:absolute;top:6px;right:4px;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--sidebar)}
.rail .sp{flex:1}
.rail-foot{display:flex;flex-direction:column;align-items:center;gap:8px}
.rail-foot .ax{font-family:var(--ui);font-weight:700;font-size:10px;color:var(--orange-ink);display:flex;flex-direction:column;align-items:center;line-height:1.1}
/* botón asia del rail = botón del tab móvil (AsiaCenterTab): dot pulsante + halo + 2 ondas radar */
.railasia .ri,.railasia:hover .ri,.railitem.railasia.active .ri{background:transparent!important;overflow:visible;position:relative}
.railasia .halo{position:absolute;width:24px;height:24px;border-radius:50%;background:rgba(217,119,87,.16)}
.railasia .dot{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--orange);box-shadow:0 0 6px rgba(217,119,87,.55);animation:tabDot 1400ms ease-in-out infinite}
.railasia .rg{position:absolute;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--orange);opacity:0;transform:scale(.5);animation:tabRing 2200ms linear infinite;pointer-events:none}
.railasia .rg.r2{animation-delay:1100ms}
.railasia .rl{color:var(--orange-ink)}
@keyframes tabDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.25);opacity:.6}}
@keyframes tabRing{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.6);opacity:0}}
/* badge de suite (NO es el logo asia) */
.sbadge{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;color:#fff;font-family:var(--ui);font-weight:700;font-size:15px;letter-spacing:-.02em;flex:none}
/* logo a● negro = asia-icon.svg real (en todos lados) */
.iso,.rail .logo,.welcome .mk{background:url('asia-icon.svg') center/contain no-repeat!important;color:transparent!important;font-size:0!important;box-shadow:none!important}
.iso::after,.rail .logo::after,.welcome .mk::after{display:none!important}

/* suite launcher (orquestador) */
.launch{max-width:860px;margin:0 auto;padding:8px 26px 40px;width:100%}
.suitegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1100px){.suitegrid{grid-template-columns:repeat(2,1fr)}}
.suitecard{text-align:left;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--surface);cursor:pointer;transition:.16s;display:flex;flex-direction:column;gap:8px}
.suitecard:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.suitecard .si{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;font-family:var(--ui);font-weight:700}
.suitecard .sn{font-family:var(--ui);font-weight:700;font-size:15px}
.suitecard .stg{font-family:var(--body);font-size:12.5px;color:var(--ink-soft);line-height:1.4}
.suitecard .smeta{margin-top:auto;display:flex;align-items:center;justify-content:space-between}
.suitecard .stat{font-family:var(--ui);font-weight:600;font-size:10.5px;padding:3px 8px;border-radius:999px}
.stat.on{background:var(--green-soft);color:var(--green)} .stat.exp{background:var(--surface-soft);color:var(--ink-mute)}
.stat.soon{background:var(--navy);color:#fff}

/* breadcrumb (asia › suite › producto) */
.crumb{display:flex;align-items:center;gap:8px;font-family:var(--ui);font-weight:500;font-size:13px;color:var(--ink-mute)}
.crumb a{color:var(--ink-soft)}.crumb a:hover{color:var(--ink)}
.crumb b{color:var(--ink);font-weight:700}
.crumb .sl{color:var(--ink-mute);font-size:11px}
/* cabecera de sección de gallery */
.galhead{max-width:880px;margin:0 auto;padding:4px 26px 0;width:100%}
.galhead h1{font-size:1.8rem}
.galcat{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin:26px 0 12px;display:flex;align-items:center;gap:8px}
.galcat::after{content:"";flex:1;height:1px;background:var(--border)}

/* ───────── POLISH del chat de asia ───────── */
@keyframes asiaSpin{to{transform:rotate(360deg)}}
@keyframes caretB{0%,49%{opacity:1}50%,100%{opacity:0}}
/* asia razonando */
.think{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 13px;display:flex;flex-direction:column;gap:8px;max-width:100%}
.think .th{font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);display:flex;align-items:center;gap:8px}
.think .th .spin{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--orange);border-right-color:transparent;animation:asiaSpin .9s linear infinite}
.think .st{display:flex;align-items:center;gap:8px;font-family:var(--ui);font-size:13px;color:var(--ink-soft)}
.think .st .ck{color:var(--green);font-weight:700;font-size:12px}
/* asia rutea a una suite */
.route{align-self:flex-start;display:flex;align-items:center;gap:12px;width:100%;max-width:430px;border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:12px 14px;cursor:pointer;transition:.16s;text-decoration:none}
.route:hover{border-color:var(--orange);box-shadow:var(--shadow-card);transform:translateY(-1px)}
.route .ri{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none}
.route .rt b{font-family:var(--ui);font-weight:700;font-size:14px;color:var(--ink);display:block;line-height:1.2}
.route .rt span{font-family:var(--body);font-size:12px;color:var(--ink-soft)}
.route .go{margin-left:auto;color:var(--ink-mute);font-size:20px}
/* acciones de mensaje (hover) */
.msgact{display:flex;gap:2px;margin-top:1px;opacity:.55}
.amsg:hover .msgact{opacity:1}
.msgact button{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--ink-mute)}
.msgact button:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.caret{display:inline-block;width:8px;height:1.05em;background:var(--ink);margin-left:2px;vertical-align:-2px;animation:caretB 1s steps(1) infinite}
/* estado vacío / bienvenida */
.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;text-align:center}
.welcome .mk{width:62px;height:62px;border-radius:16px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--ui);font-weight:700;font-size:34px;letter-spacing:-.05em;position:relative;margin-bottom:10px}
.welcome .mk::after{content:"";position:absolute;right:11px;bottom:11px;width:9px;height:9px;border-radius:50%;background:var(--orange)}
.welcome h1{font-size:1.9rem}
.welcome p{color:var(--ink-soft);margin-top:2px}
.wsuggs{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;margin-top:22px;width:100%}
.wsugg{text-align:left;display:flex;align-items:flex-start;gap:11px;padding:14px;border:1px solid var(--border);background:var(--surface);border-radius:14px;cursor:pointer;transition:.16s;text-decoration:none}
.wsugg:hover{border-color:var(--orange);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.wsugg .wi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:none}
.wsugg .wt b{font-family:var(--ui);font-weight:600;font-size:13.5px;color:var(--ink);display:block}
.wsugg .wt span{font-family:var(--body);font-size:12px;color:var(--ink-soft)}