/* Elenchi del menu Vendite rifatti come in Fattura24 (misure e colori rilevati il 14/11/2026).
   Si attivano con la classe «f24» che creaElenco mette sull'elenco quando riceve cfg.f24: gli altri elenchi non cambiano. */

/* ---------- barra: contatore con il filtro a destra, link «Colonne originali» ---------- */
.elenco.f24 .el-conta { border: 0; border-right: .5px solid #d0d0d0; border-radius: 0; background: none; padding: 0 16px 0 6px; min-width: 70px; height: 40px; }
.elenco.f24 .el-conta strong { font-size: 18px; line-height: 1.1; }
.elenco.f24 .el-link-colonne { padding: 0 15px 8px; }
.link-colonne { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border: .5px solid #d5d5d5; border-radius: 11px; background: #fff; color: #464d52; font: 500 11.5px/1 var(--font); cursor: pointer; }
.link-colonne:hover { background: #f1f4f8; }

/* ---------- tabella: misure di Fattura24 ---------- */
.elenco.f24 .el-tabella td { padding: 0 8px; }
.elenco.f24 .el-tabella td.dx { padding-right: 12px; }
.elenco.f24 .el-tabella td[data-ruolo=numero] { overflow: hidden; }
.elenco.f24 .el-tabella td[data-ruolo=pagamento], .elenco.f24 .el-tabella td[data-ruolo=altro] { overflow: hidden; }
.elenco.f24 .th-int { padding-left: 8px; }

/* numero con sotto il chip della commessa e il libro */
.num-doc { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.1; max-width: 100%; }
.num-sotto { display: inline-flex; align-items: center; gap: 6px; }
.chip-commessa { display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 8px; border: 0; border-radius: 10px; background: #dff2e5; color: #2a8a50; font: 500 11px/1 var(--font); cursor: pointer; white-space: nowrap; }
.chip-commessa:hover { background: #cde9d6; }
.chip-freccia { font-size: 8px; }
.libro-doc { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 19px; padding: 0; border: 0; border-radius: 4px; background: #4b2f7f; color: #fff; cursor: pointer; }
.libro-doc:hover { background: #5d3d99; }

/* colonne «Officina», «Fatturazione» e «Commessa» di Stefano */
.cella-officina { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.pul-officina { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid #3aa757; border-radius: 4px; background: #fff; color: #2a8a50; font: 500 12px/1 var(--font); cursor: pointer; white-space: nowrap; }
.pul-officina:hover { background: #eaf6ed; }
.cella-officina .testo-fatt { color: #6d6d6d; font-size: 12px; }

/* pagamento: pillola colorata, «da inviare» tratteggiata, «+» */
.elenco.f24 .pag-cella { flex-direction: row; align-items: center; gap: 6px; flex-wrap: nowrap; }
.elenco.f24 .pag-pill { max-width: none; height: 22px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--pc, #6d6d6d) 35%, #fff); border-radius: 11px;
  background: color-mix(in srgb, var(--pc, #6d6d6d) 14%, #fff); color: var(--pc, #6d6d6d); font: 500 12px/1 var(--font); }
.elenco.f24 .pag-pill:hover { background: color-mix(in srgb, var(--pc, #6d6d6d) 24%, #fff); border-color: color-mix(in srgb, var(--pc, #6d6d6d) 45%, #fff); }
.elenco.f24 .pag-pill.fisso { display: inline-flex; align-items: center; cursor: default; }
.elenco.f24 .riba { height: 20px; padding: 0 8px; border: 1px dashed #d98a3a; border-radius: 10px; background: #fff; color: #b5651d; font: 400 11px/1 var(--font); }
.elenco.f24 .riba:hover { background: #fff6ea; }
.elenco.f24 .riba.inviata { border-style: solid; background: #fdf0c8; border-color: #e5b93a; color: #8f6a00; }
.pag-piu { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; padding: 0; border: 1px solid #c4c4c4; border-radius: 50%; background: #fff; color: #6d6d6d; font: 400 14px/1 var(--font); cursor: pointer; }
.pag-piu:hover { background: #eef0f3; }

/* ---------- fascia «Pagamento:» ---------- */
.elenco.f24 .el-incassi.inc-f24 { display: block; margin: 0 15px 8px; padding: 6px 8px 7px; border-radius: 4px; background: #efefef; }
.inc-f24 .inc-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.inc-f24 .inc-riga2 { justify-content: space-between; margin-top: 6px; }
.inc-f24 .inc-et { color: #464d52; font: 400 13px/1 var(--font); }
.inc-f24 .inc-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.inc-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; border: 1px solid #d5d5d5; border-radius: 11px; background: #e8e8e8; color: #333; font: 400 12.5px/1 var(--font); cursor: pointer; white-space: nowrap; }
.inc-pill:hover { background: #dedede; }
.inc-pill.attivo { background: #1f2327; border-color: #1f2327; color: #fff; }
.inc-pill .pallino { width: 7px; height: 7px; }
.inc-solo { height: 22px; padding: 0 2px; border: 0; background: none; color: #464d52; font: 400 13px/1 var(--font); cursor: pointer; }
.inc-solo.attivo { color: #2a6ebb; font-weight: 500; text-decoration: underline; }
.inc-link { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 4px; border: 0; background: none; color: #2a6ebb; font: 500 11.5px/1 var(--font); cursor: pointer; }
.inc-link:hover { text-decoration: underline; }
.inc-ok { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border: 1px solid #b5deb5; border-radius: 11px; background: #e6f4e6; color: #2e7d32; font: 500 11.5px/1 var(--font); }
.inc-copia { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; border: 1px solid #f0c776; border-radius: 11px; background: #fdecc9; color: #8a5a00; font: 500 11.5px/1 var(--font); cursor: pointer; }
.inc-f24 .inc-totale { margin-left: auto; font-size: 13px; gap: 6px; align-items: baseline; }
.inc-f24 .inc-totale small { font-size: 13px; color: #464d52; font-weight: 500; }
.inc-f24 .inc-totale strong { font: 500 13px/1 var(--font); color: #464d52; }
.inc-f24 .inc-totale strong.credito { color: #3d8f55; }
.inc-f24 .inc-totale em { font-size: 13px; color: #464d52; }

/* ---------- pannelli a comparsa: Filtri e periodo ---------- */
.pul.filtro.con-filtri { border-color: var(--azzurro); background: #e9eef6; }
.el-pop { position: fixed; z-index: 3000; overflow: auto; background: #fff; border-radius: 4px; box-shadow: 0 6px 22px rgba(0, 0, 0, .26), 0 1px 4px rgba(0, 0, 0, .12); color: #464d52; font: 400 14px/1.3 var(--font); }
.el-pop-filtri { width: 402px; max-width: calc(100vw - 16px); padding: 18px 20px 20px; }
.el-pop-filtri h4 { margin: 0 0 14px; text-align: center; font: 300 16px/1.2 var(--font); }
.el-pop-filtri hr { border: 0; border-top: .5px solid #d5d5d5; margin: 16px 0 6px; }
.fp-prima { display: flex; gap: 10px; }
.fp-prima select { flex: 0 0 188px; min-width: 0; }
.fp-prima .fp-testo { flex: 1; min-width: 0; background: #fffbb8; }
.fp-riga { display: grid; grid-template-columns: 1fr 188px; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 14px; }
.fp-riga > span { color: #464d52; }
.el-pop-filtri select, .el-pop-filtri input[type=text] { height: 34px; width: 100%; font-size: 14px; }
.fp-pulsanti { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
.fp-pulsanti .pul { min-width: 84px; }

.el-pop-periodo { width: 664px; max-width: calc(100vw - 16px); padding: 14px 20px 18px; }
.pp-anno { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; font-size: 14px; color: #464d52; }
.pp-anno button { display: inline-flex; padding: 4px; border: 0; background: none; color: #464d52; cursor: pointer; }
.pp-anno .sx { transform: rotate(90deg); }
.pp-anno .dx { transform: rotate(-90deg); }
.pp-colonne { display: flex; gap: 8px; justify-content: space-between; }
.pp-col { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; text-align: center; }
.pp-voce { height: 30px; padding: 0 6px; border: 0; border-radius: 3px; background: none; color: #8a8a8a; font: 400 14px/1 var(--font); cursor: pointer; white-space: nowrap; }
.pp-voce:hover { background: #eef0f3; color: #464d52; }
.pp-custom { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: .5px solid #e0e0e0; }
.pp-custom[hidden] { display: none; }
.pp-custom .el-data { width: 112px; height: 34px; text-align: center; font-size: 14px; }

@media (max-width: 767px) {
  .elenco.f24 .el-link-colonne { padding: 0 10px 6px; }
  .elenco.f24 .el-incassi.inc-f24 { margin: 0 10px 8px; }
  .inc-f24 .inc-totale { margin-left: 0; width: 100%; justify-content: flex-end; }
  .elenco.f24 .el-conta { min-width: 0; }
  .elenco.f24 .el-tabella td { padding: 1px 0; }
  .elenco.f24 .el-tabella td[data-ruolo=numero] { overflow: visible; }
  .elenco.f24.incassi .el-contatori { grid-auto-flow: row; grid-auto-columns: auto; }
  .pp-colonne { flex-wrap: wrap; }
  .pp-col { flex: 1 1 28%; }
  .fp-riga { grid-template-columns: 1fr 150px; }
  .fp-prima select { flex-basis: 140px; }
}

/* casella di selezione e stella: come nell'originale (il selettore .elenco.f24 td sopra azzera il rientro) */
.elenco.f24 .el-tabella th.el-sel, .elenco.f24 .el-tabella td.el-sel { padding: 0 0 0 22px; }
.elenco.f24 .el-tabella th.el-stella, .elenco.f24 .el-tabella td.el-stella { padding: 0; }
.elenco.f24 .el-tabella th.el-busta, .elenco.f24 .el-tabella td.el-busta, .elenco.f24 .el-tabella th.el-menu-riga, .elenco.f24 .el-tabella td.el-menu-riga { padding: 0; }
.elenco.f24 .el-tabella td.dx { padding: 0 8px; }
.elenco.f24 .el-tabella td[data-ruolo=importo] { font-size: 12.5px; }