/* Pannello vendite di Groomy — foglio di stile unico.

   Non estende `static/style.css` del gestionale di proposito: quello e' il
   sistema visivo del negozio (menu, moduli, palette "Calma"), questo e' un
   back-office nostro che gira su un altro dominio. Condivide pero' la stessa
   identita' del sito vetrina — blu notte, arancio caldo, magenta — cosi' un
   cliente che passa da groomy.it alla sua area non cambia mondo. */

:root{
  --ink:#0F1B3C; --testo:#1C2233; --muted:#5C6472; --line:#E3E1DC;
  --sfondo:#F7F6F3; --carta:#FFFFFF; --caldo:#F16D4B; --ambra:#FBAB61;
  --magenta:#B23E9C; --verde:#1F7A5C; --rosso:#B03A2E; --nota:#F4F7FB;
  --r-s:10px; --r-m:16px; --r-l:22px;
  --ombra-s:0 1px 2px rgba(15,27,60,.06), 0 4px 14px rgba(15,27,60,.05);
  --ombra-m:0 2px 6px rgba(15,27,60,.07), 0 18px 44px rgba(15,27,60,.09);
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--sfondo); color:var(--testo);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:#0C5C8C}
h1,h2,h3{color:var(--ink); letter-spacing:-.02em; line-height:1.15; margin:0}
h1{font-size:1.9rem} h2{font-size:1.3rem} h3{font-size:1.05rem}
p{margin:0 0 1em}

