/* ============================================================
   Phlou — App mockups · sistema visual
   Marca = tierra (cocoa / clay / sand). Señal = reservada.
   Manrope (display) · Plus Jakarta Sans (UI) · JetBrains Mono (dato)
   ============================================================ */
:root{
  /* ---- marca · Phlou Design System (navy / sage / beige) ---- */
  --brand:#2b4260; --brand-2:#4c6b8b; --brand-3:#7b99b1;
  --sage:#798976; --sage-2:#bcbfb0;
  --chart:#4c6b8b; --flow:#9aa893; --flow-sel:#5f7a59;

  /* ---- texto / estructura ---- */
  --ink:#1b2a3a; --ink-2:#34465a; --stone:#8893a1; --stone-2:#aab2bb;
  --line:#e8ebe2; --line-2:#dee2d7; --field-line:#dce0d4;
  --card:#ffffff; --paper:#f3f5ef;
  --bg:#f6f7f3; --bg-warm:#f1f3ec; --bg-deep:#e7ebe0;
  --sidebar:#f1f3ec; /* SIDEBAR/RAIL — color oficial del rail (= bg-warm). Documentado en Design System. */
  --sand:#eef1ea; --sand-2:#e5e9dd;

  /* ---- acento de marca (sustituye al “clay” terracota → navy) ---- */
  --clay:#2b4260; --clay-d:#22384f; --clay-tx:#34607f; --caramel:#4c6b8b;
  --peach:#e8eff4; --peach-br:#d4e0ea; --peach-hi:#f1f5f8;

  /* ---- señal · reservada (tonos no típicos del DS) ---- */
  --warning:#9c6a18; --warn-bg:#f3e4bd; --warn-tx:#7a5215;
  --critical:#af4a30; --crit-bg:#f1dacd; --crit-tx:#8f3a24;
  --ok:#3f7a4e; --ok-bg:#dbe9d4; --ok-tx:#356b43;

  /* ---- radios / sombras (DS) ---- */
  --r-sm:8px; --r-md:11px; --r-lg:14px; --r-xl:20px;
  --sh-card:0 1px 2px rgba(20,20,20,.04),0 6px 18px rgba(20,20,20,.05);
  --sh-panel:0 1px 2px rgba(20,20,20,.04),0 12px 40px rgba(20,20,20,.05);
  --sh-float:0 10px 30px rgba(20,20,20,.12);

  --font-display:"Manrope",system-ui,sans-serif;
  --font-body:"Manrope",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body,#root{height:100%}
body{font-family:var(--font-body);background:var(--bg-warm);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:14px}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input{font:inherit}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.disp{font-family:var(--font-display)}

/* ---------------- App shell ---------------- */
.app{display:flex;height:100vh;overflow:hidden}
/* entrance never gates visibility on opacity — frozen-animation iframes (preview/print) still show content */
.fade-in{animation:fade .35s ease}
@media (prefers-reduced-motion:reduce){.fade-in{animation:none}}
@keyframes fade{from{transform:translateY(8px)}to{transform:translateY(0)}}

/* rail */
.rail{width:62px;flex:0 0 62px;background:var(--sidebar);display:flex;flex-direction:column;
  align-items:center;padding:22px 0 16px;gap:30px}
.rail-brand{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--ink)}
.rail-brand .dot{width:7px;height:7px;border-radius:50%;background:var(--sage);
  animation:liveblink 1.5s ease-in-out infinite}
@keyframes liveblink{0%,100%{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--sage) 50%,transparent)}
  50%{opacity:.32;box-shadow:0 0 0 5px transparent}}
/* wrapper reserva la huella REAL del wordmark rotado (12×34 visual). El logo se
   centra en absoluto para que el giro pivotee EXACTO sobre el eje del rail —
   así el punto y el wordmark quedan alineados verticalmente como un solo lockup */
.rail-brand .wm-logo-wrap{position:relative;width:14px;height:38px}
.rail-brand .wm-logo{position:absolute;top:50%;left:50%;height:12px;width:auto;
  transform:translate(-50%,-50%) rotate(-90deg)}
.rail-brand .wm{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-body);
  font-weight:700;font-size:13px;letter-spacing:.04em}
