/* ------------------------------------------------------------------ *
 * Segnala — la bacheca.
 *
 * La grafica viene dalla Santini Suite, che e' il gestionale che Roberto
 * guarda tutto il giorno: carta chiara, riquadri bianchi con un filo di
 * bordo, il carbone #212529 per il testo e l'arancione solo dove c'e' da
 * agire. I loghi dei clienti non entrano: qui dentro il marchio e' il
 * nostro, la goccia.
 *
 * Luce sempre: niente tema scuro. La bacheca si guarda di giorno, al
 * telefono come allo schermo grande, e due temi da tenere allineati sono
 * due occasioni di sbagliare i colori.
 *
 * I caratteri stanno in casa (SIL OFL, licenze accanto ai file): D-DIN Exp
 * per tutto, le cifre di Barlow dove devono incolonnarsi.
 * ------------------------------------------------------------------ */

@font-face{font-family:'D-DIN Exp';font-weight:400;font-style:normal;font-display:swap;
  src:url('/caratteri/d-din-exp-400.woff2') format('woff2')}
@font-face{font-family:'D-DIN Exp';font-weight:700;font-style:normal;font-display:swap;
  src:url('/caratteri/d-din-exp-700.woff2') format('woff2')}
@font-face{font-family:'Cifre';font-weight:400;font-display:swap;unicode-range:U+0030-0039;
  src:url('/caratteri/barlow-cifre-400.woff2') format('woff2')}
@font-face{font-family:'Cifre';font-weight:500;font-display:swap;unicode-range:U+0030-0039;
  src:url('/caratteri/barlow-cifre-500.woff2') format('woff2')}
@font-face{font-family:'Cifre';font-weight:600;font-display:swap;unicode-range:U+0030-0039;
  src:url('/caratteri/barlow-cifre-600.woff2') format('woff2')}

:root{
  /* superfici */
  --fondo:#f6f7f8; --carta:#ffffff; --rail:#fbfbfc; --velo:#fafafb; --tenue:#f0f1f3;
  --filo:#eceef0; --filo-forte:#dcdfe3;
  /* testo: il carbone del sito e i suoi due grigi */
  --ink:#212529; --ink-2:#565d64; --ink-3:#6a727a;
  /* accento: l'arancione, solo dove si agisce o dove si e' */
  --acc:#e5461a; --acc-scuro:#c2380b; --acc-chiaro:#f26a3f;
  --acc-velo:#fef2ec; --acc-filo:#fbc6b1;
  /* le tre tinte che dicono qualcosa */
  --ok:#0d8354; --ok-velo:#e3f7ee;
  --warn:#9c5a0b; --warn-velo:#fdf2e3;
  --neg:#c72d33; --neg-velo:#fdeaec;
  --blu:#1c4fb8; --blu-velo:#e8eefb;

  --testo:'D-DIN Exp','Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --cifre:'Cifre','D-DIN Exp',ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  --raggio-card:18px; --raggio-cmd:12px;
  --ombra:inset 0 1px 0 rgb(255 255 255 / .9),0 1px 2px rgb(26 34 51 / .03),0 10px 28px -8px rgb(32 37 45 / .08);
  --ombra-alta:0 2px 6px rgb(26 34 51 / .05),0 24px 56px -18px rgb(20 25 38 / .22);
  --ombra-acc:0 8px 20px -6px rgb(229 70 26 / .45);
  --posa:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--fondo);color:var(--ink);font-family:var(--testo);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
button,input,textarea{font-family:inherit}
.tnum,.cifra{font-family:var(--cifre);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ testata */
.barra{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--fondo) 86%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--filo)}
.barra .dentro{max-width:1280px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.marchio{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.02em;font-size:18px}
.marchio .goccia{width:28px;height:28px;border-radius:10px;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgb(33 37 41 / .25)}
.marchio .goccia svg{width:16px;height:16px}
.conteggio{font-family:var(--cifre);font-size:12px;color:var(--ink-3);white-space:nowrap;
  text-transform:uppercase;letter-spacing:.04em}
.cresci{flex:1}

.cerca{position:relative;flex:1 1 220px;max-width:360px}
.cerca input{width:100%;height:38px;border:1px solid var(--filo-forte);border-radius:var(--raggio-cmd);
  background:var(--carta);color:var(--ink);padding:0 12px 0 36px;font-size:13.5px;outline:none;
  transition:border-color .15s var(--posa),box-shadow .15s var(--posa)}
.cerca input::placeholder{color:var(--ink-3)}
.cerca input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgb(229 70 26 / .12)}
.cerca svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--ink-3)}

.bottone{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:var(--raggio-cmd);
  border:1px solid var(--filo-forte);background:var(--carta);color:var(--ink);font-size:13px;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:border-color .15s var(--posa),background .15s var(--posa),transform .15s var(--posa)}
