/*  Console operatore — foglio di stile unico.
    Palette prugna su neutri caldi; verde/ambra/rosso restano riservati agli
    stati (in chiamata, attenzione, blocco) e non vengono mai usati come accento
    decorativo. Tema chiaro e scuro sugli stessi token.                        */

:root {
    --paper: #FBF7F8;
    --surface: #FFFFFF;
    --surface-2: #F4EDEF;
    --line: #E2D5DA;
    --line-strong: #C9B5BD;
    --ink: #241A1E;
    --ink-2: #5C4E54;
    --ink-3: #8A7A80;
    --accent: #8C2F55;
    --accent-ink: #FFFFFF;
    --accent-soft: #F6E6EC;
    --ok: #1C6E45;
    --ok-soft: #E3F1E9;
    --warn: #96600A;
    --warn-soft: #FAEEDA;
    --stop: #A32820;
    --stop-soft: #FAE7E5;
    --on-semantic: #FFFFFF;
    --shadow: 0 1px 2px rgba(36,26,30,.06), 0 6px 20px -12px rgba(36,26,30,.28);
    --radius: 6px;
    --ui: ui-sans-serif, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #171013;
        --surface: #1F1619;
        --surface-2: #2A1E23;
        --line: #3A2A30;
        --line-strong: #543C45;
        --ink: #F3E9EC;
        --ink-2: #C0AEB5;
        --ink-3: #8E7B83;
        --accent: #E4739B;
        --accent-ink: #24101A;
        --accent-soft: #3A2028;
        --ok: #6FCB99;
        --ok-soft: #1B2E24;
        --warn: #E0AC5B;
        --warn-soft: #332614;
        --stop: #F08880;
        --stop-soft: #35201E;
        --on-semantic: #16100F;
        --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.8);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--ui);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

.muted { color: var(--ink-3); font-weight: 500; }
.ml-auto { margin-left: auto; }
.mt { margin-top: 14px; }

.eyebrow {
    font-size: 10.5px; font-weight: 650; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3);
}

/* ---------- top bar ---------- */
.topbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px;
    padding: 12px 22px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: baseline; gap: 9px; margin-right: auto; }
.brand b { font-size: 15px; font-weight: 680; letter-spacing: -.01em; }
.brand span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.topfield { display: flex; flex-direction: column; gap: 2px; }
.topfield .v { font-size: 13px; font-weight: 600; }
.divider-v { width: 1px; align-self: stretch; background: var(--line); }

/* ---------- banner ---------- */
.banner {
    max-width: 1400px; margin: 14px auto 0; padding: 10px 16px;
    border-radius: var(--radius); font-size: 13.5px; font-weight: 560;
    border: 1px solid;
}
.banner-errore { background: var(--stop-soft); color: var(--stop); border-color: var(--stop); }
.banner-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }

/* ---------- layout ---------- */
.console {
    display: grid;
    grid-template-columns: minmax(0,1fr) 330px;
    gap: 18px;
    align-items: start;
    padding: 18px 22px 48px;
    max-width: 1400px; margin: 0 auto;
}
@media (max-width: 980px) { .console { grid-template-columns: 1fr; } }
.stack { display: flex; flex-direction: column; gap: 18px; }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card > header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    border-radius: var(--radius) var(--radius) 0 0;
}
.card > .body, .card form > .body { padding: 14px; }