.rail-nav{display:flex;flex-direction:column;gap:6px;margin-top:0}
.rail-nav button{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:var(--stone);
  transition:background .15s,color .15s}
.rail-nav button:hover{background:var(--bg-deep);color:var(--ink)}
.rail-nav button.on{background:var(--card);color:var(--clay);box-shadow:0 1px 2px rgba(42,29,20,.07)}
.rail-nav button.locked{opacity:.3;cursor:not-allowed}
.rail-nav button.locked:hover{background:transparent;color:var(--stone)}
.rail-nav svg{width:20px;height:20px;stroke-width:1.7;fill:none;stroke:currentColor}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:14px}
.rail-av{width:34px;height:34px;border-radius:50%;background:var(--caramel);color:#fff;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:13px;cursor:pointer}
.rail-foot button.ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--stone)}
.rail-foot button.ico:hover{background:var(--bg-deep);color:var(--ink)}
.rail-foot svg{width:18px;height:18px;stroke-width:1.7;fill:none;stroke:currentColor}

/* stage + panel (carries the rounded-corner data tool look) */
.stage{flex:1;display:flex;padding:20px 22px 0;min-width:0}
.panel{background:var(--card);border-radius:20px 20px 0 0;flex:1;display:flex;flex-direction:column;min-width:0;
  overflow:hidden;box-shadow:var(--sh-panel)}

/* topbar */
.topbar{display:flex;align-items:center;gap:12px;padding:16px 26px 0}
.crumb{font-family:var(--font-mono);font-size:11.5px;color:var(--stone);display:flex;align-items:center;gap:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb b{color:var(--ink);font-weight:500}
.crumb .sep{color:var(--line-2)}
.topbar-end{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{width:30px;height:30px;border-radius:8px;color:var(--stone);display:grid;place-items:center;
  transition:background .15s,color .15s}
.icon-btn:hover{background:var(--paper);color:var(--ink)}
.icon-btn svg{width:18px;height:18px;stroke-width:1.8;fill:none;stroke:currentColor}

.head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:12px 26px 18px}
.page-h1{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.03em;line-height:1.08}
.page-sub{font-size:13px;color:var(--stone);margin-top:5px}
.live{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  color:var(--ok-tx);background:var(--ok-bg);border-radius:999px;padding:7px 13px;white-space:nowrap;flex:none}
.live .pulse{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(107,140,79,.45)}70%{box-shadow:0 0 0 7px rgba(107,140,79,0)}100%{box-shadow:0 0 0 0 rgba(107,140,79,0)}}

/* primary / ghost buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px;padding:11px 17px;border-radius:11px;
  transition:opacity .15s,background .15s,transform .04s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px;stroke-width:2;fill:none;stroke:currentColor}
.btn-primary{background:var(--clay);color:#fff}
.btn-primary:hover{opacity:.9}
.btn-ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-2)}
.btn-ghost:hover{background:var(--paper)}

/* select-ish chip */
.selchip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--ink-2);
  border:1px solid var(--line-2);background:var(--card);border-radius:9px;padding:8px 12px}
.selchip svg{width:14px;height:14px;stroke-width:1.8;fill:none;stroke:var(--stone)}

/* ---------------- pills / signals / bars ---------------- */
.pill{font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:.02em;padding:4px 10px;
  border-radius:7px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok-tx)}
.pill.cl{background:var(--peach);color:var(--clay-tx)}
.pill.wn{background:var(--warn-bg);color:var(--warn-tx)}
.pill.ct{background:var(--crit-bg);color:var(--crit-tx)}
.pill.wt{background:var(--sand-2);color:var(--stone)}
.pill.nt{background:var(--sand-2);color:var(--ink-2)}

.sig{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;color:var(--ink-2);
  background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:4px 10px;white-space:nowrap}
