/* CERESIA — shell condivisa: rail scura di marca a sinistra, piano di lavoro chiaro.
   Identità: verde lago profondo, carta calda, ottone per l'indicatore attivo. */
:root{
  --verde:#0f2f2c; --verde-2:#143b37; --verde-3:#1b4842;
  --ottone:#c9a45c; --ottone-soft:#f3e7c3;
  --paper:#ffffff; --bg:#f4f3ee; --bg-2:#ecebe4;
  --line:#dcdad2; --line-2:#e9e7e0; --line-3:#f1f0ea;
  --ink:#17201f; --ink-2:#4b544f; --muted:#7d857f; --muted-2:#a6aca7;
  --accent:#0f5e55; --accent-2:#0a4a43; --accent-soft:#e6f0ee;
  --ok:#2e7d4f; --warn:#b7791f; --no:#a83a2e; --no-soft:#f7e9e6;
  --rail-ink:#eeece4; --rail-muted:#9aa6a1; --rail-line:rgba(255,255,255,.08);
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:13px/1.5 var(--sans); -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1,"ss01" 1;
}
button,input,textarea{font:inherit; color:inherit}
a{color:var(--accent)}
.ic{width:15px; height:15px; flex-shrink:0; fill:none; stroke:currentColor;
    stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.ic.sm{width:13px; height:13px}
.ic.xs{width:11px; height:11px}
.cod{font-family:var(--mono); font-size:11px; letter-spacing:.02em; font-weight:500}
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-thumb{background:var(--line); border:2px solid transparent; background-clip:padding-box; border-radius:8px}
.rail ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); background-clip:padding-box}

.app{display:flex; height:100%; overflow:hidden}

/* ---------- rail di marca ---------- */
.rail{
  width:232px; flex-shrink:0; background:var(--verde); color:var(--rail-ink);
  display:flex; flex-direction:column; min-height:0;
}
.brand{display:flex; align-items:center; gap:10px; padding:18px 16px 16px; border-bottom:1px solid var(--rail-line)}
.brand .marchio{width:26px; height:26px; flex-shrink:0}
.brand .nome{display:flex; flex-direction:column; line-height:1.15}
.brand .nome b{font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase}
.brand .nome span{font-size:10.5px; color:var(--rail-muted); letter-spacing:.02em}
.brand .collassa{
  margin-left:auto; border:0; background:none; color:var(--rail-muted);
  width:24px; height:24px; display:grid; place-items:center; cursor:pointer; padding:0;
}
.brand .collassa:hover{color:var(--rail-ink)}
.rail .et{
  font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--rail-muted); padding:18px 16px 6px;
}
.rail .sep{border-top:1px solid var(--rail-line); margin:12px 0 0}
.rail .cresce{flex:1; min-height:0; overflow-y:auto}

.aree,.cartelle{padding:0 8px; display:grid; gap:1px; align-content:start}
.area,.cart{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  border:0; background:none; color:var(--rail-ink); font-size:13px;
  padding:7px 10px 7px 8px; border-radius:3px; cursor:pointer;
  border-left:2px solid transparent; opacity:.82;
}
.area .ic,.cart .ic{color:var(--rail-muted)}
.area:hover,.cart:hover{background:rgba(255,255,255,.06); opacity:1}
.area.on,.cart.on{background:rgba(255,255,255,.09); border-left-color:var(--ottone); opacity:1; font-weight:500}
.area.on .ic,.cart.on .ic{color:var(--ottone)}
.area .n,.cart .n{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--rail-muted)}
.cartelle hr{border:0; border-top:1px solid var(--rail-line); margin:8px 4px}

.rail-pie{padding:8px; border-top:1px solid var(--rail-line); display:grid; gap:1px}
.rlink{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; text-decoration:none;
  border:0; background:none; color:var(--rail-ink); font-size:13px; opacity:.82;
  padding:7px 10px; border-radius:3px; cursor:pointer;
}
.rlink .ic{color:var(--rail-muted)}
.rlink:hover{background:rgba(255,255,255,.06); opacity:1}
.rail .firma{padding:12px 16px 14px; border-top:1px solid var(--rail-line); font-size:11px; color:var(--rail-muted); line-height:1.5}
.rail .firma b{display:block; color:var(--rail-ink); font-weight:500}
#carica{cursor:pointer}
#carica.busy{opacity:.5; pointer-events:none}

/* ---------- testata del piano di lavoro ---------- */
.topbar{
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:0 24px; height:52px; display:flex; align-items:center; gap:14px; flex-shrink:0;
}
.burger{display:none; border:0; background:none; color:var(--ink); width:32px; height:32px; cursor:pointer; place-items:center}
.titolo,.briciole{display:flex; align-items:baseline; gap:10px; min-width:0}
.titolo b,.briciole b{font-size:14px; font-weight:600; white-space:nowrap}
.titolo span,.briciole span{font-size:12px; color:var(--muted); white-space:nowrap}
.dx{margin-left:auto; display:flex; align-items:center; gap:8px}

/* ---------- pulsanti ---------- */
.tb,.mini,.ghost{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  border:1px solid var(--line); background:var(--paper); color:var(--ink-2);
  padding:6px 11px; border-radius:3px; font-size:12.5px; font-weight:500; cursor:pointer; white-space:nowrap;
}
.tb:hover,.mini:hover,.ghost:hover{border-color:var(--ink-2); color:var(--ink)}
.tb .ic,.mini .ic,.ghost .ic{color:var(--muted)}
.mini{font-size:12px; padding:5px 9px}
.ghost{width:28px; height:28px; padding:0; justify-content:center}
.primario{background:var(--verde); border-color:var(--verde); color:#fff}
.primario:hover{background:var(--verde-3); border-color:var(--verde-3); color:#fff}
.primario .ic{color:var(--ottone)}
kbd{font:500 10.5px var(--mono); border:1px solid var(--line); border-bottom-width:2px; border-radius:3px; padding:0 4px; color:var(--muted); background:var(--paper)}

/* ---------- mobile ---------- */
.velo{display:none}
@media(max-width:1000px){
  .burger{display:grid}
  .rail{position:fixed; inset:0 auto 0 0; z-index:30; transform:translateX(-100%); transition:transform .2s ease}
  body.menu .rail{transform:none}
  body.menu .velo{display:block; position:fixed; inset:0; z-index:20; background:rgba(15,47,44,.45)}
  .topbar{padding:0 14px}
  .titolo span,.briciole span{display:none}
  .tb .testo{display:none}
}