/* Colori presi dal logo del Gruppo Comunale di Protezione Civile Perusia: blu #0000FF e rosso #FF0000. */
:root {
  --blu: #0000FF; --blu-scuro: #0000B3; --blu-chiaro: #E6E6FF;
  --rosso: #FF0000; --rosso-testo: #D00000; --rosso-chiaro: #FFE9E9;
  --sfondo: #F3F4FA; --carta: #fff; --testo: #12142B; --grigio: #5A5F7A; --bordo: #D6D9EA;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sfondo); color: var(--testo); font: 16px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#app { min-height: 100vh; display: flex; flex-direction: column; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h2 { margin: 0 0 .6rem; font-size: 1.25rem; color: var(--blu); }
h3 { margin: 1.2rem 0 .4rem; font-size: 1rem; color: var(--blu-scuro); }

.testata { background: var(--blu); color: #fff; padding: calc(env(safe-area-inset-top) + .6rem) 1rem .6rem; display: flex; justify-content: space-between; align-items: center; gap: .8rem; border-bottom: 4px solid var(--rosso); }
.testata .marchio { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.testata .marchio img { width: 34px; height: 34px; border-radius: 50%; background: #fff; flex: none; }
.testata .titolo { font-weight: 700; letter-spacing: .01em; line-height: 1.15; }
.testata .utente { font-size: .9rem; display: flex; gap: .7rem; align-items: center; white-space: nowrap; }
button.link { background: none; border: 0; color: inherit; text-decoration: underline; padding: .3rem; }
button.link-blu { color: var(--blu); padding: .4rem 0; }
.sepa { margin-top: .8rem; }
main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 1rem 1rem 6.5rem; }
.tabs { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--blu); border-top: 1px solid var(--blu-scuro); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
.tabs button { flex: 1; background: none; border: 0; color: #CBCCFF; padding: .8rem .2rem; font-size: .85rem; border-top: 4px solid transparent; }
.tabs button.attivo { color: #fff; border-top-color: var(--rosso); font-weight: 700; }

.carta { background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 1rem; margin-bottom: .8rem; }
label { display: block; font-weight: 600; font-size: .9rem; margin: .8rem 0 .25rem; color: var(--blu-scuro); }
input[type=text], input[type=search], input[type=date], input[type=time], input[type=password], select, textarea {
  width: 100%; padding: .65rem .7rem; border: 1px solid var(--bordo); border-radius: 8px; background: #fff; min-height: 44px; }
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid rgba(0,0,255,.35); outline-offset: 1px; }
.riga { display: flex; gap: .6rem; }
.riga > * { flex: 1; min-width: 0; }
.btn { display: block; background: var(--rosso-testo); color: #fff; border: 0; border-radius: 10px; padding: .8rem 1.1rem; font-weight: 700; font-size: 1.05rem; min-height: 46px; width: 100%; margin-top: 1rem; }
.btn.secondario { background: #fff; border: 1px solid var(--blu); color: var(--blu); font-weight: 600; font-size: 1rem; }
.btn.pericolo { background: #fff; border: 1px solid var(--rosso-testo); color: var(--rosso-testo); font-weight: 600; font-size: 1rem; }
.btn[disabled] { opacity: .55; cursor: wait; }
.btn.piccolo { width: auto; margin: 0; padding: .45rem .8rem; min-height: 38px; }

.voce { display: block; width: 100%; text-align: left; background: var(--carta); border: 1px solid var(--bordo); border-left: 4px solid var(--blu); border-radius: 12px; padding: .8rem 1rem; margin-bottom: .55rem; }
.voce .alto { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.voce .nome { font-weight: 700; }
.voce .sotto { color: var(--grigio); font-size: .88rem; margin-top: .15rem; }
.badge { display: inline-block; font-size: .75rem; font-weight: 700; background: var(--blu-chiaro); color: var(--blu); border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; }
.badge.grigio { background: #E8E9F1; color: var(--grigio); }
.badge.rosso { background: var(--rosso-chiaro); color: var(--rosso-testo); }
.info { background: var(--rosso-chiaro); color: var(--rosso-testo); border: 1px solid #F2B5B5; border-radius: 8px; padding: .6rem .8rem; margin: 0 0 .8rem; font-size: .92rem; }
.conta { font-weight: 700; color: var(--blu); white-space: nowrap; }

.filtri { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .8rem; }
.filtri .largo { grid-column: 1 / -1; }
.numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .8rem; }
.numeri div { background: var(--carta); border: 1px solid var(--bordo); border-top: 4px solid var(--rosso); border-radius: 12px; padding: .7rem .5rem; text-align: center; }
.numeri b { display: block; font-size: 1.6rem; color: var(--blu); }
.numeri span { font-size: .78rem; color: var(--grigio); }

.scelta { max-height: 320px; overflow-y: auto; border: 1px solid var(--bordo); border-radius: 8px; background: #fff; margin-top: .3rem; }
.scelta label { display: flex; align-items: center; gap: .7rem; margin: 0; padding: .6rem .8rem; font-weight: 400; color: var(--testo); border-bottom: 1px solid #EEF0F7; min-height: 44px; cursor: pointer; }
.scelta label:last-child { border-bottom: 0; }
.scelta input { width: 22px; height: 22px; flex: none; accent-color: var(--blu); }
.scelta .spento { color: var(--grigio); }
.conteggio { font-size: .9rem; color: var(--grigio); margin-top: .3rem; }
.vuoto { color: var(--grigio); text-align: center; padding: 1.5rem 0; }
.errore { background: var(--rosso-chiaro); color: var(--rosso-testo); border: 1px solid #F2B5B5; border-radius: 8px; padding: .6rem .8rem; margin-top: .8rem; }
.indietro { background: none; border: 0; color: var(--blu); font-weight: 600; padding: .3rem 0; margin-bottom: .4rem; }
.azioni-export { display: flex; gap: .6rem; margin-top: .6rem; }
.azioni-export a { flex: 1; text-align: center; text-decoration: none; }

.accesso { margin: auto; width: 100%; max-width: 380px; padding: 1.2rem; }
.accesso .logo { text-align: center; margin-bottom: 1rem; }
.accesso .logo img { width: 112px; height: 112px; }
.accesso h1 { text-align: center; font-size: 1.3rem; color: var(--blu); margin: 0 0 .2rem; }
.accesso p.sotto { text-align: center; color: var(--rosso-testo); font-weight: 600; margin: 0 0 1rem; }
input.pin { text-align: center; font-size: 1.6rem; letter-spacing: .5em; }

.avvisi { position: fixed; left: 0; right: 0; bottom: 5rem; display: flex; flex-direction: column; align-items: center; gap: .4rem; pointer-events: none; z-index: 9; }
.avviso { background: var(--blu-scuro); color: #fff; padding: .6rem 1rem; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.25); max-width: 90%; }
.avviso.ko { background: var(--rosso-testo); }
.nojs { padding: 2rem; text-align: center; }
@media (prefers-color-scheme: dark) {
  :root { --sfondo: #0A0B1F; --carta: #14163A; --testo: #E8EAFB; --grigio: #A3A8C8; --bordo: #2A2D5C; --blu-chiaro: #1B1D6B; --rosso-chiaro: #3A1414; }
  h2, .accesso h1, .conta, .numeri b, .indietro, button.link-blu, .badge { color: #9DA2FF; }
  h3, label { color: #B9BDFF; }
  input[type=text], input[type=search], input[type=date], input[type=time], input[type=password], select, textarea, .scelta { background: #0E1030; }
  .btn.secondario, .btn.pericolo { background: #14163A; }
  .btn.secondario { color: #9DA2FF; border-color: #9DA2FF; }
  .btn.pericolo { color: #FF8A8A; border-color: #FF8A8A; }
  .errore, .info { color: #FFB0B0; border-color: #6A2A2A; }
  .badge.rosso { background: #4A1A1A; color: #FFB0B0; }
  .accesso p.sotto { color: #FF8A8A; }
}