.sig .d{width:6px;height:6px;border-radius:50%;flex:none}
.sig .d.ok{background:var(--ok)}.sig .d.wn{background:var(--warning)}
.sig .d.ct{background:var(--critical);animation:blink 1.2s ease-in-out infinite}
.sig .d.nt{background:var(--line-2)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.sig.empty{border-color:transparent;background:transparent;color:var(--stone-2)}

.bar{height:6px;background:var(--sand-2);border-radius:6px;overflow:hidden;flex:1;min-width:64px}
.bar i{display:block;height:100%;border-radius:6px}
.bar i.cl{background:var(--brand-2)}.bar i.ok{background:var(--ok)}
.bar i.wn{background:var(--warning)}.bar i.ct{background:var(--critical)}
.prog{display:flex;align-items:center;gap:10px;min-width:140px}
.pct{font-family:var(--font-mono);font-size:11px;color:var(--ink-2);width:36px;text-align:right}

/* monogram tile */
.mtile{width:30px;height:30px;border-radius:8px;flex:0 0 30px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--ink-2);background:var(--sand-2);
  box-shadow:inset 0 0 0 1px rgba(42,29,20,.05)}
.mtile.cl{background:var(--peach);color:var(--clay-tx)}
.mtile.wn{background:var(--warn-bg);color:var(--warn-tx)}
.mtile.ct{background:var(--crit-bg);color:var(--crit-tx)}

/* ---------------- tabs / tools row ---------------- */
.bar-row{display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid var(--line-2)}
.tabs{display:flex;align-items:center;gap:2px}
.tab{display:flex;align-items:center;gap:8px;padding:12px 13px;cursor:pointer;color:var(--ink-2);font-size:13px;
  font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .15s}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink);border-bottom-color:var(--clay)}
.tab .ct{font-family:var(--font-mono);font-size:11px;color:var(--stone)}
.tab svg{width:15px;height:15px;stroke-width:1.7;fill:none;stroke:var(--stone)}
.tab .plus{color:var(--stone);padding:0 6px;font-size:15px}
.tools{display:flex;align-items:center;gap:2px}
.tool{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:8px;cursor:pointer;color:var(--ink-2);
  font-size:12.5px;font-weight:500;transition:background .15s;white-space:nowrap}
.tool:hover{background:var(--paper)}
.tool svg{width:15px;height:15px;stroke-width:1.7;fill:none;stroke:currentColor}

/* ---------------- generic data table ---------------- */
.twrap{flex:1;overflow:auto;position:relative}
table.dt{width:100%;border-collapse:collapse;min-width:880px}
table.dt thead th{text-align:left;font-size:12px;font-weight:600;color:var(--stone);padding:13px 16px;letter-spacing:.01em;
  border-bottom:1px solid var(--line-2);position:sticky;top:0;background:var(--card);z-index:1;white-space:nowrap}
.dt th.c-chk,.dt td.c-chk{width:44px;padding-left:26px}
.dt th.c-num,.dt td.c-num{width:32px;color:var(--stone);text-align:right;padding-right:4px;
  font-family:var(--font-mono);font-size:11px}
.dt th.c-add{color:var(--stone);font-weight:500}
.dt th.c-add svg{width:12px;height:12px;vertical-align:-2px;margin-right:5px;stroke-width:2;fill:none;stroke:currentColor}
table.dt tbody td{padding:12.5px 16px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle;
  color:var(--ink);white-space:nowrap}
table.dt tbody tr{transition:background .12s;position:relative;cursor:pointer}
table.dt tbody tr:hover{background:var(--paper)}
td.muted{color:var(--ink-2)}
td.muted.m{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-2)}
.namecell{display:flex;align-items:center;gap:11px}
.nm{font-family:var(--font-display);font-weight:700;font-size:13.5px;letter-spacing:-.01em}
.nm small{display:block;font-family:var(--font-body);font-weight:500;font-size:11px;color:var(--stone);letter-spacing:0}
.chk{width:16px;height:16px;border:1.5px solid var(--line-2);border-radius:5px;background:var(--card);display:inline-block;vertical-align:middle}
.expand{position:absolute;right:18px;top:50%;transform:translateY(-50%);opacity:0;color:var(--stone-2);transition:opacity .15s}
tr:hover .expand{opacity:1}
.expand svg{width:15px;height:15px;stroke-width:2;fill:none;stroke:currentColor}
.tfade{position:absolute;left:0;right:0;bottom:0;height:48px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--card))}

