/* Resolve · bacheca operativa — palette presa dai documenti interni */
:root{
  /* colori di sistema Apple, chiaro */
  --carta:#f5f5f7;            /* il grigio delle sezioni di apple.com */
  --bianco:#ffffff;
  --inchiostro:#1d1d1f;       /* il nero di apple.com, non il nero pieno */
  --grigio:#86868b;           /* il grigio del testo secondario */
  --grigio-chiaro:#a1a1a6;
  --sabbia-chiara:rgba(120,120,128,.12);  /* systemFill */
  --sabbia:rgba(120,120,128,.2);
  --bordo:rgba(60,60,67,.16);
  --separatore:rgba(60,60,67,.14);

  --accento:#b0123f;          /* il rosso del marchio */
  --accento-morbido:rgba(176,18,63,.07);
  --marchio-scuro:#8c0e33; --marchio-chiaro:#c71b52;
  --sfumatura:linear-gradient(150deg,#8c0e33 0%,#b0123f 45%,#c71b52 100%);
  --ok:#248a3d;               /* systemGreen scuro, leggibile su bianco */
  --ok-vivo:#34c759;
  --attesa:#b25000;           /* systemOrange scuro */
  --male:#d70015;             /* systemRed scuro */
  --ok-morbido:rgba(52,199,89,.14);
  --attesa-morbido:rgba(255,149,0,.16);
  --male-morbido:rgba(255,59,48,.12);

  --ombra:0 1px 1px rgba(0,0,0,.03), 0 4px 14px -8px rgba(0,0,0,.14);
  --ombra-alta:0 2px 6px rgba(0,0,0,.06), 0 22px 44px -18px rgba(0,0,0,.3);
  --r:18px; --r-sm:12px; --r-xs:8px; --r-pill:980px;
  --font:'SF Pro Display','SF Pro Text',-apple-system,BlinkMacSystemFont,'Helvetica Neue','Segoe UI',system-ui,sans-serif;
  --molla:cubic-bezier(.32,.72,0,1);
  --serif-marchio:'Snell Roundhand','Segoe Script',Georgia,cursive;
}
@media (prefers-color-scheme:dark){
  :root{
    --carta:#000000;
    --bianco:#1d1d1f;
    --inchiostro:#f5f5f7;
    --grigio:#86868b;
    --grigio-chiaro:#6e6e73;
    --sabbia-chiara:rgba(120,120,128,.24);
    --sabbia:rgba(120,120,128,.36);
    --bordo:rgba(84,84,88,.5);
    --separatore:rgba(84,84,88,.44);

    --accento:#ed5a85;
    --accento-morbido:rgba(237,90,133,.14);
    --marchio-scuro:#6d0a27; --marchio-chiaro:#b0123f;
    --sfumatura:linear-gradient(150deg,#6d0a27 0%,#8c0e33 45%,#b0123f 100%);
    --ok:#30d158; --ok-vivo:#30d158;
    --attesa:#ff9f0a;
    --male:#ff453a;
    --ok-morbido:rgba(48,209,88,.18);
    --attesa-morbido:rgba(255,159,10,.18);
    --male-morbido:rgba(255,69,58,.18);

    --ombra:0 1px 1px rgba(0,0,0,.4), 0 4px 14px -8px rgba(0,0,0,.6);
    --ombra-alta:0 2px 6px rgba(0,0,0,.5), 0 22px 44px -18px rgba(0,0,0,.8);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--carta);color:var(--inchiostro);-webkit-font-smoothing:antialiased;
  font-size:16px;line-height:1.47;overscroll-behavior-y:none;letter-spacing:-.022em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:inherit}

/* ---------------------------------------------------------- intestazione */
header.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--carta) 82%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--separatore);padding:env(safe-area-inset-top) 0 0}
.top-riga{display:flex;align-items:center;gap:10px;padding:14px 22px 10px}
.marchio{display:flex;align-items:baseline;gap:1px;font-size:16px;letter-spacing:-.02em}
.marchio .we{font-weight:500;color:var(--grigio)}
.marchio .re{font-family:'Lobster Two',var(--serif-marchio);font-style:italic;font-weight:700;
  font-size:19px;color:var(--accento);letter-spacing:0}
.top-riga .spazio{flex:1}
.chip-utente{display:flex;align-items:center;gap:7px;border:.5px solid var(--bordo);border-radius:999px;
  padding:4px 12px 4px 4px;background:var(--bianco);font-size:13.5px;font-weight:600;box-shadow:var(--ombra)}
.avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700}
.avatar.g{width:30px;height:30px;font-size:12px}

nav.tab{display:flex;gap:28px;overflow-x:auto;padding:0 22px 12px;scrollbar-width:none}
nav.tab::-webkit-scrollbar{display:none}
nav.tab button{white-space:nowrap;font-size:14px;font-weight:400;color:var(--grigio);
  letter-spacing:-.016em;transition:color .2s;padding:2px 0;position:relative}
nav.tab button:hover{color:var(--inchiostro)}
nav.tab button[aria-current="true"]{color:var(--inchiostro);font-weight:500}
nav.tab button[aria-current="true"]::after{content:'';position:absolute;left:0;right:0;bottom:-4px;
  height:2px;background:var(--inchiostro);border-radius:2px}

main{padding:26px 22px 110px;max-width:1500px;margin:0 auto}
h2.titolo{font-size:34px;letter-spacing:-.025em;font-weight:600;margin-bottom:6px;line-height:1.08}
@media(min-width:760px){h2.titolo{font-size:44px;letter-spacing:-.028em}}
p.sottotitolo{color:var(--grigio);font-size:17px;line-height:1.42;margin-bottom:26px;max-width:56ch;
  letter-spacing:-.018em}
@media(min-width:760px){p.sottotitolo{font-size:19px}}

/* ------------------------------------------------------------- bacheca */
.bacheca{display:grid;grid-auto-flow:column;grid-auto-columns:290px;gap:12px;overflow-x:auto;
  padding-bottom:12px;align-items:start;scroll-snap-type:x proximity}