.bottone:hover{border-color:var(--ink-3);background:var(--velo)}
.bottone:active{transform:translateY(1px)}
.bottone.pieno{background:var(--acc);border-color:var(--acc);color:#fff;box-shadow:var(--ombra-acc)}
.bottone.pieno:hover{background:var(--acc-scuro);border-color:var(--acc-scuro)}
.bottone svg{width:15px;height:15px}
.bottone.piccolo{height:32px;padding:0 11px;font-size:12px;border-radius:10px}
.bottone.fatto{background:var(--ok-velo);border-color:var(--ok);color:var(--ok)}

/* --------------------------------------------------------- i filtri */
.filtri{max-width:1280px;margin:0 auto;padding:12px 18px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pastiglia{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--filo-forte);background:var(--carta);
  border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer;
  white-space:nowrap;transition:all .15s var(--posa)}
.pastiglia:hover{border-color:var(--ink-3)}
.pastiglia[aria-pressed="true"]{background:var(--acc-velo);border-color:var(--acc);color:var(--acc-scuro);font-weight:700}
.pastiglia .conta{font-family:var(--cifre);font-size:11px;color:var(--ink-3)}
.pastiglia[aria-pressed="true"] .conta{color:var(--acc-scuro)}
.pastiglia .punto{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.pastiglia.nuovo::after{content:"nuovo";font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;
  font-weight:700;color:var(--warn);background:var(--warn-velo);padding:2px 6px;border-radius:999px}

/* ----------------------------------------------------------- elenco */
.foglio{max-width:1280px;margin:0 auto;padding:18px 18px 90px}
.griglia{display:grid;gap:16px;grid-template-columns:1fr;align-items:start}
@media (min-width:920px){.griglia{grid-template-columns:1fr 1fr}}
@media (min-width:1420px){.griglia{grid-template-columns:1fr 1fr 1fr}}

.scheda{background:var(--carta);border:1px solid var(--filo);border-radius:var(--raggio-card);box-shadow:var(--ombra);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s var(--posa)}
.scheda:hover{box-shadow:var(--ombra-alta)}
.scheda .capo{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--filo);background:var(--rail)}
.numero{font-family:var(--cifre);font-size:12px;font-weight:600;color:var(--ink-3)}
.progetto{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--ink);
  text-transform:uppercase;letter-spacing:.04em}
.progetto .punto{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.quando{margin-left:auto;font-family:var(--cifre);font-size:11px;color:var(--ink-3);white-space:nowrap}

.corpo{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.frase{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.voce-detta{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);border-left:2px solid var(--acc);padding-left:11px}
.voce-detta b{color:var(--acc-scuro);font-weight:700}
.etichette{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;
  border-radius:999px;background:var(--tenue);color:var(--ink-2)}
.tag.grafica{background:var(--acc-velo);color:var(--acc-scuro)}
.tag.funzione{background:var(--neg-velo);color:var(--neg)}
.tag.testo{background:var(--blu-velo);color:var(--blu)}
.tag.nuova{background:var(--acc-velo);color:var(--acc-scuro)}
.tag.in_lavorazione{background:var(--warn-velo);color:var(--warn)}
.tag.fatta{background:var(--ok-velo);color:var(--ok)}
.tag.scartata{background:var(--tenue);color:var(--ink-3)}

.dove{margin:0;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);word-break:break-all}
.scatto{border:1px solid var(--filo);border-radius:var(--raggio-cmd);overflow:hidden;background:var(--tenue);cursor:zoom-in}
.scatto img{display:block;width:100%;height:auto;max-height:280px;object-fit:cover}
audio{width:100%;height:36px}

details.tecnico{border-top:1px dashed var(--filo-forte);padding-top:10px}
details.tecnico summary{cursor:pointer;font-size:11px;color:var(--ink-3);list-style:none;
  text-transform:uppercase;letter-spacing:.06em;font-weight:700}
details.tecnico summary::-webkit-details-marker{display:none}
details.tecnico summary::before{content:"▸ ";color:var(--acc)}
details.tecnico[open] summary::before{content:"▾ "}
.tecnico dl{margin:10px 0 0;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:11.5px}
.tecnico dt{color:var(--ink-3);font-family:var(--mono)}
.tecnico dd{margin:0;color:var(--ink-2);word-break:break-all}

.azioni{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-top:1px solid var(--filo);background:var(--velo)}

.vuoto{text-align:center;padding:80px 20px;color:var(--ink-3)}
.vuoto h2{color:var(--ink);font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
.vuoto p{margin:0;font-size:14px}

/* ------------------------------------------------- aggiungi un sito */
.finestra{position:fixed;inset:0;z-index:60;background:rgb(20 25 38 / .45);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:18px;overflow:auto}
.finestra .foglio-bianco{width:min(620px,100%);background:var(--carta);border:1px solid var(--filo);
  border-radius:var(--raggio-card);box-shadow:var(--ombra-alta);overflow:hidden;animation:su .2s var(--posa)}
@keyframes su{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.finestra .capo{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--filo);background:var(--rail)}
.finestra .capo h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.02em}
.finestra .capo .x{margin-left:auto;border:0;background:transparent;color:var(--ink-3);font-size:22px;
  line-height:1;cursor:pointer;padding:2px 8px;border-radius:8px}
.finestra .capo .x:hover{background:var(--tenue);color:var(--ink)}
.finestra .dentro{padding:18px 20px 22px;display:flex;flex-direction:column;gap:14px}
.finestra p{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.6}

.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.campo input{height:40px;border:1px solid var(--filo-forte);border-radius:var(--raggio-cmd);background:var(--carta);
  color:var(--ink);padding:0 13px;font-size:14px;outline:none;transition:border-color .15s var(--posa),box-shadow .15s var(--posa)}
.campo input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgb(229 70 26 / .12)}

