@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/static/fonts/Poppins-Regular.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/static/fonts/Poppins-Medium.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("/static/fonts/Poppins-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/static/fonts/Poppins-Bold.ttf") format("truetype"); }

:root {
  /* colori presi dal marchio KRATOS (Brand/) */
  --pergamena: #E4DBCA;   /* fondo del logo */
  --carta: #FFFEFB;       /* schede, tasti e tabelle: bianco caldo */
  --inchiostro: #3E1A12;  /* bruno-bordeaux della scritta */
  --bronzo: #8C5A44;      /* rame dell'elmo */
  --rosso: #B3121F;       /* rosso degli occhi */
  --verde: #2E6B3A;
  --linea: #CDBFA6;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--pergamena);  /* stesso colore del fondo del logo */
  color: var(--inchiostro);
  font: 16px/1.5 "Poppins", system-ui, sans-serif;
}
main { max-width: 1100px; margin: 0 auto; padding: 16px; }
a { color: var(--bronzo); }
h1 { font-weight: 600; font-size: 1.6rem; margin: .4rem 0 1rem; }

/* intestazione */
.barra {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; background: transparent; color: var(--inchiostro);
  border-bottom: 2px solid var(--bronzo);
}
.marchio { display: flex; align-items: center; gap: 8px; margin-right: auto; text-decoration: none; }
.marchio img { height: 42px; }
.marchio .scritta { height: 30px; }
.profilo {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border: 2px solid var(--bronzo); border-radius: 50%; color: var(--bronzo); background: var(--carta);
}
.profilo .icona { width: 28px; height: 28px; }
.utente-card { display: flex; align-items: center; gap: 16px; background: var(--carta); border: 1px solid var(--linea); border-radius: 12px; padding: 16px; }
.utente-card .icona { width: 56px; height: 56px; color: var(--bronzo); }
.utente-card .nome { font-size: 1.3rem; font-weight: 600; }
.esci { margin-top: 28px; }
.esci .btn { width: 100%; background: var(--rosso); border-color: var(--rosso); color: var(--carta); }

/* pulsanti */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 18px; border: 2px solid var(--bronzo); border-radius: 8px;
  background: var(--carta); color: var(--inchiostro); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.btn.primario { background: var(--bronzo); color: var(--carta); }
.btn.pericolo { border-color: var(--rosso); color: var(--rosso); }
.btn.piccolo { min-height: 40px; padding: 0 12px; }
.azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 1rem 0; }

