/* Portale ritiro pacchi — grafica comune */
:root{
  --fondo:#F4F2EC; --carta:#FFFFFF; --ink:#13191D; --ink-2:#4A5862; --ink-3:#8A949B;
  --linea:#E2DED3; --blu:#0F4C81; --blu-2:#0B3A63;
  --ok:#1E7A46; --ok-soft:#E3F3E9; --ko:#B3261E; --ko-soft:#FBE7E5; --att:#9A6200; --att-soft:#FFF3D6;
  --r:12px; --ombra:0 1px 2px rgba(0,0,0,.05),0 6px 20px rgba(0,0,0,.06);
  --font:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --fondo:#0E1316; --carta:#172026; --ink:#EEF2F4; --ink-2:#B4C0C7; --ink-3:#7E8B93;
    --linea:#2A363E; --blu:#5AA2E0; --blu-2:#8CC0EE;
    --ok:#4CC27E; --ok-soft:#173326; --ko:#F2786F; --ko-soft:#3A1D1B; --att:#F0B64A; --att-soft:#3A2E14;
    --ombra:none; color-scheme:dark;
  }
}
*{ box-sizing:border-box }
html,body{ margin:0; background:var(--fondo); color:var(--ink); font:16px/1.45 var(--font); -webkit-text-size-adjust:100% }
a{ color:var(--blu) }
h1,h2,h3{ line-height:1.15; margin:0 0 .5rem; letter-spacing:-.02em }
h1{ font-size:1.5rem } h2{ font-size:1.2rem } h3{ font-size:1rem }
.muted{ color:var(--ink-2) } .piccolo{ font-size:.85rem } .nascosto{ display:none !important }

/* barra in alto */
.barra{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:.75rem; padding:.7rem 1rem;
  background:var(--carta); border-bottom:1px solid var(--linea) }
.barra b{ font-size:1rem } .barra .spazio{ flex:1 }
.barra select{ max-width:52vw }
@media (max-width:640px){ .barra .muted{ display:none } .barra .pulsante{ padding:.4rem .6rem; font-size:.85rem } }

.pagina{ max-width:1100px; margin:0 auto; padding:1rem }
.stretta{ max-width:440px }
.riquadro{ background:var(--carta); border:1px solid var(--linea); border-radius:var(--r); padding:1rem; box-shadow:var(--ombra) }
.riquadro + .riquadro{ margin-top:1rem }

/* moduli */
label{ display:block; font-size:.85rem; font-weight:600; margin:.8rem 0 .3rem; color:var(--ink-2) }
input,select,textarea{ width:100%; font:inherit; color:inherit; background:var(--carta); border:1px solid var(--linea);
  border-radius:8px; padding:.65rem .75rem; min-height:44px }
input:focus,select:focus,textarea:focus{ outline:2px solid var(--blu); outline-offset:1px; border-color:transparent }
.riga{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:end } .riga > *{ flex:1 1 160px }
button,.pulsante{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:44px; padding:.6rem 1.05rem;
  border-radius:8px; border:1px solid transparent; background:var(--blu); color:#fff; font:inherit; font-weight:600; cursor:pointer; text-decoration:none }
button:hover{ background:var(--blu-2) }
button:disabled{ opacity:.55; cursor:default }
button.leggero{ background:transparent; color:var(--blu); border-color:var(--linea) }
button.leggero:hover{ background:var(--fondo) }
button.ok{ background:var(--ok) } button.ko{ background:var(--ko) }
button.grande{ min-height:56px; font-size:1.05rem; width:100% }
.messaggio{ padding:.7rem .9rem; border-radius:8px; margin:.8rem 0; font-size:.92rem }
.messaggio.ko{ background:var(--ko-soft); color:var(--ko) } .messaggio.ok{ background:var(--ok-soft); color:var(--ok) }
.messaggio.att{ background:var(--att-soft); color:var(--att) }

/* semafori */
.stato{ display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .6rem; border-radius:999px; font-weight:700; font-size:.82rem; white-space:nowrap }
.stato::before{ content:""; width:.55rem; height:.55rem; border-radius:50% ; background:currentColor }
.stato.valido{ background:var(--ok-soft); color:var(--ok) }
.stato.scaduto,.stato.manca{ background:var(--ko-soft); color:var(--ko) }
.stato.verifica{ background:var(--att-soft); color:var(--att) }

/* schede */
.tab{ display:flex; gap:.25rem; overflow-x:auto; border-bottom:1px solid var(--linea); margin-bottom:1rem }
.tab button{ background:none; color:var(--ink-2); border-radius:0; border-bottom:3px solid transparent; padding:.6rem .9rem; white-space:nowrap }
.tab button[aria-selected=true]{ color:var(--blu); border-bottom-color:var(--blu) }

/* tabelle */
.tabella-wrap{ overflow-x:auto } table{ width:100%; border-collapse:collapse; font-size:.92rem }
th,td{ text-align:left; padding:.55rem .5rem; border-bottom:1px solid var(--linea); vertical-align:middle }
th{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3) }
tr.cliccabile{ cursor:pointer } tr.cliccabile:hover td{ background:var(--fondo) }

/* finestra */
dialog{ border:none; border-radius:var(--r); padding:0; width:min(680px, 96vw); background:var(--carta); color:var(--ink) }
dialog::backdrop{ background:rgba(0,0,0,.45) }
dialog .corpo{ padding:1rem 1.1rem 1.2rem; max-height:82vh; overflow:auto }
dialog .piede{ display:flex; gap:.5rem; justify-content:flex-end; padding:.8rem 1.1rem; border-top:1px solid var(--linea) }

/* PIN mostrato una volta */
.pin{ font:700 2rem/1 ui-monospace,Menlo,monospace; letter-spacing:.25em; padding:.8rem; text-align:center; background:var(--fondo); border-radius:8px; margin:.6rem 0 }

/* foto */
.foto{ width:100%; border-radius:8px; border:1px solid var(--linea); background:var(--fondo); display:block }
.foto-vuota{ display:grid; place-items:center; min-height:140px; border:1px dashed var(--linea); border-radius:8px; color:var(--ink-3); font-size:.9rem; text-align:center; padding:1rem }