.marchio{font-size:19px; font-weight:800; color:#fff; text-decoration:none; letter-spacing:-.02em}
.marchio .punto{
  display:inline-block; width:8px; height:8px; border-radius:50%; margin-left:3px;
  background:linear-gradient(135deg,var(--ambra),var(--caldo) 45%,var(--magenta));
}

.testata{background:var(--ink); color:#fff; padding:0}
.testata .dentro{
  max-width:1180px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:22px;
}
.testata nav{display:flex; gap:18px; margin-left:auto; flex-wrap:wrap}
.testata nav a{color:rgba(255,255,255,.72); text-decoration:none; font-size:14.5px}
.testata nav a:hover,.testata nav a.qui{color:#fff}
.testata .chi{font-size:13px; color:rgba(255,255,255,.5)}

main{max-width:1180px; margin:0 auto; padding:26px 20px 70px}
.stretto{max-width:640px}

.carta{
  background:var(--carta); border:1px solid var(--line); border-radius:var(--r-m);
  padding:20px 22px; box-shadow:var(--ombra-s); margin:0 0 18px;
}
.carta h2{margin:0 0 14px}
.griglia{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* Un elemento di una griglia nasce con `min-width:auto`: non si stringe sotto
   la larghezza del suo contenuto. Basta una tabella un po' larga dentro una
   scheda perche' la colonna diventi piu' larga dello schermo e la PAGINA
   scorra in orizzontale — anche se la tabella e' dentro `.tabellona`, che
   avrebbe dovuto scorrere da sola. Visto a 390px sull'area dell'agente il
   21-08-2026: 404px di pagina su 390 di schermo. */
.griglia > *{min-width:0}

.dato{background:var(--carta); border:1px solid var(--line); border-radius:var(--r-m); padding:18px 20px}
.dato .n{font-size:1.9rem; font-weight:700; letter-spacing:-.03em; color:var(--ink); line-height:1.1}
.dato .e{font-size:13.5px; color:var(--muted)}
.dato--attenzione{border-color:rgba(241,109,75,.45); background:rgba(241,109,75,.05)}

table{border-collapse:collapse; width:100%; font-size:14.5px; background:#fff}
th,td{border-bottom:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top}
th{background:#F4F3EF; font-weight:700; color:var(--ink); font-size:13px;
   text-transform:uppercase; letter-spacing:.04em}
tr:hover td{background:#FBFAF8}
.tabellona{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* Testo di servizio sotto un titolo o un dato: la stessa cosa che `.campo
   .aiuto` fa dentro i moduli, ma fuori dai moduli. Stava scritta a mano nelle
   pagine con uno `style=` ogni volta. */
.nota{font-size:13.5px; color:var(--muted); margin:8px 0 0}

/* Quanto del compreso e' stato usato. Non ha numeri dentro: il numero e' scritto
   sotto, questa e' solo la forma — chi non distingue i colori legge comunque
   «212 su 300» nel testo, e chi usa un lettore di schermo trova l'aria-label. */
.barra-consumo{height:9px; border-radius:999px; background:var(--nota);
               border:1px solid #D9E3EE; overflow:hidden; margin:10px 0 0}
.barra-consumo span{display:block; height:100%; background:var(--verde);
                    border-radius:999px; transition:width .4s ease}
/* Dai tre quarti in su cambia colore: e' l'avviso che il mese sta per uscire
   dal compreso, che e' esattamente quando serve saperlo. La soglia la decide il
   template — un selettore sull'attributo `style` prenderebbe il 19% insieme al
   90%. */
.barra-consumo span.quasi{background:var(--ambra)}
.barra-consumo span.oltre{background:var(--caldo)}

.pillola{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700}
.p-verde{background:rgba(31,122,92,.12); color:var(--verde)}
.p-caldo{background:rgba(241,109,75,.14); color:var(--caldo)}
.p-blu{background:rgba(12,92,140,.12); color:#0C5C8C}
.p-grigio{background:rgba(92,100,114,.12); color:var(--muted)}
.p-rosso{background:rgba(176,58,46,.12); color:var(--rosso)}

.bottone{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:600; text-decoration:none; line-height:1.2;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.bottone:hover{transform:translateY(-1px)}
.b-pieno{background:var(--ink); color:#fff}
.b-caldo{background:var(--caldo); color:#fff}
.b-contorno{border-color:rgba(15,27,60,.22); color:var(--ink); background:#fff}
.b-piccolo{padding:7px 14px; font-size:13.5px}
.bottoni{display:flex; gap:10px; flex-wrap:wrap}

.campo{margin:0 0 15px}
.campo label{display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin:0 0 5px}
.campo input,.campo select,.campo textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-s);
  font-family:inherit; font-size:16px; background:#fff; color:var(--testo);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(15,27,60,.09);
}
.campo .aiuto{font-size:12.5px; color:var(--muted); margin:5px 0 0}
.riga-campi{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}

.scelta{
  display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line);
  border-radius:var(--r-s); padding:13px 15px; margin:0 0 9px; cursor:pointer; background:#fff;
  transition:border-color .15s ease, background .15s ease;
}
.scelta:hover{border-color:rgba(15,27,60,.3)}
.scelta input{margin-top:3px; width:18px; height:18px; flex:none; accent-color:#0F1B3C}
.scelta b{display:block; color:var(--ink); font-size:15px}
.scelta span{font-size:13.5px; color:var(--muted)}
.scelta .prezzo{margin-left:auto; font-weight:700; color:var(--ink); white-space:nowrap}
.scelta:has(input:checked){border-color:var(--ink); background:var(--nota)}

.avviso{border-radius:var(--r-s); padding:12px 15px; font-size:14.5px; margin:0 0 16px;
        background:var(--nota); border:1px solid #D9E3EE; color:var(--ink)}
.avviso--ok{background:rgba(31,122,92,.08); border-color:rgba(31,122,92,.3)}
.avviso--no{background:rgba(241,109,75,.09); border-color:rgba(241,109,75,.35)}

.totale{
  background:var(--ink); color:#fff; border-radius:var(--r-m); padding:20px 22px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.totale .cifra{font-size:2.1rem; font-weight:700; letter-spacing:-.03em; line-height:1}
.totale small{color:rgba(255,255,255,.62); font-size:13px}

.passi{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.passi li{display:flex; gap:10px; align-items:center; font-size:14px}
.passi .segno{
  width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:#EDEBE6; color:var(--muted); font-size:12px; font-weight:700;
}
.passi .fatto .segno{background:rgba(31,122,92,.15); color:var(--verde)}
.passi .errore .segno{background:rgba(176,58,46,.14); color:var(--rosso)}

.piede{color:var(--muted); font-size:13px; text-align:center; padding:0 20px 40px}

@media (max-width:820px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3,.g2{grid-template-columns:1fr}
  .riga-campi{grid-template-columns:1fr}
  .testata .dentro{flex-wrap:wrap; gap:10px}
  .testata nav{margin-left:0; width:100%; gap:14px}
  main{padding:18px 14px 60px}
  .carta{padding:16px 15px}
}