/* Diseño 5 · MERIDIANO — dark navy rail + warm light canvas, teal accent (Front/ClickUp school). */
:root{
  --canvas:#F8F9FA;--surface:#FFFFFF;--ink:#16202B;--body:#404C59;--muted:#6C7883;--faint:#98A2AC;
  --hair:#E5E8EB;--hair2:#D6DBDF;--fill:#EFF1F3;--acc:#0D9488;--acc-h:#0B7C72;--acc-t:#E0F2F0;
  --sans:'DM Sans',system-ui,sans-serif;
}
body{background:var(--canvas)}

/* dark navy rail */
.side{background:#0F1B2D;border-right:none;color:#B7C4D6}
.brand b{color:#fff}
.mark{background:var(--acc);border-radius:7px}
.grp-l{color:#5D6E85}
.nv{color:#9FB0C3;border-radius:8px;position:relative}
.nv:hover{background:#182A44;color:#fff}
.nv.on{background:#1C2F4A;color:#fff}
.nv.on::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:2px;background:var(--acc)}
.nv .n{color:#7488A0}
.nv.on .n{color:#fff}
.side-foot{border-top-color:#1C2A3E}
.av{background:#1C2F4A;color:#C9D6E4}
.usr-t b{color:#E7EDF4}
.usr-t small{color:#7488A0}

/* light content */
.top{height:58px}
.btn{background:var(--acc);border-radius:9px;font-weight:600}
.btn:hover{background:var(--acc-h)}
.lang button.on{color:var(--acc)}
h1{font-size:18px;font-weight:700}
.st-v{font-weight:700}
.card,.stats{border-radius:12px;box-shadow:0 1px 2px rgba(22,32,43,.05)}
.seg .on{color:var(--acc)}

/* status: base dots, teal-family adjustments */
.s-ent::before{background:var(--acc)}
.ok{color:var(--acc)}
.st-s.up{color:var(--acc)}
.d-ok{color:var(--acc)}
.tli.done i{background:var(--acc);border-color:var(--acc)}
.pstage.good .pn{color:var(--acc)}

.capw i,.hb i b,.b2,.send,.act{background:var(--acc)}
.ln{stroke:var(--acc)}.pt{fill:var(--acc)}
.sw2{background:var(--acc)}
.nd{background:var(--acc)}
.m.me{background:var(--acc-t);border-color:#C8E8E4}
.pg.on{background:var(--acc-t);color:var(--acc)}
.lk:hover{color:var(--acc)}
.qr span:hover{border-color:var(--acc);color:var(--acc)}
.fs input{color:var(--ink)}
.comp input:focus{border-color:var(--acc)}
.badge{background:#0F1B2D}

/* panel signature: the control tower */
.tower{display:grid;grid-template-columns:280px 1fr;gap:24px;background:radial-gradient(120% 160% at 100% 0%,#12433E 0%,#0F1B2D 52%);border-radius:14px;padding:26px 28px;color:#fff;box-shadow:0 12px 32px -18px rgba(15,27,45,.55)}
.tw-lab{color:#6FA8A0}
.tw-n{font-size:52px;font-weight:700;line-height:1;letter-spacing:-.035em;margin-top:12px}
.tw-l{font-size:13px;color:#AEBFCE;margin-top:6px}
.tw-delta{font-size:12px;font-weight:600;color:#5EEAD4;margin-top:10px}
.tw-right{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-width:0}
.tw-steps{display:flex;align-items:center;gap:0;overflow-x:auto;padding-top:6px}
.tws{flex:1;min-width:70px;text-align:center;position:relative;padding-bottom:2px}
.tws::after{content:"";position:absolute;left:50%;right:-50%;top:34px;height:1px;background:#2A3B52;z-index:0}
.tws:last-child::after{display:none}
.tws b{display:block;font-size:17px;font-weight:700}
.tws i{font-style:normal;display:block;font-size:10.5px;color:#7C90A6;margin-top:9px;position:relative}
.tws i::before{content:"";display:block;width:7px;height:7px;border-radius:50%;background:#3A4E68;margin:0 auto 5px;position:relative;z-index:1}
.tws.hot b{color:#FBBF24}.tws.hot i::before{background:#FBBF24}
.tws.alert b{color:#FB7185}.tws.alert i::before{background:#FB7185}
.tws.done b{color:#5EEAD4}.tws.done i::before{background:#5EEAD4}
.tw-foot{display:flex;align-items:center;gap:12px;font-size:12px;color:#AEBFCE;border-top:1px solid #1E3048;padding-top:14px}
.tw-foot b{color:#fff;font-weight:700}
.twd{width:1px;height:14px;background:#1E3048}
.tw-warn{color:#FBBF24;font-weight:600}
@media(max-width:960px){.tower{grid-template-columns:1fr}}