/* ═══════════════════════════════════════════════════════════════════════
   MyShop Cloud — il foglio di stile GLOBALE: i colori (le variabili CSS in
   :root), la plancia, le classi comuni di tutte le pagine (.scheda, .chip,
   .btn-primo, .ingresso, .tendina, .avviso, .tessera-kpi …).
   Fino al 19/8/2026 stava dentro <style> in Components\App.razor (583 righe
   inline, riscaricate a ogni pagina); ora è un file statico che il browser
   tiene in cache. Le regole di UNA pagina restano nel <style> in fondo alla
   sua .razor. Le variabili (var(--accento), var(--bordo), var(--sfondo)) sono
   definite qui: usarle, non inventare colori.
   Quando lo si modifica, alzare il ?v= in App.razor così i browser lo ricaricano.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Layout "Plancia" (proposta A, scelta di Nanni 1/8/2026):
      palette ClsTheme chiara del desktop, barra laterale scura ── */
:root {
    --sfondo: #EEF1F4;          /* PlanciaBg chiaro */
    --carta: #FFFFFF;
    --carta2: #E9F0F7;          /* card chiara */
    --bordo: #D5DCE5;
    --accento: #2E5E8F;         /* blu MyShop (PlanciaAccent) */
    --accento-vivo: #3D7AB8;
    --ink: #1F2630;             /* PlanciaInk */
    --muto: #6B7684;            /* PlanciaMuted */
    --ok: #176138; --ok-bg: #C6ECD0;
    --no: #8F2E2E; --no-bg: #F7CDC7;
    --lato: #1B2A40;            /* barra laterale */
}

* { box-sizing: border-box; margin: 0; }

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--sfondo);
    color: var(--ink);
}

.tela { display: flex; flex-direction: column; min-height: 100vh; }

