/* ============================================================================ GENERATORE OFFERTE — strato applicativo ============================================================================ Si appoggia a docks-strumenti.css (token e primitive condivise con gli ottimizzatori di taglio e con le schede tecniche prodotto): Helvetica, fondo carta, titoli di sezione come barre piene, filetti al posto delle cornici. Qui restano SOLO i componenti propri del configuratore. I colori arrivano dai token --dk-*; l'accento segue la famiglia attiva impostata da tema.js. ========================================================================== */ /* ------------------------------------------------- ponte con i token --- */ :root { --navy: #141414; /* la "spina" strutturale ora e l'inchiostro */ --navy-700: #000000; --accent: #22749E; /* default: azzurro Lastre (tema.js lo cambia) */ --accent-ink: #195675; /* variante scura: testo su bianco, >= 4,5:1 */ --accent-tint: #e7f6ff; --accent-dim: #d3ecfd; --cyan: var(--accent); --cyan-ink: var(--accent-ink); --teal: #007D61; --orange: #A65C20; --gold: #c0a040; --ink: var(--dk-ink); --muted: var(--dk-mut); --line: var(--dk-hair-2); --bg: var(--dk-page); --card: var(--dk-paper); /* l'accento del foglio condiviso segue la famiglia attiva (tema.js scrive --accent inline su ). Deve stare in :root, non in html: :root ha specificita 0-1-0 e vincerebbe comunque sul selettore di tipo. */ --dk-ac: var(--accent); --dk-ac-d: var(--accent-ink); --dk-tint: var(--accent-tint); --dk-ring: rgba(34, 116, 158, .30); --dk-ring: color-mix(in srgb, var(--accent) 32%, transparent); } body { font-family: var(--dk-font); color: var(--dk-ink); background: var(--dk-page); } /* --------------------------------------------------------------- testata --- */ /* La testata non e' piu' appiccicata: con il marchio su tre righe occuperebbe troppa altezza utile. Resta appiccicata la barra dei moduli, che e' quella che serve mentre si lavora. */ .topbar { display: flex; flex-direction: column; gap: 10px; background: var(--dk-paper); color: var(--dk-ink); padding: 14px 32px 10px; border-bottom: 1px solid var(--dk-hair); } .topbar-riga { display: flex; align-items: center; gap: 20px; } .topbar .logo { height: 38px; background: none; padding: 0; border-radius: 0; } /* logo sempre libero */ /* Marchio su due righe. Le crenature sono in millesimi di em, come in tipografia: 200 = .2em, 150 = .15em. La riga 1 nomina la pagina, la riga 2 la spiega. La riga d'identita' ("Maestri del policarbonato") e' stata tolta dalla testata: il logo a sinistra dice gia' di chi e' l'applicazione, e ripeterlo su ogni pagina rubava il corpo piu' grande al titolo, che e' l'informazione utile a chi ci lavora. Resta al suo posto sull'ingresso (home.html), dove il marchio e' il contenuto e non una testatina. */ .marchio { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .marchio-2 { font-family: var(--dk-font); font-weight: 600; text-transform: uppercase; /* .82rem: il corpo che era della riga d'identita', ora al titolo. 600 e non 500: su Windows la pila ricade su Arial, che ha SOLO Regular e Bold. Misurato: 400 e 500 rendono identici (110,06px su "CONFIGURATORE"), 600 e 700 pure (114,67px) — un 500 non si vedrebbe affatto. Si dichiara 600 e non 700 perche' dove un semigrassetto vero c'e' (Helvetica Neue) resta piu' leggero del nero; qui cade su Bold, che e' l'unico passo disponibile. La crenatura larga lo tiene arieggiato: non pesa come un grassetto fitto. */ letter-spacing: .15em; font-size: .82rem; line-height: 1.1; color: var(--dk-ink); } .marchio-3 { font-family: var(--dk-font); font-weight: 300; letter-spacing: .3em; font-size: .62rem; line-height: 1.2; /* "grigio 75%" = 75% d'inchiostro sulla carta, non grigio chiaro: su bianco da' circa 8:1, ben oltre il minimo di 4,5:1 per il testo. */ color: color-mix(in srgb, var(--dk-ink) 75%, var(--dk-paper)); } /* Sotto i 700px il titolo a .82rem con la sua crenatura uscirebbe dal contenitore. */ @media (max-width: 700px) { .topbar { padding: 12px 18px 8px; } .marchio-2 { font-size: .7rem; letter-spacing: .12em; } .marchio-3 { letter-spacing: .16em; } } /* Selettore modulo: la barra prende il colore della famiglia attiva, molto desaturato. tema.js riscrive --accent ad ogni cambio modulo, quindi la tinta lo segue da sola: nessun secondo elenco di colori da tenere allineato. Al 7% il fondo resta abbastanza chiaro da reggere il testo scuro (verificato: --dk-mut sulla tinta piu' scura della palette da circa 8:1). */ .module-tabs { display: flex; flex-wrap: wrap; gap: 0; background: color-mix(in oklch, var(--accent) 7%, var(--dk-paper)); border-bottom: 1px solid color-mix(in oklch, var(--accent) 22%, var(--dk-hair)); padding: 0 32px; position: sticky; top: 0; z-index: var(--dk-z-sticky); transition: background-color .22s var(--dk-ease), border-color .22s var(--dk-ease); } .module-tab { font-family: var(--dk-font); text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 700; color: var(--dk-mut); background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 13px 16px; cursor: pointer; transition: color .16s var(--dk-ease), border-color .16s var(--dk-ease), background-color .16s var(--dk-ease); } .module-tab:hover { color: var(--dk-ink); background: color-mix(in oklch, var(--accent) 5%, transparent); } /* La scheda attiva si stacca dalla tinta salendo sul bianco: legge come la linguetta di una cartella, e il testo torna su fondo pieno. */ .module-tab.is-active { color: var(--dk-ac-d); border-bottom-color: var(--dk-ac); background: var(--dk-paper); } @media (prefers-reduced-motion: reduce) { .module-tabs, .module-tab { transition: none; } } /* --------------------------------------------------------------- layout --- */ .wrap { max-width: 1460px; margin: 0 auto; padding: 30px 32px 10px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } } /* Una colonna sola: prima i dati da inserire, poi le azioni e l'anteprima, a tutta larghezza sotto. La distinta ha molte colonne (codice, descrizione, quantita', prezzo, sconto, totale) e in una colonna da 620 px si leggeva rimpicciolita e con lo scorrimento orizzontale; qui ci sta per intero. */ .mod-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; } .mod-main { min-width: 0; } .mod-side { min-width: 0; } .side-inner { min-width: 0; } .side-inner > .card:last-child { margin-bottom: 6px; } /* Se la distinta e' comunque piu' larga dello schermo, scorre lei invece di allargare la pagina. */ .side-inner .preview { overflow-x: auto; } .side-azioni { padding-bottom: 14px; } .side-azioni .actions { margin-bottom: 6px; flex-wrap: wrap; } .card { background: var(--dk-paper); border: 1px solid var(--dk-hair-2); border-radius: var(--dk-r); padding: 20px 22px 22px; margin-bottom: 22px; box-shadow: none; } /* il titolo di sezione e una barra piena con testo bianco (come le schede) */ .card h2, details.disclosure > summary { display: inline-block; background: var(--dk-ac); color: #fff; font-family: var(--dk-font); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; padding: 6px 15px; margin: 0 0 16px; border: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 0; border: 0; } .card-head h2 { margin: 0; } .link-action { background: none; border: none; color: var(--dk-ac-d); font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; padding: 3px 5px; border-radius: var(--dk-r); } .link-action:hover { text-decoration: underline; } .link-action:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--dk-ring); } /* ----------------------------------------------------------------- form --- */ label { display: block; font-size: .74rem; font-weight: 500; color: var(--dk-mut); margin-bottom: 13px; } input, select, textarea { display: block; width: 100%; margin-top: 5px; padding: 9px 11px; font-size: .9rem; font-family: inherit; color: var(--dk-ink); background: #fff; border: 1px solid var(--dk-hair); border-radius: var(--dk-r); transition: border-color .16s var(--dk-ease), box-shadow .16s var(--dk-ease); } input[type="number"] { font-variant-numeric: tabular-nums; } input:hover, select:hover { border-color: var(--dk-soft); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--dk-ac); box-shadow: 0 0 0 3px var(--dk-ring); } input::placeholder { color: var(--dk-soft); } input:user-invalid, select:user-invalid { border-color: #a3352c; box-shadow: 0 0 0 3px rgba(163,53,44,.14); } .hint { display: block; margin-top: 4px; font-size: .7rem; font-weight: 400; color: var(--dk-mut); line-height: 1.35; } .muted { color: var(--dk-mut); font-size: .78rem; } .row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .row.five { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: end; } .mu-ovr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; } .mu-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .mu-row input.grow, .mu-row select { flex: 1; min-width: 0; } .mu-row .mi-row-del { flex: 0 0 auto; } fieldset.dims, details.dims-more, .mi-fs { border: 1px solid var(--dk-hair-2); border-radius: var(--dk-r); padding: 10px 14px 2px; margin: 0 0 14px; } fieldset.dims legend, details.dims-more > summary, .mi-fs legend, details.mi-fs > summary { font-size: .68rem; color: var(--dk-ink); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; } fieldset.dims legend small, details.dims-more > summary small, details.mi-fs > summary small { color: var(--dk-mut); font-weight: 400; text-transform: none; letter-spacing: 0; } /* Scatole richiudibili dentro una scheda: profili e trattamenti si toccano di rado, aperte riempivano la scheda del prodotto di interruttori. Il
nativo porta con se' tastiera, lettori di schermo e "trova nella pagina". */ details.mi-fs { padding: 0 14px; } details.mi-fs > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 11px 0; margin: 0 -14px; padding-left: 14px; padding-right: 14px; transition: background-color .14s var(--dk-ease); } details.mi-fs > summary::-webkit-details-marker { display: none; } details.mi-fs > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; flex: none; border-right: 2px solid var(--dk-soft); border-bottom: 2px solid var(--dk-soft); transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s var(--dk-ease); } details.mi-fs[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); } details.mi-fs > summary:hover { background: var(--dk-page); } details.mi-fs > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--dk-ring); } details.mi-fs[open] > summary { border-bottom: 1px solid var(--dk-hair-2); margin-bottom: 10px; } details.mi-fs > *:last-child { margin-bottom: 12px; } /* titoletto interno, per il secondo gruppo dentro la stessa scatola */ .mi-sotto { margin: 14px 0 2px; font-size: .68rem; font-weight: 700; color: var(--dk-ink); text-transform: uppercase; letter-spacing: .12em; border-top: 1px solid var(--dk-hair-2); padding-top: 12px; } .mi-sotto small { color: var(--dk-mut); font-weight: 400; text-transform: none; letter-spacing: 0; } /* Riquadri dentro un riquadro sono sempre sbagliati: i fieldset che finiscono dentro una scatola richiudibile perdono la cornice e la loro didascalia diventa un titoletto separato da un filetto. */ details.mi-fs fieldset.dims { border: 0; padding: 0; margin: 0; } details.mi-fs fieldset.dims > legend { padding: 0; margin-bottom: 4px; font-size: .66rem; color: var(--dk-mut); } details.mi-fs fieldset.dims:not(.hidden) ~ fieldset.dims:not(.hidden) { margin-top: 14px; border-top: 1px solid var(--dk-hair-2); padding-top: 12px; } .mi-posa { margin-top: 16px; border-top: 1px solid var(--dk-hair-2); padding-top: 14px; } @media (prefers-reduced-motion: reduce) { details.mi-fs > summary, details.mi-fs > summary::after { transition: none; } } .dim { display: flex; gap: 14px; flex-wrap: wrap; } .dim label { flex: 1; min-width: 120px; } .opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 700px) { .opts { grid-template-columns: 1fr 1fr; } } .chk { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--dk-ink); font-weight: 500; margin-top: 22px; } .chk input { width: auto; margin: 0; accent-color: var(--dk-ac); } .chk-note { color: var(--dk-mut); font-weight: 400; } .opts .sw { margin-top: 22px; } /* -------------------------------------------------------------- azioni --- */ .actions { display: flex; gap: 12px; justify-content: flex-end; margin-bottom: 10px; } .btn { font-family: var(--dk-font); text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; font-weight: 700; padding: 10px 22px; border-radius: var(--dk-r); border: 1px solid var(--dk-ac); cursor: pointer; transition: background .16s var(--dk-ease), color .16s var(--dk-ease), border-color .16s var(--dk-ease), box-shadow .16s var(--dk-ease); } .btn.primary { background: var(--dk-ac); color: #fff; } .btn.primary:hover { background: var(--dk-ac-d); border-color: var(--dk-ac-d); } .btn.secondary { background: #fff; color: var(--dk-ac-d); } .btn.secondary:hover { background: var(--dk-tint); } .btn:disabled { opacity: .45; cursor: default; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn.ghost { background: transparent; border-color: transparent; color: var(--dk-mut); margin-right: auto; text-transform: none; letter-spacing: 0; font-weight: 600; } .btn.ghost:hover { color: var(--dk-ink); background: var(--dk-well); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--dk-ring); } .flow-hint { font-size: .75rem; color: var(--dk-mut); margin: 2px 0 12px; } .flow-hint b { color: var(--dk-ink); font-weight: 700; } /* --------------------------------------------- sezioni richiudibili --- */ details.disclosure > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; } details.dims-more > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; } details.disclosure > summary::-webkit-details-marker, details.dims-more > summary::-webkit-details-marker { display: none; } details.disclosure > summary::before, details.dims-more > summary::before { content: "\25B8"; font-size: .8em; transition: transform .16s var(--dk-ease); } details.disclosure > summary::before { color: rgba(255,255,255,.85); } details.dims-more > summary::before { color: var(--dk-mut); } details[open].disclosure > summary::before, details[open].dims-more > summary::before { transform: rotate(90deg); } details.disclosure > summary .disclosure-sub { color: rgba(255,255,255,.82); font-weight: 400; text-transform: none; letter-spacing: .02em; font-size: .68rem; } details.dims-more[open] > summary { margin-bottom: 10px; } /* ------------------------------------------------ esiti / accessibilita --- */ .msg { font-size: .82rem; min-height: 18px; margin: 4px 0 24px; text-align: left; } .msg.ok, .msg.err { padding: 9px 13px; border-radius: var(--dk-r); font-weight: 500; border: 1px solid; } .msg.err { color: var(--dk-err-ink); background: var(--dk-err-bg); border-color: var(--dk-err-line); } .msg.ok { color: var(--dk-ok-ink); background: var(--dk-ok-bg); border-color: var(--dk-ok-line); } .module-tab:focus-visible, .topbar .user-area .logout:focus-visible, .link-del:focus-visible, .mi-row-del:focus-visible, .lastre-fam:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--dk-ring); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .btn:active { transform: none; } } /* ------------------------------------------------------------ anteprima --- */ .hidden { display: none; } .preview .prev-meta { font-size: .8rem; color: var(--dk-mut); margin-bottom: 12px; } #prev-table { width: 100%; border-collapse: collapse; font-size: .82rem; } #prev-table th { font-family: var(--dk-font); text-transform: uppercase; font-weight: 700; font-size: .66rem; letter-spacing: .1em; text-align: left; color: var(--dk-mut); background: none; padding: 7px 10px; border-bottom: 1px solid var(--dk-ink); } #prev-table td { padding: 7px 10px; border-bottom: 1px solid var(--dk-hair-2); vertical-align: top; } #prev-table .num { text-align: right; font-variant-numeric: tabular-nums; } #prev-table td.sc { text-align: center; } #prev-table input.sc-inp { width: 58px; margin: 0; padding: 3px 5px; text-align: right; font-size: .75rem; border: 1px solid var(--dk-hair); border-radius: var(--dk-r); } #prev-table tr:last-child td { border-bottom: none; } .prev-tot { margin-top: 16px; text-align: right; font-size: .86rem; line-height: 1.7; font-variant-numeric: tabular-nums; } .prev-tot .tot-grande { font-family: var(--dk-font); font-size: 1.3rem; font-weight: 800; color: var(--dk-ink); letter-spacing: -.01em; } /* --------------------------------------------------------------- piede --- */ .foot { text-align: center; color: var(--dk-soft); font-size: .74rem; padding: 24px; border-top: 1px solid var(--dk-hair-2); margin-top: 30px; } /* --------------------------------------------------- barra utente ------ */ .topbar .user-area { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: .78rem; } .topbar .user-area .user-nome { color: var(--dk-mut); font-weight: 500; } /* Seconda riga: le destinazioni a sinistra, il proprio account a destra. Due ruoli diversi, quindi due trattamenti diversi — non cinque pillole identiche in fila, che non dicono quale sia quale. */ .topbar-utility { border-top: 1px solid var(--dk-hair-2); padding-top: 9px; font-size: .78rem; } .topbar-utility .risorse { display: flex; gap: 4px; flex-wrap: wrap; } .topbar-utility .conto { margin-left: auto; display: flex; gap: 4px; align-items: center; } .topbar-utility a, .topbar-utility button { font-family: var(--dk-font); text-transform: uppercase; letter-spacing: .09em; font-size: .66rem; font-weight: 700; text-decoration: none; background: transparent; border: 0; border-radius: var(--dk-r); padding: 7px 10px; cursor: pointer; /* area di tocco >= 32px */ transition: color .16s var(--dk-ease), background-color .16s var(--dk-ease); } .topbar-utility .risorse a { color: var(--dk-ink); } .topbar-utility .risorse a:hover { background: var(--dk-page); } .topbar-utility .conto button, .topbar-utility .conto a { color: var(--dk-soft); font-weight: 600; } .topbar-utility .conto button:hover, .topbar-utility .conto a:hover { color: var(--dk-ink); background: var(--dk-page); } .topbar-utility a:focus-visible, .topbar-utility button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--dk-ring); } @media (max-width: 700px) { .topbar-utility { flex-wrap: wrap; gap: 4px; } .topbar-utility .conto { margin-left: 0; } } /* ----------------------------------------------------------- login ------ */ .login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: linear-gradient(135deg, #0d0d16 0%, #1f2a33 100%); } .bg-carousel { position: fixed; inset: 0; z-index: 0; } .bg-slide { position: absolute; inset: 0; background-color: #14141a; background-size: cover; background-position: center; opacity: 0; transform: scale(1.08); transition: opacity 1.6s ease; } .bg-slide.is-active { opacity: 1; transform: scale(1); transition: opacity 1.6s ease, transform 9s ease-out; } .bg-veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; /* Le aperture sono immagini chiare (carta da disegno a sinistra): la fascia bassa va scurita davvero, o la didascalia e il piede — bianchi — ci finiscono sopra a due punti di contrasto. */ background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(10,10,14,.64) 0%, rgba(10,10,14,.18) 70%), linear-gradient(to top, rgba(10,10,14,.72) 0%, rgba(10,10,14,.40) 22%, rgba(10,10,14,.30) 100%); } .login-box { position: relative; z-index: 2; width: 100%; max-width: 380px; margin: 0; padding: 36px 34px 30px; background: var(--dk-paper); border: 1px solid rgba(255,255,255,.4); border-radius: var(--dk-r); box-shadow: 0 30px 70px rgba(0,0,0,.5); text-align: center; animation: loginIn .6s var(--dk-ease) both; } @keyframes loginIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .login-logo { height: 34px; margin-bottom: 20px; } .login-box h1 { font-family: var(--dk-font); font-weight: 800; letter-spacing: -.02em; font-size: 1.4rem; color: var(--dk-ink); margin: 0 0 4px; text-transform: none; } .login-sub { font-size: .74rem; color: var(--dk-mut); margin: 0 0 24px; } .login-box form { text-align: left; } .login-btn { width: 100%; justify-content: center; margin-top: 8px; } .login-box .msg { text-align: center; } /* Anteprima della password: il bottone sta DENTRO il campo, con un margine destro sull'input pari alla sua larghezza, cosi' il testo non ci finisce sotto quando la password e' lunga. */ .campo-pwd { position: relative; display: block; } .campo-pwd input { width: 100%; padding-right: 74px; } .mostra-pwd { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); border: 0; background: none; cursor: pointer; padding: 4px 6px; font: inherit; font-size: .72rem; letter-spacing: .04em; color: var(--dk-mut); text-transform: uppercase; } .mostra-pwd:hover { color: var(--dk-ac); text-decoration: underline; } .mostra-pwd:focus-visible { outline: 2px solid var(--dk-ac); outline-offset: 2px; border-radius: 3px; } .pwd-nota { margin: 4px 0 0; font-size: .74rem; color: var(--dk-err-ink); } .photo-caption { position: fixed; right: 22px; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.85); font-size: .74rem; letter-spacing: .03em; text-shadow: 0 1px 8px rgba(0,0,0,.6); transition: opacity .6s ease; } .photo-caption .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dk-ac); box-shadow: 0 0 0 4px rgba(255,255,255,.18); } .login-body .foot { position: fixed; left: 0; bottom: 0; z-index: 2; width: 100%; color: rgba(255,255,255,.62); border-top: none; margin: 0; padding: 12px 24px; font-size: .68rem; text-align: left; text-shadow: 0 1px 6px rgba(0,0,0,.5); } @media (max-width: 760px) { .login-body { justify-content: center; } .login-box { margin: auto 18px; } .bg-veil { background: linear-gradient(rgba(10,10,14,.55), rgba(10,10,14,.78)); } .photo-caption, .login-body .foot { display: none; } } /* ------------------------------------------------------- modulo MI ------ */ #form-mi table { width: 100%; border-collapse: collapse; font-size: .82rem; } #form-mi th { background: none; color: var(--dk-mut); font-family: var(--dk-font); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--dk-ink); } #form-mi td { padding: 6px 8px; border-bottom: 1px solid var(--dk-hair-2); vertical-align: top; } #form-mi input, #form-mi select { margin: 0; } .mi-row-del { color: var(--dk-err-ink); cursor: pointer; border: none; background: none; font-size: 1rem; border-radius: var(--dk-r); } .mi-add { margin-top: 10px; } .mi-fs legend { padding: 0 6px; } .mi-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; } .mi-rows { display: flex; flex-direction: column; } .mi-rows .mi-chk { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 2px; border-bottom: 1px solid var(--dk-hair-2); font-weight: normal; } .mi-rows .mi-chk input[type="checkbox"] { flex: 0 0 auto; margin: 0; accent-color: var(--dk-ac); } .mi-rows .mi-chk .mi-desc { flex: 1 1 auto; min-width: 0; text-align: left; line-height: 1.25; } .mi-rows .mi-chk .mi-est { display: block; color: var(--dk-mut); font-size: .66rem; } .mi-rows .mi-chk .mi-eur { flex: 0 0 auto; color: var(--dk-mut); font-size: .75rem; white-space: nowrap; font-variant-numeric: tabular-nums; } .mi-multi { width: 100%; border: 1px solid var(--dk-hair); border-radius: var(--dk-r); padding: 2px; font-size: .82rem; background: #fff; } .mi-multi:disabled { background: var(--dk-well); color: var(--dk-soft); } .mi-multi option { padding: 4px 6px; border-bottom: 1px solid var(--dk-hair-2); cursor: pointer; } .mi-multi option:checked { background: var(--dk-ac) linear-gradient(0deg, var(--dk-ac), var(--dk-ac)); color: #fff; } .mi-chk { display: flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: normal; } .mi-chk input { margin: 0; accent-color: var(--dk-ac); } .mi-eur { color: var(--dk-mut); font-size: .75rem; } .mi-warn { color: var(--dk-err-ink); font-size: .75rem; font-weight: normal; } .mi-hint { color: var(--dk-mut); font-size: .75rem; font-weight: normal; } /* Dentro la barra piena del titolo l'inchiostro grigio non si legge: li' la nota va in bianco velato. (Vale per "Righe libere (FS e altre voci a mano)".) */ .card h2 .mi-hint { color: rgba(255, 255, 255, .78); } .mi-inline { display: flex; align-items: center; gap: 8px; font-weight: normal; margin: 8px 0; flex-wrap: wrap; } /* schede finestratura */ .f-card { border: 1px solid var(--dk-hair-2); border-radius: var(--dk-r); padding: 12px; margin-bottom: 12px; background: var(--dk-well); } .f-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .f-head .f-rif { flex: 1; font-weight: 700; } .f-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .f-grid label { font-size: .74rem; } .mi-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; } .f-line { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 6px 0; } .f-line-main { flex-wrap: nowrap; } .f-line label { font-size: .74rem; margin-bottom: 0; } .f-line input[type="number"] { width: 80px; } .f-line select { min-width: 130px; } .f-line .f-chk { flex-direction: row; align-items: center; gap: 6px; font-size: .82rem; } .f-line .f-chk input[type="number"] { width: 55px; } .f-line .f-rif-l { flex: 1 1 130px; margin-bottom: 0; } .f-line .f-rif { width: 100%; font-weight: 700; } .f-line .mi-row-del { align-self: center; margin-left: 2px; } .mi-sis-col label:last-child { margin-bottom: 0; } .mi-est { color: var(--dk-mut); font-size: .7rem; } .mi-desc { flex: 0 0 auto; } /* interruttori on/off */ .sw { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: normal; font-size: .82rem; margin: 7px 0; } .sw.sw-inline { display: inline-flex; margin: 0; } .sw input { position: absolute; opacity: 0; width: 0; height: 0; } .sw-track { position: relative; flex: 0 0 auto; width: 36px; height: 19px; background: #c3c5c9; border-radius: 999px; transition: background .16s var(--dk-ease); } .sw-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .16s var(--dk-ease); } .sw input:checked + .sw-track { background: var(--dk-ac); } .sw input:checked + .sw-track::after { left: 19px; } .sw input:focus-visible + .sw-track { outline: none; box-shadow: 0 0 0 3px var(--dk-ring); } .f-opt { display: inline-flex; align-items: center; gap: 8px; } .f-opt input[type="number"] { width: 55px; } .sw-row { display: flex; align-items: center; gap: 8px; margin: 7px 0; } .sw-row input[type="number"] { width: 55px; } .sw-list { display: flex; flex-direction: column; } .sw-list .sw { align-items: flex-start; gap: 8px; margin: 0; padding: 6px 2px; border-bottom: 1px solid var(--dk-hair-2); } .sw-list .sw .sw-track { margin-top: 1px; } .sw-list .sw-label { line-height: 1.3; } .sw-list .sw-label b { font-weight: 700; } .sw-dis { opacity: .5; } .f-ap { background: var(--dk-well); border: 1px solid var(--dk-hair-2); border-radius: var(--dk-r); padding: 8px 12px; margin: 6px 0; } .a-comp-wrap { margin-top: 6px; } .a-comp-row { gap: 6px; } /* anteprima distinta MI */ .mi-cat { margin: 14px 0 2px; color: var(--dk-ink); font-family: var(--dk-font); font-size: .86rem; font-weight: 700; } .mi-sis { font-size: .8rem; color: var(--dk-mut); margin-bottom: 4px; font-style: italic; } .mi-line { display: flex; gap: 10px; justify-content: space-between; border-bottom: 1px solid var(--dk-hair-2); padding: 3px 0; font-size: .82rem; } .mi-distinta { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: 6px; } .mi-distinta th { background: none; color: var(--dk-mut); font-family: var(--dk-font); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--dk-ink); } .mi-distinta td { padding: 5px 8px; border-bottom: 1px solid var(--dk-hair-2); vertical-align: top; } .mi-distinta .c-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .mi-distinta .c-cod { color: var(--dk-ac-d); white-space: nowrap; font-family: var(--dk-mono); font-size: .75rem; } /* codici e numeri mai a capo, anche nel PDF da browser e nella casella finestrature */ .mi-distinta .c-num, .dati-tab .c-num, .pdf-doc .c-cod, .pdf-doc .c-num, .lay-mat td.q { white-space: nowrap; } .mi-distinta .c-desc { width: 100%; } .mi-cat-row td { background: var(--dk-tint); color: var(--dk-ac-d); font-family: var(--dk-font); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; padding: 6px 8px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .mi-cat-row .cat-tit { text-align: left; } .mi-cat-row .cat-sc { text-align: right; white-space: nowrap; } .sc-cap { width: 48px; margin: 0 2px; padding: 1px 4px; font-size: .75rem; } /* --------------------------------------------- configuratore lastre ----- */ .lastre-intro { color: var(--dk-mut); font-size: .82rem; margin: 0 0 14px; } .lastre-fam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .lastre-fam { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; cursor: pointer; padding: 15px 16px 14px; background: #fff; border: 1px solid var(--dk-hair); border-radius: var(--dk-r); transition: border-color .16s var(--dk-ease), box-shadow .16s var(--dk-ease); } .lastre-fam:hover { border-color: var(--dk-ac); } .lastre-fam.is-sel { border-color: var(--dk-ac); box-shadow: inset 0 0 0 1px var(--dk-ac); } .lastre-fam .fam-code { font-family: var(--dk-font); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--dk-ink); line-height: 1; } .lastre-fam .fam-cat { font-size: .86rem; font-weight: 700; color: var(--dk-ink); } .lastre-fam .fam-mat { font-size: .8rem; color: var(--dk-ac-d); font-weight: 600; } .lastre-fam .fam-meta { font-size: .72rem; color: var(--dk-mut); margin-top: 4px; } .lastre-next { color: var(--dk-ink); font-weight: 600; font-size: .82rem; margin-top: 10px; } .l-card { border: 1px solid var(--dk-hair-2); border-radius: var(--dk-r); padding: 12px; margin-bottom: 12px; background: var(--dk-well); } .l-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .l-card-head strong { font-family: var(--dk-font); color: var(--dk-ink); } .link-del { background: none; border: none; color: var(--dk-err-ink); cursor: pointer; font-size: .75rem; text-decoration: underline; border-radius: var(--dk-r); } .l-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; } .l-line-out { margin-top: 10px; font-size: .82rem; color: var(--dk-ink); } .l-line-out strong { color: var(--dk-ac-d); } .resp-table .cat-row td { background: var(--dk-tint); color: var(--dk-ac-d); font-family: var(--dk-font); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .l-lav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dk-hair-2); } .l-taglio-lbl { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--dk-ink); font-weight: 500; } .l-taglio-lbl select { width: auto; } .l-acc-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .l-acc-row .a-sel, .l-acc-row .a-desc { flex: 1 1 200px; } .l-acc-row .a-out { min-width: 70px; font-size: .75rem; color: var(--dk-ac-d); font-weight: 700; } .l-acc-btns { display: flex; gap: 10px; margin-top: 8px; } /* --------------------------------------------------------- sconti (input) --- */ .sconti-grid { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 18px; align-items: start; } .sconto-gen input { font-size: 1.05rem; font-weight: 700; } .sconti-cat-tit { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--dk-ink); margin-bottom: 8px; } .sconti-cat-tit .mi-hint { text-transform: none; letter-spacing: 0; font-weight: 400; } .sc-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 18px; } .sc-row { display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0; border-bottom: 1px solid var(--dk-hair-2); } .sc-cap-nome { flex: 1 1 auto; min-width: 0; font-size: .74rem; color: var(--dk-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-cap-nome b { color: var(--dk-ink); font-family: var(--dk-mono); font-size: .7rem; margin-right: 4px; } .sc-row input { width: 56px; margin: 0; padding: 4px 6px; text-align: right; font-size: .8rem; } .sc-pct { font-size: .74rem; color: var(--dk-mut); } .sconti-nota { margin: 12px 0 0; } @media (max-width: 760px) { .sconti-grid { grid-template-columns: 1fr; } } /* barra sconto in cima all'anteprima (+ interruttore "mostra in stampa") */ .sconto-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .sconto-badge { display: inline-block; padding: 5px 12px; border-left: 3px solid var(--dk-ac); background: var(--dk-tint); color: var(--dk-ink); font-size: .78rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .sconto-badge b { font-weight: 800; } .sconto-badge .sconto-det { color: var(--dk-mut); font-size: .72rem; } .sconto-bar .sw { font-size: .72rem; color: var(--dk-mut); } /* sconto applicato ma non esposto: promemoria solo a video */ .sconto-badge-off { border-left-color: var(--dk-mut); background: var(--dk-well); color: var(--dk-mut); } /* casella dati: elenco elementi in offerta (finestrature / coperture / lastre) */ .dati-box { border: 1px solid var(--dk-hair-2); border-radius: var(--dk-r); padding: 10px 12px; margin-bottom: 14px; background: var(--dk-well); } .dati-tit { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--dk-mut); margin-bottom: 6px; } .dati-tab { width: 100%; border-collapse: collapse; font-size: .78rem; } .dati-tab th { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dk-mut); text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--dk-hair); } .dati-tab td { padding: 3px 6px; border-bottom: 1px solid var(--dk-hair-2); } .dati-tab .c-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .dati-tab tr:last-child td { border-bottom: none; } /* Box finestrature MI: dalla seconda colonna titoli e dati centrati (anche in stampa; l'id batte `#form-mi th`, che altrimenti riporta i titoli a sinistra). */ #form-mi .dati-tab.centrato th:not(:first-child), #form-mi .dati-tab.centrato td:not(:first-child), .dati-tab.centrato th:not(:first-child), .dati-tab.centrato td:not(:first-child) { text-align: center; } .dati-tot { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--dk-hair); font-size: .78rem; text-align: right; font-variant-numeric: tabular-nums; } .dati-tot b { font-weight: 700; } /* condizioni di vendita: card di input (chiusa di suo) */ .cond-card .cond-griglia { display: grid; gap: 10px; } @media (min-width: 720px) { .cond-card .cond-griglia { grid-template-columns: 1fr 1fr; } } .cond-riga { display: block; } .cond-riga > span { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--dk-mut); margin-bottom: 3px; } .cond-riga input, .cond-riga textarea { width: 100%; } .cond-riga textarea { resize: vertical; font: inherit; font-size: .84rem; } .cond-riga-testo { margin-top: 12px; } .cond-azioni { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; } /* condizioni di vendita: blocco in coda all'anteprima (va anche in stampa) */ .cond-blocco { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--dk-hair); } .cond-blocco-tit { font-family: var(--dk-font); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--dk-mut); margin-bottom: 8px; } .cond-elenco { margin: 0; display: grid; gap: 3px; } .cond-voce { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: baseline; } .cond-voce dt { font-size: .72rem; font-weight: 700; color: var(--dk-ink); } .cond-voce dd { margin: 0; font-size: .78rem; color: var(--dk-ink); } .cond-testo { margin-top: 10px; font-size: .74rem; color: var(--dk-mut); } .cond-testo p { margin: 0 0 5px; } /* distinta: riga di dettaglio sotto la descrizione (riferimento, pezzi, misura) */ .riga-dett { display: block; font-size: .74rem; color: var(--dk-mut); margin-top: 1px; } /* sconto nascosto in offerta: la colonna Sc.% non si stampa e non si vede */ .senza-sconto .sc { display: none; } /* vista: descrittiva (come il Word) oppure distinta (una riga per prodotto) */ .vista-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .vista-scelta { display: inline-flex; border: 1px solid var(--dk-hair-2); border-radius: var(--dk-r); overflow: hidden; } .vista-btn { background: var(--dk-paper); border: none; cursor: pointer; font-family: var(--dk-font); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--dk-mut); padding: 6px 14px; transition: background-color .16s var(--dk-ease), color .16s var(--dk-ease); } .vista-btn + .vista-btn { border-left: 1px solid var(--dk-hair-2); } .vista-btn:hover { color: var(--dk-ink); background: var(--dk-tint); } .vista-btn.is-active { background: var(--dk-ac); color: #fff; } .vista-nota { font-size: .72rem; color: var(--dk-mut); } /* scorta */ .scorta-row .sk-um { min-width: 44px; font-size: .74rem; } .scorta-row .sk-modo { flex: 0 0 auto; width: 150px; } .mi-distinta tr.riga-scorta td { background: #fbfaf5; } .mi-distinta .tag-scorta { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--dk-warn-bg); color: var(--dk-warn-ink); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* finestra invio e-mail */ .mail-overlay { position: fixed; inset: 0; z-index: var(--dk-z-overlay); background: rgba(20,20,20,.42); display: flex; align-items: center; justify-content: center; padding: 20px; } .mail-box { width: min(520px, 96vw); max-height: 92vh; overflow: auto; background: var(--dk-paper); border: 1px solid var(--dk-hair); border-radius: var(--dk-r); box-shadow: 0 24px 60px rgba(20,20,20,.3); padding: 20px 22px; } .mail-head { font-family: var(--dk-font); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; background: var(--dk-ac); color: #fff; display: inline-block; padding: 6px 15px; margin-bottom: 14px; } .mail-stato { font-size: .74rem; color: var(--dk-mut); border: 1px solid var(--dk-hair-2); border-radius: var(--dk-r); padding: 8px 10px; margin-bottom: 14px; } .mail-stato.ok { background: var(--dk-ok-bg); border-color: var(--dk-ok-line); color: var(--dk-ok-ink); } .mail-stato.warn { background: var(--dk-warn-bg); border-color: var(--dk-warn-line); color: var(--dk-warn-ink); } .mail-stato code { font-family: var(--dk-mono); font-size: .92em; } .mail-box textarea { resize: vertical; line-height: 1.45; } /* Materiale tecnico da inviare (link): la finestra si allarga per la tabella */ .mail-box:has(.mail-mat) { width: min(860px, 96vw); } .mail-mat { border-top: 1px solid var(--dk-hair-2); margin-top: 6px; padding-top: 10px; } .mail-mat-tit { font-weight: 600; font-size: .86rem; margin-bottom: 6px; } .mail-mat-tit small { font-weight: 400; color: var(--dk-mut); } .mail-mat-corpo { font-size: .8rem; color: var(--dk-mut); } .mat-wrap { overflow-x: auto; max-height: 300px; overflow-y: auto; border: 1px solid var(--dk-hair-2); } .mat-tab { border-collapse: collapse; width: 100%; font-size: .76rem; color: var(--dk-ink); } .mat-tab th { position: sticky; top: 0; background: var(--dk-well); text-align: center; font-weight: 600; padding: 5px 6px; border-bottom: 1px solid var(--dk-hair); white-space: nowrap; } .mat-tab th:first-child, .mat-tab td:first-child { text-align: left; min-width: 190px; } .mat-tab td label { white-space: nowrap; } .mat-tab td { padding: 4px 6px; border-bottom: 1px solid var(--dk-hair-2); text-align: center; vertical-align: middle; } .mat-tab td small { display: block; color: var(--dk-mut); font-size: .68rem; } .mat-tab td.mat-no { color: var(--dk-mut); font-size: .68rem; } .mat-tab label, .mat-tutti { display: inline-flex; gap: 4px; align-items: center; margin: 0; font-size: inherit; color: inherit; cursor: pointer; } /* certificati aziendali: un elenco su una colonna */ .mat-gen { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; color: var(--dk-ink); } .mat-gen b { font-size: .78rem; margin-bottom: 2px; } .mat-gen label { display: flex; gap: 6px; align-items: center; margin: 0; font-size: .76rem; color: var(--dk-ink); } /* le caselle del materiale restano caselle: lo stile della finestra allarga i campi a tutta riga */ .mail-mat input[type="checkbox"] { width: auto; height: auto; min-width: 0; margin: 0; padding: 0; flex: none; } .mail-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; } /* ------------------------------------------------- listino: pill/pop ---- */ .listino-area { position: relative; } .listino-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--dk-well); color: var(--dk-mut); border: 1px solid var(--dk-hair); padding: 5px 10px; border-radius: 999px; cursor: pointer; font-size: .72rem; font-family: inherit; line-height: 1; } .listino-pill:hover { background: #ececee; color: var(--dk-ink); } .listino-pill b { font-weight: 700; color: var(--dk-ink); } .listino-pill .listino-badge { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px rgba(166,92,32,.22); margin-left: 2px; } .listino-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: var(--dk-z-overlay); width: min(430px, 88vw); background: var(--dk-paper); color: var(--dk-ink); border: 1px solid var(--dk-hair); border-radius: var(--dk-r); box-shadow: 0 12px 34px rgba(20,20,20,.16); padding: 13px; text-align: left; } .listino-pop-head { font-weight: 700; color: var(--dk-ink); margin-bottom: 8px; font-size: .9rem; } .listino-rows { display: flex; flex-direction: column; gap: 6px; } .lst-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--dk-hair-2); border-radius: var(--dk-r); background: var(--dk-well); } .lst-nome { font-weight: 700; color: var(--dk-ink); font-size: .8rem; } .lst-stato { grid-row: 1 / span 2; align-self: center; } .lst-meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .68rem; color: var(--dk-mut); } .lst-flag { font-size: .68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .lst-flag.ok { background: var(--dk-ok-bg); color: var(--dk-ok-ink); } .lst-flag.aggiornabile { background: var(--dk-warn-bg); color: var(--dk-warn-ink); } .lst-flag.none { background: var(--dk-well); color: var(--dk-mut); } .listino-actions { display: flex; gap: 8px; margin-top: 10px; } /* display: flex/grid annulla l'attributo hidden: senza queste righe il riquadro «Carica file…» restava sempre aperto e le bavette DB comparivano (vuote) in ogni sistema MU */ .listino-actions[hidden], .listino-upload[hidden], .listino-nota[hidden], .mu-ovr-grid[hidden] { display: none; } .listino-nota { margin-top: 10px; font-size: .74rem; color: var(--dk-soft); } .listino-actions .btn { font-size: .78rem; padding: 8px 12px; } .listino-upload { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px dashed var(--dk-hair); border-radius: var(--dk-r); } .listino-upload label { font-size: .74rem; color: var(--dk-ink); font-weight: 700; display: flex; flex-direction: column; gap: 4px; } .listino-upload select, .listino-upload input[type=file] { font-size: .8rem; } .listino-msg { margin-top: 8px; font-size: .74rem; color: var(--dk-mut); min-height: 1em; } .listino-msg.ok { color: var(--dk-ok-ink); } .listino-msg.warn { color: var(--dk-warn-ink); } .listino-msg.err { color: var(--dk-err-ink); } .listino-toast { position: fixed; right: 18px; bottom: 18px; z-index: var(--dk-z-overlay); width: min(370px, 92vw); background: var(--dk-paper); color: var(--dk-ink); border: 1px solid var(--dk-hair); border-top: 3px solid var(--teal); border-radius: var(--dk-r); box-shadow: 0 12px 34px rgba(20,20,20,.2); padding: 12px 14px; } .listino-toast.warn { border-top-color: var(--orange); } .listino-toast .lt-head { font-weight: 700; color: var(--dk-ink); margin-bottom: 6px; } .listino-toast .lt-body { font-size: .8rem; display: flex; flex-direction: column; gap: 2px; } .listino-toast .lt-body .lt-warn { color: var(--dk-warn-ink); } .listino-toast .lt-foot { display: flex; gap: 8px; margin-top: 10px; } .listino-toast .lt-foot .btn { font-size: .74rem; padding: 6px 10px; } .listino-toast .lt-note { font-size: .7rem; color: var(--dk-mut); margin-top: 8px; } /* ------------------------------------------------------------ mobile ---- */ @media (max-width: 640px) { .listino-pill .listino-label { display: none; } .listino-pop { right: -8px; } } @media screen and (max-width: 640px) { .topbar { gap: 12px; padding: 10px 16px; position: static; } .topbar .logo { height: 24px; } .topbar-title h1 { font-size: .68rem; } .topbar-title span { display: none; } .topbar .user-area { gap: 10px; } .module-tabs { padding: 0 8px; position: static; overflow-x: auto; flex-wrap: nowrap; } .module-tab { flex: 0 0 auto; padding: 10px 12px; font-size: .66rem; } .wrap { padding: 18px 14px 6px; } .card { padding: 16px 14px; } .grid-2, .mi-2col, .row.two, .row.five, .mu-ovr-grid, .opts { grid-template-columns: 1fr; } .mu-row { flex-wrap: wrap; } .dim { flex-direction: column; gap: 0; } .dim label { min-width: 0; } .f-line, .f-line-main { flex-wrap: wrap; } .f-line .f-rif-l { flex: 1 1 100%; } .f-line label { flex: 1 1 46%; } .f-line input[type="number"], .f-line select { width: 100%; min-width: 0; } .actions { flex-direction: column; align-items: stretch; } .actions .btn { width: 100%; } .btn.ghost { margin-right: 0; } input, select { font-size: 16px; } /* evita lo zoom iOS */ /* anteprima: la tabella diventa un elenco di schede leggibili */ .resp-table thead { display: none; } .resp-table, .resp-table tbody { display: block; width: 100%; } .resp-table tr { display: block; background: #fff; border: 1px solid var(--dk-hair-2); border-radius: var(--dk-r); margin-bottom: 10px; padding: 8px 12px; } .resp-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; border: none !important; padding: 4px 0; text-align: right; white-space: normal; } .resp-table td::before { content: attr(data-label); flex: 0 0 auto; color: var(--dk-mut); font-weight: 700; text-align: left; } .resp-table td:empty { display: none; } .resp-table td.c-desc, .resp-table td[data-label="Voce"] { flex-direction: column; align-items: stretch; text-align: left; gap: 2px; font-weight: 700; } .resp-table td.c-cod, .resp-table td[data-label="Codice"] { font-size: .75rem; color: var(--dk-mut); } .resp-table tr.mi-cat-row { display: flex; justify-content: space-between; align-items: center; background: var(--dk-tint); padding: 6px 10px; } .resp-table tr.mi-cat-row td { border: none !important; padding: 0; } .resp-table tr.mi-cat-row td::before { content: none; } .prev-tot, .mi-prev-tot { text-align: right; } .l-grid { grid-template-columns: 1fr 1fr; } .resp-table .cat-row td { display: block; } .l-acc-row { flex-direction: column; align-items: stretch; } .l-acc-row input, .l-acc-row select { max-width: none !important; } .l-acc-btns { flex-direction: column; } .sc-rows { grid-template-columns: 1fr; } .scorta-row .sk-modo, .scorta-row .sk-cod { width: 100%; } .side-azioni .btn { width: 100%; } } /* ============================================================================ STAMPA / PDF — documento dell'offerta, stesso linguaggio delle schede ========================================================================== */ /* ---------- Riepilogo visivo in coda all'offerta (MI) ---------- */ .lay-foglio { margin-top: 22px; padding-top: 4px; color: #1c1c2e; } .lay-barra { background: #202050; color: #fff; font-family: "Oswald", var(--dk-font); text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; padding: 6px 10px; } .lay-sez { display: flex; align-items: baseline; gap: 10px; border-bottom: 1.5px solid #202050; padding-bottom: 3px; margin: 16px 0 8px; } .lay-sez h3 { margin: 0; font-family: "Oswald", var(--dk-font); font-weight: 500; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: #202050; } .lay-sez span { font-size: .72rem; color: #6a6d82; } .lay-abaco { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; } .lay-abaco figure { margin: 0; min-width: 160px; } .lay-abaco svg { width: 100%; height: auto; max-height: 260px; display: block; } .lay-abaco figcaption, .lay-pann-cap, .lay-nodi figcaption { font-size: .72rem; color: #6a6d82; margin-top: 3px; } .lay-abaco figcaption b, .lay-pann-cap b { font-family: "Oswald", var(--dk-font); font-weight: 500; color: #202050; } .lay-pann img { width: 100%; height: auto; display: block; } .lay-pann-cap { text-align: center; margin: 4px 0 10px; } .lay-nodi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .lay-nodi figure { margin: 0; } .lay-coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .lay-q { aspect-ratio: 1 / 1; position: relative; overflow: hidden; background: #fff; } .lay-q img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; } .lay-nodi figcaption b { display: block; color: #1c1c2e; } .lay-mat { width: 100%; border-collapse: collapse; font-size: .78rem; } .lay-mat th { font-family: "Oswald", var(--dk-font); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: #6a6d82; font-size: .66rem; text-align: left; padding: 4px 6px; border-bottom: 1px solid #d5d6e0; } .lay-mat td { padding: 4px 6px; border-bottom: 1px solid #d5d6e0; vertical-align: middle; } .lay-mat .q { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .lay-mat .q small { color: #6a6d82; font-size: .66rem; } .lay-mat td.im { width: 58px; } .lay-mat td.im img { width: 52px; height: 40px; object-fit: contain; display: block; } .lay-mat td.cc { white-space: nowrap; font-family: "Oswald", var(--dk-font); color: #202050; } .lay-col { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; } .lay-dove { color: #6a6d82; } .lay-dist { font-size: .7rem; color: #6a6d82; font-variant-numeric: tabular-nums; margin-top: 1px; } .lay-dist span { white-space: nowrap; } .lay-dist i { font-style: normal; padding: 0 3px; } .lay-nota { font-size: .66rem; color: #6a6d82; margin: 8px 0 0; } .mi-sotto-sw { margin-left: 26px; } /* sotto-opzione dell'abaco materiali */ /* Immagini nella distinta (a scelta): render sotto il codice, sezione del pannello */ .riga-ico { display: block; width: 64px; height: 48px; object-fit: contain; margin-top: 4px; } .mi-sez-pann { margin: 8px 0 12px; text-align: center; } .mi-sez-pann img { width: 100%; max-width: 620px; height: auto; } .mi-sez-pann figcaption { font-size: .7rem; color: #6a6d82; margin-top: 2px; } @media (max-width: 640px) { .lay-nodi { grid-template-columns: 1fr; } .lay-dist span { white-space: normal; } } @media print { .lay-foglio { break-before: page; page-break-before: always; margin-top: 0; } .lay-nodi figure, .lay-mat tr, .lay-abaco figure { break-inside: avoid; } } #print-area { display: none; } @media print { @page { size: A4; margin: 13mm; } html, body { background: #fff; } html { font-size: 16px; } body > *:not(#print-area) { display: none !important; } #print-area { display: block !important; } #print-area, #print-area * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Carta intestata: la stessa immagine del Word, a tutta larghezza */ .pdf-banner { display: block; width: 100%; height: auto; margin-bottom: 14px; } .pdf-riga-offerta { display: flex; justify-content: space-between; font-size: .78rem; border-top: 1px solid #8f9195; border-bottom: 1px solid #8f9195; padding: 5px 0; margin-bottom: 14px; } /* Titoletti di sezione come nel Word: maiuscoletto spaziato su filetto */ .pdf-sez { font-family: var(--dk-font); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #3a3b3d; border-bottom: .5pt solid #c9cacd; padding-bottom: 3px; margin: 14px 0 8px; } .pdf-anag { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 22px; margin: 0; } .pdf-anag > div { display: grid; grid-template-columns: 108px 1fr; gap: 8px; } .pdf-anag dt { font-size: .68rem; color: #3a3b3d; } .pdf-anag dd { margin: 0; font-size: .72rem; font-weight: 700; } .pdf-oggetto { font-size: .74rem; font-weight: 700; margin: 0; text-align: justify; } .pdf-saluti { margin-top: 18px; font-size: .74rem; page-break-inside: avoid; } .pdf-saluti p { margin: 0 0 3px; } .pdf-saluti .pdf-chi, .pdf-saluti .pdf-rec { text-align: right; font-style: italic; } .pdf-saluti .pdf-chi { font-size: .8rem; margin-top: 10px; } .pdf-firme { display: flex; justify-content: space-between; gap: 40px; margin-top: 26px; padding-top: 6px; font-size: .7rem; color: #3a3b3d; page-break-inside: avoid; } .pdf-firme span { border-top: .5pt solid #8f9195; padding-top: 4px; width: 42%; text-align: center; } .pdf-doc .card, .pdf-doc .preview { border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } .pdf-doc h2 { display: inline-block; background: var(--dk-ac); color: #fff; font-family: var(--dk-font); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; border: none; padding: 4px 12px; margin: 0 0 10px; } .pdf-doc table { width: 100%; border-collapse: collapse; font-size: .72rem; } .pdf-doc th { background: #ededee !important; color: var(--dk-ink) !important; font-family: var(--dk-font); text-transform: uppercase; letter-spacing: .08em; font-size: .62rem; padding: 5px 8px; text-align: left; border: .5pt solid #8f9195; } .pdf-doc td { padding: 4px 8px; border: .5pt solid #8f9195; vertical-align: top; } .pdf-doc .num, .pdf-doc .c-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .pdf-doc tr { page-break-inside: avoid; } .pdf-doc .prev-meta { font-size: .72rem; color: #3a3b3d; margin-bottom: 10px; } .pdf-doc .riga-dett { display: block; font-size: .64rem; color: #3a3b3d; } .pdf-doc .mi-sis { font-size: .74rem; color: #3a3b3d; font-style: italic; margin-bottom: 6px; } .pdf-doc .mi-cat-row td, .pdf-doc .cat-row td { background: var(--dk-tint) !important; color: var(--dk-ac-d) !important; font-family: var(--dk-font); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; } /* barra sconto + casella dati: entrano nel PDF insieme alla distinta */ .pdf-doc .sconto-bar { display: block; margin-bottom: 10px; } .pdf-doc .sconto-badge { display: inline-block; background: var(--dk-tint) !important; border-left: 3px solid var(--dk-ac); padding: 4px 10px; font-size: .72rem; } .pdf-doc .dati-box { background: #fff; border: .5pt solid #8f9195; padding: 6px 9px; margin-bottom: 12px; } .pdf-doc .dati-tit { font-size: .6rem; letter-spacing: .12em; color: #3a3b3d; } .pdf-doc .dati-tab { font-size: .68rem; } .pdf-doc .dati-tab th, .pdf-doc .dati-tab td { border: none !important; border-bottom: .5pt solid #c9cacd !important; background: none !important; padding: 3px 6px; } .pdf-doc .dati-tot { font-size: .7rem; } .pdf-doc .dati-tab.centrato th:not(:first-child), .pdf-doc .dati-tab.centrato td:not(:first-child) { text-align: center; } .pdf-doc .riga-scorta td { background: #fbfaf5 !important; } .pdf-doc .tag-scorta { background: var(--dk-warn-bg) !important; color: var(--dk-warn-ink) !important; } /* condizioni di vendita: capitolo in coda al documento stampato */ .pdf-doc .cond-blocco { margin-top: 18px; padding-top: 10px; border-top: 1px solid #c9cacd; page-break-inside: avoid; } .pdf-doc .cond-blocco-tit { font-size: .62rem; letter-spacing: .14em; color: #3a3b3d; margin-bottom: 7px; } .pdf-doc .cond-voce { display: grid; grid-template-columns: 110px 1fr; gap: 8px; } .pdf-doc .cond-voce dt { font-size: .68rem; font-weight: 700; } .pdf-doc .cond-voce dd { font-size: .7rem; } .pdf-doc .cond-testo { font-size: .66rem; color: #3a3b3d; margin-top: 8px; text-align: justify; } .pdf-doc .prev-tot { text-align: right; margin-top: 14px; line-height: 1.7; } .pdf-doc .tot-grande { font-family: var(--dk-font); font-size: 1.1rem; color: var(--dk-ink); font-weight: 800; } .pdf-foot { margin-top: 22px; padding-top: 10px; border-top: 1px solid #c9cacd; font-size: .66rem; color: #5f6165; text-align: center; } } /* --- Gestione utenti (/admin) -------------------------------------------- */ /* Riusa i token dell'app: nessuna palette nuova, e' una pagina di servizio. */ .admin-wrap { max-width: 1080px; margin: 0 auto; padding: 22px 20px 60px; } .admin-sez { margin-bottom: 34px; } .admin-sez h2 { font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: var(--dk-ink-soft, #5f6165); margin: 0 0 12px; } .admin-tab-wrap { overflow-x: auto; border: 1px solid var(--dk-hair); border-radius: var(--dk-r); } .admin-tab { width: 100%; border-collapse: collapse; font-size: .86rem; background: var(--dk-paper); } .admin-tab th { text-align: left; font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dk-ink-soft, #5f6165); padding: 10px 12px; border-bottom: 1.5px solid var(--dk-ink); white-space: nowrap; } .admin-tab td { padding: 8px 12px; border-bottom: 1px solid var(--dk-hair); vertical-align: middle; } .admin-tab tr:last-child td { border-bottom: 0; } .admin-tab tr.sospeso { background: #faf7f2; color: #8a8a8a; } .admin-tab input, .admin-tab select { width: 100%; min-width: 130px; padding: 5px 7px; border: 1px solid var(--dk-hair); border-radius: 5px; font: inherit; background: #fff; } /* NIENTE display:flex qui: e' una cella di tabella, e con flex esce dal calcolo della griglia — i filetti della colonna Azioni si disallineano da quelli delle altre colonne, sfalsati di mezza riga. I bottoni sono gia' in linea per conto loro. */ .admin-tab .azioni { white-space: nowrap; } .admin-tab .azioni .btn { padding: 5px 10px; font-size: .78rem; } .admin-tab .azioni .btn + .btn { margin-left: 6px; } .admin-tab .tu { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; background: var(--dk-hair); border-radius: 3px; padding: 1px 5px; color: #5f6165; } /* Riga che si apre sotto l'utente per cambiargli la password. */ .admin-tab tr.riga-pwd td { background: var(--dk-wash, #f6f4ef); padding: 12px; } .pwd-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .pwd-form label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; flex: 0 1 340px; } .pwd-form input { font-family: var(--dk-mono, ui-monospace, monospace); letter-spacing: .04em; } .pwd-form .hint { flex-basis: 100%; margin: 0; } .admin-tab tr.riga-pwd .btn { padding: 6px 12px; font-size: .78rem; } .admin-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px 18px; align-items: end; } .admin-form label { display: flex; flex-direction: column; gap: 4px; font-size: .82rem; } .admin-form input, .admin-form select { padding: 7px 9px; border: 1px solid var(--dk-hair); border-radius: 6px; font: inherit; } #msg.errore { color: var(--dk-danger-ink, #a8331b); font-weight: 600; } @media (max-width: 720px) { .admin-tab .azioni .btn { display: block; width: 100%; } .admin-tab .azioni .btn + .btn { margin: 6px 0 0; } } /* Etichetta "in collaudo" sulle schede dei moduli non ancora pubblici. La vede solo chi li sta verificando: ai commerciali la scheda non compare. */ .module-tab .tab-collaudo { display: inline-block; margin-left: 8px; padding: 1px 6px; font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a5a12; background: #fdf0d5; border: 1px solid #e8cf9a; border-radius: 3px; vertical-align: middle; } /* Famiglia senza ancora un modulo: resta in elenco, non cliccabile. Meglio vederla e sapere che arriva, che non trovarla e chiedersi se manchi. */ .module-tab.is-arrivo { cursor: default; opacity: .62; } .module-tab.is-arrivo:hover { color: var(--dk-mut); background: transparent; } .module-tab .tab-arrivo { display: inline-block; margin-left: 8px; padding: 1px 6px; font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--dk-soft); background: var(--dk-page); border: 1px solid var(--dk-hair-2); border-radius: 3px; vertical-align: middle; } /* ------------------------------------------------- blocchi richiudibili --- */ /* Le schede dei configuratori si aprono e si chiudono. Il titolo (la barra piena) fa da comando: e' gia' l'elemento che identifica il blocco, non serve aggiungerne un altro. */ details.card.blocco { padding: 0; } details.card.blocco > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin: 0; cursor: pointer; list-style: none; background: transparent; color: inherit; /* la barra sta nell'h2 */ text-transform: none; letter-spacing: normal; font-size: inherit; border-radius: var(--dk-r); transition: background-color .14s var(--dk-ease); } details.card.blocco > summary::-webkit-details-marker { display: none; } details.card.blocco > summary:hover { background: var(--dk-page); } details.card.blocco > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--dk-ring); } /* il titolo dentro il comando non ha margine sotto: ce l'ha gia' il blocco */ details.card.blocco > summary h2, details.card.blocco > summary .card-head { margin: 0; } details.card.blocco > summary .card-head { flex: 1; } .blocco-freccia { margin-left: auto; width: 9px; height: 9px; flex: none; border-right: 2px solid var(--dk-soft); border-bottom: 2px solid var(--dk-soft); transform: rotate(-45deg); transition: transform .18s var(--dk-ease); } details.card.blocco[open] > summary .blocco-freccia { transform: rotate(45deg); } .blocco-corpo { padding: 4px 22px 22px; } /* Campo obbligatorio: un segno, non un colore soltanto — chi non distingue i colori deve comunque vederlo. */ .obbligatorio { color: var(--dk-danger-ink, #a8331b); font-weight: 700; margin-left: 3px; } /* Perche' i pulsanti sono spenti. Spegnerli in silenzio e' un vicolo cieco. */ .azioni-motivo { margin: 0 0 10px; font-size: .8rem; color: var(--dk-soft); padding: 8px 11px; background: var(--dk-page); border-radius: var(--dk-r); } .actions button[disabled] { opacity: .45; cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { details.card.blocco > summary, .blocco-freccia { transition: none; } } /* --------------------------------------------------------- ritorno a casa --- */ /* Da ogni pagina si torna all'ingresso in due modi: il marchio, che e' dove la gente clicca per abitudine, e una voce "Home" in testa al menu "Vai a", che e' dove la cerca chi non lo sa. */ .logo-casa { display: inline-flex; align-items: center; text-decoration: none; border-radius: 2px; } .logo-casa:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--dk-ring); } .topbar-utility .risorse a.casa { font-weight: 700; } /* ------------------------------------------------ registro e anagrafica --- */ /* archivio.js: il numero lo assegna il server, al posto dei campi a mano. */ .reg-box { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start; margin: 0 0 14px; padding: 10px 12px; background: var(--dk-page); border: 1px solid var(--dk-hair-2); border-radius: var(--dk-r); } .reg-nascosto { display: none !important; } .reg-serie-lab { margin: 0; } .reg-num { align-self: center; font-size: .9rem; overflow-wrap: anywhere; } .reg-num b { font-variant-numeric: tabular-nums; } .reg-num .hint { margin-top: 2px; } .reg-vuoto { color: var(--dk-soft); font-size: .82rem; } .reg-azioni { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; } .reg-stato { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: .7rem; font-weight: 700; border: 1px solid var(--dk-hair); } .reg-inviata, .reg-accettata { color: var(--dk-ok-ink); background: var(--dk-ok-bg); border-color: var(--dk-ok-line); } .reg-bozza { color: var(--dk-warn-ink); background: var(--dk-warn-bg); border-color: var(--dk-warn-line); } .reg-persa, .reg-superata { color: var(--dk-soft); } @media (max-width: 520px) { .reg-box { grid-template-columns: 1fr; } } /* Ricerca nell'anagrafica mentre si scrive la ragione sociale. */ .cli-wrap { position: relative; } .cli-lista { position: absolute; left: 0; right: 0; z-index: 30; margin: 2px 0 0; padding: 4px 0; list-style: none; max-height: 280px; overflow: auto; background: var(--dk-paper); border: 1px solid var(--dk-hair); border-radius: var(--dk-r); box-shadow: 0 12px 30px rgba(20,20,20,.18); font-weight: 400; } .cli-lista li { padding: 6px 10px; cursor: pointer; line-height: 1.3; } .cli-lista li span { display: block; font-size: .72rem; color: var(--dk-soft); } .cli-lista li:hover, .cli-lista li[aria-selected="true"] { background: var(--accent-tint); } .cli-nota:empty { display: none; } /* Finestra "Registro offerte" (stessa cornice della finestra e-mail). */ .mail-box.reg-dialog { width: min(920px, 96vw); } .reg-filtri { display: flex; gap: 8px; margin: 12px 0; } .reg-filtri .reg-q { flex: 1 1 auto; width: auto; min-width: 0; } .reg-filtri select { flex: 0 0 auto; width: auto; } .reg-tab { width: 100%; border-collapse: collapse; font-size: .82rem; } .reg-tab th { text-align: left; font-size: .7rem; color: var(--dk-soft); padding: 6px 8px; border-bottom: 1px solid var(--dk-hair); } .reg-tab td { padding: 7px 8px; border-bottom: 1px solid var(--dk-hair-2); vertical-align: top; } .reg-tab td small { display: block; color: var(--dk-soft); font-size: .7rem; } .reg-tab select { padding: 3px 6px; font-size: .78rem; } .reg-tab select.reg-err { border-color: var(--dk-danger-ink, #a8331b); } .reg-avvisi { grid-column: 1 / -1; font-size: .8rem; padding: 7px 10px; border-radius: var(--dk-r); color: var(--dk-ok-ink); background: var(--dk-ok-bg); border: 1px solid var(--dk-ok-line); } .reg-avvisi.reg-avvisi-warn { color: var(--dk-warn-ink); background: var(--dk-warn-bg); border-color: var(--dk-warn-line); } .reg-avvisi ul { margin: 4px 0 0; padding-left: 18px; } .reg-tab .reg-richiama { padding: 4px 10px; font-size: .75rem; white-space: nowrap; } .reg-annullata { color: var(--dk-soft); text-decoration: line-through; } .reg-tab .reg-azioni-riga { white-space: nowrap; } .reg-tab .reg-elimina { padding: 4px 8px; font-size: .75rem; margin-left: 4px; color: var(--dk-danger-ink, #a8331b); }