/* ================= LOGIN ================= */
.login{display:flex;height:100vh;width:100%;background:var(--bg-warm)}
.login-art{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  padding:54px 56px;background:
    radial-gradient(120% 90% at 12% 8%, #e8eff4 0%, rgba(232,239,244,0) 55%),
    radial-gradient(120% 120% at 100% 100%, #e4ebde 0%, rgba(228,235,222,0) 60%),
    var(--sand)}
.login-art .pron{font-family:var(--font-mono);font-size:12px;color:var(--stone);display:flex;align-items:center;gap:9px}
.login-art .pron .d{width:6px;height:6px;border-radius:50%;background:var(--clay)}
.login-wm{width:min(60%,320px);height:auto}
.login-art .tag{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,38px);letter-spacing:-.03em;
  line-height:1.08;max-width:16ch;color:color-mix(in srgb,var(--ink) 82%,var(--stone));margin-top:30px}
.login-art .lede{color:var(--stone);font-size:14.5px;max-width:46ch;margin-top:16px;line-height:1.6}
.login-art .cent{border-left:3px solid var(--clay);padding-left:16px;font-size:13.5px;color:var(--ink-2);max-width:44ch;line-height:1.55}
.login-art .cent b{color:var(--ink);font-weight:600}
.login-form{flex:0 0 440px;display:flex;align-items:center;justify-content:center;padding:32px}
.login-card{width:100%;max-width:360px}
.login-card h2{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.025em}
.login-card .s{color:var(--stone);font-size:13.5px;margin:6px 0 28px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.input{width:100%;height:42px;border:1px solid var(--line-2);background:var(--card);border-radius:10px;padding:0 13px;
  color:var(--ink);transition:border-color .15s,box-shadow .15s}
.input::placeholder{color:var(--stone-2)}
.input:focus{outline:none;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(43,66,96,.14)}
.input-wrap{position:relative}
.input-wrap .slug{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);
  font-size:11.5px;color:var(--stone-2)}
.login-card .btn-primary{width:100%;justify-content:center;height:44px;margin-top:6px}
.login-card .alt{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--stone-2);font-size:11.5px}
.login-card .alt::before,.login-card .alt::after{content:"";height:1px;background:var(--line);flex:1}
.btn-oauth{width:100%;justify-content:center;height:42px;background:var(--card);border:1px solid var(--line-2);
  color:var(--ink-2);border-radius:10px;display:flex;align-items:center;gap:9px;font-weight:600;font-size:13px}
.btn-oauth:hover{background:var(--paper)}
.btn-oauth .soon{font-family:var(--font-mono);font-size:9.5px;color:var(--stone-2);border:1px solid var(--line-2);
  border-radius:5px;padding:1px 5px;margin-left:2px}
.login-card .foot{margin-top:22px;font-size:13px;color:var(--stone);text-align:center}
.login-card .foot a{color:var(--clay);font-weight:600}

/* ================= DASHBOARD ================= */
.scroll{flex:1;overflow:auto;padding:0 26px 40px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:16px 17px}
.stat .l{font-size:12px;color:var(--stone);display:flex;align-items:center;gap:7px}
.stat .l svg{width:14px;height:14px;stroke-width:1.8;fill:none;stroke:currentColor}
.stat .n{font-family:var(--font-mono);font-weight:600;font-size:27px;letter-spacing:-.04em;margin-top:9px;
  font-variant-numeric:tabular-nums}
.stat .n.clay{color:var(--clay)}
.stat .t{font-size:11.5px;color:var(--stone);margin-top:4px}
.stat .t .mono{color:var(--ink-2)}
.stat.alert{display:block;border-color:#ead7ad;background:linear-gradient(180deg,#fbf4de,var(--card))}
.stat.alert .l svg{stroke:var(--warn-tx)}
.stat.alert .n,.stat .n.clay{color:var(--crit-tx)}

.grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;align-items:start}
.block{border:1px solid var(--line);background:var(--card);border-radius:14px;overflow:hidden}
.block-h{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 13px}
.block-h .t{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.01em}
.block-h .a{font-size:12px;color:var(--clay);font-weight:600;cursor:pointer}
.block-h .a:hover{text-decoration:underline}