/* ── la barretta «torna alla Plancia» delle finestre ───────────── */
.barra-torna {
    display: flex; align-items: center; gap: .9rem;
    background: var(--lato); color: #C7D3E4; padding: .45rem 1.1rem;
}
.torna-plancia {
    color: #fff; text-decoration: none; font-size: .86rem; font-weight: 700;
    padding: .28rem .7rem; border: 1px solid #3d5578; border-radius: 8px;
}
.torna-plancia:hover { border-color: #7FB2E5; background: rgba(255, 255, 255, .07); }
.logo-mini { height: 20px; opacity: .9; }
.chi-mini { margin-left: auto; font-size: .74rem; color: #7E8CA6; }

/* ── la Plancia di comando (il FrmPanelControl del web) ────────── */
.plancia-testa {
    display: flex; align-items: center; gap: .8rem;
    background: var(--lato); border-radius: 14px;
    padding: .8rem 1.2rem; margin-bottom: 1.1rem;
}
.plancia-logo { width: 168px; display: block; }
.plancia-motto { font-size: .62rem; color: #7E8CA6; text-transform: uppercase; letter-spacing: .12em; align-self: flex-end; padding-bottom: .5rem; }
.plancia-oggi { margin-left: auto; color: #C7D3E4; font-size: .84rem; font-weight: 600; }
.plancia-orologio { flex: none; display: flex; }
/* Sul telefono l'intestazione va a capo: logo e orologio sulla prima riga, la
   data sotto a tutta larghezza, il motto sparisce — prima la data sbordava
   fuori dal riquadro e l'orologio finiva tagliato (screenshot di Nanni, 20/8). */
@media (max-width: 760px) {
    .plancia-testa { flex-wrap: wrap; gap: .4rem .6rem; padding: .7rem .9rem; }
    .plancia-logo { width: 132px; }
    .plancia-motto { display: none; }
    .plancia-orologio { margin-left: auto; }
    .plancia-oggi { flex: 1 1 100%; order: 3; margin-left: 0; font-size: .78rem; }
}
/* Sei colonne, non cinque: le fasce da sei (Ogni giorno, Impostazioni)
   riempiono la riga esatta e nessuna tessera resta sola in fondo con
   mezzo schermo vuoto accanto — che era la cosa che si notava di più. */
.tessere-app { display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem; margin-bottom: 1.2rem; }
@media (max-width: 1250px) { .tessere-app { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1100px) { .tessere-app { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px) { .tessere-app { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .tessere-app { grid-template-columns: repeat(2, 1fr); } }
.tessera-app {
    background: var(--carta); border: 1px solid var(--bordo); border-radius: 14px;
    min-height: 128px; padding: .95rem 1rem;
    display: flex; flex-direction: column; justify-content: space-between;
    text-decoration: none; color: var(--ink); font-weight: 700; font-size: .95rem;
}
.tessera-app:hover { border-color: var(--accento-vivo); box-shadow: 0 4px 14px rgba(46, 94, 143, .18); }

/* ── i titoli delle fasce della plancia ──────────────────────────
      Piccoli e spaziati: devono dividere lo sguardo senza rubare
      la scena alle tessere, che sono la cosa da guardare. */
.fascia-plancia {
    font-size: .68rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muto);
    margin: 1.5rem .2rem .5rem; display: flex; align-items: center; gap: .8rem;
}
.fascia-plancia::after {
    content: ""; flex: 1; height: 1px; background: var(--bordo);
}
.fascia-plancia:first-of-type { margin-top: .2rem; }
.ico-app { color: var(--accento); display: inline-flex; }
/* le icone vettoriali (componente Icona, stile ClsIcons del desktop) */
.icona { vertical-align: -0.18em; flex-shrink: 0; }
button .icona, a .icona, .chip .icona { vertical-align: -0.22em; }
.cruscotto .nota .spark { vertical-align: middle; margin-left: .45rem; }
.delta-su { color: #176138; }
.delta-giu { color: #C01C1C; }
.fondo-plancia { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 1.3rem; }
.fondo-plancia .spinta { flex: 1; }
.esci-rosso:hover { color: #C01C1C; border-color: #C01C1C; }

/* ── l'orologio analogico (lancette in CSS puro) ───────────────── */
.orologio { display: inline-flex; flex-shrink: 0; }
.orologio .quadrante { fill: #101A2E; stroke: #3d5578; stroke-width: 1.5; }
.orologio .tacca { stroke: #596C85; stroke-width: 1.6; stroke-linecap: round; }
.orologio .lancetta {
    transform-origin: 20px 20px; stroke-linecap: round;
    animation-name: giro-lancetta; animation-timing-function: linear; animation-iteration-count: infinite;
}
.orologio .ore { stroke: #C7D3E4; stroke-width: 2.6; animation-duration: 43200s; }
.orologio .minuti { stroke: #C7D3E4; stroke-width: 1.8; animation-duration: 3600s; }
.orologio .secondi { stroke: #4DA3FF; stroke-width: 1; animation-duration: 60s; }
.orologio .perno { fill: #4DA3FF; }
@keyframes giro-lancetta { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── la Regia: cielo d'accesso e attesa ────────────────────────── */
.attesa-regia, .cielo {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1.6rem;
    background: radial-gradient(130% 140% at 28% 8%, #101A2E 0%, #0B1120 55%, #090E1A 100%);
}
.attesa-regia img, .cielo .insegna { width: min(560px, 92vw); display: block; }
.cartello { display: flex; flex-direction: column; gap: .55rem; width: min(340px, 92vw); }
.cartello label { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: #7E8CA6; font-weight: 700; }
.ingresso-cielo {
    border: 1px solid #24344F; border-radius: 10px; background: #101A2E;
    color: #E7EDF8; padding: .65rem .8rem; font-size: 1.05rem;
    letter-spacing: .12em; text-transform: uppercase; font-family: inherit;
}
.ingresso-cielo:focus { outline: 2px solid #4DA3FF; border-color: transparent; }
.cielo .entra {
    border: none; border-radius: 10px; background: #4DA3FF; color: #08101E;
    padding: .6rem 1rem; font-size: .95rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
.cielo .entra:hover { background: #7FB2E5; }
.cielo .entra:disabled { opacity: .55; cursor: wait; }
.errore-cielo {
    background: rgba(143, 46, 46, .25); border: 1px solid #8F2E2E;
    color: #F0B9B2; border-radius: 8px; padding: .5rem .7rem; font-size: .85rem;
}
.piede-cielo { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #4C5A70; }

/* ── il secondo passo: le tessere utente (DlgLogin) ────────────── */
.negozio-cielo { color: #E7EDF8; font-size: 1.02rem; font-weight: 600; display: flex; align-items: center; gap: .8rem; }
.cambia-negozio {
    border: none; background: transparent; color: #4C5A70; font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase; cursor: pointer; font-family: inherit;
}
.cambia-negozio:hover { color: #7FB2E5; text-decoration: underline; }
.tessere-utenti { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; max-width: 640px; }
.tessera-utente {
    width: 132px; border: 1px solid #24344F; border-radius: 14px;
    background: #101A2E; color: #E7EDF8; padding: .9rem .6rem .7rem;
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    cursor: pointer; font-family: inherit;
}
.tessera-utente:hover { border-color: #4DA3FF; }
.tessera-utente.scelta { border-color: #4DA3FF; box-shadow: 0 0 18px rgba(77,163,255,.35); }
.tessera-utente .faccia {
    width: 46px; height: 46px; border-radius: 50%;
    background: #24344F; color: #7FB2E5; font-weight: 700; font-size: 1.05rem;
    display: flex; align-items: center; justify-content: center;
}
.tessera-utente .chi { font-weight: 700; font-size: .92rem; }
.tessera-utente .ruolo { font-size: .7rem; color: #7E8CA6; }
.tessera-utente .senza-pwd { font-size: .62rem; color: #C9A227; letter-spacing: .06em; text-transform: uppercase; }
.ingresso-cielo.pwd { text-transform: none; letter-spacing: .3em; }
.ingresso-cielo.pwd::placeholder { letter-spacing: normal; }   /* il suggerimento non e' una password: niente pallini spaziati */

/* ── la console della Regia (/regia): notte operativa ──────────── */
.console-regia {
    min-height: 100vh; padding: 1.4rem 2rem 3rem;
    background: radial-gradient(130% 140% at 28% 8%, #101A2E 0%, #0B1120 55%, #090E1A 100%);
    color: #C7D3E4;
}
.testata-console { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.testata-console img { height: 40px; }
.titolo-console { font-size: 1.05rem; font-weight: 600; color: #E7EDF8; letter-spacing: .04em; }
.esci-console {
    margin-left: auto; border: 1px solid #3d5578; background: transparent; color: #8fa2bb;
    border-radius: 8px; padding: .35rem .8rem; font-size: .8rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.esci-console:hover { color: #fff; border-color: #7FB2E5; }
.riquadro-console {
    background: rgba(16, 26, 46, .75); border: 1px solid #24344F; border-radius: 14px;
    padding: 1rem 1.2rem; margin-bottom: 1.4rem;
}
.testa-riquadro { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.testa-riquadro h3 { font-size: .95rem; color: #E7EDF8; letter-spacing: .04em; }
.btn-console {
    border: 1px solid #3d5578; background: transparent; color: #C7D3E4;
    border-radius: 8px; padding: .3rem .65rem; font-size: .82rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.btn-console:hover { border-color: #4DA3FF; color: #fff; }
.btn-console.primo { background: #4DA3FF; color: #08101E; border-color: #4DA3FF; }
.btn-console.rosso:hover { border-color: #E05B5B; color: #F0B9B2; }
.btn-console.verde:hover { border-color: #3DD68C; color: #A9EBC9; }
.tavola-console { width: 100%; border-collapse: collapse; font-size: .86rem; }
.tavola-console th {
    text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
    color: #7E8CA6; padding: .45rem .6rem; border-bottom: 1px solid #24344F; background: transparent;
}
.tavola-console td { padding: .4rem .6rem; border-bottom: 1px solid rgba(36, 52, 79, .55); }
.tavola-console td.num, .tavola-console th.num { text-align: right; }
.tavola-console td.azioni { white-space: nowrap; text-align: right; }
.tavola-console .riga-sospesa td { background: rgba(143, 46, 46, .12); }
.tavola-console .vive { color: #3DD68C; font-weight: 700; }
.tavola-console .serranda { margin-left: .35rem; color: #3DD68C; vertical-align: middle; }   /* lucchetto: il negozio ha la sua password */
.tavola-console .serranda.aperta { color: #7E8CA6; opacity: .55; }                            /* senza: si entra col solo codice */
.tavola-console .fioco { color: #7E8CA6; }
.campo-console {
    border: 1px solid #24344F; border-radius: 7px; background: #0B1120; color: #E7EDF8;
    padding: .3rem .5rem; font-size: .85rem; font-family: inherit; width: 100%;
}
.campo-console:focus { outline: 1.5px solid #4DA3FF; border-color: transparent; }
.campo-console.num { text-align: right; }
.riga-nuovo-tenant { display: flex; gap: .6rem; margin-bottom: .4rem; }
.pagine-console { display: flex; align-items: center; gap: .55rem; }
.nota-console { font-size: .76rem; color: #7E8CA6; margin: .3rem 0 .7rem; }
.nota-console.esito { color: #A9D3FF; font-weight: 600; margin-top: .7rem; }

/* ── cartello di riconnessione (il circuito Blazor è caduto) ───── */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex; position: fixed; inset: 0; z-index: 9999;
    align-items: center; justify-content: center;
    background: rgba(9, 14, 26, .82); backdrop-filter: blur(2px);
}
.cartello-riconnessione {
    background: #101A2E; border: 1px solid #4DA3FF; border-radius: 14px;
    color: #E7EDF8; font-size: 1.05rem; font-weight: 600; text-align: center;
    padding: 1.4rem 2.2rem; box-shadow: 0 0 34px rgba(77, 163, 255, .35);
}
.cartello-riconnessione small { display: block; margin-top: .3rem; color: #7E8CA6; font-weight: 400; letter-spacing: .08em; }
#riconnessione-azioni { display: flex; gap: .6rem; justify-content: center; margin-top: 1rem; }
#riconnessione-azioni[hidden] { display: none; }
.bottone-cartello {
    background: #16213A; color: #E7EDF8; border: 1px solid #4DA3FF; border-radius: 10px;
    padding: .55rem 1rem; font: inherit; font-size: .95rem; cursor: pointer;
}
.bottone-cartello:hover { background: #1D2B4A; }
.bottone-cartello.accento { background: #4DA3FF; color: #0B1220; border-color: #4DA3FF; font-weight: 700; }
.bottone-cartello[hidden] { display: none; }

/* niente barra laterale: la finestra ha tutto lo spazio, centrata con respiro */
main { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 1.5rem 2rem 2.5rem; }

.titolo-pagina { font-size: 1.3rem; letter-spacing: -.02em; margin-bottom: 1rem; }

/* ── tessere cruscotto (eredità Vista Facilitata) ──────────────── */
.tessere { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 1.2rem; }
@media (max-width: 900px) { .tessere { grid-template-columns: repeat(2, 1fr); } }
.tessera-kpi {
    background: var(--carta); border: 1px solid var(--bordo);
    border-radius: 12px; padding: .9rem 1rem;
    border-top: 3px solid var(--accento);
}
.tessera-kpi .voce { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muto); font-weight: 700; }
.tessera-kpi .num { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; margin-top: .15rem; }
.tessera-kpi .nota { font-size: .72rem; color: var(--muto); margin-top: .1rem; }
.tessera-kpi.verde { border-top-color: #2E8F5E; }
.tessera-kpi.oro { border-top-color: #B8863D; }
.tessera-kpi.rossa { border-top-color: #8F2E2E; }

/* ── ricerca e filtri ──────────────────────────────────────────── */
.cerca {
    width: 100%; padding: .65rem .95rem; font-size: .95rem;
    border: 1px solid var(--bordo); border-radius: 10px;
    margin-bottom: 1rem; background: var(--carta);
}
.cerca:focus { outline: 2px solid var(--accento); border-color: transparent; }

.barra-filtri { display: flex; gap: .7rem; margin-bottom: 1rem; }
.barra-filtri .cerca { margin-bottom: 0; flex: 1; }
.commutatore { display: flex; border: 1px solid var(--bordo); border-radius: 10px; overflow: hidden; }
.commutatore button {
    border: none; background: var(--carta); padding: 0 1.1rem;
    font-size: .88rem; font-weight: 600; color: var(--muto); cursor: pointer;
}
.commutatore button.attivo { background: var(--accento); color: #fff; }
.tendina {
    border: 1px solid var(--bordo); border-radius: 10px; background: var(--carta);
    padding: 0 .9rem; font-size: .9rem; color: var(--ink);
}

/* ── schede e tabelle ──────────────────────────────────────────── */
.scheda {
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    overflow: hidden;
}

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th {
    text-align: left; font-size: .7rem; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muto);
    padding: .6rem .95rem; background: var(--carta2);
    border-bottom: 1px solid var(--bordo);
}
td { padding: .6rem .95rem; border-bottom: 1px solid #EDF1F5; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

tr.riga-link { cursor: pointer; }
tr.riga-link:hover td { background: #F2F7FC; }

.giacenza-ok { color: var(--ok); font-weight: 700; }
.giacenza-no { color: var(--no); font-weight: 700; }
.sku { color: var(--muto); font-size: .8rem; }
.piede { margin-top: .9rem; color: var(--muto); font-size: .78rem; text-align: center; }
.vuoto { padding: 1rem; color: var(--muto); font-size: .88rem; }

/* ── scheda articolo / cliente / documento ─────────────────────── */
.torna {
    display: inline-block; margin-bottom: .9rem;
    color: var(--accento); text-decoration: none;
    font-size: .88rem; font-weight: 600;
}
.torna:hover { text-decoration: underline; }

.testata-articolo { display: grid; grid-template-columns: 300px 1fr; gap: 1.4rem; padding: 1.4rem; }
@media (max-width: 760px) { .testata-articolo { grid-template-columns: 1fr; } }

.foto-principale {
    width: 100%; aspect-ratio: 1; object-fit: contain;
    background: var(--carta); border: 1px solid var(--bordo); border-radius: 10px;
}
.foto-vuota {
    width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem; background: var(--sfondo); border: 1px dashed var(--bordo); border-radius: 10px;
}
.miniature { display: flex; gap: .4rem; margin-top: .6rem; flex-wrap: wrap; }
.miniature img {
    width: 52px; height: 52px; object-fit: cover;
    border: 2px solid var(--bordo); border-radius: 8px; cursor: pointer; background: var(--carta);
}
.miniature img.attiva { border-color: var(--accento); }

.info-blocco h2 { font-size: 1.45rem; letter-spacing: -.02em; margin-bottom: .15rem; }
.descrizione { margin: .6rem 0 0; color: #3A4553; font-size: .92rem; }

.dettagli { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; margin: .9rem 0 0; font-size: .88rem; }
.dettagli dt { color: var(--muto); }
.dettagli dd { margin: 0; font-weight: 600; }

.numeri { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; }
.numeri .prezzo { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
/* sotto il prezzo esposto, in piccolo: di che listino e' e che l'IVA e' dentro */
.prezzo-nota { display: block; font-size: .72rem; font-weight: 600; letter-spacing: 0; color: var(--muto); }
.badge-giacenza { font-size: .8rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; }
.badge-giacenza.ok { background: var(--ok-bg); color: var(--ok); }
.badge-giacenza.no { background: var(--no-bg); color: var(--no); }

.tessera-titolo {
    margin: 1.6rem 0 .6rem; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .07em; color: var(--muto);
}

.chip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--sfondo); border: 1px solid var(--bordo);
    border-radius: 999px; padding: .15rem .6rem; font-size: .82rem; margin-right: .3rem;
}
.quadretto { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .15); display: inline-block; }

.numero-doc { color: var(--muto); font-weight: 600; }
.collega { color: var(--accento); text-decoration: none; font-weight: 600; }
.collega:hover { text-decoration: underline; }

/* ── prima nota ────────────────────────────────────────────────── */
.etichetta-data { display: flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--muto); font-weight: 600; }
.data { border: 1px solid var(--bordo); border-radius: 10px; background: var(--carta); padding: .55rem .7rem; font-size: .9rem; color: var(--ink); }
.spunta { display: flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--muto); font-weight: 600; margin-left: auto; cursor: pointer; }
.riga-saldo td { background: #F5F8FB; font-weight: 700; }
.riga-fuori-saldo td { background: #FDF6C9; color: #6B5518; }   /* IsDebit: la riga gialla del desktop */
.pagine-chiare { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-top: .7rem; }
/* le pagine numerate dei Prodotti: numeri stretti, quello aperto pieno, e i
   puntini al posto dei salti quando le pagine sono tante */
.pagine-numerate { gap: .3rem; flex-wrap: wrap; }
.pagine-numerate .btn-fantasma { min-width: 2.1rem; justify-content: center; }
.pagine-numerate .pagina-corrente,
.pagine-numerate .pagina-corrente:hover {
    background: var(--accento); border-color: var(--accento); color: #fff; font-weight: 700;
}
.salto-pagine { color: var(--muto); padding: 0 .15rem; }

/* ── la fisarmonica della Prima Nota soggetti ───────────────────── */
.cella-dettaglio { background: #F5F8FB; padding: .5rem .8rem .7rem !important; }
.dettaglio-soggetto { border: 1px solid var(--bordo); border-radius: 10px; overflow: hidden; background: var(--carta); }
.dettaglio-soggetto table { font-size: .86rem; }
.piede-dettaglio {
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem .8rem; border-top: 1px solid var(--bordo); background: var(--carta2);
}
.piede-dettaglio a.btn-mini { text-decoration: none; }

/* ── stato credito e affidabilità (FrmCustomerCredit) ──────────── */
.affidabilita { display: flex; flex-wrap: wrap; gap: 2rem; padding: 1rem 1.2rem; }
.colonna-aff { flex: 1; min-width: 240px; }
.colonna-aff h4 { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muto); margin-bottom: .5rem; }
.barra-fido {
    height: 12px; border-radius: 999px; background: var(--sfondo);
    border: 1px solid var(--bordo); overflow: hidden; margin-top: .6rem;
}
.barra-fido-pieno { height: 100%; border-radius: 999px; }
.fascia-bassa { background: #FFF3A0; }
.fascia-media { background: #FFD214; }
.fascia-alta { background: #D25F23; }
.fascia-critica { background: #C01C1C; }
.percento-aff { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.aff-verde { color: #27AE60; }
.aff-arancio { color: #E6961E; }
.aff-rosso { color: #C01C1C; }
.allarmi-aff { flex-basis: 100%; display: flex; gap: .6rem; }
.allarmi-aff .avviso { margin-top: 0; }
.riga-totali td { background: #F5F8FB; font-weight: 700; border-top: 2px solid var(--bordo); }

/* ── modifica (scrittura) ──────────────────────────────────────── */
.riga-titolo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.btn-primo, .btn-fantasma { border-radius: 10px; padding: .5rem 1.1rem; font-size: .88rem; font-weight: 700; cursor: pointer; }
.btn-primo { border: none; background: var(--accento); color: #fff; }
.btn-primo:disabled { opacity: .45; cursor: not-allowed; }
.btn-fantasma { border: 1px solid var(--bordo); background: var(--carta); color: var(--muto); white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.btn-fantasma:hover { color: var(--accento); border-color: var(--accento); }
.campo { margin-bottom: .8rem; }
.campo label { display: block; font-size: .78rem; font-weight: 700; color: var(--muto); margin-bottom: .25rem; }
.campo-riga { display: flex; gap: 1rem; align-items: flex-end; }
.spunta-campo { margin: 0 0 .55rem; }
.ingresso {
    width: 100%; border: 1px solid var(--bordo); border-radius: 10px;
    padding: .55rem .75rem; font-size: .92rem; font-family: inherit; background: var(--carta);
}
.ingresso:focus { outline: 2px solid var(--accento); border-color: transparent; }
.pulsantiera { display: flex; gap: .6rem; margin-top: .4rem; }
.avviso { margin-top: .8rem; font-size: .85rem; font-weight: 600; padding: .5rem .8rem; border-radius: 8px; }
.avviso.buono { background: var(--ok-bg); color: var(--ok); }
.avviso.brutto { background: var(--no-bg); color: var(--no); }
.avviso.attenzione { background: #FAF0C6; color: #6B5518; }

.pannello-nuovo, .pannello-esito { padding: 1.4rem; max-width: 720px; }
/* ── tessere della scheda articolo ─────────────────────────────── */
.tessere-scheda { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin-top: 1.4rem; }
@media (max-width: 900px) { .tessere-scheda { grid-template-columns: 1fr; } }
.tessera-info { background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 1rem 1.1rem; }
.tessera-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: .55rem; }
.tessera-testa h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muto); }
.btn-mini {
    border: 1px solid var(--bordo); background: var(--carta); color: var(--muto);
    border-radius: 8px; padding: .2rem .5rem; font-size: .8rem; cursor: pointer;
}
.btn-mini:hover { color: var(--accento); border-color: var(--accento); }
/* la tessera Specifiche: tre riquadri (compilate, previste dal tipo, tutte le
   altre) invece di un elenco lungo quanto l'anagrafica delle specifiche */
.spec-gruppo { border-top: 1px solid var(--bordo); padding-top: .6rem; margin-top: .6rem; }
.spec-gruppo:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.spec-gruppo-testa {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muto); font-weight: 700; margin-bottom: .5rem;
}
.spec-conta { font-size: .75rem; color: var(--muto); }
.spec-altre-testa { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.spec-altre-testa .btn-mini { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.spec-filtro { flex: 1; min-width: 6rem; padding: .25rem .5rem; font-size: .82rem; }
.testo-tessera { font-size: .9rem; color: #3A4553; }
.testo-tessera.muto { color: var(--muto); font-size: .82rem; margin-top: .4rem; }
/* l'editor delle descrizioni: barra dei tag + riquadro in cui si scrive
   vedendo il risultato (editor.js) */
.barra-editor {
    display: flex; flex-wrap: wrap; align-items: center; gap: .2rem;
    border: 1px solid var(--bordo); border-bottom: 0;
    border-radius: 8px 8px 0 0; padding: .3rem .4rem; background: var(--sfondo);
}
.tasto-editor {
    min-width: 1.9rem; height: 1.7rem; padding: 0 .35rem;
    border: 1px solid transparent; background: none; color: var(--ink);
    border-radius: 6px; cursor: pointer; font-size: .82rem; line-height: 1;
}
.tasto-editor:hover { border-color: var(--bordo); background: var(--carta); }
.tasto-editor.acceso { background: var(--accento); color: #fff; }
.tasto-colore {
    width: 1.1rem; height: 1.1rem; padding: 0; border-radius: 50%;
    border: 1px solid rgba(0,0,0,.18); cursor: pointer;
}
.tasto-colore:hover { transform: scale(1.15); }
.barra-stacco { width: 1px; height: 1.1rem; background: var(--bordo); margin: 0 .2rem; }
.editor-descrizione {
    border: 1px solid var(--bordo); border-radius: 0 0 8px 8px;
    padding: .6rem .7rem; min-height: 9rem; max-height: 26rem; overflow-y: auto;
    background: var(--carta); font-size: .9rem; line-height: 1.45;
}
.editor-descrizione:focus { outline: 1.5px solid var(--accento); outline-offset: -1px; }
.editor-descrizione p { margin: 0 0 .55rem; }
.editor-descrizione h1, .editor-descrizione h2, .editor-descrizione h3,
.editor-descrizione h4, .editor-descrizione h5, .editor-descrizione h6 {
    margin: .7rem 0 .3rem; font-size: .95rem; font-weight: 700;
}
.editor-descrizione ul, .editor-descrizione ol { margin: 0 0 .55rem 1.2rem; }
.editor-descrizione.nascosto { display: none; }
.codice-html { font-family: Consolas, "Courier New", monospace; font-size: .8rem; border-radius: 0 0 8px 8px; }
/* la riga dove si incolla l'indirizzo del collegamento, nella barra
   dell'editor. NON si chiama piu' .riga-link: quel nome e' delle righe
   cliccabili delle tabelle (tr.riga-link, una ventina di pagine) e il
   display:flex qui sotto le trasformava tutte in flexbox — le colonne di
   ogni riga si impaginavano per conto loro e la griglia si sfasciava. */
.riga-collegamento { display: flex; gap: .4rem; align-items: center; margin: .4rem 0; }
.riga-collegamento .ingresso { flex: 1; padding: .25rem .5rem; font-size: .84rem; }
/* descrizioni HTML (dalla vetrina/desktop), pulite da Html.Pulito: i tag ammessi hanno il loro posto */
.testo-html { line-height: 1.45; }
.testo-html p { margin: 0 0 .55rem; }
.testo-html p:last-child { margin-bottom: 0; }
.testo-html h1, .testo-html h2, .testo-html h3, .testo-html h4, .testo-html h5, .testo-html h6 { font-size: .92rem; font-weight: 700; color: #1F2A3A; margin: .7rem 0 .3rem; }
.testo-html ul, .testo-html ol { margin: .2rem 0 .55rem 1.2rem; padding: 0; }
.testo-html li { margin: .15rem 0; }
.testo-html a { color: var(--accento, #2F7BD4); text-decoration: underline; }
.testo-html table { border-collapse: collapse; margin: .4rem 0; font-size: .86rem; }
.testo-html th, .testo-html td { border: 1px solid #E1E6EE; padding: .2rem .5rem; text-align: left; }
.testo-html blockquote { margin: .4rem 0; padding-left: .7rem; border-left: 3px solid #E1E6EE; color: #3A4553; }
.nota-campo { font-size: .74rem; color: var(--muto); margin-top: .25rem; }

.foto-gestione { display: flex; flex-wrap: wrap; gap: .7rem; }
.foto-cella { width: 110px; }
.foto-cella img {
    width: 110px; height: 110px; object-fit: cover;
    border: 1px solid var(--bordo); border-radius: 10px; background: var(--carta);
}
.foto-azioni { display: flex; justify-content: center; gap: .3rem; margin-top: .25rem; }
/* le targhette sotto la foto: a chi e' agganciata (prodotto, colore) */
.foto-filtro { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.foto-filtro label { font-size: .78rem; font-weight: 700; color: var(--muto); }
.foto-filtro .ingresso { width: auto; min-width: 12rem; padding: .25rem .5rem; font-size: .82rem; }
.foto-cella { width: 118px; }
.foto-targhette { display: flex; flex-wrap: wrap; gap: .2rem; justify-content: center; margin-top: .3rem; }
.foto-targhette .chip { font-size: .68rem; padding: .1rem .35rem; line-height: 1.5; }
.targhetta-prodotto { background: var(--sfondo); }
.targhetta-valore { display: inline-flex; align-items: center; gap: .15rem; }
.targhetta-via {
    border: 0; background: none; color: var(--muto); cursor: pointer;
    font-size: .8rem; line-height: 1; padding: 0 0 0 .1rem;
}
.targhetta-via:hover { color: #B4232A; }
.targhetta-piu { cursor: pointer; border-style: dashed; color: var(--muto); }
.targhetta-piu:hover { color: var(--accento); border-color: var(--accento); }
.targhetta-scelta { cursor: pointer; max-width: 118px; }
.foto-combo { text-align: center; font-size: .66rem; color: var(--muto); margin-top: .15rem; }

/* la tessera Listini: imponibile, prezzo esposto e i due ricarichi, come la
   griglia del desktop */
.listini-iva { display: flex; align-items: center; gap: .5rem; font-size: .75rem; }
.tabella-scorrevole { overflow-x: auto; }
.tabella-listini { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tabella-listini th {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muto); font-weight: 700; text-align: right; padding: 0 .4rem .3rem;
    white-space: nowrap;
}
.tabella-listini th:first-child { text-align: left; }
.tabella-listini td { padding: .25rem .4rem; border-top: 1px solid var(--bordo); white-space: nowrap; }
.tabella-listini td.numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabella-listini td.ivato { font-weight: 700; }
.tabella-listini .listini-nome { color: var(--muto); }
.tabella-listini .riga-acquisto td { background: var(--sfondo); }
.listini-modifica { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .8rem; }
.listini-intestazione, .listini-riga-mod {
    display: grid; grid-template-columns: minmax(6rem, 1fr) 7rem 7rem; gap: .4rem; align-items: center;
}
.listini-intestazione span {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--muto); font-weight: 700; text-align: right;
}
.listini-riga-mod .ingresso { padding: .25rem .45rem; font-size: .85rem; text-align: right; }

/* ── nuovo documento: risultati ricerca articolo ───────────────── */
.risultati-cerca { display: flex; flex-direction: column; gap: .25rem; margin-top: .4rem; }
.riga-risultato {
    display: grid; grid-template-columns: 1fr auto 90px 60px;
    gap: .8rem; align-items: center; text-align: left;
    border: 1px solid var(--bordo); background: var(--carta);
    border-radius: 9px; padding: .45rem .8rem; font-size: .88rem;
    cursor: pointer; font-family: inherit; color: var(--ink);
}
.riga-risultato:hover { border-color: var(--accento); background: #F2F7FC; }
.num-corto { width: 90px; text-align: right; }

/* ── dialogo Tipo Documento ────────────────────────────────────── */
.dialogo-doc { display: grid; grid-template-columns: 240px 1fr; gap: 1.3rem; margin-top: .6rem; }
@media (max-width: 800px) { .dialogo-doc { grid-template-columns: 1fr; } }
.colonna-tipi label, .colonna-dati > .campo:first-child label { }
.lista-tipi {
    display: flex; flex-direction: column; gap: .15rem; margin-top: .35rem;
    border: 1px solid var(--bordo); border-radius: 10px; padding: .4rem;
    max-height: 430px; overflow-y: auto; background: var(--carta);
}
.voce-tipo {
    text-align: left; border: none; background: transparent;
    padding: .42rem .65rem; border-radius: 7px; font-size: .88rem;
    color: var(--ink); cursor: pointer; font-family: inherit;
}
.voce-tipo:hover { background: #F2F7FC; }
.voce-tipo.attiva { background: var(--accento); color: #fff; font-weight: 700; }

/* ── schede della pagina Documento ─────────────────────────────── */
.schede-doc { display: flex; gap: .25rem; margin: 1.2rem 0 .8rem; border-bottom: 2px solid var(--bordo); }
.scheda-doc {
    border: none; background: transparent; padding: .55rem 1.1rem;
    font-size: .9rem; font-weight: 650; color: var(--muto);
    cursor: pointer; font-family: inherit;
    border-radius: 9px 9px 0 0; border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.scheda-doc:hover { color: var(--ink); background: #F2F7FC; }
.scheda-doc.attiva { color: var(--accento); border-bottom-color: var(--accento); background: var(--carta); }
a.chip { text-decoration: none; color: var(--ink); }
a.chip:hover { border-color: var(--accento); color: var(--accento); }

.griglia-valori { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.chip-scelta { cursor: pointer; user-select: none; }
.chip-scelta input { accent-color: var(--accento); }
.chip-scelta.sel { background: var(--accento); color: #fff; border-color: var(--accento); }
.chip-scelta.sel input { accent-color: #fff; }
a.btn-primo { text-decoration: none; display: inline-flex; align-items: center; }

/* ── scheda Inserimento Prodotti del documento ─────────────────── */
.qta-matrice { width: 70px; text-align: right; padding: .3rem .45rem; font-size: .9rem; }
.qta-matrice.qta-piena { background: #FEF9E0; border-color: #D8C87A; font-weight: 700; }
.qta-matrice:disabled { background: var(--sfondo); color: var(--muto); }
.cella-qta { display: flex; flex-direction: column; align-items: flex-end; gap: .12rem; }
.giacenza-mini { font-size: .68rem; font-weight: 700; }
.matrice td { padding: .4rem .6rem; }
.matrice th { white-space: nowrap; }
.riga-acquisto td { color: #A23B6E; font-weight: 600; }
.riga-vendita td { background: #EDF7EE; }
.riga-fornitore-doc td { background: #F0FFF0; font-weight: 600; }

/* ── Scadenzario: stati rata coi colori del desktop ────────────── */
.stato-rata { font-size: .78rem; font-weight: 700; padding: .18rem .55rem; border-radius: 999px; white-space: nowrap; }
.stato-pagato { background: #C9F27B; color: #2C5210; }        /* GreenYellow */
.stato-parziale { background: #C6ECD0; color: #176138; }      /* LightGreen */
.stato-inscadenza { background: #FDF6C9; color: #6B5518; }    /* LightYellow */
.stato-scaduto { background: #F7CDC7; color: #8F2E2E; }       /* OrangeRed */
tr.riga-scelta td { background: #E3EEF9; }

/* ── il titolo di una scheda ─────────────────────────────────────
      `.scheda` non ha padding suo, perché le tabelle devono andare a
      filo del bordo: chi ci mette dentro del testo se lo dà da sé. */
.titoletto {
    font-size: 1rem; font-weight: 700; color: var(--ink);
    padding: .85rem .95rem .55rem;
}
.scheda > .titoletto + table { border-top: 1px solid var(--bordo); }
.scheda > .rp-testa { padding: .7rem .95rem .1rem; }
.scheda > .rp-testa .titoletto { padding: 0; }

/* ── Fatturazione elettronica: il semaforo e i rilievi ──────────── */
.fe-semaforo { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-left: 5px solid var(--bordo); }
.fe-semaforo.verde { border-left-color: var(--ok); background: #F4FBF6; }
.fe-semaforo.giallo { border-left-color: #B8860B; background: #FFFDF3; }
.fe-semaforo.rosso { border-left-color: var(--no); background: #FEF6F5; }
.fe-stato { display: flex; align-items: center; gap: .8rem; }
.fe-semaforo.verde .icona { color: var(--ok); }
.fe-semaforo.giallo .icona { color: #B8860B; }
.fe-semaforo.rosso .icona { color: var(--no); }
.fe-verdetto { font-size: 1.05rem; font-weight: 700; }

.fe-rilievo { border: 1px solid var(--bordo); border-radius: 10px; padding: .6rem .8rem; margin: 0 .95rem .6rem; }
.fe-rilievo:last-child { margin-bottom: .95rem; }
.fe-rilievo.errore { border-left: 4px solid var(--no); background: #FEF8F7; }
.fe-rilievo.avviso-riga { border-left: 4px solid #B8860B; background: #FFFDF6; }
.fe-rilievo-testa { display: flex; align-items: center; gap: .5rem; }
.fe-rilievo-testo { font-size: .9rem; margin-top: .3rem; }
.fe-rilievo-rimedio {
    display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
    margin-top: .45rem; font-size: .85rem; color: var(--accento); font-weight: 600;
}
.chip.codice { font-family: 'Consolas', monospace; font-weight: 700; }
.chip.verde { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.chip.rosso { background: var(--no-bg); color: var(--no); border-color: transparent; }
.chip.giallo { background: #FDF6C9; color: #6B5518; border-color: transparent; }
.chip.blu { background: #DCE9F7; color: var(--accento); border-color: transparent; }

/* il corpo di una scheda quando dentro c'è testo e non una tabella */
.fe-corpo { padding: 0 .95rem .95rem; }

.fe-anteprima { width: 100%; height: 70vh; border: 1px solid var(--bordo); border-radius: 10px; background: #fff; }
.fe-xml {
    max-height: 60vh; overflow: auto; background: #FAFBFC; border: 1px solid var(--bordo);
    border-radius: 10px; padding: .8rem; font-family: 'Consolas', monospace; font-size: .78rem;
    white-space: pre-wrap; word-break: break-all;
}
.fe-nomefile { margin: .3rem 0 .7rem; }
.azioni-riga { display: flex; gap: .35rem; justify-content: flex-end; }
.btn-fantasma.piccolo, .btn-primo.piccolo { padding: .25rem .6rem; font-size: .8rem; height: auto; }
tr.evidenziata td { background: #EAF4EC; }
tr.riga-dettaglio td { background: #FAFBFC; }
.tabella.compatta td, .tabella.compatta th { padding: .3rem .5rem; font-size: .82rem; }
/* I grafici (GraficoBarre, GraficoSmaltimento). Il componente usava
   queste classi da sempre ma nessuno le aveva scritte: titolo e
   sottotitolo finivano attaccati («Importo vendutotutto l'articolo») e
   la legenda pure, coi bollini dei colori invisibili perché senza
   dimensioni. Si vedeva solo dove c'è un sottotitolo o più di una serie. */
.graf { margin: 0; }
.graf figcaption { margin-bottom: .5rem; line-height: 1.4; }
.graf figcaption b { font-size: .95rem; }
/* il separatore lo mette il CSS, non chi passa il testo: le pagine
   scrivono frasi pulite («tutto l'articolo · ultimi 8 mesi») e la
   lineetta resta la stessa dei titoli di pagina */
.graf-sub { font-size: .82rem; color: var(--muto); }
.graf-sub::before { content: " — "; }
.graf-legenda { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .5rem; }
.graf-voce { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--ink); }
.graf-bollo {
    width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto;
    display: inline-block; border: 1px solid rgba(0,0,0,.12);
}
.fe-aiuto { margin-top: .7rem; border-top: 1px solid var(--bordo); padding-top: .6rem; }
.fe-aiuto summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--accento); }
.fe-aiuto p { margin-top: .5rem; line-height: 1.5; }
.fe-aiuto ul { margin: .5rem 0 0 1.1rem; line-height: 1.6; }

.nota-pagina { padding-bottom: .95rem; }
.nota-pagina p {
    font-size: .88rem; color: var(--muto); line-height: 1.55;
    padding: 0 .95rem; margin-top: .55rem; max-width: 78ch;
}