/* ---------- contatto ---------- */
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 620;
    padding: 3px 9px; border-radius: 999px; border: 1px solid transparent;
}
.chip.is-client { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.chip.is-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.chip.is-stop { background: var(--stop-soft); color: var(--stop); border-color: var(--stop); }
.chip.is-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.chip.is-mute { background: var(--surface-2); color: var(--ink-2); border-color: var(--line-strong); }

.who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.who h1 { font-size: 27px; font-weight: 660; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.who .rs { font-size: 14px; color: var(--ink-2); }
.who .cid {
    font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
    border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px;
}
.addr { margin-top: 6px; color: var(--ink-2); font-size: 13px; }

.phones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
@media (max-width: 620px) { .phones { grid-template-columns: 1fr; } }
.phone {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--paper);
}
.phone .num { font-family: var(--mono); font-size: 17px; font-variant-numeric: tabular-nums; }
.phone .lbl { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- pulsanti ---------- */
button { font-family: inherit; cursor: pointer; }
.btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 640;
    padding: 8px 15px; border-radius: 5px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
    transition: background .12s ease, border-color .12s ease;
    text-decoration: none;
}
.btn:hover { background: var(--surface-2); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled] { opacity: .42; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--surface); }
.btn-call {
    background: var(--ok); border-color: var(--ok); color: var(--on-semantic);
    font-size: 14px; padding: 9px 18px;
}
.btn-call:hover { background: var(--ok); filter: brightness(1.08); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-quiet { background: none; border-color: transparent; color: var(--ink-3); font-weight: 560; }
.btn-quiet:hover { background: var(--surface-2); color: var(--ink); }

/* ---------- stato chiamata ---------- */
.callstate {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 16px; padding: 11px 13px;
    border-radius: var(--radius);
    border: 1px dashed var(--line-strong);
    background: var(--paper);
}
.callstate .msg { font-size: 12.5px; color: var(--ink-2); }
.console[data-call="live"] .callstate { border-style: solid; border-color: var(--ok); background: var(--ok-soft); }
.console[data-call="live"] .callstate .msg { color: var(--ok); font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; }
.console[data-call="live"] .dot { background: var(--ok); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .console[data-call="live"] .dot { animation: none; } }

/* ---------- form esito ---------- */
.lockbar {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--warn);
    background: var(--warn-soft);
    border-bottom: 1px solid var(--line);
    padding: 8px 14px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 10.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.field.is-required > label::after { content: " *"; color: var(--accent); }

select, input[type="text"], input[type="email"], input[type="password"],
input[type="datetime-local"], textarea {
    font-family: inherit; font-size: 13.5px; color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line-strong); border-radius: 5px;
    padding: 7px 9px; width: 100%;
}
textarea { resize: vertical; min-height: 74px; line-height: 1.5; }
select:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
fieldset { border: 0; padding: 0; margin: 0; }
fieldset[disabled] { opacity: .5; }

.formfoot {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 12px 14px; border-top: 1px solid var(--line);
    background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius);
}
.formfoot .note { font-size: 11.5px; color: var(--ink-3); margin-left: auto; }

/* ---------- selettore data e ora (Air Datepicker) ----------
   Il componente espone il proprio tema come variabili --adp-*: si rimappano
   sui token della console, cosi' segue il tema chiaro/scuro senza doverne
   riscrivere i selettori.                                                    */
.air-datepicker {
    --adp-font-family: var(--ui);
    --adp-font-size: 13px;
    /* la griglia dei giorni misura ~324px: sotto questa soglia l'ultima
       colonna (domenica) resta tagliata fuori */
    --adp-width: 340px;
    --adp-color: var(--ink);
    --adp-color-secondary: var(--ink-3);
    --adp-background-color: var(--surface);
    --adp-background-color-hover: var(--surface-2);
    --adp-background-color-active: var(--surface-2);
    --adp-border-color: var(--line-strong);
    --adp-border-color-inner: var(--line);
    --adp-border-radius: var(--radius);
    --adp-day-name-color: var(--ink-3);
    --adp-cell-border-radius: 4px;
    --adp-color-current-date: var(--accent);
    --adp-color-other-month: var(--ink-3);
    --adp-color-disabled: var(--ink-3);

    --adp-cell-background-color-selected: var(--accent);
    --adp-cell-background-color-selected-hover: var(--accent);
    --adp-cell-background-color-hover: var(--surface-2);
    --adp-cell-background-color-in-range: var(--accent-soft);

    --adp-btn-color: var(--ink-2);
    --adp-btn-color-hover: var(--accent);
    --adp-btn-height: 30px;

    --adp-time-track-color: var(--line-strong);
    --adp-time-track-color-hover: var(--ink-3);
    --adp-time-day-period-color: var(--ink-3);
    --adp-accent-color: var(--accent);

    --adp-nav-color-secondary: var(--ink-3);
    --adp-nav-arrow-color: var(--ink-2);
    --adp-nav-action-color: var(--ink-2);
    --adp-nav-height: 34px;

    box-shadow: var(--shadow);
}
/* Il giorno scelto: la variabile da sola non basta, nella vista giorni la
   libreria applica il proprio azzurro con un selettore piu' specifico. */