.bacheca::-webkit-scrollbar{height:8px}
.bacheca::-webkit-scrollbar-thumb{background:var(--sabbia);border-radius:4px}
.colonna{background:var(--sabbia-chiara);border-radius:var(--r);padding:10px;scroll-snap-align:start;min-height:120px}
.cella.con-prod{background:var(--accento-morbido)}
.colonna.drop{outline:2px dashed var(--accento);outline-offset:-3px}
.col-testa{display:flex;align-items:baseline;gap:6px;padding:2px 4px 9px}
.col-testa b{font-size:13.5px}
.col-testa .n{font-size:11px;color:var(--grigio);background:var(--bianco);border-radius:999px;padding:1px 7px;font-weight:700}
.col-testa .fase{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--grigio-chiaro);margin-left:auto}

.card{background:var(--bianco);border:.5px solid var(--bordo);border-radius:var(--r-sm);padding:11px;margin-bottom:8px;
  box-shadow:var(--ombra);cursor:pointer;transition:transform .18s var(--molla),box-shadow .18s var(--molla)}
.card:active{transform:scale(.985)}
.card.trascina{opacity:.4}
.card .cliente{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--grigio);margin-bottom:3px}
.card .tit{font-size:14px;font-weight:600;line-height:1.35}
.card .gancio{font-size:12.5px;color:var(--grigio);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .piede{display:flex;align-items:center;gap:6px;margin-top:9px;flex-wrap:wrap}
.tag{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--sabbia-chiara);color:var(--grigio)}
.tag.motore{background:var(--accento-morbido);color:var(--accento)}
.tag.filone{background:var(--ok-morbido);color:var(--ok)}
.tag.scaduta{background:var(--male-morbido);color:var(--male)}
.tag.oggi{background:var(--attesa-morbido);color:var(--attesa)}
.card .piede .spazio{flex:1}
.mini-avatar{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:9.5px;font-weight:700}
.progressino{height:3px;background:var(--sabbia-chiara);border-radius:2px;overflow:hidden;margin-top:8px}
.progressino i{display:block;height:100%;background:var(--ok-vivo);border-radius:2px}

.aggiungi{width:100%;text-align:left;padding:8px 6px;font-size:13px;color:var(--grigio);border-radius:7px}
.aggiungi:hover{background:var(--bianco)}

/* ---------------------------------------------------------------- liste */
.griglia{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.pannello{background:var(--bianco);border:0;border-radius:var(--r);padding:22px;box-shadow:var(--ombra)}
.pannello h3{font-size:15px;margin-bottom:3px}
.pannello .meta{font-size:13px;letter-spacing:-.016em;color:var(--grigio);font-weight:400;margin-bottom:8px}
.riga-dato{display:flex;gap:8px;font-size:13.5px;padding:8px 0;border-top:.5px solid var(--separatore)}
.riga-dato:first-of-type{border-top:0}
.riga-dato b{min-width:96px;color:var(--grigio);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.regola{background:var(--sabbia-chiara);border-radius:var(--r-sm);padding:11px 13px;font-size:13px;margin-top:10px;line-height:1.45}
.regola b{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--grigio);margin-bottom:3px}

/* ------------------------------------------------------------- settimana */
.settimana{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.giorno{background:var(--bianco);border:1px solid var(--bordo);border-radius:var(--r);padding:12px}
.giorno.oggi{border-color:var(--accento);box-shadow:0 0 0 3px var(--accento-morbido)}
.giorno .g{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grigio-chiaro);font-weight:700}
.giorno h4{font-size:15px;margin:3px 0 6px}
.giorno p{font-size:12.5px;color:var(--grigio);line-height:1.45}

.barra{height:10px;border-radius:5px;background:var(--sabbia-chiara);overflow:hidden;display:flex;margin:10px 0 6px}
.barra i{display:block;height:100%}
.numerone{font-size:48px;font-weight:600;letter-spacing:-.032em;line-height:1}
.numerone small{font-size:13px;font-weight:600;color:var(--grigio);letter-spacing:0}

/* ---------------------------------------------------------------- modale */
.velo{position:fixed;inset:0;background:rgba(26,29,23,.42);backdrop-filter:blur(2px);z-index:60;display:flex;
  align-items:flex-end;justify-content:center}
@media(min-width:760px){.velo{align-items:center;padding:24px}}
.modale{background:var(--carta);width:100%;max-width:640px;max-height:92vh;overflow-y:auto;border-radius:22px 22px 0 0;
  box-shadow:var(--ombra-alta);
  padding:16px 16px calc(24px + env(safe-area-inset-bottom));animation:su .2s ease-out}
@media(min-width:760px){.modale{border-radius:20px}}
@keyframes su{from{transform:translateY(22px) scale(.99);opacity:0}to{transform:none;opacity:1}}
.modale{animation:su .34s var(--molla)}
.modale-testa{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.modale-testa .x{font-size:22px;line-height:1;color:var(--grigio);padding:2px 6px}
label.campo{display:block;margin-bottom:11px}
label.campo>span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--grigio);margin-bottom:4px}
input[type=text],input[type=date],input[type=time],select,textarea{width:100%;background:var(--bianco);border:.5px solid var(--bordo);
  border-radius:11px;padding:11px 12px;font-size:15.5px;box-shadow:var(--ombra)}