/* moduli */
.modulo { display: grid; gap: 14px; max-width: 720px; }
.modulo label { display: grid; gap: 4px; font-weight: 600; }
.modulo .riga { display: flex; gap: 18px; flex-wrap: wrap; font-weight: normal; }
.modulo .riga label { display: flex; align-items: center; gap: 6px; font-weight: normal; }
input, select, textarea {
  min-height: 48px; padding: 8px 12px; font: inherit; color: inherit;
  border: 1px solid var(--linea); border-radius: 8px; background: #FBF8F1;
}
input[type=radio], input[type=checkbox] { min-height: auto; width: 24px; height: 24px; }
.errore { background: #EFD3C9; border-left: 5px solid var(--rosso); padding: 12px 14px; border-radius: 6px; }
.ok { background: #DCE3CC; border-left: 5px solid var(--verde); padding: 12px 14px; border-radius: 6px; }

/* accesso */
.accesso { display: grid; justify-items: center; gap: 12px; margin-top: 4vh; }
.accesso .modulo { width: 100%; max-width: 360px; }
.logo-grande { width: 180px; }
.scritta-grande { width: 240px; }

/* home */
.ricerca { display: flex; gap: 10px; margin-bottom: 14px; }
.ricerca input { flex: 1; }
.banner {
  display: block; margin: 8px 0; padding: 12px 16px; border-radius: 8px;
  background: var(--carta); border: 2px solid var(--bronzo); color: var(--inchiostro);
  font-weight: 600; text-decoration: none;
}
.banner.rosso { background: var(--rosso); border-color: var(--rosso); color: var(--carta); }
.sezioni { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.tasto-sezione {
  aspect-ratio: 1 / .8; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 12px; text-align: center; text-decoration: none;
  background: var(--carta); color: var(--inchiostro); border: 2px solid var(--bronzo); border-radius: 14px;
  font-size: 1.1rem; font-weight: 600;
  box-shadow: 0 2px 0 var(--linea);
}
.tasto-sezione:active, .tasto-gestione:active { transform: translateY(2px); }
.icona { width: 52px; height: 52px; flex: none; }
.tasto-sezione .icona { color: var(--bronzo); }
.gestione { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.tasto-gestione {
  display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 84px;
  border-radius: 14px; color: var(--carta); text-decoration: none; font-size: 1.3rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.tasto-gestione .icona { width: 34px; height: 34px; }
.tasto-gestione.scuro { background: var(--inchiostro); }
.tasto-gestione.rosso { background: var(--rosso); }
.badge { background: var(--carta); color: var(--rosso); border-radius: 999px; padding: 0 10px; font-size: 1rem; }
.sotto { text-align: center; margin-top: 18px; }
@media (max-width: 700px) {
  .sezioni { grid-template-columns: repeat(2, 1fr); }
  .tasto-sezione { font-size: 1.05rem; }
}

/* tabelle */
.tabella { width: 100%; border-collapse: collapse; background: var(--carta); border-radius: 8px; overflow: hidden; }
.tabella th, .tabella td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--linea); }
.tabella th { background: var(--inchiostro); color: var(--carta); font-weight: 600; }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; }
.scorrevole { overflow-x: auto; }
.scaduto { color: var(--rosso); font-weight: 700; }
.codice-grande { font: 700 72px/1 "Poppins", sans-serif; letter-spacing: .05em; margin: 1rem 0; }
.scheda { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; background: var(--carta); padding: 14px; border-radius: 8px; }
.scheda dt { font-weight: 600; }
.scheda dd { margin: 0; }
.testata { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
h2 { font-weight: 600; font-size: 1.2rem; margin: 1.4rem 0 .6rem; }
.filtro { width: 100%; margin-bottom: 10px; }
.modifica { margin-top: 12px; }
.modifica summary { list-style: none; }
.modifica .modulo { margin-top: 12px; }
.conteggi { display: grid; gap: 8px; }
.conteggio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--carta); border: 1px solid var(--linea); border-left: 5px solid var(--linea); border-radius: 8px; padding: 10px 12px; }
.conteggio.fatto { border-left-color: var(--verde); }
.conteggio .voce { flex: 1; min-width: 200px; display: grid; }
.conteggio .numero { width: 110px; font-size: 1.3rem; text-align: right; }

/* foto profilo */
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar.vuoto { display: inline-flex; align-items: center; justify-content: center; color: var(--bronzo); background: var(--carta); }
.avatar.vuoto .icona { width: 60%; height: 60%; }
.avatar.piccolo { width: 36px; height: 36px; }
.avatar.medio { width: 64px; height: 64px; }
.avatar.grande { width: 96px; height: 96px; }
.profilo { overflow: hidden; padding: 0; }
.profilo .avatar { width: 100%; height: 100%; }
.persona { display: inline-flex; align-items: center; gap: 12px; }
.persone { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; border: 0; padding: 0; margin: 0; }
.persone legend { font-weight: 600; margin-bottom: 6px; }
.persona-scelta {
  display: grid; justify-items: center; gap: 6px; padding: 10px; text-align: center; cursor: pointer;
  background: var(--carta); border: 2px solid var(--linea); border-radius: 12px; font-weight: 500;
}
.persona-scelta input { position: absolute; opacity: 0; pointer-events: none; }
.persona-scelta:has(input:checked) { border-color: var(--bronzo); box-shadow: 0 0 0 3px var(--bronzo) inset; }
.persona-scelta:has(input:focus-visible) { outline: 3px solid var(--inchiostro); }

/* animazioni di apertura: brevi, per non rallentare chi usa l'app tutto il giorno */
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes appare { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes risveglio {
  0% { opacity: 0; transform: scale(.85); filter: drop-shadow(0 0 0 rgba(179, 18, 31, 0)); }
  60% { opacity: 1; transform: scale(1.03); filter: drop-shadow(0 0 22px rgba(179, 18, 31, .55)); }
  100% { transform: none; filter: drop-shadow(0 0 0 rgba(179, 18, 31, 0)); }
}
main > * { animation: entra .3s ease-out both; }
.sezioni > *, .gestione > * { animation: appare .35s cubic-bezier(.2, .8, .3, 1.2) both; }
.sezioni > :nth-child(2) { animation-delay: .04s; }
.sezioni > :nth-child(3) { animation-delay: .08s; }
.sezioni > :nth-child(4) { animation-delay: .12s; }
.sezioni > :nth-child(5) { animation-delay: .16s; }
.sezioni > :nth-child(6) { animation-delay: .2s; }
.gestione > :nth-child(1) { animation-delay: .26s; }
.gestione > :nth-child(2) { animation-delay: .3s; }
.persone > * { animation: appare .3s ease-out both; }
.logo-grande { animation: risveglio 1.1s ease-out both; }
.scritta-grande { animation: entra .6s .5s ease-out both; }
.accesso .modulo { animation: entra .5s .7s ease-out both; }
.tasto-sezione, .tasto-gestione, .btn, .persona-scelta { transition: transform .12s, box-shadow .12s, background-color .12s; }
@media (hover: hover) {
  .tasto-sezione:hover, .tasto-gestione:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(62, 26, 18, .15); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ticket */
.ticket { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center;
  background: var(--carta); border: 1px solid var(--linea); border-left: 5px solid var(--bronzo); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.ticket .persona { align-items: flex-start; }
.ticket .azioni { margin: 0; }
.in-linea { display: flex; gap: 8px; flex-wrap: wrap; }
.in-linea input { min-width: 180px; }
.etichetta { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: .85rem; font-weight: 600;
  background: var(--pergamena); border: 1px solid var(--linea); }
.etichetta.guasto, .etichetta.licenza { background: var(--rosso); color: var(--carta); border-color: var(--rosso); }
.etichetta.stato-evasa, .etichetta.stato-presa, .etichetta.stato-rinnovata { background: #DCE3CC; border-color: var(--verde); }
.etichetta.stato-rifiutata { background: #EFD3C9; border-color: var(--rosso); }
.etichetta.disponibile { background: #DCE3CC; border-color: var(--verde); color: var(--verde); }
.etichetta.da-ordinare { background: #EFD3C9; border-color: var(--rosso); color: var(--rosso); }
.etichetta.in-ordine, .etichetta.stato-in_ordine { background: #F3E3C3; border-color: #B07A1E; color: #7A5212; }
.etichetta.stato-vista { background: #E3DDF0; border-color: #6B5A9A; color: #4A3C78; }
.codici { display: flex; flex-wrap: wrap; gap: 10px; margin: 1rem 0; }
.codice-medio { font: 700 1.6rem/1 "Poppins", sans-serif; padding: 10px 14px; background: var(--carta); border: 2px solid var(--bronzo); border-radius: 8px; color: var(--inchiostro); text-decoration: none; }

/* --- grafica 2: tasti bianchi, illustrazioni bordeaux, sfondo con circuiti e filigrana --- */
:root { --bianco: #FFFEFB; --bordeaux: #8E2F2F; --rosato: #D4D0CB;  /* colori dell'elmo DPI */ --bordo: #D6CCBB; --ombra: 0 2px 4px rgba(62, 26, 18, .16); }
body { background: #F0EADD url("/static/circuito.svg") no-repeat right bottom / min(1200px, 120vw) auto fixed; }
body::after {
  content: ""; position: fixed; right: -40px; bottom: -40px; width: 340px; height: 350px; z-index: -1; pointer-events: none;
  background: url("/static/logo.png") no-repeat center / contain; opacity: .07; filter: grayscale(1);
}
.barra { background: #E8DFCD; border-bottom: 0; padding: 10px 18px; }
.marchio img { height: 50px; }
.marchio .scritta { height: 34px; }
.profilo { width: 52px; height: 52px; border: 0; box-shadow: var(--ombra); }

.ricerca input { background: #ECEDEE; border-color: #C9C2B6; }
.btn.cerca { background: var(--bianco); border: 1px solid var(--bordo); color: var(--bordeaux); box-shadow: var(--ombra); }
.btn.cerca .icona { width: 22px; height: 22px; }

.banner { background: rgba(255, 254, 251, .55); border: 1px solid var(--bordo); font-weight: 500; }
.banner::before { content: "•  "; }
.banner.rosso::before { content: ""; }

.tasto-sezione {
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: 6px; box-shadow: var(--ombra);
  font-weight: 500; font-size: 1.15rem; color: #2A1D18; gap: 14px;
}
.illustrazione { width: 104px; height: 104px; color: var(--bordeaux); }
.illustrazione .pieno { fill: var(--rosato); }
.illustrazione .bianco { fill: var(--bianco); }
.illustrazione .scuro { fill: currentColor; }

.tasto-gestione { border-radius: 6px; box-shadow: 0 3px 6px rgba(62, 26, 18, .25); min-height: 88px; font-size: 1.35rem; }
.tasto-gestione .icona { width: 36px; height: 36px; }
.sotto a { color: var(--inchiostro); text-decoration: none; font-weight: 500; }
@media (max-width: 700px) { .illustrazione { width: 80px; height: 80px; } }
.tabella td.codice { white-space: nowrap; }
.tabella td.codice summary { cursor: pointer; color: var(--bronzo); font-weight: 600; }
.pezzi { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }

/* acquisti */
.filtri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.filtri select, .filtri input { flex: 1 1 160px; }
.totali { background: var(--carta); border: 1px solid var(--linea); border-radius: 8px; padding: 10px 14px; }
.etichetta.acq-in_approvazione { background: #ECEDEE; }
.etichetta.acq-approvato { background: #E3DDF0; border-color: #6B5A9A; color: #4A3C78; }
.etichetta.acq-ordinato { background: #F3E3C3; border-color: #B07A1E; color: #7A5212; }
.etichetta.acq-chiuso { background: #DCE3CC; border-color: var(--verde); color: var(--verde); }
.etichetta.acq-non_approvato, .etichetta.acq-annullato { background: #EFD3C9; border-color: var(--rosso); color: var(--rosso); }
.schede { display: flex; gap: 6px; margin-bottom: 14px; }
.schede > * { padding: 10px 18px; border: 2px solid var(--bronzo); border-radius: 8px; text-decoration: none; font-weight: 600; color: var(--bronzo); }
.schede .scheda-attiva { background: var(--bronzo); color: var(--carta); }
.oppure { margin: 4px 0; color: var(--bronzo); }
.btn.google { width: 100%; max-width: 360px; background: #fff; border-color: var(--bordo); color: #3c4043; gap: 10px; }
.tasto-gestione.rame { background: var(--bronzo); }
.tasto-gestione.largo { grid-column: 1 / -1; }
.tasto-gestione.rame .badge { color: var(--bronzo); }
/* etichette di stato: una riga, testo centrato */
.etichetta { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; text-align: center; line-height: 1.3; padding: 3px 12px; min-width: 7.5em; }
.tabella td .etichetta { vertical-align: middle; }