.air-datepicker-cell.-selected-,
.air-datepicker-cell.-selected-.-current-,
.air-datepicker-cell.-selected-:hover {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 650;
}
.air-datepicker-nav--title { font-weight: 650; }
.air-datepicker-nav--title:hover { color: var(--accent); }

/* Le scorciatoie stanno su due colonne: in fila unica andrebbero a capo in
   modo disordinato e finirebbero sotto il pulsante Cancella. */
.air-datepicker-buttons {
    display: grid;
    /* la libreria imposta grid-auto-flow: column, che allineerebbe i cinque
       pulsanti su una riga sola schiacciandoli */
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 8px;
}
.air-datepicker-button.adp-quick {
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 5px;
    padding: 5px 6px;
    font-size: 11px;
    font-weight: 580;
    height: auto;
    min-height: 28px;
    color: var(--ink-2);
    line-height: 1.2;
}
.air-datepicker-button.adp-quick:hover {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}
/* Cancella occupa la riga intera, sotto le scorciatoie */
.air-datepicker-button:not(.adp-quick) {
    grid-column: 1 / -1;
    font-size: 11.5px;
    color: var(--ink-3);
}
.air-datepicker-button:not(.adp-quick):hover { color: var(--stop); }

/* ---------- pannello destro ---------- */
.kpi { display: grid; grid-template-columns: 1fr 1fr; }
.kpi div { padding: 11px 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kpi div:nth-child(2n) { border-right: 0; }
.kpi div:nth-last-child(-n+2) { border-bottom: 0; }
.kpi .n {
    font-family: var(--mono); font-size: 20px; font-weight: 620;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
    display: block; margin-top: 2px;
}
.kpi .n.accent { color: var(--accent); }

.rows { display: flex; flex-direction: column; }
.row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 9px 13px; border-bottom: 1px solid var(--line); font-size: 13px;
}
.row:last-child { border-bottom: 0; }
.row .k { color: var(--ink-3); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; flex: none; }
.row .v { text-align: right; font-weight: 560; }
.row .v.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.prevnote { padding: 11px 13px; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.prevnote .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); display: block; margin-bottom: 4px; }