textarea{min-height:70px;resize:vertical;line-height:1.45}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accento);outline-offset:-1px}
.due{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{background:var(--accento);color:#fff;border-radius:var(--r-pill);padding:13px 22px;font-weight:400;font-size:17px;letter-spacing:-.022em;
  width:100%;transition:opacity .18s,background .18s}
.btn:hover{background:#c71b52}
.btn:active{opacity:.85}
.btn.secondario{background:transparent;color:var(--accento);border:1px solid var(--accento);box-shadow:none}
.btn.secondario:hover{background:var(--accento-morbido)}
.btn.pericolo{background:none;color:var(--male);font-weight:600}
.btn-riga{display:flex;gap:8px;margin-top:6px}

.check{display:flex;gap:11px;align-items:flex-start;padding:12px;background:var(--bianco);border:.5px solid var(--bordo);
  border-radius:var(--r-sm);margin-bottom:7px;cursor:pointer;box-shadow:var(--ombra);transition:transform .16s var(--molla)}
.check:active{transform:scale(.99)}
.check input{margin-top:2px;width:17px;height:17px;accent-color:var(--ok);flex-shrink:0}
.check .t{font-size:13.5px;font-weight:600;line-height:1.35}
.check .n{font-size:11.5px;color:var(--grigio);margin-top:2px;line-height:1.35}
.check.fatto{background:var(--ok-morbido);border-color:transparent}

.criterio{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--bordo)}
.criterio .lbl{flex:1;font-size:13px}
.criterio .lbl small{display:block;color:var(--grigio);font-size:11.5px}
.punti{display:flex;gap:3px}
.punti button{width:28px;height:28px;border-radius:6px;border:1px solid var(--bordo);background:var(--bianco);font-size:12.5px;font-weight:700}
.punti button.on{background:var(--accento);color:#fff;border-color:var(--accento)}
.esito{border-radius:8px;padding:10px;font-size:13px;font-weight:600;margin-top:9px}
.esito.scarta{background:var(--male-morbido);color:var(--male)}
.esito.recupera{background:var(--attesa-morbido);color:var(--attesa)}
.esito.approvata{background:var(--ok-morbido);color:var(--ok)}

.sezione-t{font-size:22px;letter-spacing:-.021em;font-weight:600;color:var(--inchiostro);
  margin:38px 0 14px;padding-top:0;border-top:0}
.pillole{display:flex;flex-wrap:wrap;gap:6px}
.pillola{border:.5px solid var(--bordo);background:var(--bianco);border-radius:999px;padding:7px 14px;font-size:13.5px;
  font-weight:600;transition:all .18s var(--molla)}
.pillola:active{transform:scale(.96)}
.pillola.on{background:var(--accento);color:#fff;border-color:var(--accento)}

.avviso{background:var(--attesa-morbido);border-radius:var(--r-sm);padding:13px 14px;font-size:13.5px;margin-bottom:14px;line-height:1.45}
.avviso>b:first-child{display:block;margin-bottom:2px}
.vuoto{text-align:center;color:var(--grigio);font-size:13.5px;padding:28px 14px}

.fab{position:fixed;right:18px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:35;background:var(--accento);color:#fff;
  box-shadow:0 4px 14px -2px rgba(176,18,63,.3), 0 12px 32px -8px rgba(176,18,63,.2);
  transition:transform .2s var(--molla)}
.fab:active{transform:scale(.96)}
.fab:hover{background:#c71b52}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom));z-index:80;
  background:var(--inchiostro);color:var(--carta);padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;
  box-shadow:var(--ombra-alta);animation:su .3s var(--molla);max-width:82vw;text-align:center}

/* --------------------------------------------------------- attività */
.lista-att{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.att{display:flex;gap:11px;align-items:flex-start;background:var(--bianco);border:.5px solid var(--bordo);
  border-radius:var(--r-sm);padding:12px;cursor:pointer;box-shadow:var(--ombra);
  transition:transform .18s var(--molla),border-color .18s}
.att:active{transform:scale(.988)}
.att:hover{border-color:var(--grigio-chiaro)}
.att.ritardo{border-left:3px solid var(--male)}
.att.chiusa{opacity:.5}
.att.chiusa .tit{text-decoration:line-through}
.att-corpo{flex:1;min-width:0}
.att-testa{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:2px}
.att-testa .cliente{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--grigio)}
.att .tit{font-size:14px;font-weight:600;line-height:1.35}
.att-piede{display:flex;align-items:center;gap:5px;margin-top:7px;flex-wrap:wrap}
.tag.attesa-cliente{background:var(--attesa-morbido);color:var(--attesa)}
.spunta{width:21px;height:21px;border-radius:50%;border:2px solid var(--bordo);flex-shrink:0;margin-top:2px;
  position:relative;transition:all .14s;background:var(--bianco)}
.spunta:hover{border-color:var(--ok-vivo)}
.spunta.on{background:var(--ok-vivo);border-color:var(--ok-vivo)}
.spunta.on::after{content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* --------------------------------------------------- calendario mese */
.mese{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:8px}
.mese .intestazione{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--grigio-chiaro);
  text-align:center;font-weight:700;padding-bottom:3px}
.cella{border-radius:6px;background:var(--sabbia-chiara);padding:4px 2px 10px;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;height:40px}
.cella.vuota{background:none}
.cella .n{font-size:11px;font-weight:600;color:var(--grigio)}
.cella.oggi{outline:2px solid var(--inchiostro);outline-offset:-2px}
.cella.oggi .n{color:var(--inchiostro);font-weight:800}
.cella.con-prod{background:var(--accento-morbido)}
.cella .punto{width:5px;height:5px;border-radius:50%;background:var(--accento)}
.cella.oggi{outline:2px solid var(--accento);outline-offset:-2px}
.cella.oggi .n{color:var(--accento);font-weight:800}
.cella .conta{position:absolute;bottom:2px;right:4px;font-size:9.5px;font-weight:700;color:var(--grigio-chiaro)}
.cella .conta.mio{color:var(--accento)}
@media(min-width:760px){.cella{height:48px}.cella .n{font-size:12px}}

.pannello.prod:hover{border-color:var(--accento)}
code{background:var(--sabbia-chiara);padding:1px 5px;border-radius:4px;font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
input[readonly]{background:var(--sabbia-chiara);color:var(--grigio);font-size:12px}

/* ================================================== componenti dashboard */

/* controllo segmentato in stile iOS */
.segmenti{display:inline-flex;background:var(--sabbia-chiara);border-radius:10px;padding:2px;gap:2px;
  position:relative;max-width:100%;overflow-x:auto;scrollbar-width:none}
.segmenti::-webkit-scrollbar{display:none}
.segmenti button{padding:6px 14px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--grigio);
  white-space:nowrap;transition:all .22s var(--molla)}
.segmenti button[aria-selected="true"]{background:var(--bianco);color:var(--inchiostro);
  box-shadow:0 1px 3px rgba(26,29,23,.1),0 0 0 .5px rgba(26,29,23,.04)}

/* barra di ricerca */
.cerca{position:relative;margin-bottom:14px}
.cerca input{padding-left:34px;border-radius:11px}
.cerca::before{content:'􀊫';position:absolute;left:12px;top:50%;transform:translateY(-50%);
  font-size:14px;color:var(--grigio-chiaro);z-index:1;font-family:var(--font)}
.cerca.icona::before{content:'⌕';font-size:19px}

/* elenco raggruppato in stile impostazioni iOS */
.gruppo-lista{background:var(--bianco);border:.5px solid var(--bordo);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--ombra)}
.riga{display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer;
  position:relative;transition:background .14s;background:var(--bianco);width:100%;text-align:left}
.riga:not(:last-child)::after{content:'';position:absolute;left:15px;right:0;bottom:0;height:.5px;background:var(--separatore)}
.riga:active{background:var(--sabbia-chiara)}
.riga .corpo{flex:1;min-width:0}
.riga .nome{font-size:15.5px;font-weight:600;letter-spacing:-.015em;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.riga .sotto{font-size:12.8px;color:var(--grigio);margin-top:2px;line-height:1.35}
.riga .destra{display:flex;align-items:center;gap:8px;flex-shrink:0}
.riga .chevron{color:var(--grigio-chiaro);font-size:17px;line-height:1;opacity:.55}
.riga.senza-chevron{cursor:default}
.riga.senza-chevron:active{background:var(--bianco)}

/* pallino di stato */
.stato{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:999px;white-space:nowrap;letter-spacing:0}
.stato::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.stato.produzione{background:var(--ok-morbido);color:var(--ok)}
.stato.attesa{background:var(--attesa-morbido);color:var(--attesa)}
.stato.ritardo{background:var(--male-morbido);color:var(--male)}
.stato.fermo{background:var(--sabbia-chiara);color:var(--grigio)}
.stato.oggi{background:var(--accento-morbido);color:var(--accento)}

/* anello di avanzamento */
.anello{width:38px;height:38px;flex-shrink:0;position:relative}
.anello svg{transform:rotate(-90deg);display:block}
.anello .traccia{stroke:var(--sabbia-chiara)}
.anello .quota{stroke:var(--ok-vivo);stroke-linecap:round;transition:stroke-dashoffset .6s var(--molla)}
.anello .valore{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;font-weight:700;
  letter-spacing:-.03em;color:var(--grigio)}

/* settimana della persona */
.giorni-chip{display:flex;gap:3px}
.giorni-chip span{width:19px;height:19px;border-radius:6px;display:grid;place-items:center;
  font-size:9.5px;font-weight:700;background:var(--sabbia-chiara);color:var(--grigio-chiaro)}
.giorni-chip span.on{background:var(--accento);color:#fff}
.giorni-chip span.oggi{outline:2px solid var(--accento);outline-offset:1px}
.giorni-chip.grande span{width:34px;height:34px;border-radius:9px;font-size:12px;cursor:pointer}

/* intestazione persona / cliente */
.testa-scheda{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.testa-scheda .avatar-g{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:20px;font-weight:600;flex-shrink:0;letter-spacing:-.02em}
.testa-scheda h3{font-size:22px;letter-spacing:-.025em;font-weight:700;line-height:1.15}
.testa-scheda p{font-size:13.5px;color:var(--grigio);margin-top:3px}

/* statistiche compatte */
.stat-riga{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:8px;margin-bottom:14px}
.stat{background:var(--bianco);border:0;border-radius:var(--r);padding:20px 14px;text-align:center;
  box-shadow:var(--ombra)}
.stat b{display:block;font-size:38px;font-weight:600;letter-spacing:-.03em;line-height:1}
.stat span{font-size:13px;color:var(--grigio);letter-spacing:-.016em;font-weight:400;margin-top:4px;display:block}
.stat.male b{color:var(--male)}
.stat.attesa b{color:var(--attesa)}
.stat.ok b{color:var(--ok)}

.intestazione-gruppo{font-size:22px;font-weight:600;color:var(--inchiostro);letter-spacing:-.021em;
  margin:38px 0 14px;padding:0;display:flex;align-items:baseline;gap:8px}
.intestazione-gruppo span{color:var(--grigio);font-weight:400;font-size:17px}
.intestazione-gruppo span{color:var(--grigio-chiaro);font-weight:500}

.badge-modalita{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;
  background:var(--sabbia-chiara);color:var(--grigio);letter-spacing:0}
.badge-modalita.remoto{background:var(--accento-morbido);color:var(--accento)}
.badge-modalita.part{background:rgba(175,82,222,.14);color:#8944ab}
@media (prefers-color-scheme:dark){ .badge-modalita.part{background:rgba(191,90,242,.2);color:#bf5af2} }

/* ------------------------------------------- sezioni che si aprono a richiesta */
details.piu{margin:10px 0}
details.piu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:13px 15px;background:var(--bianco);border:.5px solid var(--bordo);border-radius:var(--r-sm);
  font-size:15px;font-weight:600;box-shadow:var(--ombra);letter-spacing:-.015em}
details.piu>summary::-webkit-details-marker{display:none}
details.piu>summary::after{content:'›';margin-left:auto;color:var(--grigio-chiaro);font-size:18px;
  transition:transform .22s var(--molla);flex-shrink:0}
details.piu[open]>summary::after{transform:rotate(90deg)}
details.piu>summary .conto{font-size:12.5px;color:var(--grigio);font-weight:500;letter-spacing:0}
details.piu>summary .conto.ok{color:var(--ok)}
details.piu>summary .conto.male{color:var(--male)}
details.piu .dentro{padding:14px 2px 2px}
details.piu[open]>summary{border-bottom-left-radius:0;border-bottom-right-radius:0}

label.campo>span{font-size:11.5px}
.modale .sezione-t:first-of-type{padding-top:6px}

/* ------------------------------------------- intestazioni delle colonne */
.col-testa{display:flex;align-items:center;gap:7px;padding:4px 5px 3px;width:100%;text-align:left}
.col-testa.cliccabile{cursor:pointer;border-radius:var(--r-xs);transition:background .14s}
.col-testa.cliccabile:hover{background:var(--sabbia)}
.col-testa b{font-size:14.5px;letter-spacing:-.015em;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.col-testa .n{font-size:11.5px;color:var(--grigio);background:var(--bianco);border-radius:999px;
  padding:1px 8px;font-weight:700;flex-shrink:0}
.col-testa .n.male{background:var(--male-morbido);color:var(--male)}
.col-testa .pallino{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.col-testa .pallino.ritardo{background:var(--male)}
.col-testa .pallino.attesa{background:var(--attesa)}
.col-testa .pallino.produzione{background:var(--ok-vivo)}
.col-testa .pallino.fermo{background:var(--grigio-chiaro)}
.col-sotto{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 5px 9px;
  font-size:11.5px;color:var(--grigio)}
.colonna-vuota{font-size:12.5px;color:var(--grigio-chiaro);text-align:center;padding:14px 6px}
.colonna.persona.drop{outline:2px dashed var(--accento);outline-offset:-3px;background:var(--accento-morbido)}
.card.contenuto{border-left:3px solid var(--accento)}
.bacheca .colonna{max-height:calc(100vh - 300px);overflow-y:auto;scrollbar-width:thin}
.aggiungi.centrata{text-align:center;color:var(--accento);font-weight:600}

/* --------------------------------------------------------- schermata di accesso */
.accesso{position:fixed;inset:0;display:grid;place-items:center;padding:24px;background:var(--sfumatura)}
.accesso-scheda{background:var(--bianco);border:0;border-radius:22px;
  padding:30px 26px 26px;max-width:380px;width:100%;text-align:center;box-shadow:var(--ombra-alta)}
.lockup{position:relative;display:inline-block;margin:6px auto 22px;padding:26px 30px 18px}
.lockup .dietro{position:absolute;inset:0;display:grid;place-items:center;
  font-family:'Lobster Two',var(--serif-marchio);font-style:italic;font-weight:700;
  font-size:104px;line-height:.92;color:transparent;
  -webkit-text-stroke:1.6px var(--accento);opacity:.22;pointer-events:none;user-select:none;
  transform:translateY(-4px)}
.lockup .davanti{position:relative;font-family:'Lobster Two',var(--serif-marchio);font-style:italic;
  font-weight:700;font-size:48px;line-height:1;color:var(--accento);letter-spacing:.01em}
.accesso h1{font-size:21px;letter-spacing:-.025em;margin-bottom:6px}
.accesso p{font-size:13.5px;color:var(--grigio);margin-bottom:20px;line-height:1.45}
.accesso input{text-align:center;font-size:17px;letter-spacing:.06em;margin-bottom:12px}
.accesso small{display:block;margin-top:14px;font-size:12px;color:var(--grigio-chiaro);line-height:1.4}

/* scheda con il cerchietto di completamento */
.card.con-spunta{display:flex;gap:10px;align-items:flex-start}
.card.con-spunta .card-corpo{flex:1;min-width:0}
.card.con-spunta .spunta{margin-top:1px}
.card.chiusa{opacity:.45}
.card.chiusa .tit{text-decoration:line-through}
.toast{display:flex;align-items:center;gap:14px}
.toast-azione{color:#5ac8fa;font-weight:700;font-size:14px;white-space:nowrap;padding:2px 0}
details.piu.scadenze{margin-bottom:16px}
details.piu.scadenze .riga{padding:10px 14px}
details.piu.scadenze .riga .spunta{flex-shrink:0}

/* ------------------------------------------------- il numero del cliente */
.istogramma{display:flex;align-items:flex-end;gap:8px;height:96px;margin:14px 0 6px;position:relative;
  padding-bottom:16px}
.istogramma .colonnina{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;position:relative}
.istogramma .colonnina i{display:block;width:100%;background:var(--accento);border-radius:5px 5px 2px 2px;
  transition:height .5s var(--molla);min-height:4px}
.istogramma .colonnina:last-child i{background:var(--ok-vivo)}
.istogramma .colonnina span{position:absolute;bottom:-16px;font-size:10px;color:var(--grigio-chiaro);font-weight:600}
.istogramma .soglia{position:absolute;left:0;right:0;border-top:1.5px dashed var(--male);pointer-events:none}
.istogramma .soglia span{position:absolute;right:0;top:-15px;font-size:10px;font-weight:700;color:var(--male)}
.frase-riunione{background:var(--accento-morbido);border-radius:var(--r-sm);padding:12px 14px;
  font-size:14px;line-height:1.5;margin:12px 0 4px}
.frase-riunione b{display:block;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accento);margin-bottom:5px}
.numero-vuoto{border-style:dashed}

/* la domanda che regge tutto il metodo */
.domanda-test{background:var(--bianco);border:.5px solid var(--bordo);border-radius:var(--r-sm);
  padding:14px;margin:12px 0 0;box-shadow:var(--ombra)}
.domanda-test b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.015em;
  line-height:1.35;margin-bottom:10px}
.domanda-test small{display:block;font-size:12.3px;color:var(--grigio);margin-top:9px;line-height:1.4}
.pillola.on.rosso{background:var(--male);border-color:var(--male)}
.pillola.on.verde{background:var(--ok-vivo);border-color:var(--ok-vivo);color:#fff}

/* ==================================================================
   Rifiniture in stile apple.com: respiro, pillole, link col chevron
   ================================================================== */

/* barra in alto sottile e traslucida come quella del sito */
header.top{background:color-mix(in srgb, var(--carta) 72%, transparent)}

/* elenchi raggruppati: bordi via, solo separatori sottili */
.gruppo-lista{border:0;border-radius:var(--r);box-shadow:var(--ombra)}
.riga{padding:16px 20px}
.riga:not(:last-child)::after{left:20px}
.riga .nome{font-size:17px;font-weight:500;letter-spacing:-.019em}
.riga .sotto{font-size:14px;color:var(--grigio);letter-spacing:-.016em;margin-top:3px}
.riga .chevron{opacity:.4;font-size:19px}
.riga:hover .chevron{opacity:.7}

/* pillole e controlli segmentati arrotondati come i bottoni del sito */
.pillola{border-radius:var(--r-pill);border:1px solid var(--bordo);font-weight:400;font-size:14px;
  letter-spacing:-.016em;padding:8px 16px}
.pillola.on{border-color:var(--accento)}
.segmenti{border-radius:var(--r-pill);padding:3px}
.segmenti button{border-radius:var(--r-pill);font-weight:400;font-size:14px;letter-spacing:-.016em;padding:7px 16px}

/* schede e colonne: più aria, meno bordi */
.card{border:0;border-radius:var(--r-sm);padding:14px}
.card .tit{font-size:15px;font-weight:500;letter-spacing:-.017em;line-height:1.32}
.card .cliente{font-size:11px;letter-spacing:.01em;text-transform:none;color:var(--grigio);font-weight:400}
.colonna{background:transparent;padding:0 4px}
.col-testa{padding:2px 6px 4px}
.col-testa b{font-size:17px;font-weight:600;letter-spacing:-.019em}
.col-testa .n{background:var(--sabbia-chiara);font-weight:400;font-size:12px;color:var(--grigio)}
.col-sotto{font-size:12.5px;letter-spacing:-.014em;padding:0 6px 10px}
.att{border:0;border-radius:var(--r-sm);padding:15px}
.att .tit{font-size:15px;font-weight:500;letter-spacing:-.017em}
.tag{font-weight:400;font-size:11.5px;letter-spacing:-.01em;padding:3px 9px;border-radius:var(--r-pill)}

/* campi: leggeri, senza ombra, come i form del sito */
input[type=text],input[type=date],input[type=time],select,textarea{border:1px solid var(--bordo);
  box-shadow:none;border-radius:12px;font-size:17px;letter-spacing:-.022em;padding:13px 15px;background:var(--bianco)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accento);
  box-shadow:0 0 0 4px var(--accento-morbido)}
label.campo>span{font-size:12px;letter-spacing:-.01em;text-transform:none;font-weight:400;color:var(--grigio);
  margin-bottom:6px}

/* riquadri che si aprono */
details.piu>summary{border:0;border-radius:var(--r-sm);padding:16px 18px;font-size:17px;font-weight:500;
  letter-spacing:-.019em}
details.piu>summary .conto{font-size:14px;letter-spacing:-.016em}

/* modale: più ampia e più ariosa */
.modale{max-width:700px;border-radius:24px 24px 0 0;padding:24px 24px calc(28px + env(safe-area-inset-bottom))}
@media(min-width:760px){.modale{border-radius:24px;padding:32px}}
.modale-testa .x{font-size:26px;opacity:.45}
.modale-testa .x:hover{opacity:.8}

/* la riga di testo che accompagna i blocchi, in grigio Apple */
.riga-dato{font-size:15px;letter-spacing:-.017em;padding:11px 0}
.riga-dato b{color:var(--grigio);font-weight:400;font-size:14px;text-transform:none;letter-spacing:-.016em}

.check{border:0;border-radius:var(--r-sm);padding:15px}
.check .t{font-size:15.5px;font-weight:500;letter-spacing:-.018em}
.check .n{font-size:13px;letter-spacing:-.014em;color:var(--grigio)}

.regola{background:var(--sabbia-chiara);border-radius:var(--r-sm);padding:15px 17px;font-size:14.5px;letter-spacing:-.016em}
.regola b{font-size:12px;letter-spacing:-.01em;text-transform:none;color:var(--grigio);font-weight:400}
.avviso{border-radius:var(--r-sm);padding:16px 18px;font-size:15px;letter-spacing:-.017em;line-height:1.45}
.avviso>b:first-child{font-size:17px;font-weight:600;letter-spacing:-.019em;margin-bottom:4px}

.giorno{border:0;border-radius:var(--r);padding:20px}
.giorno h4{font-size:19px;font-weight:600;letter-spacing:-.02em}
.giorno p{font-size:14px;letter-spacing:-.016em}
.giorno .g{font-size:12px;letter-spacing:-.01em;text-transform:none;color:var(--grigio);font-weight:400}

.testa-scheda h3{font-size:32px;font-weight:600;letter-spacing:-.026em}
.testa-scheda p{font-size:17px;letter-spacing:-.019em}
.frase-riunione{font-size:17px;letter-spacing:-.019em;line-height:1.47;padding:18px 20px;border-radius:var(--r-sm)}
.frase-riunione b{font-size:12px;letter-spacing:-.01em;text-transform:none;font-weight:400}

.vuoto{font-size:17px;letter-spacing:-.019em;padding:52px 20px}
.aggiungi{font-size:14px;letter-spacing:-.016em;color:var(--accento);padding:10px 6px}
.aggiungi:hover{background:transparent;opacity:.7}
.colonna-vuota{font-size:14px;letter-spacing:-.016em;padding:20px 6px}

/* il tondo di completamento, un filo più grande */
.spunta{width:22px;height:22px}
.spunta.on::after{left:7px;top:3px}

.fab{border-radius:var(--r-pill);width:auto;height:50px;padding:0 22px;font-size:17px;font-weight:400;
  letter-spacing:-.022em;display:flex;align-items:center;gap:7px;line-height:1}
.fab::after{content:'Nuovo';font-size:16px}

.cerca input{padding-left:42px}
.cerca.icona::before{left:17px;font-size:20px;color:var(--grigio)}

/* ==================================================================
   Centro di controllo — pensato per stare acceso su uno schermo
   ================================================================== */
.centro{--gap:16px}
.centro-testa{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.centro-testa .marca{font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--grigio)}
.centro-testa .marca span{color:var(--accento)}
.centro-testa .diretta{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--grigio);
  margin-left:auto;font-variant-numeric:tabular-nums}
.centro-testa .diretta i{width:7px;height:7px;border-radius:50%;background:var(--accento);
  animation:pulsa 2.4s ease-in-out infinite}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.25}}

.etichetta{font-size:12px;letter-spacing:.04em;color:var(--grigio);font-weight:400;
  text-transform:uppercase}
.sezione-centro{margin:34px 0 12px;display:block}

.griglia-hero{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--gap);margin-bottom:var(--gap)}
@media(max-width:820px){.griglia-hero{grid-template-columns:1fr 1fr}}
.hero,.periodo{background:var(--bianco);border-radius:var(--r);padding:24px 26px;box-shadow:var(--ombra)}
.hero{display:flex;flex-direction:column;justify-content:center}
.mega{font-size:clamp(64px,10vw,110px);font-weight:600;letter-spacing:-.045em;line-height:.92;
  color:var(--accento);font-variant-numeric:tabular-nums;margin:6px 0}
.sotto-hero{font-size:15px;color:var(--grigio)}
.periodo{display:flex;flex-direction:column;justify-content:center}
.periodo b{font-size:clamp(30px,4.4vw,50px);font-weight:600;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums;margin-top:6px}

.focus{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--gap);background:var(--bianco);
  border-radius:var(--r);padding:24px 26px;box-shadow:var(--ombra)}
@media(max-width:820px){.focus{grid-template-columns:1fr;gap:20px}}
.focus-nome{font-size:clamp(26px,3.4vw,40px);font-weight:600;letter-spacing:-.028em;line-height:1.06;
  margin:6px 0 16px}
.focus-numeri{display:flex;gap:34px}
.focus-numeri span{display:block;margin-bottom:2px}
.focus-numeri b{font-size:34px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.focus-dx{display:flex;flex-direction:column;justify-content:center}
.trend{font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.02em}
.focus-dx .trend{font-size:clamp(26px,3.4vw,40px);margin:4px 0 10px}
.trend.su{color:var(--ok)} .trend.giu{color:var(--male)} .trend.piatto{color:var(--grigio)}
.linea{width:100%;height:auto;display:block;overflow:visible}

.classifica{width:100%;border-collapse:collapse;background:var(--bianco);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--ombra)}
.classifica th{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--grigio);
  font-weight:400;text-align:left;padding:14px 12px 10px}
.classifica th.n,.classifica td.n{text-align:right}
.classifica th.g,.classifica td.g{width:120px}
.classifica td{padding:12px;border-top:.5px solid var(--separatore);font-size:16px;
  font-variant-numeric:tabular-nums;vertical-align:middle}
.classifica tbody tr{cursor:pointer;transition:background .14s}
.classifica tbody tr:hover{background:var(--sabbia-chiara)}
.classifica td.pos{color:var(--grigio-chiaro);font-size:13px;width:34px}
.classifica td.nome{font-weight:500;letter-spacing:-.017em;display:flex;align-items:center;gap:9px}
.classifica td.n{font-weight:500}
.classifica td.spento{color:var(--grigio-chiaro);font-weight:400}
.classifica .blu{color:var(--accento);font-weight:600}
.badge-ritardo{font-size:11px;background:var(--male-morbido);color:var(--male);padding:2px 8px;
  border-radius:var(--r-pill);font-weight:500;letter-spacing:0}
.classifica tr.in-ritardo td.pos{color:var(--male)}

.fondo-centro{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--gap);margin-top:var(--gap)}
.riquadro{background:var(--bianco);border-radius:var(--r);padding:20px 22px;box-shadow:var(--ombra)}
.due-numeri{display:flex;gap:30px;margin-top:10px}
.due-numeri b{display:block;font-size:38px;font-weight:600;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.due-numeri span{font-size:13px;color:var(--grigio);display:block;margin-top:4px}
.due-numeri .rosso{color:var(--male)} .due-numeri .ambra{color:var(--attesa)}
.riga-agenda{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-top:.5px solid var(--separatore);
  font-size:14.5px;letter-spacing:-.016em}
.riga-agenda:first-of-type{border-top:0}
.riga-agenda b{font-variant-numeric:tabular-nums;color:var(--accento);font-weight:600;min-width:44px}
.riga-agenda i{font-style:normal;color:var(--grigio);font-size:12.5px;margin-left:auto}
.riga-agenda.vuota{color:var(--grigio)}
.squadra-centro{display:flex;gap:18px;margin-top:12px;flex-wrap:wrap}
.persona-centro{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:52px}
.persona-centro b{font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.persona-centro span{font-size:11.5px;color:var(--grigio)}
.persona-centro.assente{opacity:.34}

/* modalità muro: tutto più grande, niente cornice */
body.muro header.top{display:none}
body.muro main{padding:22px 26px;max-width:none}
body.muro .centro{--gap:20px}
body.muro .mega{font-size:clamp(90px,13vw,180px)}
body.muro .periodo b{font-size:clamp(40px,6vw,76px)}
body.muro .focus-nome{font-size:clamp(34px,5vw,62px)}
body.muro .focus-numeri b{font-size:46px}
body.muro .classifica td{font-size:19px;padding:14px 12px}
body.muro .classifica th{font-size:13px}
body.muro .etichetta{font-size:14px}
body.muro .fab{display:none!important}

/* fascia dello stato di rete */
.fascia-rete{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--attesa);
  color:#fff;padding:11px 20px;font-size:14px;letter-spacing:-.016em;text-align:center;
  padding-bottom:calc(11px + env(safe-area-inset-bottom))}
.fascia-rete b{font-weight:600}
body:has(.fascia-rete) main{padding-bottom:130px}
.titolo-metrica{font-size:22px;font-weight:600;letter-spacing:-.021em;margin:0 0 12px}
.storico{font-size:13.5px;color:var(--grigio);margin:-4px 0 16px;letter-spacing:-.016em}
.riga-focus{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.scelta-focus{width:auto;min-width:210px;padding:7px 11px;font-size:14px;border-radius:var(--r-pill);
  box-shadow:none;background:var(--sabbia-chiara);border:0;color:var(--ink)}
.togli{width:24px;height:24px;border-radius:50%;color:var(--grigio-chiaro);font-size:17px;line-height:1;
  flex-shrink:0;transition:all .16s}
.togli:hover{background:var(--male-morbido);color:var(--male)}
.avviso.grave{background:var(--male-morbido)}
.avviso.grave>b:first-child{color:var(--male)}

/* bacheca della programmazione */
.tabella-prog{overflow-x:auto;border-radius:var(--r-sm);border:.5px solid var(--bordo)}
.tabella-prog table{width:100%;border-collapse:collapse;background:var(--bianco);min-width:620px}
.tabella-prog th{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--grigio);
  font-weight:400;text-align:left;padding:12px 12px 9px;white-space:nowrap}
.tabella-prog td{padding:7px 12px;border-top:.5px solid var(--separatore);font-size:14.5px}
.tabella-prog td.cli{font-weight:500;letter-spacing:-.017em;cursor:pointer;min-width:190px}
.tabella-prog td.cli:hover{color:var(--accento)}
.tabella-prog td.data{white-space:nowrap}
.tabella-prog td.data .cella{display:flex;align-items:center;gap:7px}
.tabella-prog input[type=date]{width:132px;padding:6px 9px;font-size:13.5px;border-radius:8px;
  box-shadow:none;border:.5px solid transparent;background:var(--sabbia-chiara)}
.tabella-prog input[type=date]:hover{border-color:var(--bordo)}
.tabella-prog input[type=date]:focus{background:var(--bianco);border-color:var(--accento)}
.tabella-prog td.data.scaduta input{background:var(--male-morbido);color:var(--male);font-weight:500}
.tabella-prog td.riprese{font-variant-numeric:tabular-nums;color:var(--grigio)}
.tabella-prog td.riprese.scaduta{color:var(--male);font-weight:500}
.tabella-prog td.riprese.attenzione{color:var(--attesa);font-weight:500}
details.piu>summary .conto.male{color:var(--male)}

/* scelta del tipo di attività */
.griglia-tipi{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.tipo-scelta{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 13px;
  background:var(--bianco);border:.5px solid var(--bordo);border-radius:var(--r-sm);cursor:pointer;
  box-shadow:var(--ombra);transition:all .16s var(--molla);text-align:left}
.tipo-scelta:hover{border-color:var(--accento);transform:translateY(-1px)}
.tipo-scelta:active{transform:scale(.97)}
.tipo-scelta .ic{font-size:20px;line-height:1.2;color:var(--accento)}
.tipo-scelta .nm{font-size:14.5px;font-weight:500;letter-spacing:-.017em}
.tipo-scelta .chi{font-size:11.5px;color:var(--grigio)}
.tipo-scelto{display:flex;align-items:center;gap:9px;padding:12px 14px;background:var(--accento-morbido);
  border-radius:var(--r-sm);margin-bottom:4px}
.tipo-scelto .ic{font-size:19px;color:var(--accento)}
.tipo-scelto b{font-size:15.5px;font-weight:500;letter-spacing:-.017em;flex:1}
.tipo-scelto button{font-size:13.5px;color:var(--accento)}
.tag.tipo{background:var(--accento-morbido);color:var(--accento)}
.riga-colonna{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.riga-colonna input{flex:1}
.riga-colonna select{width:auto;min-width:130px}

/* bollo delle riprese: giallo dieci giorni prima, rosso una settimana prima */
.bollo{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;
  padding:2px 9px;border-radius:var(--r-pill);white-space:nowrap;letter-spacing:0;vertical-align:middle}
.bollo.giallo{background:var(--attesa-morbido);color:var(--attesa)}
.bollo.rosso{background:var(--male-morbido);color:var(--male)}
.col-bollo{padding:0 6px 6px}
.tabella-prog td.cli .bollo{margin-left:7px}
.classifica td.nome .bollo{margin-left:2px}

/* schermata di accesso personale */
.elenco-persone{display:flex;flex-direction:column;gap:7px;margin-bottom:6px}
.persona-accesso{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--bianco);
  border:.5px solid var(--bordo);border-radius:var(--r-sm);cursor:pointer;text-align:left;width:100%;
  transition:all .16s var(--molla)}
.persona-accesso:hover{border-color:var(--accento)}
.persona-accesso:active{transform:scale(.985)}
.persona-accesso .dati{flex:1;min-width:0}
.persona-accesso b{display:block;font-size:15.5px;font-weight:500;letter-spacing:-.017em}
.persona-accesso small{display:block;font-size:12px;color:var(--grigio);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.persona-accesso .prima{font-size:10.5px;background:var(--accento-morbido);color:var(--accento);
  padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap}
.chi-entra{display:flex;align-items:center;gap:11px;margin-bottom:16px;text-align:left}
.chi-entra b{flex:1;font-size:17px;font-weight:500;letter-spacing:-.019em}
.chi-entra button{font-size:12.5px;color:var(--accento)}
.prima-volta{font-size:13px!important;color:var(--grigio);margin-bottom:14px!important;text-align:left}
.errore-accesso{font-size:13px;color:var(--male);min-height:19px;margin-bottom:6px}
.accesso input{margin-bottom:10px}
/* il marchio dentro il centro di controllo */
.centro-testa .marca{display:flex;align-items:baseline;gap:1px;font-size:15px;letter-spacing:-.02em}
.centro-testa .marca .we{font-weight:500;color:var(--grigio)}
.centro-testa .marca .re{font-family:'Lobster Two',var(--serif-marchio);font-style:italic;font-weight:700;
  font-size:19px;color:var(--accento);letter-spacing:0}
.accesso-scheda{background:rgba(255,255,255,.97);backdrop-filter:blur(20px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .accesso-scheda{background:rgba(29,29,31,.97)}}