/* Modulo ordini di CiGi Service: la grafica del prototipo del 06/11/2026, sobria. */
:root { --scuro:#16303b; --accento:#1b5fa8; --rosso:#b4322a; --grigio:#6b7a80; --bordo:#d6dde0; --fondo:#f4f6f7; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.4 system-ui, "Segoe UI", sans-serif; background:var(--fondo); color:#1d2a30; }
header { background:var(--scuro); color:#fff; padding:12px 20px; display:flex; align-items:center; gap:16px; }
header b { font-size:17px; }
header .chi { margin-left:auto; font-size:13px; opacity:.85; }
header .esci { margin:0; }
header button { background:transparent; color:#fff; border:1px solid #fff6; border-radius:6px; padding:4px 10px; cursor:pointer; font:inherit; font-size:13px; }
main { max-width:1000px; margin:24px auto; padding:0 16px; }
.scheda { background:#fff; border:1px solid var(--bordo); border-radius:10px; padding:20px; }
h1 { font-size:20px; margin:0 0 4px; }
h3 { font-size:14px; margin:24px 0 0; color:var(--grigio); }
.sotto { color:var(--grigio); font-size:13px; margin-bottom:16px; }
a { color:var(--accento); }
label { display:block; font-size:13px; color:var(--grigio); margin:12px 0 4px; }
input, textarea, select { width:100%; font:inherit; padding:8px 10px; border:1px solid var(--bordo); border-radius:6px; }
input:focus, textarea:focus { outline:2px solid var(--accento); border-color:transparent; }
input.male { border-color:var(--rosso); background:#fdecea; }
.bottone { display:inline-block; text-decoration:none; background:var(--accento); color:#fff; border:0; border-radius:6px; padding:10px 18px; font:inherit; font-weight:600; cursor:pointer; }
.bottone.secondario { background:#fff; color:var(--accento); border:1px solid var(--accento); }
.bottone:disabled { opacity:.45; cursor:default; }
.login { max-width:360px; margin:60px auto; }
.clienti { list-style:none; padding:0; margin:12px 0 0; max-height:480px; overflow:auto; border:1px solid var(--bordo); border-radius:6px; }
.clienti li a { padding:10px 12px; border-bottom:1px solid var(--bordo); display:flex; gap:12px; color:inherit; text-decoration:none; }
.clienti li a:hover { background:#eef4fb; }
.clienti .cod { color:var(--grigio); min-width:60px; }
table { width:100%; border-collapse:collapse; margin-top:12px; }
th { text-align:left; font-size:12px; color:var(--grigio); font-weight:600; border-bottom:2px solid var(--bordo); padding:6px 8px; }
td { border-bottom:1px solid var(--bordo); padding:6px 8px; vertical-align:middle; }
th.qta, td.qta { width:120px; }
td.qta input { text-align:right; }
tr.compilata { background:#eef4fb; }
tr.separa td { background:var(--fondo); color:var(--grigio); font-size:12px; font-weight:600; }
.volte { color:var(--grigio); font-size:12px; }
td.volte { white-space:nowrap; }
/* Intestazioni che ordinano la lista: clic = crescente, decrescente, ordine di partenza. */
th.ordina { cursor:pointer; user-select:none; white-space:nowrap; }
th.ordina:hover { color:var(--accento); }
th.ordina span { font-size:10px; }
.nuova td { background:#fff8e6; }
.piede { position:sticky; bottom:0; background:#fff; border-top:1px solid var(--bordo); margin:16px -20px -20px; padding:12px 20px; display:flex; gap:12px; align-items:center; border-radius:0 0 10px 10px; }
.piede .conto { margin-right:auto; color:var(--grigio); }
.avviso { background:#fdecea; color:var(--rosso); padding:8px 12px; border-radius:6px; margin-top:12px; }
.info { background:#eef4fb; color:var(--accento); padding:8px 12px; border-radius:6px; margin-top:12px; font-size:13px; }
/* Anteprima dell'ordine: solo le righe compilate, in sola lettura; il pulsante premuto si vede «acceso». */
.anteprima-avviso, .nascosto { display:none !important; }
#modulo.anteprima .anteprima-avviso { display:block !important; background:#fff8e6; color:#7a5a00; padding:8px 12px; border-radius:6px; margin-top:12px; font-size:13px; }
#modulo.anteprima .solo-compila, #modulo.anteprima tr.separa, #modulo.anteprima tr.voce:not(.compilata), #modulo.anteprima tr.nuova:not(.piena) { display:none !important; }
#modulo.anteprima tr.voce.compilata { display:table-row !important; }
#modulo.anteprima input, #modulo.anteprima textarea { background:transparent; border-color:transparent; font-weight:600; }
#anteprima[aria-pressed="true"] { background:var(--accento); color:#fff; }
@media (max-width:600px) { td, th { padding:6px 4px; } th.qta, td.qta { width:80px; } td.volte, th.col-volte { display:none; } }