/* ---------- sezioni a tutta larghezza sotto l'area di lavoro ---------- */
.scheda, .console ~ .card {
    max-width: 1400px;
    margin: 0 auto 18px;
    width: calc(100% - 44px);
}
.muted { color: var(--ink-3); }
.vuoto-sez { padding: 22px 14px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* ---------- scheda cliente ---------- */
.scheda > .body { display: flex; flex-direction: column; gap: 14px; }
.scheda-stato { display: flex; align-items: center; gap: 12px; }
.salvato { font-size: 11.5px; color: var(--ok); font-weight: 650; opacity: 0; transition: opacity .2s ease; }
.salvato.on { opacity: 1; }
.salvato.errore { color: var(--stop); }

.campi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
@media (max-width: 980px) { .campi { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .campi { grid-template-columns: 1fr; } }
.campi .span2 { grid-column: span 2; }
@media (max-width: 560px) { .campi .span2 { grid-column: span 1; } }
.stretto { max-width: 120px; }

.calcolata {
    font-size: 9px; font-weight: 650; letter-spacing: .06em;
    background: var(--accent-soft); color: var(--accent);
    border-radius: 3px; padding: 1px 5px; margin-left: 5px;
}
input[readonly] { background: var(--surface-2); color: var(--ink-2); cursor: default; }

.spunte {
    display: flex; gap: 24px; flex-wrap: wrap;
    padding: 11px 13px; background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--radius);
}
.flag { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.flag input { width: 15px; height: 15px; accent-color: var(--accent); }

/* ---------- storico ordini ---------- */
.ordine { border-bottom: 1px solid var(--line); }
.ordine:last-of-type { border-bottom: 0; }
.ordine > summary {
    list-style: none; cursor: pointer;
    display: grid; grid-template-columns: 22px 96px 1fr 160px 110px;
    gap: 12px; align-items: center; padding: 11px 14px;
}
.ordine > summary::-webkit-details-marker { display: none; }
.ordine > summary:hover { background: var(--surface-2); }
.ordine[open] > summary { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ordine > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 760px) {
    .ordine > summary { grid-template-columns: 18px 1fr auto; row-gap: 4px; }
    .ordine > summary .oqta { display: none; }
}
.frec { color: var(--ink-3); font-size: 12px; transition: transform .15s ease; display: inline-block; }
.ordine[open] .frec { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .frec { transition: none; } }

.odata { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.ocod { font-size: 12px; color: var(--ink-3); font-family: var(--mono); margin-left: 8px; }
.ototale { font-family: var(--mono); font-size: 15px; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.oqta { font-size: 11.5px; color: var(--ink-3); }

.prodotti { padding: 4px 14px 14px 48px; background: var(--paper); }
@media (max-width: 760px) { .prodotti { padding-left: 14px; } }
.prodotti table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 420px; }
.prodotti th {
    text-align: left; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 650; padding: 7px 8px; border-bottom: 1px solid var(--line);
}
.prodotti td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.prodotti tr:last-child td { border-bottom: 0; }
.prodotti .num { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.prodotti th.num { text-align: right; }
.prodotti .promo { color: var(--ink-3); font-family: var(--ui); font-style: italic; font-size: 11.5px; }
.cat { font-size: 10.5px; color: var(--ink-3); display: block; }

.chip.is-om {
    background: var(--warn-soft); color: var(--warn); border-color: var(--warn);
    font-size: 10px; padding: 1px 7px; margin-left: 6px;
}

/* la promozione fa da intestazione ai prodotti che contiene */
.prodotti tr.riga-promo td {
    background: var(--accent-soft);
    font-weight: 620;
    border-top: 1px solid var(--accent);
    border-bottom: 1px solid var(--accent);
    color: var(--accent);
}
.prodotti tr.riga-promo .cat { color: var(--accent); opacity: .75; }
.prodotti tr.riga-promo .forte { font-family: var(--mono); font-size: 13.5px; font-weight: 680; }
.prodotti tr.figlia td:first-child { padding-left: 22px; }
.prodotti .incluso { color: var(--ink-3); font-family: var(--ui); font-style: italic; font-size: 11.5px; }

/* campo richiamo spento quando l'esito non lo prevede */
.field.is-spento > label { opacity: .5; }
.field.is-spento input { background: var(--surface-2); color: var(--ink-3); }
.field.is-spento .dp-toggle { opacity: .4; pointer-events: none; }
.aiuto { font-size: 11.5px; color: var(--ink-3); min-height: 15px; }
.altri { padding: 11px 14px; text-align: center; border-top: 1px solid var(--line); background: var(--surface-2); }

/* ---------- coda vuota ---------- */
.vuoto { max-width: 520px; margin: 90px auto; text-align: center; padding: 0 22px; }
.vuoto h1 { font-size: 22px; font-weight: 660; margin: 0 0 8px; }
.vuoto p { color: var(--ink-2); margin: 0 0 20px; }

/* ---------- login ---------- */
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login-card {
    width: min(370px, 92vw);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px;
}
.login-brand { display: flex; flex-direction: column; gap: 2px; margin-bottom: 22px; }
.login-brand b { font-size: 18px; font-weight: 680; }
.login-brand span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form .btn { justify-content: center; margin-top: 4px; }
.login-errore {
    margin: 0; padding: 9px 12px; border-radius: 5px; font-size: 13px;
    background: var(--stop-soft); color: var(--stop); border: 1px solid var(--stop);
}


/* ---------- maschera ordine ----------
   Regole riprese dal mockup approvato (Specifiche/mockup-ordine.html).
   .console e .stack sono gia' definite sopra e identiche: si riusano.
   .who / .addr divergono solo per la spaziatura, perche' qui stanno dentro
   una card mentre in telefonate stanno dentro .body: si qualificano come
   figli diretti di .card per non toccare l'altra pagina.                   */
.card > .who { padding: 14px 14px 0; }
.card > .who h1 { font-size: 23px; }
.card > .addr { padding: 4px 14px 0; margin-top: 0; }
/* ====== layout della pagina ordine ====== */
.sotto{max-width:1400px;margin:0 auto 18px;width:calc(100% - 44px)}

/* intestazione cliente + riga indicatori */
.kpi4{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:12px}
@media (max-width:760px){.kpi4{grid-template-columns:1fr 1fr}}
.kpi4>div{padding:10px 13px;border-right:1px solid var(--line)}
.kpi4>div:last-child{border-right:0}
@media (max-width:760px){.kpi4>div:nth-child(2n){border-right:0}}
.kpi4 .n{font-family:var(--mono);font-size:18px;font-weight:620;font-variant-numeric:tabular-nums;letter-spacing:-.02em;display:block;margin-top:2px}
.kpi4 .n.accent{color:var(--accent)}
.kpi4 .sub{font-size:11px;color:var(--ink-3)}

/* righe dell'ordine */
.righe table{width:100%;border-collapse:collapse;font-size:13px}
.righe th{text-align:left;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:650;padding:8px 10px;border-bottom:1px solid var(--line)}
.righe td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.righe .num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.righe th.num{text-align:right}
.righe .cat{font-size:10.5px;color:var(--ink-3);display:block}
.righe tr.riga-promo td{background:var(--accent-soft);font-weight:620;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);color:var(--accent)}
.righe tr.figlia td:first-child{padding-left:26px}
.righe .incluso{color:var(--ink-3);font-style:italic;font-size:11.5px}
.chip.is-om{background:var(--warn-soft);color:var(--warn);border-color:var(--warn);font-size:10px;padding:1px 7px;margin-left:6px}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:5px;overflow:hidden}
.stepper button{width:26px;height:26px;border:0;background:var(--surface);color:var(--ink-2);font-size:14px;font-weight:700;line-height:1}
.stepper button:hover{background:var(--surface-2);color:var(--ink)}
.stepper .q{width:34px;text-align:center;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.togli{border:0;background:none;color:var(--ink-3);font-size:15px;padding:2px 6px;border-radius:4px}
.togli:hover{background:var(--stop-soft);color:var(--stop)}
.vuote{padding:18px;text-align:center;color:var(--ink-3);font-size:13px}

/* totali */
.totali{display:flex;flex-direction:column;gap:6px;align-items:flex-end;padding:12px 14px;border-top:1px solid var(--line);background:var(--paper)}
.totali .rt{display:flex;align-items:center;gap:14px;font-size:13px}
.totali .rt .l{color:var(--ink-3);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.totali .rt .v{font-family:var(--mono);font-variant-numeric:tabular-nums;min-width:92px;text-align:right}
.totali input{width:92px;text-align:right;font-family:var(--mono);padding:4px 7px}
.totali .grande .v{font-size:20px;font-weight:680}
.totali .grande .l{color:var(--ink);font-weight:650}

/* selettore prodotti */
.picker .cerca{padding:10px 12px;border-bottom:1px solid var(--line)}
.pk-cat{border-bottom:1px solid var(--line)}
.pk-cat:last-child{border-bottom:0}
.pk-cat>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:12px;font-weight:650}
.pk-cat>summary::-webkit-details-marker{display:none}
.pk-cat>summary:hover{background:var(--surface-2)}
.pk-cat>summary .frec{color:var(--ink-3);font-size:11px;transition:transform .15s ease}
.pk-cat[open]>summary .frec{transform:rotate(90deg)}
.pk-cat>summary .conta{margin-left:auto;font-size:10.5px;color:var(--ink-3);font-family:var(--mono)}
.pk-riga{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 12px 8px 26px;border-top:1px dashed var(--line);align-items:center}
.pk-riga:hover{background:var(--surface-2)}
.pk-riga .nome{font-size:12.5px;line-height:1.3}
.pk-riga .sub{grid-column:1;display:flex;gap:8px;align-items:center;font-size:11px;color:var(--ink-3)}
.pk-riga .sub .prezzo{font-family:var(--mono);font-size:12px;color:var(--ink);font-weight:620}
/* colonna esplicita: con la sola grid-row l'algoritmo di auto-piazzamento
   metterebbe il pulsante in colonna 1, spingendo il nome a destra */
.pk-riga .piu{grid-column:2;grid-row:1/3;align-self:center}
.piu{width:30px;height:30px;border-radius:5px;border:1px solid var(--line-strong);background:var(--surface);color:var(--accent);font-size:16px;font-weight:700;line-height:1}
.piu:hover{background:var(--accent-soft);border-color:var(--accent)}
.disp{font-size:10px;font-weight:650;padding:1px 6px;border-radius:999px}
.disp.ok{background:var(--ok-soft);color:var(--ok)}
.disp.poca{background:var(--warn-soft);color:var(--warn)}
.disp.zero{background:var(--stop-soft);color:var(--stop)}

/* promozioni */
.promo-riga{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 12px;border-bottom:1px solid var(--line);align-items:center}
.promo-riga:last-child{border-bottom:0}
.promo-riga .nome{font-size:12.5px;font-weight:600;line-height:1.3}
.promo-riga .sub{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--ink-3)}
.promo-riga .sub .prezzo{font-family:var(--mono);font-size:12.5px;color:var(--accent);font-weight:680}
.promo-riga .piu{grid-column:2;grid-row:1/3;align-self:center}
.promo-riga .chip{grid-column:2;justify-self:end}

/* destinazione diversa */
.dest>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--paper);font-size:13px;color:var(--ink-2)}
.dest>summary::-webkit-details-marker{display:none}
.dest>summary:hover{border-color:var(--accent);color:var(--ink)}
.dest[open]>summary{border-style:solid;border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.dest .campi-dest{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;padding:14px 2px 2px}
@media (max-width:760px){.dest .campi-dest{grid-template-columns:1fr 1fr}}
.dest .span2{grid-column:span 2}

/* storico ordini (identico alla pagina telefonate) */
.ordine{border-bottom:1px solid var(--line)}
.ordine:last-of-type{border-bottom:0}
.ordine>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:22px 96px 1fr 160px 110px;gap:12px;align-items:center;padding:11px 14px}
.ordine>summary::-webkit-details-marker{display:none}
.ordine>summary:hover{background:var(--surface-2)}
.ordine[open]>summary{background:var(--surface-2);border-bottom:1px solid var(--line)}
.frec{color:var(--ink-3);font-size:12px;transition:transform .15s ease;display:inline-block}
.ordine[open] .frec{transform:rotate(90deg)}
.odata{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.ocod{font-size:12px;color:var(--ink-3);font-family:var(--mono);margin-left:8px}
.ototale{font-family:var(--mono);font-size:15px;font-weight:650;text-align:right;font-variant-numeric:tabular-nums}
.oqta{font-size:11.5px;color:var(--ink-3)}
.prodotti{padding:4px 14px 14px 48px;background:var(--paper)}
.prodotti table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:420px}
.prodotti th{text-align:left;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:650;padding:7px 8px;border-bottom:1px solid var(--line)}
.prodotti td{padding:7px 8px;border-bottom:1px solid var(--line)}
.prodotti tr:last-child td{border-bottom:0}
.prodotti .num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.prodotti th.num{text-align:right}
.prodotti tr.riga-promo td{background:var(--accent-soft);font-weight:620;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);color:var(--accent)}
.prodotti tr.figlia td:first-child{padding-left:22px}
.prodotti .incluso{color:var(--ink-3);font-style:italic;font-size:11.5px}
.cat{font-size:10.5px;color:var(--ink-3);display:block}