.ord{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 18px;
  border-top:1px solid var(--line);cursor:pointer;transition:background .12s}
.ord:hover{background:var(--paper)}
.ord .meta .top{display:flex;align-items:center;gap:9px}
.ord .meta .op{font-family:var(--font-mono);font-size:11px;color:var(--clay-tx);background:var(--peach);
  border-radius:5px;padding:1px 7px}
.ord .meta .gar{font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:-.01em}
.ord .meta .cli{font-size:11.5px;color:var(--stone);margin-top:3px}
.ord .mid{display:flex;flex-direction:column;gap:7px;min-width:0}
.ord .mid .prog{min-width:0}
.ord .right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ord .right .date{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-2)}
.ord .right .days{font-size:11px;color:var(--stone)}
.ord .right .days.soon{color:var(--crit-tx);font-weight:600}

.alerts{display:flex;flex-direction:column}
.alert{display:flex;gap:12px;padding:14px 18px;border-top:1px solid var(--line)}
.alert .sev{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center}
.alert .sev svg{width:15px;height:15px;stroke-width:2;fill:none;stroke:currentColor}
.alert .sev.ct{background:var(--crit-bg);color:var(--critical)}
.alert .sev.wn{background:var(--warn-bg);color:var(--warning)}
.alert .sev.ok{background:var(--ok-bg);color:var(--ok)}
.alert .body .t{font-weight:600;font-size:13px;line-height:1.35}
.alert .body .m{font-size:12px;color:var(--stone);margin-top:3px;line-height:1.45}
.alert .body .time{font-family:var(--font-mono);font-size:10px;color:var(--stone-2);margin-top:6px}

/* ================= ORDER DETAIL ================= */
.meta-strip{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:13px;overflow:hidden;
  margin:0 26px 4px}
.meta-strip .cell{flex:1;min-width:120px;padding:13px 16px;border-right:1px solid var(--line)}
.meta-strip .cell:last-child{border-right:none}
.meta-strip .k{font-size:10.5px;color:var(--stone);text-transform:uppercase;letter-spacing:.08em}
.meta-strip .v{font-weight:600;font-size:13.5px;margin-top:5px;display:flex;align-items:center;gap:7px}
.meta-strip .v .mono{font-weight:500}
.chiprow{display:flex;gap:5px;flex-wrap:wrap}
.szchip{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-2);background:var(--sand-2);border-radius:5px;padding:2px 7px}
.varchip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);background:var(--paper);
  border:1px solid var(--line);border-radius:6px;padding:3px 9px}
.varchip .sw{width:9px;height:9px;border-radius:3px}

/* DAG */
.dag-wrap{overflow:auto;padding:26px;background:
  radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 0) 0 0/22px 22px;
  background-color:var(--paper)}
.dag-canvas{position:relative}
.dag-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.dag-lane{position:absolute;border-radius:14px;border:1px dashed var(--line-2);background:rgba(255,255,255,.4)}
.dag-lane .lbl{position:absolute;top:-10px;left:14px;background:var(--paper);font-family:var(--font-mono);
  font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--stone);padding:0 7px}
.node{position:absolute;width:168px;background:var(--card);border:1px solid var(--line-2);border-radius:12px;
  padding:11px 12px;box-shadow:0 1px 2px rgba(20,20,20,.04),0 10px 24px -18px rgba(20,20,20,.22)}
.node .nh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.node .nn{font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:-.01em;line-height:1.15}
.node .dot{width:8px;height:8px;border-radius:50%;flex:none}
.node .dot.ok{background:var(--ok)}.node .dot.cl{background:var(--brand-2)}
.node .dot.wn{background:var(--warning)}.node .dot.ct{background:var(--critical);animation:blink 1.2s infinite}
.node .dot.nt{background:var(--line-2)}
.node .nmeta{display:flex;align-items:center;gap:8px;margin-top:9px;font-family:var(--font-mono);font-size:10px;color:var(--stone)}
.node .nbar{margin-top:9px}
.node.fin{border-color:var(--clay);box-shadow:0 0 0 1px var(--clay),0 10px 24px -18px rgba(43,66,96,.42)}
.node .finbadge{font-family:var(--font-mono);font-size:9px;color:var(--clay-tx);background:var(--peach);border-radius:4px;
  padding:1px 5px;margin-top:8px;display:inline-block}