.codice{position:relative;background:#1b1e21;border-radius:var(--raggio-cmd);padding:14px 16px;overflow:auto}
.codice code{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:#e8eaec;white-space:pre-wrap;word-break:break-all}
.codice .tag-x{color:#8ab4ff}
.codice .attr{color:#f0a868}
.codice .val{color:#9ddba0}

.passi{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink-2);line-height:1.7}
.passi li+li{margin-top:4px}
.passi code{font-family:var(--mono);font-size:12px;background:var(--tenue);padding:1px 5px;border-radius:5px;color:var(--ink)}

table.attributi{width:100%;border-collapse:collapse;font-size:12.5px}
table.attributi th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);font-weight:700;padding:0 10px 7px 0;border-bottom:1px solid var(--filo)}
table.attributi td{padding:8px 10px 8px 0;border-bottom:1px solid var(--filo);color:var(--ink-2);vertical-align:top}
table.attributi td:first-child{white-space:nowrap;font-family:var(--mono);font-size:11.5px;color:var(--ink)}
table.attributi tr:last-child td{border-bottom:0}

.collegati{display:flex;flex-wrap:wrap;gap:7px}
.collegati .sito{display:inline-flex;align-items:center;gap:7px;background:var(--velo);border:1px solid var(--filo);
  border-radius:999px;padding:5px 12px;font-size:12px;color:var(--ink-2)}
.collegati .sito .punto{width:8px;height:8px;border-radius:50%}

/* ---------------------------------------------------------- lightbox */
.lente{position:fixed;inset:0;z-index:70;background:rgb(13 15 17 / .82);display:flex;align-items:center;
  justify-content:center;padding:22px}
.lente img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 30px 80px rgb(0 0 0 / .5)}
.lente .chiudi{position:absolute;top:18px;right:18px}

/* ------------------------------------------------------------ toast */
.brindisi{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;background:var(--ink);
  color:#fff;border-radius:var(--raggio-cmd);padding:12px 20px;font-size:13.5px;font-weight:600;
  box-shadow:0 14px 34px rgb(0 0 0 / .28)}

/* ----------------------------------------------------------- accesso */
.accesso{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1100px 560px at 50% -10%,#ffffff 0%,var(--fondo) 62%)}
.accesso .riquadro{width:min(390px,100%);background:var(--carta);border:1px solid var(--filo);
  border-radius:20px;box-shadow:var(--ombra);padding:28px}
.accesso h1{font-size:25px;font-weight:700;letter-spacing:-.025em;margin:16px 0 4px}
.accesso p{margin:0 0 20px;color:var(--ink-3);font-size:13.5px}
.accesso input{width:100%;height:44px;border:1px solid var(--filo-forte);border-radius:var(--raggio-cmd);
  background:var(--carta);color:var(--ink);padding:0 14px;font-size:14px;outline:none}
.accesso input:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgb(229 70 26 / .12)}
.accesso .bottone{width:100%;justify-content:center;height:44px;margin-top:12px}
.accesso .male{margin-top:12px;color:var(--neg);background:var(--neg-velo);border-radius:10px;
  padding:9px 12px;font-size:12.5px}

@media (max-width:620px){
  .barra .dentro{padding:10px 14px;gap:9px}
  .cerca{order:3;max-width:none;flex-basis:100%}
  .filtri{padding:10px 14px 0}
  .foglio{padding:14px 14px 80px}
  .finestra{padding:0;align-items:flex-end}
  .finestra .foglio-bianco{border-radius:18px 18px 0 0;max-height:94dvh;overflow:auto}
}