/* note cliente */
.salvato{font-size:11.5px;color:var(--ok);font-weight:650}
.meta-nota{font-family:var(--mono);font-size:11px;color:var(--ink-3)}

/* spunta omaggio per riga: la decide l'operatrice */
.om-tog{border:1px dashed var(--line-strong);background:none;color:var(--ink-3);font-size:10px;font-weight:620;padding:1px 8px;border-radius:999px;margin-left:6px;vertical-align:1px}
.om-tog:hover{border-color:var(--warn);color:var(--warn)}
.om-tog.on{border-style:solid;background:var(--warn-soft);color:var(--warn);border-color:var(--warn);font-weight:650}
tr[data-om="1"] [data-totale-riga]{color:var(--warn);font-style:italic}


/* contenuto della promozione al passaggio del mouse.
   Si apre verso sinistra perche' il pannello sta sul bordo destro della
   finestra: aprendolo a destra finirebbe fuori schermo. */
.promo-riga { position: relative; }
.promo-dettaglio {
    position: absolute; top: 0; right: calc(100% + 8px); z-index: 30;
    width: 300px; padding: 10px 12px;
    background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--radius); box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateX(4px);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
    pointer-events: none;
}
.promo-riga:hover .promo-dettaglio,
.promo-riga:focus-within .promo-dettaglio {
    opacity: 1; visibility: visible; transform: translateX(0);
}
.promo-dettaglio .pd-titolo {
    font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 650; margin-bottom: 6px;
}
.promo-dettaglio ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.promo-dettaglio li { font-size: 12px; line-height: 1.35; }
.promo-dettaglio .pd-qta { font-family: var(--mono); font-weight: 680; color: var(--accent); }
.promo-dettaglio .pd-cat { display: block; font-size: 10px; color: var(--ink-3); }
.promo-dettaglio .pd-cond {
    margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line);
    font-size: 11px; color: var(--ink-2); font-style: italic;
}
/* sotto i 980px le colonne si impilano e non c'e' spazio a sinistra:
   il riquadro passa sotto la riga */