.node .consumes{font-family:var(--font-mono);font-size:9px;color:var(--warn-tx);background:var(--warn-bg);border-radius:4px;
  padding:1px 5px;margin-top:8px;display:inline-block}

/* ================= SETTINGS ================= */
.set-shell{flex:1;display:flex;min-height:0}
.set-rail{width:228px;flex:0 0 228px;border-right:1px solid var(--line);padding:18px 14px;overflow:auto}
.set-rail .grp{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--stone-2);
  padding:0 10px;margin:16px 0 7px}
.set-rail .grp:first-child{margin-top:0}
.set-rail a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:13px;color:var(--ink-2);
  cursor:pointer;transition:background .12s,color .12s}
.set-rail a:hover{background:var(--paper);color:var(--ink)}
.set-rail a.on{background:var(--peach-hi);color:var(--clay-d);font-weight:600}
.set-rail a.locked{opacity:.4;cursor:not-allowed}
.set-rail a.locked:hover{background:transparent;color:var(--ink-2)}
.set-rail a svg{width:16px;height:16px;stroke-width:1.8;fill:none;stroke:currentColor}
.set-main{flex:1;overflow:auto;padding:24px 28px 40px;min-width:0}
.set-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.set-head .t{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.025em}
.set-head .s{font-size:13px;color:var(--stone);margin-top:5px;max-width:60ch;line-height:1.5}

/* plants cards */
.plant-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.plant{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:18px}
.plant .ph{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.plant .pn{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:-.01em}
.plant .pa{font-size:12px;color:var(--stone);margin-top:3px}
.plant .shift{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-2);background:var(--sand-2);border-radius:6px;
  padding:4px 9px;white-space:nowrap}
.mods{display:flex;flex-wrap:wrap;gap:8px}
.mod{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);border:1px solid var(--line-2);
  background:var(--paper);border-radius:8px;padding:7px 11px}
.mod .md{width:7px;height:7px;border-radius:50%;background:var(--caramel)}

/* toggle */
.tg{width:34px;height:20px;border-radius:999px;background:var(--line-2);position:relative;transition:background .15s;flex:none}
.tg::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.tg.on{background:var(--brand-2)}
.tg.on::after{left:16px}

/* shift template */
.shift-card{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:18px;margin-bottom:16px}
.timeline{position:relative;height:52px;margin-top:16px;border-radius:9px;overflow:hidden;background:var(--sand-2);display:flex}
.tl-seg{height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;
  border-right:1px solid rgba(255,255,255,.5)}
.tl-seg.work{background:var(--ok-bg);color:var(--ok-tx)}
.tl-seg.brk{background:var(--warn-bg);color:var(--warn-tx)}
.tl-seg.ot{background:var(--peach);color:var(--clay-tx)}

/* ================= THROUGHPUT CHART (dashboard) ================= */
.chart-block{margin-bottom:22px}
.chart-block .block-h .right{display:flex;align-items:center;gap:10px}
.chart-legend{display:flex;align-items:center;gap:14px;font-size:11.5px;color:var(--stone)}
.chart-legend .k{display:inline-flex;align-items:center;gap:6px}
.chart-legend .k .sw{width:9px;height:9px;border-radius:3px}
.chart-legend .k .sw.line{width:14px;height:3px;border-radius:2px;background:var(--chart)}
.chart-legend .k .sw.tgt{width:14px;height:0;border-top:2px dashed var(--stone-2)}
.chart-host{position:relative;height:236px;padding:6px 20px 16px}
.chart-host svg{width:100%;height:100%;display:block;overflow:visible}
.ctip{position:absolute;pointer-events:none;background:var(--card);border:1px solid var(--line-2);border-radius:11px;
  padding:10px 13px;box-shadow:var(--sh-float);white-space:nowrap;z-index:6;transition:left .07s,top .07s}
