@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap");
/* Fatturazione FZ INOX — aspetto ricalcato su quello di Fattura24 (misure rilevate a vista, tutto riscritto qui).
   Roboto per l'interfaccia, Gudea per titoli ed etichette dei moduli. */
:root {
  --testo: #464d52;
  --muto: #878787;
  --barra: #4d5867;
  --area: #f6f7fb;
  --carta: #ffffff;
  --riga-alt: #f6f8fa;
  --bordo: #dbdbdb;
  --bordo-pannello: #dddfe2;
  --bordo-campo: #ced4da;
  --campo: #f5f5f5;
  --verde: #4caf50;
  --verde-scuro: #43a047;
  --azzurro: #7a99c4;
  --azzurro-scuro: #6888b3;
  --blu: #008bd4;
  --rosso: #d94540;
  --rosso-testo: #ad3733;
  --rosso-chiaro: rgba(217, 69, 64, .15);
  --arancio: #e8731a;
  --ok: #70c084;
  --avviso: #e8a33d;
  --menu-attivo: rgba(5, 18, 29, .10);
  --font: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-titoli: Gudea, Roboto, system-ui, "Segoe UI", Arial, sans-serif;
  --ombra-fin: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);
  --riga: 48px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 400 13px/1.4 var(--font);
  color: var(--testo);
  background: var(--area);
  -webkit-text-size-adjust: 100%;
}
body.con-finestra { overflow: hidden; }
body.sta-spostando, body.sta-spostando * { cursor: grabbing !important; user-select: none; }
body.sta-ridimensionando, body.sta-ridimensionando * { cursor: col-resize !important; user-select: none; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h3 { font-family: var(--font-titoli); font-size: 26px; font-weight: 400; color: var(--testo); margin: 22px 0 10px; padding-bottom: 6px; border-bottom: .5px solid var(--bordo); }
p { margin: 0 0 8px; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
.dx { text-align: right; }
.nascosto { display: none; }
.solo-mobile { display: none; }
.icona-svg { flex: none; vertical-align: middle; }

/* ---------- pulsanti ---------- */
.pul {
  height: 36px; padding: 0 16px; border: .5px solid var(--bordo-campo); border-radius: 4px;
  background: #fff; color: #6d6d6d; cursor: pointer; white-space: nowrap;
  font: 400 14px/1 var(--font); text-transform: uppercase; letter-spacing: .01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.pul:hover:not(:disabled) { background: #eef0f3; }
.pul:disabled { opacity: .5; cursor: default; }
.pul.primario, .pul.verde { background: var(--verde); border-color: var(--verde); color: #fff; }
.pul.primario:hover:not(:disabled), .pul.verde:hover:not(:disabled) { background: var(--verde-scuro); }
.pul.azzurro { background: var(--azzurro); border-color: var(--azzurro); color: #fff; }
.pul.azzurro:hover:not(:disabled) { background: var(--azzurro-scuro); }
.pul.pericolo { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.pul.pericolo:hover:not(:disabled) { background: #bf3a36; }
.pul.pericolo-chiaro { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.pul.pericolo-chiaro:hover:not(:disabled) { background: #bf3a36; }
.pul.testo { background: none; border-color: transparent; color: #6e7a81; }
.pul.testo:hover:not(:disabled) { background: rgba(0, 0, 0, .05); }
.pul.piccolo { height: 28px; padding: 0 10px; font-size: 12px; }
.pul.icona { width: 30px; height: 30px; padding: 0; color: #8a949a; background: none; border-color: transparent; font-size: 15px; }
.pul.icona:hover:not(:disabled) { color: var(--rosso); background: var(--rosso-chiaro); }
.pul.grande { height: 44px; width: 100%; font-size: 15px; }
:focus-visible { outline: 2px solid var(--azzurro); outline-offset: 1px; }

/* ---------- campi ---------- */
input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
  height: 35px; padding: 3px 7px; width: 100%; min-width: 0;
  border: .5px solid var(--bordo-campo); border-radius: 4px; background: var(--campo);
  font: 300 16px/1.3 var(--font); color: #000;
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 26px;
  background: var(--campo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23333'/%3E%3C/svg%3E") no-repeat right 9px center;
}
textarea { height: auto; padding: 6px 8px; resize: vertical; line-height: 1.35; }
input:disabled, select:disabled, textarea:disabled { background: #efefef; color: #333; cursor: default; opacity: 1; }
input.errore, .errore { border-color: var(--rosso) !important; background: #fbe6e5; }
input.num { text-align: right; }
input.minore { color: var(--muto); font-style: italic; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--verde); margin: 0; }
.campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.campo-et { font-size: 11px; color: var(--muto); font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.campo-aiuto { color: var(--muto); font-size: 11px; }
.campo-aiuto.automatico { color: #9a5f10; }
.spunta { display: flex; align-items: center; gap: 8px; height: 35px; }
.griglia-campi { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 14px; }
.griglia-campi .larga { grid-column: span 2; }
.griglia-campi .intera, .campo.intera { grid-column: 1 / -1; }
.nota { color: var(--muto); font-size: 12px; }
.riga-pulsanti { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.scorri-orizz { overflow-x: auto; }
.in-riga { display: flex; gap: 6px; min-width: 0; }
.in-riga > * { min-width: 0; }

/* etichette di stato (come «Consegnata» in Fattura24) */
.badge { display: inline-block; padding: 4px 8px; border-radius: 3px; font: 500 12px/1.2 var(--font); background: #9aa5b1; color: #fff; white-space: nowrap; }
.stato-bozza { background: #9aa5b1; }
.stato-aperto, .stato-da_fatturare, .stato-da_inviare { background: var(--avviso); }
.stato-approvato, .stato-fatturato, .stato-evaso, .stato-emessa { background: var(--ok); }
.stato-rifiutato { background: #d9534f; }
.stato-inviato, .stato-inviata { background: var(--azzurro); }
.saldo { display: inline-block; padding: 5px 10px; border-radius: 5px; background: var(--rosso-chiaro); color: var(--rosso-testo); font: 400 13px/1.2 var(--font); white-space: nowrap; }

/* ---------- accesso ---------- */
.accesso { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--area); }
.accesso-scheda { width: min(380px, 100%); background: #fff; border: .5px solid var(--bordo-pannello); border-radius: 4px; padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 2px 14px rgba(30, 40, 60, .12); }
.accesso-logo { width: 190px; max-width: 70%; height: auto; align-self: center; }
.accesso-scheda h1 { font: 400 26px var(--font-titoli); text-align: center; }
.accesso-sotto { color: var(--muto); margin: -10px 0 4px; text-align: center; }
.accesso-errore { color: var(--rosso-testo); margin: 0; }
.accesso-scheda .campo-et { font: 400 15px var(--font-titoli); text-transform: none; color: var(--testo); letter-spacing: 0; }

/* ---------- impianto generale ---------- */
body.app-aperta #radice { display: grid; grid-template-columns: 235px minmax(0, 1fr); height: 100vh; }
.menu { background: #fff; color: var(--testo); display: flex; flex-direction: column; min-height: 0; box-shadow: 0 0 10px rgba(0, 0, 0, .2); position: relative; z-index: 5; }
.menu-marchio { padding: 6px 12px 5px; display: flex; align-items: center; justify-content: center; border-bottom: .5px solid var(--bordo); }
.menu-logo { width: auto; max-width: 75%; max-height: 54px; height: auto; object-fit: contain; display: block; margin: 0 auto; }
.menu-azienda { display: flex; align-items: center; gap: 12px; padding: 8px 12px 9px 20px; border-bottom: .5px solid var(--bordo); color: #464d52; min-height: 53px; }
.menu-azienda .icona-svg { flex: none; }
.menu-azienda strong { display: block; font: 700 14px/1.25 var(--font); color: #464d52; text-transform: uppercase; }
.menu-azienda span { display: block; font: 400 12px/1.3 var(--font); color: #464d52; }
.menu-nav { flex: 1; overflow-y: auto; padding: 4px 0 8px; scrollbar-width: thin; }
.menu-gruppo { display: flex; align-items: center; width: 100%; height: 46px; padding: 0 10px 0 18px; gap: 0; background: none; border: 0; color: #464d52; font: 500 13px/1.2 var(--font); white-space: nowrap; text-transform: uppercase; cursor: pointer; text-align: left; }
.menu-gruppo .icona-svg { color: #464d52; flex: none; }
.menu-gruppo > .icona-svg:first-child { margin-right: 15px; }
.menu-gruppo:hover { background: rgba(5, 18, 29, .04); }
.menu-gruppo .g-testo { flex: 1; min-width: 0; }
.menu-gruppo .g-testo small, .menu-voce-nav small { display: block; font: 400 9.5px/1.1 var(--font); text-transform: none; letter-spacing: .2px; }
.menu-gruppo .freccia { color: #464d52; display: inline-flex; margin-left: 4px; transition: transform .15s; }
.menu-gruppo[aria-expanded=true] .freccia { transform: rotate(90deg); }
.menu-gruppo.senza-figli { height: 41px; }
.menu-gruppo.senza-figli.attiva { background: var(--menu-attivo); color: #4c5866; }
.menu-gruppo.in-arrivo, .menu-gruppo.in-arrivo .icona-svg, .menu-gruppo.in-arrivo .freccia, .menu-gruppo.in-arrivo small { color: #a3aab0; }
.menu-voci { list-style: none; margin: 0; padding: 0 0 6px 40px; }
.menu-voce-nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; height: 29px; line-height: 29px; padding: 0 8px 0 16px; background: none; border: 0; color: #464d52; font: 400 13px/29px var(--font); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; }
.menu-voce-nav .v-testo { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.menu-voce-nav:hover { background: rgba(5, 18, 29, .05); }
.menu-voce-nav.attiva { background: var(--menu-attivo); color: #4c5866; }
.menu-voce-nav.in-arrivo, .menu-voce-nav.in-arrivo small { color: #a3aab0; }
.menu-voce-nav small { flex: none; }
.menu-voci li { margin-right: 0; }
.menu-piede { background: var(--blu); color: #fff; height: 54px; flex: none; }
.menu-esci { display: flex; align-items: center; gap: 12px; width: 100%; height: 100%; padding: 0 14px; background: none; border: 0; color: #fff; cursor: pointer; text-align: left; font: 500 15px/1.15 var(--font); }
.menu-esci small { display: block; font: 400 11px/1.25 var(--font); opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.menu-esci:hover { background: #0079b8; }

.principale { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100vh; }
.barra-alto { display: flex; align-items: center; gap: 4px; height: 50px; flex: none; padding: 0 12px 0 6px; background: var(--barra); color: var(--area); }
.barra-titolo { font: 400 13px/1.1 var(--font); color: #f6f7fb; align-self: flex-start; padding: 7px 0 0 4px; }
.barra-spazio { flex: 1; }
.barra-icona { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0 2px; background: none; border: 0; border-radius: 50%; color: #f6f7fb; cursor: pointer; }
.barra-icona:hover { background: rgba(255, 255, 255, .12); }
.avatar { width: 32px; height: 32px; margin-left: 6px; border-radius: 50%; background: #8c52c8; color: #fff; display: inline-flex; align-items: center; justify-content: center; font: 500 17px var(--font); border: 0; cursor: pointer; text-transform: uppercase; }
.pul-menu { display: none; height: 34px; width: 38px; border: 0; background: none; color: #fff; cursor: pointer; align-items: center; justify-content: center; }
.riga-schede { position: relative; height: 70px; flex: none; padding: 0 18px; display: flex; align-items: flex-end; background: var(--area); }
.schede-alto { display: flex; gap: 0; overflow-x: auto; overflow-y: hidden; flex: 1; min-width: 0; align-items: flex-end; height: 70px; scrollbar-width: none; }
.schede-alto::-webkit-scrollbar { display: none; }
.scheda-alto { display: flex; align-items: center; position: relative; height: 43px; flex: none; background: #f2f3f5; border: .5px solid var(--bordo-pannello); border-bottom: 0; border-radius: 8px 8px 0 0; white-space: nowrap; margin-bottom: 0; margin-right: -2px; }
.scheda-alto.attiva { background: #fff; height: 46px; margin-bottom: -.5px; z-index: 2; }
.scheda-alto-titolo { background: none; border: 0; padding: 0 8px 0 15px; height: 100%; cursor: pointer; font: 400 17px var(--font); color: var(--testo); }
.scheda-alto.dashboard .scheda-alto-titolo { padding: 0 25px 0 15px; }
.scheda-alto-chiudi { background: none; border: 0; width: 38px; height: 100%; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.scheda-alto-chiudi span { width: 18px; height: 18px; border-radius: 50%; background: #b9bec3; color: #fff; display: flex; align-items: center; justify-content: center; }
.scheda-alto.attiva .scheda-alto-chiudi span { background: #b9bec3; }
.scheda-alto-chiudi:hover span { background: var(--rosso); }
.schede-freccia { position: absolute; bottom: 12px; z-index: 6; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: .5px solid var(--bordo-campo); background: #fff; color: #464d52; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(4, 26, 55, .18); }
.schede-freccia.sx { left: 22px; }
.schede-freccia.dx { right: 22px; }
.area { flex: 1; min-height: 0; position: relative; padding: 0 18px 0; }
.vista { height: 100%; display: flex; flex-direction: column; min-height: 0; background: #fff; border: .5px solid var(--bordo-pannello); border-radius: 0 4px 0 0; overflow: hidden; }
.benvenuto { padding: 40px 28px; max-width: 600px; }
.benvenuto h1 { font: 400 30px var(--font-titoli); margin-bottom: 8px; }
.benvenuto-scorciatoie { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.vela-menu { display: none; }

/* ---------- elenco ---------- */
.elenco { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #fff; }
.el-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 11px 15px 14px; }
.el-barra > .pul.verde { padding: 0 9px; }
.el-spazio { flex: 1; min-width: 4px; }
.el-azioni { display: inline-flex; gap: 6px; }
.el-conta { display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 43px; min-width: 92px; padding: 0 12px 0 9px; border: .5px solid #ddd; border-radius: 3px; color: #6d6d6d; }
.el-conta .conta-et { display: inline-flex; align-items: center; gap: 4px; color: #6d6d6d; }
.el-conta small { display: block; font: 400 11px/1.1 var(--font); color: #6d6d6d; }
.el-conta strong { display: block; font: 400 18px/1.15 var(--font); color: var(--testo); }
.el-conta .icona-svg { color: #6d6d6d; }
.elenco .el-ricerca { width: 200px; height: 36px; font-size: 14px; font-weight: 400; background: #fff; }
.pul.filtro .icona-svg, .pul.periodo .icona-svg, .pul.azzurro .icona-svg { margin-left: 2px; }
.pul.filtro { color: #6d6d6d; background: #fff; }
.pul.filtro.attivo { background: #e9eef6; border-color: var(--azzurro); }
.pul.periodo { color: #6d6d6d; background: #fff; }
.el-filtri { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; padding: 0 15px 10px; justify-content: flex-end; }
.el-periodo { display: inline-flex; gap: 6px; align-items: center; }
.el-periodo select { width: auto; height: 36px; font-size: 14px; }
.elenco .el-data { width: 112px; height: 36px; text-align: center; font-size: 14px; }
.el-dal { color: var(--muto); font-size: 13px; }
.el-contatori { display: flex; gap: 10px; padding: 0 15px 8px; }
.contatore { display: flex; align-items: center; gap: 8px; min-width: 0; height: 50px; padding: 0 10px 0 9px; background: #fff; border: .5px solid #ddd; border-radius: 5px; box-shadow: 0 1px 3px rgba(4, 26, 55, .16); cursor: pointer; text-align: left; color: #7a7a7a; flex: 1 1 0; max-width: 260px; }
.contatore .icona-svg { color: #7a7a7a; }
.contatore .c-testi { flex: 1; min-width: 0; line-height: 1.05; }
.contatore .c-titolo { display: block; font: 400 17px/1.1 var(--font); color: #7a7a7a; }
.contatore small { display: block; font: 400 10px/1.2 var(--font); color: var(--muto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contatore .c-num { font: 300 24px/1 var(--font); color: #7a7a7a; }
.contatore:hover { border-color: var(--ok); }
.contatore.attivo { background: var(--ok); border-color: var(--ok); color: #fff; }
.contatore.attivo .c-titolo, .contatore.attivo small, .contatore.attivo .c-num, .contatore.attivo .icona-svg { color: #fff; }
.el-stato { padding: 8px 15px; color: var(--muto); }
.el-stato.errore { color: var(--rosso-testo); background: #fbe6e5; }
.el-scorri { flex: 1; min-height: 0; overflow: auto; position: relative; background: #fff; border-top: .5px solid var(--bordo); scrollbar-width: auto; }
.el-scorri::-webkit-scrollbar { width: 12px; height: 0; }
.el-scorri::-webkit-scrollbar-track { background: #fff; }
.el-scorri::-webkit-scrollbar-thumb { background: #bcbcbc; border-radius: 6px; border: 2px solid #fff; }
.el-hbarra { flex: none; height: 14px; margin: 0 6px 0; padding: 2px; background: #e6e6e6; border-radius: 7px; }
.el-hpollice { height: 10px; background: #bcbcbc; border-radius: 5px; cursor: grab; }
.el-tabella { border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.el-tabella th { position: sticky; top: 0; z-index: 2; background: #fff; text-align: left; font: 500 12px/1.2 var(--font); color: var(--testo); height: 56px; padding: 0; border-bottom: .5px solid var(--bordo); white-space: nowrap; user-select: none; }
.el-tabella th.dx .th-int { justify-content: flex-end; }
.th-int { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 14px 0 10px; cursor: grab; touch-action: none; }
.th-testo { white-space: nowrap; }
.th-freccia { font-size: 14px; font-weight: 300; color: var(--testo); }
.th-maniglia { position: absolute; top: 0; right: -4px; bottom: 0; width: 9px; cursor: col-resize; z-index: 3; touch-action: none; }
.th-maniglia:hover { background: rgba(122, 153, 196, .45); }
.th-fantasma { position: fixed; z-index: 99999; padding: 4px 10px; background: var(--barra); color: #fff; border-radius: 4px; font-size: 12px; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.el-indicatore { position: absolute; top: 0; width: 3px; background: var(--azzurro); z-index: 5; pointer-events: none; }
.el-tabella td { height: var(--riga); padding: 0 10px; border-bottom: .5px solid var(--bordo); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 13px/1.3 var(--font); color: #464d52; }
.el-tabella td.dx { font-variant-numeric: tabular-nums; }
.el-tabella .el-sel { text-align: left; padding: 0 0 0 24px; }
.el-tabella .el-stella { text-align: center; padding: 0; }
.el-riga:nth-child(odd) td { background: var(--riga-alt); }
.el-riga:nth-child(even) td { background: #fff; }
.el-riga-vuota td { height: var(--riga); padding: 0; border-bottom: .5px solid var(--bordo); }
.el-riga-vuota:nth-child(odd) td { background: var(--riga-alt); }
.el-riga-vuota:nth-child(even) td { background: #fff; }
.el-tabella .el-busta, .el-tabella .el-menu-riga { padding: 0; text-align: center; overflow: visible; }
.el-tabella .busta, .el-tabella .punti { background: none; border: 0; padding: 4px; cursor: pointer; color: #6d6d6d; display: inline-flex; border-radius: 4px; }
.el-tabella .busta:hover, .el-tabella .punti:hover { background: rgba(0, 0, 0, .07); }
.el-tabella .busta.inviata { color: #f08c28; }
.badge-pallido { display: inline-block; padding: 5px 10px; border-radius: 4px; font: 400 12px/1.2 var(--font); white-space: nowrap; }
.badge-pallido.si { background: rgba(112, 192, 132, .22); color: #3d8f55; }
.badge-pallido.no { background: var(--rosso-chiaro); color: var(--rosso-testo); }
.el-riga.cliccabile { cursor: pointer; }
.el-riga:hover td { background: #e8eef7; }
.el-riga.scelta td { background: #dde8f5; }
.stella { background: none; border: 0; padding: 4px; cursor: pointer; color: #333; display: inline-flex; }
.stella:hover { color: #000; }
.stella.verde { color: #2aaf54; }
.stella.blu { color: #428cff; }
.el-vuoto td { color: var(--muto); text-align: center; height: var(--riga); border: 0; background: #fff !important; }
.el-manuale { color: #6e7a81; padding: 0 0 0 4px; }
.el-piede { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: nowrap; padding: 6px 15px; border-top: .5px solid var(--bordo); min-height: 50px; flex: none; background: #fff; }
.el-piede-sx { display: inline-flex; align-items: center; gap: 4px; color: #6d6d6d; }
.el-info { font-size: 12px; color: var(--muto); margin-left: 10px; }
.icona-pul { color: #464d52; }
.icona-pul { background: none; border: 0; padding: 6px; color: #6e7a81; cursor: pointer; display: inline-flex; border-radius: 4px; }
.icona-pul:hover:not(:disabled) { background: rgba(0, 0, 0, .06); }
.icona-pul:disabled { opacity: .35; cursor: default; }
.el-pager { display: inline-flex; gap: 2px; align-items: center; font: 300 14px var(--font); color: #6d6d6d; }
.el-pager .p-et { margin-right: 8px; }
.el-pag { min-width: 26px; height: 28px; padding: 0 6px; border: .5px solid transparent; border-radius: 3px; background: none; cursor: pointer; font: 400 14px var(--font); color: var(--testo); }
.el-pag:hover:not(:disabled) { background: #eef0f3; }
.el-pag.corrente { background: #fff; border: .5px solid var(--bordo-campo); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); cursor: default; }
.el-pag-punti { padding: 0 4px; }
.campione { display: inline-flex; align-items: center; gap: 6px; }
.campione i { width: 14px; height: 14px; border: .5px solid var(--bordo-campo); border-radius: 3px; display: inline-block; }
.nota-sopra { padding: 12px 15px 0; margin: 0; }
.cfg-elenco .pul.filtro { display: none; }
.elenco.cfg-elenco .el-barra { padding: 17px 15px 16px; }
/* le righe a strisce arrivano fino in fondo anche nella configurazione, come in Fattura24 */
.elenco.cfg-elenco.cfg-senza-vuote .el-riga-vuota { display: table-row; }
.vista-form { padding: 20px 24px; overflow: auto; max-width: 1000px; }
.vista-form h2 { font: 400 30px var(--font-titoli); margin-bottom: 6px; }
.vista-form .campo { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 8px; }
.vista-form .campo-et { font: 300 16px var(--font-titoli); color: var(--testo); text-transform: none; letter-spacing: 0; }
.vista-form .griglia-campi { grid-template-columns: 1fr; gap: 8px; max-width: 700px; }
.vista-form .griglia-campi .larga { grid-column: auto; }

/* ---------- finestre ---------- */
.vela { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; padding: 12px; }
.fin { background: #f8f8f8; border: .5px solid var(--bordo); border-radius: 4px; box-shadow: var(--ombra-fin); display: flex; flex-direction: column; max-height: calc(100vh - 24px); width: min(760px, 100%); }
.fin.piccola { width: min(440px, 100%); }
.fin.media { width: min(640px, 100%); }
.fin.larga { width: min(980px, 100%); height: calc(100vh - 48px); }
.fin.scheda { width: min(700px, 100%); height: min(620px, calc(100vh - 24px)); }
.fin.documento { width: min(1001px, 100%); height: min(700px, calc(100vh - 24px)); }
.fin-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; padding: 14px 24px 0; flex: none; }
.fin-testa h2 { font: 400 30px/1.2 var(--font-titoli); color: var(--testo); flex: 1 1 auto; overflow-wrap: anywhere; }
.fin-testa h2 small { font: 400 20px var(--font-titoli); margin-left: 4px; }
.fin.piccola .fin-testa h2 { font-size: 24px; }
.fin-stato { font-size: 11px; }
.fin-id { font: 400 14px var(--font); color: var(--muto); }
.fin-schede { flex: 0 0 100%; margin-top: 6px; }
.fin-corpo { padding: 14px 24px 16px; overflow: auto; flex: 1; min-height: 0; border-top: .5px solid var(--bordo); background: #f8f8f8; }
.fin-testa + .fin-corpo { border-top: .5px solid var(--bordo); }
.fin-piede { display: flex; gap: 8px; align-items: center; padding: 14px 24px; border-top: .5px solid var(--bordo); background: #fff; border-radius: 0 0 4px 4px; flex-wrap: wrap; flex: none; }
.fin-piede .pul { min-width: 57px; }
.fin-piede .pul.azioni { min-width: 100px; }
.spaziatore { flex: 1; }
.msg-errore { color: var(--rosso-testo); }
.msg-elenco { margin: 0; padding-left: 18px; }
.msg-elenco li { margin-bottom: 4px; }
.banner { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 9px 12px; margin-bottom: 12px; border-radius: 4px; border: .5px solid #a9d6b3; background: #e3f3e7; color: #2c6b3c; font-weight: 500; flex-wrap: wrap; }
.schede-doc { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.scheda-doc { background: none; border: 0; border-bottom: 2px solid transparent; padding: 0 20px; height: 40px; cursor: pointer; color: #737171; font: 400 15px var(--font); text-transform: uppercase; white-space: nowrap; margin-bottom: -.5px; }
.scheda-doc:hover { color: var(--testo); }
.scheda-doc.attiva { color: var(--testo); border-bottom-color: #8a949a; }
.blocco { margin-bottom: 4px; }
.xml { margin: 0; font: 12px/1.45 ui-monospace, Consolas, monospace; white-space: pre; overflow: auto; background: #fff; border: .5px solid var(--bordo); border-radius: 4px; padding: 10px; height: 100%; }
.scelta-righe { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.scelta-riga { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-bottom: .5px solid var(--bordo); }
.scelta-riga .scelta-desc { flex: 1; overflow-wrap: anywhere; }
.scelta-riga input.num { width: 84px; flex: none; }
.scelta-riga input[type=checkbox] { flex: none; }

/* nelle finestre le etichette stanno a sinistra dei campi, in Gudea */
.fin .campo { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 4px 8px; }
.fin .campo-et { font: 300 16px/1.2 var(--font-titoli); color: var(--testo); text-transform: none; letter-spacing: 0; }
.fin .campo-aiuto { grid-column: 2; font-size: 11px; }
.fin .campo.intera { grid-column: 1 / -1; }
.fin .griglia-campi { grid-template-columns: 1fr; gap: 8px; }
.fin .griglia-campi .larga { grid-column: auto; }
.fin.scheda .campo { grid-template-columns: 130px minmax(0, 1fr); }
.fin.scheda .fin-corpo { padding-top: 18px; }
.fin.scheda .spunta { height: 35px; padding-left: 138px; }
.fin.scheda .campo.intera .campo-et { align-self: start; padding-top: 6px; }
.fin .spunta span { font: 300 16px var(--font-titoli); }

/* Dati del documento: due colonne, come in Fattura24 */
.dati-doc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr); gap: 8px 26px; align-items: start; }
.dati-doc .col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dati-doc .col-dx .campo { grid-template-columns: 88px minmax(0, 1fr); }
.dati-doc .causale { grid-column: 1 / -1; }
.dati-doc .causale .campo { grid-template-columns: 100px minmax(0, 1fr); }
.dati-doc .causale textarea { min-height: 35px; }
.titolo-righe { margin-top: 26px; }

/* righe del documento: etichette piccole sopra i campi */
.righe-testa { display: none; }
.righe-lista { counter-reset: riga; }
.riga-doc {
  counter-increment: riga;
  display: grid; grid-template-columns: 22px 138px 84px 92px 92px minmax(110px, 1fr) 150px 28px; gap: 8px 8px; align-items: end;
  grid-template-areas: "mani prezzo q um sc iva tot del" ". cod cod prod prod prod prod ." ". desc desc desc desc desc desc .";
  padding: 14px 0 14px; border-bottom: .5px solid var(--bordo);
}
.riga-doc .cella { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.riga-doc .et { font: 300 13px/1.2 var(--font-titoli); color: var(--testo); }
.riga-doc .c-tot .et::before { content: "Totale linea n. " counter(riga); }
.riga-doc .c-tot .et-testo { display: none; }
.riga-doc .mani { grid-area: mani; align-self: center; }
.riga-doc .c-prezzo { grid-area: prezzo; }
.riga-doc .c-q { grid-area: q; }
.riga-doc .c-um { grid-area: um; }
.riga-doc .c-sc { grid-area: sc; }
.riga-doc .c-iva { grid-area: iva; }
.riga-doc .c-tot { grid-area: tot; }
.riga-doc .r-del { grid-area: del; align-self: end; }
.riga-doc .c-cod { grid-area: cod; }
.riga-doc .c-prod { grid-area: prod; }
.riga-doc .c-desc { grid-area: desc; }
.riga-doc textarea { min-height: 76px; resize: vertical; overflow: auto; font-weight: 400; font-size: 15px; background: #fff; }
.riga-doc input, .riga-doc select { background: #fff; }
.riga-doc output { display: flex; align-items: center; justify-content: flex-end; height: 35px; padding: 0 8px; background: var(--campo); border: .5px solid var(--bordo-campo); border-radius: 4px; font: 300 16px var(--font); font-variant-numeric: tabular-nums; }
.riga-doc output::after { content: " €"; white-space: pre; }
.riga-doc .c-prezzo input { background: var(--campo); }
.mani { cursor: grab; text-align: center; color: #9aa5b1; font-size: 20px; user-select: none; touch-action: none; }
.mani:hover { color: var(--azzurro); }
.riga-doc.trascinata { background: #e8eef7; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); position: relative; z-index: 2; }
.riga-doc.bloccata .mani { cursor: default; opacity: .4; }
.righe-vuoto { padding: 14px 0; color: var(--muto); }
.righe-azioni { margin-top: 12px; }

/* Riepilogo conteggi */
.riepilogo { margin-left: auto; width: min(380px, 100%); margin-top: 8px; }
.riepilogo h3 { margin-top: 10px; }
.tot { display: grid; grid-template-columns: 1fr 150px; gap: 8px 12px; align-items: center; margin: 0 0 10px; }
.tot dt { color: var(--testo); font: 300 16px var(--font-titoli); text-align: right; }
.tot dd { margin: 0; height: 35px; padding: 0 8px; display: flex; align-items: center; justify-content: flex-end; background: var(--campo); border: .5px solid var(--bordo-campo); border-radius: 4px; font: 300 16px var(--font); font-variant-numeric: tabular-nums; }
.tot .tot-finale { font-weight: 500; }
.tot dt.tot-finale { font-weight: 400; }
.tab-iva, .tab-rate { border-collapse: collapse; width: 100%; font-size: 12px; }
.tab-iva th, .tab-iva td, .tab-rate th, .tab-rate td { padding: 4px 6px; border-bottom: .5px solid var(--bordo); text-align: left; }
.tab-iva th.dx, .tab-iva td.dx { text-align: right; }
.tab-iva th, .tab-rate th { font: 300 13px var(--font-titoli); color: var(--testo); text-transform: none; }
.tab-rate td { min-width: 100px; padding: 6px 6px; }
.rate-somma { margin-top: 10px; font-size: 12px; color: var(--muto); }
.rate-somma.attenzione { color: #9a5f10; font-weight: 500; }
.lista-allegati { list-style: none; padding: 0; margin: 0; }
.lista-allegati li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: .5px solid var(--bordo); }
.lista-allegati small { color: var(--muto); flex: 1; }
.lista-allegati a { color: var(--arancio); }
.listini { margin-top: 4px; }
.fin .listini h3 { font-size: 22px; }
.pannello-pag h3 { display: inline-block; border: 0; padding: 0; margin: 22px 14px 8px 0; }
.pag-testa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 26px; align-items: start; }
.pag-testa .campo { grid-template-columns: 130px minmax(0, 1fr); }

/* suggerimenti, menu a comparsa, avvisi */
.suggerimenti { position: fixed; margin: 0; padding: 4px 0; list-style: none; overflow: auto; background: #fff; border: .5px solid var(--bordo-campo); border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); font-size: 14px; }
.suggerimenti li { padding: 7px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; }
.suggerimenti li small { color: var(--muto); white-space: nowrap; }
.suggerimenti li.attiva, .suggerimenti li:hover { background: #e8eef7; }
.menu-popup { position: fixed; min-width: 220px; padding: 4px 0; background: #fff; border: .5px solid var(--bordo-campo); border-radius: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.menu-popup hr { border: 0; border-top: .5px solid var(--bordo); margin: 4px 0; }
.menu-voce { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 8px 16px; background: none; border: 0; text-align: left; cursor: pointer; font: 400 14px var(--font); color: var(--testo); }
.menu-voce small { color: var(--muto); font-size: 11px; }
.menu-voce:hover:not(:disabled) { background: #e8eef7; }
.menu-voce:disabled { color: #a3aab0; cursor: default; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100000; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 10px 16px; border-radius: 4px; background: var(--barra); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); max-width: 340px; font-size: 14px; }
.toast.errore { background: var(--rosso); }

/* ---------- telefono ---------- */
@media (max-width: 767px) {
  body.app-aperta #radice { display: block; height: 100dvh; }
  .menu { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; z-index: 900; transform: translateX(-102%); transition: transform .2s; }
  body.menu-aperto .menu { transform: none; }
  body.menu-aperto .vela-menu { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 800; }
  .principale { height: 100dvh; }
  .pul-menu { display: inline-flex; }
  .barra-alto { padding: 0 12px 0 6px; }
  .riga-schede { padding: 0 8px; height: 46px; }
  .schede-alto { height: 46px; }
  .schede-freccia { display: none; }
  .barra-titolo { font-size: 13px; }
  .barra-icona { width: 36px; }
  .scheda-alto { height: 40px; }
  .scheda-alto.attiva { height: 46px; }
  .scheda-alto-titolo { font-size: 15px; }
  .area { padding: 0 0 0; }
  .vista { border-radius: 0; border-left: 0; border-right: 0; }
  .solo-mobile { display: block; width: auto; }
  .el-barra { padding: 10px 10px 6px; gap: 8px; }
  .el-spazio { display: none; }
  .el-filtri { padding: 0 10px 8px; justify-content: flex-start; }
  .el-periodo { flex-wrap: wrap; width: 100%; }
  .elenco .el-data { width: 104px; }
  .el-contatori { padding: 0 10px 10px; gap: 8px; overflow-x: auto; flex-wrap: nowrap; }
  .el-piede { font-size: 12px; padding: 8px 10px; }
  .el-info { display: none; }
  .el-hbarra { display: none; }
  .cfg-elenco .pul.filtro { display: inline-flex; }
  .elenco .el-ricerca { flex: 1 1 100%; width: 100%; }
  .el-conta { height: 38px; }
  .el-tabella td[data-ruolo=stella] { display: none; }

  /* elenco a schede impilate */
  .el-scorri { padding: 8px; overflow-x: hidden; background: var(--area); }
  .el-tabella, .el-tabella tbody, .el-tabella tr, .el-tabella td { display: block; width: 100% !important; }
  .el-tabella colgroup, .el-tabella thead { display: none; }
  .el-riga { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sel numero stato" ". cliente cliente" ". data importo"; gap: 2px 10px; background: #fff; border: .5px solid var(--bordo-pannello); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
  .el-riga:nth-child(odd) td, .el-riga:nth-child(even) td, .el-riga:hover td, .el-riga.scelta td { background: transparent; }
  .el-riga.scelta { background: #dde8f5; }
  .el-tabella td { height: auto; border: 0; padding: 1px 0; }
  .el-tabella td[data-ruolo=sel] { grid-area: sel; align-self: center; }
  .el-tabella td[data-ruolo=stella] { display: none; }
  .el-tabella td[data-ruolo=numero] { grid-area: numero; font-weight: 500; }
  .el-tabella td[data-ruolo=stato] { grid-area: stato; justify-self: end; }
  .el-tabella td[data-ruolo=cliente] { grid-area: cliente; color: var(--testo); }
  .el-tabella td[data-ruolo=data] { grid-area: data; color: var(--muto); }
  .el-tabella td[data-ruolo=importo] { grid-area: importo; justify-self: end; font-weight: 500; }
  .el-tabella td[data-ruolo=altro], .el-tabella td[data-ruolo=causale], .el-tabella td[data-ruolo=saldo] { display: none; }
  .el-vuoto { display: block !important; }
  .el-vuoto td { display: block; }

  /* finestre a schermo intero */
  .vela { padding: 0; align-items: stretch; }
  .fin, .fin.documento, .fin.larga, .fin.scheda { width: 100%; max-width: none; height: 100dvh; max-height: none; border-radius: 0; border: 0; }
  .fin.piccola, .fin.media { height: auto; max-height: 100dvh; align-self: center; margin: 0 12px; width: calc(100% - 24px); border-radius: 4px; }
  .fin-testa { padding: 10px 12px 0; }
  .fin-testa h2 { font-size: 22px; }
  .fin-testa h2 small { font-size: 16px; }
  .fin-corpo { padding: 12px; }
  .fin-piede { border-radius: 0; padding: 8px 12px; }
  .fin-piede .spaziatore { display: none; }
  .fin-piede .pul { flex: 1; }
  .scheda-doc { padding: 0 12px; font-size: 14px; }
  .fin .campo, .fin.scheda .campo, .dati-doc .col-dx .campo, .pag-testa .campo, .vista-form .campo { grid-template-columns: 1fr; }
  .fin .campo-aiuto { grid-column: 1; }
  .fin.scheda .spunta { padding-left: 0; }
  .dati-doc, .pag-testa { grid-template-columns: 1fr; gap: 8px; }
  .dati-doc .causale .campo { grid-template-columns: 1fr; }
  .in-riga { flex-wrap: wrap; }
  .in-riga > * { flex: 1 1 45% !important; }
  .toasts { left: 12px; right: 12px; }
  .vista-form { padding: 12px; }

  /* righe una sotto l'altra */
  .riga-doc { grid-template-columns: 1fr 1fr; grid-template-areas: "mani del" "prod prod" "cod q" "um prezzo" "sc iva" "tot tot" "desc desc"; gap: 6px 10px; padding: 12px 0; align-items: end; }
  .riga-doc .mani { text-align: left; font-size: 22px; }
  .riga-doc .r-del { justify-self: end; }
  .riga-doc output { font-size: 15px; }
  .riepilogo { margin-left: 0; width: 100%; }
  .tab-rate td { min-width: 0; }
}

@media (max-width: 767px) {
  .el-manuale { display: none; }
  .el-riga-vuota, .el-tabella td[data-ruolo=busta], .el-tabella td[data-ruolo=menu] { display: none !important; }
  .contatore { flex: 0 0 190px; max-width: none; }
}

/* ---------- incassi negli elenchi delle fatture: pagamento, Ri.Ba., stella, filtri ---------- */
.pallino { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #b9c0c8; }
.voce-pag { display: inline-flex; align-items: center; gap: 8px; }
.el-tabella td[data-ruolo=pagamento] { overflow: visible; }
.pag-cella { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; max-width: 100%; }
.pag-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 114px; height: 24px; padding: 0 6px 0 8px; border: .5px solid var(--bordo-campo); border-radius: 13px; background: #fff; color: var(--testo); font: 400 12px/1 var(--font); cursor: pointer; }
.pag-pill:hover { border-color: var(--azzurro); background: #f1f5fb; }
.pag-pill.vuota { border-style: dashed; color: var(--muto); }
.pag-fisso { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; color: var(--muto); font: 400 12px/1 var(--font); }
.stella-doc.fissa { cursor: default; color: #c3c9d0; padding: 4px; display: inline-flex; }
.el-tabella td[data-ruolo=saldo] { padding: 0 6px; }
.el-tabella td[data-ruolo=saldo] .saldo, .el-tabella td[data-ruolo=saldo] .badge-pallido { padding: 5px 7px; }
.badge-pallido.credito { background: rgba(112, 192, 132, .22); }
.inc-totale strong.credito { color: #3d8f55; }
.pag-pill .pag-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pag-pill .icona-svg { flex: none; color: #8a949e; }
.riba { display: inline-flex; align-items: center; gap: 5px; padding: 0 3px; background: none; border: 0; border-radius: 4px; color: #6d6d6d; font: 400 11.5px/1 var(--font); white-space: nowrap; cursor: pointer; }
.riba:hover { background: rgba(0, 0, 0, .06); }
.riba-box { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1.2px solid #8a949e; border-radius: 3px; background: #fff; color: #fff; font: 700 10px/1 var(--font); }
.riba.inviata { color: #b27c00; }
.riba.inviata .riba-box { background: #f9bb2d; border-color: #f9bb2d; }
.stella-doc.stella { color: #c3c9d0; }
.el-incassi { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding: 0 15px 10px; }
.inc-filtri { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.inc-filtro { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border: .5px solid var(--bordo-campo); border-radius: 15px; background: #fff; color: #6d6d6d; font: 400 13px/1 var(--font); cursor: pointer; white-space: nowrap; }
.inc-filtro:hover { border-color: var(--azzurro); }
.inc-filtro.attivo { background: var(--azzurro); border-color: var(--azzurro); color: #fff; }
.inc-filtro .icona-svg { color: currentColor; }
.inc-totale { display: inline-flex; align-items: baseline; gap: 8px; color: #6d6d6d; white-space: nowrap; }
.inc-totale small { font: 400 12px/1 var(--font); color: var(--muto); }
.inc-totale strong { font: 500 18px/1 var(--font); color: var(--rosso-testo); }
.inc-totale em { font: 400 12px/1 var(--font); font-style: normal; color: var(--muto); }
@media (max-width: 767px) {
  .el-incassi { padding: 0 10px 8px; gap: 8px; }
  /* filtri su più righe (niente tagli a destra) e totale sotto */
  .inc-filtri { flex-wrap: wrap; gap: 6px; max-width: 100%; }
  .inc-filtro { height: 32px; padding: 0 11px; font-size: 12.5px; }
  .inc-totale { width: 100%; justify-content: flex-end; }
  /* riquadri SDI a griglia di 2 colonne */
  .elenco.incassi .el-contatori { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; }
  .elenco.incassi .contatore { flex: none; width: auto; min-width: 0; max-width: none; }
  .elenco.incassi .contatore:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* schede: stella colorata accanto al numero */
  .elenco.incassi .el-riga { grid-template-columns: auto minmax(0, 1fr) auto auto !important; grid-template-areas: "sel numero stella stato" ". cliente cliente cliente" ". data importo importo" ". pagamento pagamento saldo" !important; }
  .elenco.incassi .el-tabella td[data-ruolo=stella] { display: block; grid-area: stella; align-self: center; width: auto !important; padding: 0; }
  .elenco.incassi .el-tabella td[data-ruolo=stato] { grid-column: 4; }
  .el-tabella td[data-ruolo=pagamento] { grid-area: pagamento; display: block; overflow: visible; }
  .el-tabella td[data-ruolo=saldo] { grid-area: saldo; display: block; justify-self: end; }
  .el-tabella td[data-ruolo=pagamento]:empty, .el-tabella td[data-ruolo=saldo]:empty { display: none; }
}

/* ordini fornitore: campo Commessa in ogni riga e nella testata */
@media (min-width: 768px) {
  .fin.documento .riga-doc .rd-l2.con-commessa { grid-template-columns: 203px 273px minmax(0, 1fr) minmax(0, 1fr); }
}
.in-commessa:disabled { color: #464d52; font-weight: 500; }
.in-commessa.minore:disabled { font-weight: 300; }
.fin.documento .dati-doc .causale .campo.et-larga { grid-template-columns: 124px minmax(0, 1fr); }
@media (max-width: 767px) { .fin.documento .dati-doc .causale .campo.et-larga { grid-template-columns: minmax(0, 1fr); } }

/* ---- Acquisti: etichetta della sorgente e finestra dell'esito di Importa XML ---- */
.tag-sorgente { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 500; line-height: 14px; color: #fff; white-space: nowrap; }
.tag-sorgente.sdi { background: #7094c9; }
.tag-sorgente.manuale { background: #9aa3ae; }
.tag-sorgente.pdf { background: #c98a3a; }
.el-importa { display: inline-flex; }
.importa-xml .fin-corpo { min-width: 0; }
.imp-intesta { margin: 0 0 10px; font-weight: 500; }
.imp-elenco { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; }
.imp-riga { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-left: 3px solid #3aa757; background: #f4f8f5; font-size: 13px; overflow-wrap: anywhere; }
.imp-riga.imp-ko { border-left-color: #e8453c; background: #fbf3f2; }
.imp-avviso { color: #a76b00; }

/* ---- Elenchi Acquisti: righe basse e testo piccolo come in Fattura24 (circa 10 righe per pagina) ---- */
@media (min-width: 768px) {
  .elenco.acquisti { --riga: 38px; }
  .elenco.acquisti .el-tabella td { padding: 0 8px; font-size: 12px; }
  .elenco.acquisti .el-tabella th { height: 44px; font-size: 11.5px; }
  .elenco.acquisti .th-int { padding: 0 8px; }
  .elenco.acquisti .el-tabella td[data-ruolo=saldo] { padding: 0 4px; }
  .elenco.acquisti .el-tabella td[data-ruolo=saldo] .saldo, .elenco.acquisti .el-tabella td[data-ruolo=saldo] .badge-pallido { padding: 3px 6px; font-size: 12px; }
}
@media (max-width: 767px) {
  /* data e importo su righe separate, «al saldo» sotto: niente sovrapposizioni */
  .elenco.acquisti .el-riga { grid-template-areas: "sel numero stato" ". cliente cliente" ". data data" ". importo saldo"; row-gap: 4px; }
  .elenco.acquisti .el-tabella td[data-ruolo=importo] { justify-self: start; }
  .elenco.acquisti .el-tabella td[data-ruolo=saldo] { align-self: center; }
}

/* Il mio accesso */
.mio-accesso .campo { display: block; margin-bottom: 12px; }
.mio-accesso .campo input { width: 100%; box-sizing: border-box; }
.mio-accesso .campo-nota { display: block; margin-top: 3px; font-size: 11px; color: var(--muto, #7a8290); }
.mio-accesso-titolo { margin: 18px 0 10px; font-size: 14px; font-weight: 600; }