/* Parte da app/css/stile.css di Officina: stessi colori di base, stesso
   marchio, stessi controlli (card, filtri a pillola, seg, toast, overlay),
   perche' le due app le usano le stesse persone. Pensato per il telefono
   per primo, usabile da computer. */
:root{
  --bg:#f4f5f7; --card:#fff; --ink:#111827; --muted:#6b7280; --line:#e2e5ea;
  --ok:#15803d; --ok-bg:#dcfce7; --warn:#a16207; --warn-bg:#fef3c7;
  --bad:#b91c1c; --bad-bg:#fee2e2; --accent:#1d4ed8; --accent-ink:#fff;
  --fuori:#334155; --fuori-bg:#e2e8f0;
  --tap:52px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); padding-bottom:96px;
}
header{
  position:sticky; top:0; z-index:20; background:var(--ink); color:#fff;
  padding:10px 14px; display:flex; align-items:center; gap:10px;
}
header .marchio{border-radius:7px; flex:0 0 auto}
header .t{font-weight:700; font-size:17px; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
header #who{font-size:14px; color:#d1d5db; white-space:nowrap}
header button{
  background:#374151; color:#fff; border:0; border-radius:10px;
  min-height:40px; padding:0 14px; font-size:15px; font-weight:600; white-space:nowrap;
}
main{padding:12px; max-width:820px; margin:0 auto}
button{font-family:inherit; cursor:pointer}
a{color:var(--accent); font-weight:600}

.card{background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px; margin-bottom:12px}
/* Niente maiuscolo di enfasi (convenzione di Officina, fase 5): il peso
   visivo viene dal colore attenuato e dal grassetto. */
h2{font-size:15px; font-weight:700; color:var(--muted); margin:0 0 10px}

/* --- filtri a pillola --- */
.filters{display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters button{
  flex:0 0 auto; background:#fff; border:1px solid var(--line); color:var(--ink);
  border-radius:999px; min-height:42px; padding:0 16px; font-size:15px; font-weight:600;
}
.filters button[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}

textarea{
  width:100%; min-height:84px; border:1.5px solid var(--line); border-radius:11px;
  padding:11px; font-family:inherit; font-size:16px; line-height:1.4; resize:vertical; background:#fff; color:var(--ink);
}
textarea.alta{min-height:220px}
select, input[type=text], input[type=search], input[type=password], input[type=date]{
  width:100%; min-height:var(--tap); border:1.5px solid var(--line);
  border-radius:11px; padding:0 11px; font-family:inherit; font-size:16px; background:#fff; color:var(--ink);
}
#cerca{margin-bottom:12px}

/* --- bande della vista Lavoro --- */
/* <details>: una banda si apre e si chiude con un tocco sul titolo, e da
   chiusa mostra solo il numero. */
.banda{margin-bottom:12px}
.banda summary{
  list-style:none; display:flex; align-items:center; gap:10px; cursor:pointer;
  min-height:44px; padding:0 4px; font-size:15px; font-weight:700; color:var(--muted);
}
.banda summary::-webkit-details-marker{display:none}
.banda summary::before{content:"›"; font-size:20px; line-height:1; transition:transform .15s}
.banda[open] summary::before{transform:rotate(90deg)}
.banda summary .num{
  margin-left:auto; background:#e5e7eb; color:var(--ink); border-radius:999px;
  padding:2px 10px; font-size:13.5px;
}
.banda-adesso summary{color:var(--bad)}
.banda-adesso summary .num{background:var(--bad-bg); color:var(--bad)}
.banda-ritardo summary{color:var(--warn)}
.banda-ritardo summary .num{background:var(--warn-bg); color:var(--warn)}

/* --- riga di un'op --- */
.op-riga{
  display:flex; flex-direction:column; align-items:flex-start; gap:5px; width:100%;
  text-align:left; background:var(--card); color:inherit; font:inherit;
  border:1px solid var(--line); border-left:5px solid var(--line); border-radius:12px;
  padding:11px 13px; margin-bottom:8px; min-height:var(--tap);
}
.op-titolo{font-weight:700; font-size:16px; line-height:1.3; overflow-wrap:anywhere}
.op-titolo.grande{font-size:20px}
/* Il titolo ricavato dalla descrizione si vede che e' ricavato: corsivo e
   senza grassetto. Il titolo vero e' dritto. */
.op-titolo.ricavato{font-style:italic; font-weight:500}
.op-sotto{display:flex; flex-wrap:wrap; gap:3px 12px; font-size:13px; color:var(--muted)}
.op-id{font-size:12.5px; color:var(--muted); letter-spacing:.02em; overflow-wrap:anywhere}
.op-sotto .op-id{font-weight:600}
.op-tempo{font-size:14px; font-weight:600}
.op-tempo.grande{font-size:16px; margin-top:8px}
/* Il colore non e' mai l'unico segnale: la banda ha il suo titolo e la riga
   dice a parole "in ritardo di 5 giorni". */
.b-adesso{border-left-color:var(--bad)}
.b-adesso .op-tempo{color:var(--bad)}
.b-ritardo{border-left-color:var(--warn)}
.b-ritardo .op-tempo{color:var(--warn)}
.b-daFare{border-left-color:var(--accent)}
.b-attesa{border-left-color:var(--fuori)}
.b-attesa .op-tempo{color:var(--fuori)}
.b-parcheggiate{border-left-color:#cbd5e1}
.b-parcheggiate .op-tempo{color:var(--muted)}
.b-chiuse{border-left-color:var(--ok)}
.b-chiuse .op-tempo{color:var(--ok)}

/* --- righe del Vassoio --- */
/* Oltre i cinque giorni un segnale e' "fermo da N giorni", in evidenza: lo
   dice la frase, il colore la accompagna. */
.seg-riga{border-left-color:var(--accent)}
.seg-riga.fermo{border-left-color:var(--bad)}
.fermo .op-tempo, .op-tempo.fermo{color:var(--bad)}
.seg-chiuso{flex-direction:row; align-items:center; gap:10px; border-left-color:#cbd5e1; padding:0 13px 0 0}
.seg-chiuso .seg-apri{
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  text-align:left; background:none; border:0; padding:11px 0 11px 13px; color:inherit; font:inherit;
}
.seg-chiuso .op-tempo{color:var(--muted)}
.seg-riprendi{
  flex:0 0 auto; min-height:44px; padding:0 14px; border:1.5px solid var(--line);
  background:#fff; border-radius:11px; font-size:15px; font-weight:600; color:var(--ink);
}
.risultato[aria-pressed="true"]{border-color:var(--accent); background:#eff6ff}

/* --- scheda di un'op --- */
.op-testa{border-left:5px solid var(--line)}
.op-testa .meta{margin-top:6px}
.op-testa a{overflow-wrap:anywhere}
.etichette{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.badge{font-size:12.5px; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap}
.b-ok{background:var(--ok-bg); color:var(--ok)}
.b-warn{background:var(--warn-bg); color:var(--warn)}
.b-bad{background:var(--bad-bg); color:var(--bad)}
.b-fuori{background:var(--fuori-bg); color:var(--fuori)}
.b-grey{background:#eef0f3; color:var(--muted)}
.meta{display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--muted); font-size:14px}

/* Il testo importato dal registro: lungo, senza a capo propri. */
.testo{font-size:15.5px; line-height:1.55; overflow-wrap:anywhere; white-space:pre-wrap}
.testo code{background:#eef0f3; border-radius:5px; padding:1px 5px; font-size:14px}
button.link{
  background:none; border:0; padding:8px 0 0; color:var(--accent);
  font-size:15px; font-weight:600; min-height:40px;
}
.ripiegata summary{font-size:15px; font-weight:700; color:var(--muted); cursor:pointer; min-height:28px}
.ripiegata[open] summary{margin-bottom:10px}

.btn-grande{
  width:100%; min-height:58px; border:0; border-radius:13px;
  font-family:inherit; font-weight:700; font-size:17px; background:var(--accent); color:var(--accent-ink);
}
.btn-grande.ghost{background:#e5e7eb; color:var(--ink); font-size:16px}
.btn-grande:disabled{opacity:.45}
.azioni-op .btn-grande + .btn-grande{margin-top:8px}
.altro{margin-top:10px}
.altro summary{
  list-style:none; cursor:pointer; text-align:center; min-height:44px; line-height:44px;
  font-weight:600; color:var(--muted);
}
.altro summary::-webkit-details-marker{display:none}
.altro-griglia{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:4px}
.altro-griglia button{
  min-height:var(--tap); border:1.5px solid var(--line); background:#fff;
  border-radius:11px; font-size:15px; font-weight:600; color:var(--ink);
}

/* --- storico --- */
.ev{border-top:1px solid var(--line); padding:11px 0}
.ev:first-child{border-top:0}
.ev .when{font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center}
.ev .note{margin-top:6px; font-size:14.5px; white-space:pre-wrap; overflow-wrap:anywhere}
.tag{background:#eef0f3; border-radius:7px; padding:3px 8px; font-size:13px}
.kind{font-weight:700; font-size:12px; padding:2px 7px; border-radius:6px; background:#eef0f3; color:var(--ink)}
.k-chiusa, .k-segnale_aperto, .k-segnale_agganciato{background:var(--ok-bg); color:var(--ok)}
.k-riaperta, .k-segnale_ripreso{background:var(--warn-bg); color:var(--warn)}
.k-attesa, .k-fine_attesa{background:var(--fuori-bg); color:var(--fuori)}
.k-nota, .k-testo{background:#dbeafe; color:#1e40af}
.k-segnale_scartato, .k-segnale_doppione{background:#eef0f3; color:var(--muted)}

/* --- fogli di conferma --- */
/* Appesi a document.body: un render() di mezzo non li ridisegna. Da
   telefono salgono dal basso, da computer stanno al centro. */
.overlay{
  position:fixed; inset:0; z-index:70; background:rgba(17,24,39,.55);
  display:flex; align-items:flex-end; justify-content:center;
}
.foglio{
  background:var(--card); border-radius:18px 18px 0 0; padding:18px 16px 20px;
  width:100%; max-width:560px; max-height:92vh; overflow-y:auto;
}
.foglio h2{font-size:17px; color:var(--ink); overflow-wrap:anywhere}
.campo{display:block; font-size:14px; font-weight:600; color:var(--muted); margin-bottom:14px}
.campo > input, .campo > textarea, .campo > select, .campo > div{margin-top:6px}
.campo input, .campo textarea, .campo select{font-weight:400}
.scelte{display:flex; flex-wrap:wrap; gap:8px}
.scelte button{
  flex:1 1 auto; min-height:var(--tap); padding:0 14px; border:1.5px solid var(--line);
  background:#fff; border-radius:11px; font-size:15px; font-weight:600; color:var(--ink);
}
.scelte button[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}
.spunta{display:flex; align-items:center; gap:10px; min-height:var(--tap); font-size:15.5px; margin-bottom:14px}
.spunta input{width:24px; height:24px; flex:0 0 auto}
.foglio-azioni{display:flex; gap:8px; margin-top:6px}
.foglio-azioni button{
  flex:1; min-height:58px; border:0; border-radius:13px;
  font-size:17px; font-weight:700; background:var(--accent); color:var(--accent-ink);
}
.foglio-azioni button.ghost{flex:0 0 auto; padding:0 20px; background:#e5e7eb; color:var(--ink); font-size:15px}
.foglio-azioni button:disabled{opacity:.45}
.avviso{color:var(--bad); font-size:14.5px; margin:0 0 12px; font-weight:600}

/* cerca un'op (o un segnale) dentro un foglio */
.risultati{display:flex; flex-direction:column; gap:6px}
.risultato{
  text-align:left; background:#fff; border:1.5px solid var(--line); border-radius:11px;
  padding:9px 11px; font-size:15px; color:var(--ink); overflow-wrap:anywhere;
}
.scelta{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  border:1.5px solid var(--accent); border-radius:11px; padding:9px 11px;
  font-size:15px; font-weight:400; color:var(--ink); overflow-wrap:anywhere;
}
.scelta button.link{padding:0; flex:0 0 auto}

/* --- barra in basso: Lavoro e Vassoio, ognuna con il suo numero --- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex;
  background:rgba(255,255,255,.97); border-top:1px solid var(--line);
  backdrop-filter:blur(8px); padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button{
  flex:1; min-height:62px; border:0; background:none; font-size:16px; font-weight:600;
  color:var(--muted); display:flex; align-items:center; justify-content:center; gap:8px;
}
.tabbar button[aria-current="page"]{color:var(--ink); box-shadow:inset 0 3px 0 var(--ink)}
.tabbar .num{
  background:var(--bad); color:#fff; border-radius:999px; min-width:24px;
  padding:1px 7px; font-size:13.5px; font-weight:700;
}

.hint{font-size:13.5px; color:var(--muted); margin:10px 0 0}
.empty{text-align:center; color:var(--muted); padding:26px 10px; font-size:15px}
.toast{
  position:fixed; left:50%; bottom:86px; transform:translateX(-50%);
  background:var(--ink); color:#fff; padding:13px 20px; border-radius:12px;
  font-weight:600; z-index:80; opacity:0; transition:opacity .2s; pointer-events:none;
  max-width:90vw; text-align:center;
}
.toast.on{opacity:1}
.toast.bad{background:var(--bad)}

@media (min-width: 720px){
  .overlay{align-items:center; padding:16px}
  .foglio{border-radius:18px; max-height:86vh}
  .altro-griglia{grid-template-columns:repeat(3, 1fr)}
}