@media (max-width: 980px) {
    .promo-dettaglio { position: static; width: auto; margin-top: 8px; transform: none; box-shadow: none; }
    .promo-riga:hover .promo-dettaglio { transform: none; }
}

/* barra di ricerca prodotti con il comando apri/chiudi tutte */
.picker .cerca { display: flex; gap: 8px; align-items: center; }
.picker .cerca input { flex: 1; min-width: 0; }
.btn-sm { font-size: 11px; padding: 4px 9px; white-space: nowrap; }

/* ---------- home operatore ----------
   Regole riprese dal mockup approvato (Specifiche/mockup-home.html).
   I token e i componenti comuni (card, chip, btn, topbar) sono gia' definiti
   sopra: qui c'e' solo quello che la home aggiunge.                        */

/* avviso giallo: la telefonata ancora in mano non e' un errore ne' una
   conferma, quindi non poteva riusare banner-errore o banner-ok */
.banner-avviso { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.banner .ml { margin-left: auto; }

.home {
    max-width: 1400px; margin: 0 auto;
    padding: 18px 22px 48px;
    display: flex; flex-direction: column; gap: 18px;
}

/* la voce piu' usata sta da sola in cima: fra tutte le schermate della
   console, "prossima chiamata" e' l'unica che si apre cento volte al giorno */
.hero {
    display: grid; grid-template-columns: minmax(0,1fr) auto;
    gap: 18px 28px; align-items: center;
    padding: 20px 22px;
}
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; } }
.hero h1 { margin: 6px 0 0; font-size: 29px; font-weight: 660; letter-spacing: -.02em; text-wrap: balance; }
.hero p { margin: 8px 0 0; color: var(--ink-2); max-width: 56ch; }
.hero .azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.hero .nota { font-size: 11.5px; color: var(--ink-3); }
.btn-lg { font-size: 14px; padding: 10px 20px; }