.ctip .d{font-family:var(--font-display);font-weight:700;font-size:12.5px}
.ctip .v{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:7px;font-size:12px;color:var(--ink-2)}
.ctip .v b{font-family:var(--font-mono);font-weight:600;color:var(--ink)}
.ctip .v .lab{display:inline-flex;align-items:center;gap:7px}
.ctip .v .lab .dd{width:7px;height:7px;border-radius:50%}

/* ================= KANBAN BOARD (Tablero) ================= */
.board-filters{display:flex;align-items:center;gap:6px;padding:2px 26px 14px;overflow-x:auto;scrollbar-width:none}
.board-filters::-webkit-scrollbar{display:none}
.all-pill{display:inline-flex;align-items:center;white-space:nowrap;cursor:pointer;border:1.5px solid var(--clay);
  border-radius:22px;padding:7px 18px;font-size:13px;font-weight:700;color:var(--clay-d);background:var(--peach-hi)}
.stage-f{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;cursor:pointer;padding:7px 12px;border-radius:8px;
  font-size:13px;font-weight:500;color:var(--ink-2);transition:background .15s,color .15s}
.stage-f:hover{color:var(--ink);background:var(--paper)}
.stage-f svg{width:15px;height:15px;stroke-width:1.7;fill:none;stroke:var(--stone)}
.stage-f .ct{font-family:var(--font-mono);font-size:11px;color:var(--stone)}
.board-filters .spacer{flex:1 0 6px}

.board{flex:1;display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding:4px 26px 26px;min-height:0}
.board::-webkit-scrollbar{height:9px}
.board::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
.bcol{flex:0 0 286px;width:286px;display:flex;flex-direction:column;min-height:0}
.bcol-h{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 12px}
.bcol-name{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.bcol-name .sd{width:8px;height:8px;border-radius:3px}
.bcol-name .ct{font-family:var(--font-mono);font-size:11px;color:var(--stone);font-weight:500}
.bcol-sum{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--ink-2)}
.bcol-cards{display:flex;flex-direction:column;gap:11px;flex:1;overflow-y:auto;padding:4px;border-radius:13px;
  scrollbar-width:none;transition:background .12s,box-shadow .12s}
.bcol-cards::-webkit-scrollbar{display:none}
.bcol-cards.over{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--peach-br)}

.bcard{background:var(--card);border:1px solid var(--line-2);border-radius:14px;padding:14px 14px 12px;cursor:grab;
  box-shadow:0 1px 2px rgba(42,29,20,.04);transition:box-shadow .15s,border-color .15s,opacity .12s;position:relative}
.bcard:hover{box-shadow:0 6px 18px -8px rgba(20,20,20,.13);border-color:var(--brand-3)}
.bcard.dragging{opacity:.35}
.bcard.ct{border-color:var(--crit-bg);box-shadow:0 0 0 1px var(--crit-bg),0 6px 18px -10px rgba(175,74,48,.3)}
.bcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.bcard .gar{font-family:var(--font-display);font-weight:700;font-size:14.5px;letter-spacing:-.02em;line-height:1.25}
.bcard .op{font-family:var(--font-mono);font-size:10.5px;color:var(--stone);margin-top:3px}
.bcard .cli{font-size:11.5px;color:var(--ink-2);margin-top:2px;line-height:1.35}
.bcard-prog{margin-top:13px}
.bcard-foot{display:flex;align-items:center;justify-content:space-between;margin-top:13px;gap:8px}
.bcard .due{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10.5px;color:var(--stone)}
.bcard .due svg{width:12px;height:12px;stroke-width:1.8;fill:none;stroke:var(--stone-2)}
.bcard .due.soon{color:var(--crit-tx)}
.bcard .due.soon svg{stroke:var(--crit-tx)}
.add-card{border:1.5px dashed var(--line-2);border-radius:12px;padding:10px;display:flex;align-items:center;justify-content:center;gap:7px;
  color:var(--stone);font-weight:500;font-size:12.5px;cursor:pointer;transition:all .15s;background:transparent}
.add-card:hover{border-color:var(--caramel);color:var(--ink-2);background:var(--paper)}
.add-card svg{width:13px;height:13px;stroke-width:2;fill:none;stroke:currentColor}

@media(max-width:1020px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
  .plant-grid{grid-template-columns:1fr}
  .login-art{display:none}
}