.oggi { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 820px) { .oggi { width: 100%; } }
.oggi > div { padding: 11px 18px; border-right: 1px solid var(--line); min-width: 104px; }
.oggi > div:last-child { border-right: 0; }
.oggi .n {
    display: block; margin-top: 3px;
    font-family: var(--mono); font-size: 21px; font-weight: 620;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.oggi .n.accent { color: var(--accent); }

.sezione { display: flex; align-items: baseline; gap: 10px; }
.sezione h2 { margin: 0; font-size: 13px; font-weight: 660; }
.sezione .riga { flex: 1; height: 1px; background: var(--line); }

/* sei voci: tre per riga, cosi' restano due righe piene invece di una riga
   da cinque e un avanzo */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px) { .tiles { grid-template-columns: 1fr; } }

.tile {
    display: flex; flex-direction: column; gap: 6px;
    padding: 15px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.tile h3 { margin: 2px 0 0; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.tile p { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.tile .piede { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; }

/* schermata non ancora realizzata: fondo tratteggiato e titolo smorzato, per
   distinguerla a colpo d'occhio da una che si puo' aprire */
.tile.is-soon { background: var(--surface-2); border-style: dashed; box-shadow: none; }
.tile.is-soon h3 { color: var(--ink-2); }

/* piastrella che si puo' aprire: le altre restano riquadri inerti finche' la
   schermata non esiste */
a.tile { text-decoration: none; color: inherit; transition: border-color .12s ease; }
a.tile:hover { border-color: var(--accent); }
a.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { a.tile { transition: none; } }

/* ---------- elenchi (chiamate effettuate) ---------- */
.titolo-elenco { margin: 2px 0 0; font-size: 17px; font-weight: 660; letter-spacing: -.01em; }
.filtro { display: flex; align-items: center; gap: 8px; }
.filtro select { width: auto; }

/* la tabella scorre dentro il suo riquadro: su schermo stretto e' l'elenco a
   scorrere di lato, non tutta la pagina */
.elenco-scorre { overflow-x: auto; }
.elenco { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.elenco th {
    text-align: left; padding: 8px 10px;
    font-size: 10.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-3); border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.elenco td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.elenco tr:last-child td { border-bottom: 0; }
.elenco tbody tr:hover { background: var(--surface-2); }
.elenco td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* colonna di importi: allineata a destra, cosi' le cifre si confrontano a
   colpo d'occhio invece di ballare da una riga all'altra */
.elenco th.num, .elenco td.num { text-align: right; }
/* Seconda riga dentro la cella: la ragione sociale sotto il nome della persona.
   Non si chiama .sotto perche' quel nome e' gia' preso dalla maschera d'ordine,
   dove vale margin:0 auto e width:calc(100% - 44px): dentro una cella di
   tabella centrava la ragione sociale invece di allinearla al nome. */
.elenco .azienda { display: block; font-size: 11.5px; color: var(--ink-3); }

/* ---------- provvigioni del mese ----------
   La striscia dei tre numeri e' quella della home, ma qui vive dentro una
   card e non nella griglia della pagina: percio' ha margini propri e le
   colonne si dividono lo spazio invece di stare al minimo. */
.riepilogo-mese {
    display: flex; margin: 0 14px 14px;
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 700px) { .riepilogo-mese { flex-direction: column; } }
.riepilogo-mese > div { flex: 1; padding: 11px 18px; border-right: 1px solid var(--line); }
.riepilogo-mese > div:last-child { border-right: 0; }
@media (max-width: 700px) {
    .riepilogo-mese > div { border-right: 0; border-bottom: 1px solid var(--line); }
    .riepilogo-mese > div:last-child { border-bottom: 0; }
}
.riepilogo-mese .n {
    display: block; margin-top: 3px;
    font-family: var(--mono); font-size: 21px; font-weight: 620;
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.riepilogo-mese .n.accent { color: var(--accent); }

/* la riga che spiega quando un ordine entra nel conteggio: e' la prima
   domanda che fara' chi apre la pagina */
.spiega { padding: 0 14px 12px; margin: 0; font-size: 12.5px; color: var(--ink-2); max-width: 78ch; }

/* intestazione che copre piu' colonne (le tre aliquote IVA) */
.elenco th.gruppo { text-align: center; border-bottom: 1px solid var(--line); font-size: 10px; }
/* importo della provvigione, con sotto la percentuale applicata */
.elenco .prov { font-weight: 660; }
.elenco .perc { display: block; font-size: 10.5px; color: var(--ink-3); font-weight: 500; }

/* ---------- indirizzo di consegna: trasloco o consegna una tantum ---------- */
.dest .in-anagrafica {
    margin: 10px 2px 0; font-size: 12.5px; color: var(--ink-3);
}
.dest .scelta-indirizzo { gap: 7px; }
/* la scelta e' una decisione, non un campo: si stacca dagli input con una
   riga sopra invece di stare appiccicata all'ultimo riquadro */
.dest .scelta-indirizzo { border-top: 1px solid var(--line); padding-top: 11px; margin-top: 4px; }
.dest .scelta {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.dest .scelta input { margin-top: 2px; accent-color: var(--accent); }
.dest .scelta b { color: var(--ink); font-weight: 640; }

/* ---------- dettaglio dell'ordine ---------- */
.stato-ordine { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }

/* colonna del pulsante in fondo alla riga dell'elenco */
.elenco td.azione { text-align: right; white-space: nowrap; padding: 5px 10px; }
/* intestazione che serve solo a chi legge con lo screen reader */
.visuale-nascosta {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}