/**/ div.ACTION div.idShower { min-width: 40px; height: 40px; line-height: 40px; border: 1px solid var(--color1); background-color: rgba(255,255,255,0.4); border-radius: 5px 5px 5px 5px; padding-left: 2px; padding-right: 2px; color: var(--color1); text-align: center; } /** CONTRATTI E RICHIESTA DI ASSUNZIONE **/ /* angelus.css tiene TUTTE le schede a 1050px (`body div .BOX .TAB`). Per due schede fitte come queste, su uno schermo largo, vuol dire etichette che si accavallano e tendine tagliate a meta'. Qui si allargano, come si era gia' fatto per Preventivi: 94vw per lasciare respiro ai lati, ma non oltre 1600px, oltre i quali le righe diventano troppo lunghe da leggere. Va allargata anche la barra dei bottoni, che angelus.css centra sulla stessa misura. */ /* NIENTE allargamento: queste due schede restano larghe come tutte le altre (1050px, da angelus.css). Deciso il 03/09/2026: la leggibilita' si sistema distribuendo i campi su piu' righe, non allargando la pagina. Se un giorno servisse allargarla, attenzione al selettore: `div.Contratti form.TAB` NON basta, perde contro `body div .BOX .TAB` di angelus.css a parita' di specificita'. Servirebbe `body div.Contratti div.BOX form.TAB`. */ /* NIENTE altezza minima sulle etichette. Ce l'avevo messa perche' le etichette lunghe, andando a capo, schiacciavano i pallini della riga sotto; ma costava quasi venti pixel di vuoto sotto OGNI etichetta corta, ed erano quelli i buchi fra etichetta e campo. La scheda Famiglie non ce l'ha, e infatti li' il campo sta attaccato alla sua etichetta. Ai pallini basta il loro margine. */ div.Contratti .gs-label, div.AssunzioniNew .gs-label { line-height: 1.2; padding-right: 10px; } div.Contratti .gs-radio-center, div.AssunzioniNew .gs-radio-center { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; } /* La nota accanto alle scelte bloccate: piccola e in grigio, cosi' si vede che e' un chiarimento e non un'altra etichetta. */ div.Contratti .lbl_nota, div.AssunzioniNew .lbl_nota { font-weight: normal; font-style: italic; opacity: .75; } /* La riga di informazioni in sola lettura (Informazioni contrattuali Angelus). Non sono campi da compilare: si leggono e basta, quindi niente cornici da modulo ma etichetta piccola sopra e valore in evidenza sotto. */ div.Contratti .riga_info, div.AssunzioniNew .riga_info { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 12px 0 6px 0; padding: 12px 16px; border-radius: 8px; background: rgba(0,0,0,.035); } div.Contratti .voce_info, div.AssunzioniNew .voce_info { min-width: 150px; } div.Contratti .etichetta_info, div.AssunzioniNew .etichetta_info { display: block; font-size: .82em; opacity: .7; margin-bottom: 2px; } div.Contratti .valore_info, div.AssunzioniNew .valore_info { font-weight: 600; font-size: 1.05em; min-height: 1.3em; } div.Contratti .valore_info.numero, div.AssunzioniNew .valore_info.numero { font-variant-numeric: tabular-nums; } /* La settimana degli orari, disegnata come la griglia degli allegati: righe alternate, intestazione grigia, bordi sottili. Dentro le celle ci sono i campi veri, quindi si legge come una tabella ma si compila come prima. */ div.Contratti table.griglia_orari, div.AssunzioniNew table.griglia_orari { width: 99%; margin: 12px auto 4px auto; border-collapse: collapse; font-size: .95em; } div.Contratti table.griglia_orari th, div.AssunzioniNew table.griglia_orari th { text-align: left; font-weight: 600; padding: 6px 10px; background: rgba(0,0,0,.05); border-bottom: 2px solid rgba(0,0,0,.12); white-space: nowrap; } div.Contratti table.griglia_orari td, div.AssunzioniNew table.griglia_orari td { padding: 4px 10px; border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: middle; } div.Contratti table.griglia_orari tbody tr:nth-child(even), div.AssunzioniNew table.griglia_orari tbody tr:nth-child(even) { background: rgba(0,0,0,.025); } div.Contratti table.griglia_orari td.giorno, div.AssunzioniNew table.griglia_orari td.giorno { width: 130px; font-weight: 600; white-space: nowrap; } div.Contratti table.griglia_orari td.ore, div.AssunzioniNew table.griglia_orari td.ore { width: 110px; } div.Contratti table.griglia_orari td.ore input, div.AssunzioniNew table.griglia_orari td.ore input { width: 90px; text-align: center; } div.Contratti table.griglia_orari td.orari input, div.AssunzioniNew table.griglia_orari td.orari input { width: 100%; } /* Nel riquadro delle informazioni la voce del collegamento (richiesta o contratto) ha il numero e un piccolo «apri»: si legge come le altre voci, non come un avviso piantato sopra la scheda. */ div.Contratti .voce_info .lbl_fx, div.AssunzioniNew .voce_info .lbl_fx { /* Dal 29/09/2026 il collegamento sta accanto all'ETICHETTA ed e' uguale a «apri scheda operatore» (richiesta degli utenti): corsivo, misura del testo, niente maiuscolo dell'etichetta. */ font-size: 1rem; font-style: italic; font-weight: normal; text-transform: none; letter-spacing: 0; margin-left: 6px; white-space: nowrap; cursor: pointer; } /* ===== LA SETTIMANA DENTRO LA FINESTRELLA ===== La finestrella e' la stessa per le due schede, ma il modulo e' duplicato, quindi il riquadro si chiama `AssunzioniNew_orari` quando la apre la Richiesta e `Contratti_orari` quando la apre il Contratto: vanno nominati tutti e due, per intero, su OGNI regola. DUE ERRORI DA NON RIFARE, tutti e due miei: 1. fino al 04/09/2026 queste regole dicevano `div.AssOrari`, una classe che nel modulo non c'e' mai stata: erano quindici regole che non vestivano niente; 2. rinominandole ho scritto `div.AssunzioniNew_orari,\n div.Contratti_orari table.tab_orari{...}`: cosi' la prima riga e' un selettore a se' e la larghezza del 99% e i margini finivano sulla FINESTRELLA INTERA, che si e' schiacciata in una colonna stretta con le etichette una sopra l'altra. Il nome della tabella va ripetuto in tutte e due le righe. E la tabella si chiama `tab_orari`, non `griglia_settimana`. */ div.AssunzioniNew_orari table.tab_orari, div.Contratti_orari table.tab_orari{ width: 100%; margin: 6px 0px; border-collapse: collapse; } div.AssunzioniNew_orari table.tab_orari th, div.Contratti_orari table.tab_orari th{ font-weight: 600; padding: 8px 6px; background: rgba(0,0,0,.04); border-bottom: 2px solid var(--c3-accent, #009BC4); color: var(--c3-accent, #007090); text-align: center; white-space: nowrap; } div.AssunzioniNew_orari table.tab_orari tr.sotto_testata th, div.Contratti_orari table.tab_orari tr.sotto_testata th{ font-weight: 400; font-size: var(--c3-fs-xs, 12px); border-bottom: 1px solid rgba(0,0,0,.12); padding-top: 0px; } div.AssunzioniNew_orari table.tab_orari td, div.Contratti_orari table.tab_orari td{ padding: 6px 5px; border-bottom: 1px solid rgba(0,0,0,.08); text-align: center; vertical-align: middle; } /* La prima colonna: il nome del giorno con la sua spunta, a sinistra. */ div.AssunzioniNew_orari table.tab_orari th.c_gg, div.Contratti_orari table.tab_orari th.c_gg, div.AssunzioniNew_orari table.tab_orari td.c_gg, div.Contratti_orari table.tab_orari td.c_gg{ text-align: left; padding-left: 8px; white-space: nowrap; font-weight: 600; color: #1F2A33; } div.AssunzioniNew_orari table.tab_orari td.c_gg input[type=checkbox], div.Contratti_orari table.tab_orari td.c_gg input[type=checkbox]{ transform: scale(1.2); margin-right: 8px; cursor: pointer; } div.AssunzioniNew_orari table.tab_orari td.c_ore, div.Contratti_orari table.tab_orari td.c_ore{ width: 130px; font-weight: 700; color: #1F2A33; font-variant-numeric: tabular-nums; } div.AssunzioniNew_orari table.tab_orari td.c_r, div.Contratti_orari table.tab_orari td.c_r{ width: 38px; } div.AssunzioniNew_orari table.tab_orari td.c_r input[type=checkbox], div.Contratti_orari table.tab_orari td.c_r input[type=checkbox]{ transform: scale(1.25); cursor: pointer; } div.AssunzioniNew_orari table.tab_orari td.c_dup, div.Contratti_orari table.tab_orari td.c_dup{ width: 38px; } div.AssunzioniNew_orari table.tab_orari td.c_dup i, div.Contratti_orari table.tab_orari td.c_dup i{ cursor: pointer; color: var(--c3-accent, #0095d6); } /* Le caselle degli orari: larghe quanto basta a scrivere hh:mm, non di piu'. E le colonne degli orari si stringono con loro: lo spazio che avanza se lo prende la prima colonna, quella dei giorni, cosi' la tabella resta larga quanto la finestrella ma senza vuoti in mezzo (chiesto da lei il 04/09/2026). */ div.AssunzioniNew_orari table.tab_orari td input[type=text], div.Contratti_orari table.tab_orari td input[type=text]{ width: 72px !important; padding-left: 4px; padding-right: 4px; text-align: center; font-variant-numeric: tabular-nums; } div.AssunzioniNew_orari table.tab_orari td.c_f1, div.Contratti_orari table.tab_orari td.c_f1, div.AssunzioniNew_orari table.tab_orari td.c_f2, div.Contratti_orari table.tab_orari td.c_f2{ width: 110px; } /* La prima colonna non ha una larghezza sua: si prende quello che resta. */ div.AssunzioniNew_orari table.tab_orari th.c_gg, div.Contratti_orari table.tab_orari th.c_gg, div.AssunzioniNew_orari table.tab_orari td.c_gg, div.Contratti_orari table.tab_orari td.c_gg{ width: auto; } /* Le tendine degli orari: ore del giorno, ingressi e uscite. Sono cinque per riga, quindi si tengono strette - quanto basta per "08:00" e la freccetta - se no la settimana non ci sta nella finestrella. */ div.AssunzioniNew_orari table.tab_orari select, div.Contratti_orari table.tab_orari select{ width: 104px !important; min-width: 0px; display: inline-block; padding-left: 4px; padding-right: 2px; text-align: center; font-variant-numeric: tabular-nums; } /* La tendina delle ore un po' piu' larga delle altre: da vuota ci dev'essere scritto "Ore totali" per intero (chiesto da lei il 04/09/2026). */ div.AssunzioniNew_orari table.tab_orari td.c_ore select, div.Contratti_orari table.tab_orari td.c_ore select{ width: 124px !important; font-weight: 700; } div.AssunzioniNew_orari table.tab_orari .separatore, div.Contratti_orari table.tab_orari .separatore{ margin: 0px 6px; opacity: .6; } /* Un giorno non spuntato resta in riga ma spento: si vede che c'e' e che e' escluso, senza far ballare la tabella. */ div.AssunzioniNew_orari table.tab_orari tr.spenta, div.Contratti_orari table.tab_orari tr.spenta{ opacity: .45; } /* La settimana e' larga: se non ci sta, scorre lei, non la finestrella. */ div.AssunzioniNew_orari div.tab_orari_scroll, div.Contratti_orari div.tab_orari_scroll{ overflow-x: auto; } div.AssunzioniNew_orari .riepilogo_orari, div.Contratti_orari .riepilogo_orari{ border: 1px solid var(--c3-accent, #009BC4); background: transparent; } div.AssunzioniNew_orari .lbl_fx.carica_predefiniti, div.Contratti_orari .lbl_fx.carica_predefiniti{ margin-left: 12px; font-size: .85em; } /** PREVENTIVI **/ div.Preventivi form.TAB { max-width: 1200px !important; } div.Preventivi div.BOX_ACTION div.ACTION { max-width: 1200px !important; } div.Preventivi div.BOX form.TAB{ padding-left: 15px; } div.Preventivi div.BOX form.TAB a.fcs_group_checkbox label{ margin-left: 21px; text-indent: -21px; } div.Preventivi div.BOX form.TAB div.sub_title{ width: calc(100% + 18px); margin-left: -14px; margin-top: 20px; margin-bottom: 10px; font-size: 18px; font-weight: 600;; color: #0095d6; border-bottom: 6.5px solid #C7E6ED; } /** div.Preventivi div.BOX form.TAB div.label{ font-size: 18px; font-weight: 700;; color: var(--color1); } **/ div.Preventivi input.number.pagaccnl.no_dot { width: 120px !important; } div.Preventivi input.number.pagaccnl.num2_1 { width: 120px !important; } div.Preventivi input.number.superminimo.no_dot { width: 120px !important; } div.Preventivi input.number.imp_libero.no_dot { width: 120px !important; } div.Preventivi input.number.imp_paga_maggiorata.no_dot { width: 120px !important; } div.Preventivi input.number.imp_paga_maggiorata.num2_1 { width: 120px !important; } div.Preventivi input.number.tot_paga_maggiorata.no_dot { width: 120px !important; } div.Preventivi input.number.tot_paga_maggiorata.num2_1 { width: 120px !important; } div.Preventivi input.number.imp_amministrazione.no_dot { width: 150px !important; height: 28px !important; } div.Preventivi .bt-row.perc-99 { justify-content: flex-end; } div.Preventivi input.date.data_inizio { font-size: 23px !important; } div.Preventivi input.date.data_fine { font-size: 23px !important; } div.Preventivi input.date.data_stampa { font-size: 23px !important; } div.Preventivi input.number.pagaccnl.no_dot { width: 120px !important; } div.Preventivi input.number.pagaccnl.num2_1 { width: 120px !important; } div.Preventivi input.number.superminimo.no_dot { width: 120px !important; } div.Preventivi input.number.imp_libero.no_dot { width: 120px !important; } div.Preventivi input.number.imp_paga_maggiorata.no_dot { width: 120px !important; } div.Preventivi input.number.imp_amministrazione.no_dot { width: 160px !important; } div.Preventivi input.number.tot_paga_maggiorata.no_dot { width: 120px !important; } div.Preventivi select.combo.ore_inps { font-weight: bold; } /** FINE PREVENTIVI **/ /** TUTORIAL **/ div.Tutorial .video-box-wrapper { border: 1px solid var(--color1); border-radius: 10px; padding: 10px; margin-top: 5px; position: relative; display: block; text-align: center; overflow: hidden; } div.Tutorial .video-box-wrapper .video-overlay-btn { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 80%; max-width: 150px; z-index: 10; text-align: center; margin: 0; padding: 0; } div.Tutorial .video-box-wrapper .video-placeholder-default { width: 100%; height: auto; display: flex; justify-content: center; align-items: center; } div.Tutorial .video-box-wrapper .video-placeholder-default img { width: 100%; height: auto; max-height: 120px; object-fit: cover; } div[f4m_type="GRID"][name="tipologie_tutorial"] { position: relative; -webkit-overflow-scrolling: touch; width: 100%; overflow: auto; overflow-y: auto; overflow-x: auto; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; color: black; border: 1px solid var(--colore-bordo-neutro); background-color: var(--colore-sfondo-pagina); font-size: 14px; border-radius: 6px; } div[f4m_type="GRID"][name="tipologie_tutorial"] div.HEAD { display: inline-block; overflow-y: hidden; overflow-x: visible; position: sticky; top: 0; z-index: 2; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; height: 30px; line-height: 30px; padding-bottom: 8px; border-bottom: #0095d6 1px solid; background: var(--sfondo-leggero-primario) !important; background-color: var(--sfondo-leggero-primario) !important; color: black; font-weight: 600; font-size: 15px; } div[f4m_type="GRID"][name="tipologie_tutorial"][check_color="true"] table tbody tr[check="true"] { background-color: var(--sfondo-selezione-attiva) !important; } div[f4m_type="GRID"][name="tipologie_tutorial"] * { border-color: #0095d6 !important; } div[f4m_type="GRID"][name="tipologie_tutorial"] table tbody tr:hover { background-color: var(--sfondo-leggero-primario); cursor: pointer; } div[f4m_type="GRID"][name="tipologie_tutorial"] table th, div[f4m_type="GRID"][name="tipologie_tutorial"] table td { border-bottom: 1px solid var(--colore-bordo-neutro) !important; word-break: break-word; overflow: hidden; box-sizing: border-box; padding: 7px 5px; } /** FINE TUTORIAL **/ /** FAMIGLIA **/ div.Famiglie .BOX .TAB { background-color: var(--colorbianco); } div[f4m_prototype=tab] div.Famiglie .BOX .TAB.no_gap:before { background-color: var(--colorbianco); } div.Famiglie div[f4m_type="READONLY"]:not([f4m_aria="NOTE"]) { padding: var(--margin0); border: 1px solid #c0c0c0; border-radius: var(--radius1); line-height: 28px; } div.Famiglie_new .BOX .TAB { background-color: var(--colorbianco); } div[f4m_prototype=tab] div.Famiglie_new .BOX .TAB.no_gap:before { background-color: var(--colorbianco); } div.Famiglie_new div[f4m_type="READONLY"]:not([f4m_aria="NOTE"]) { padding: var(--margin0); border: 1px solid #c0c0c0; border-radius: var(--radius1); line-height: 28px; } /** FINE FAMIGLIA **/ /**OPERATORE**/ div.Operatori div[f4m_type="READONLY"]:not([f4m_aria="NOTE"]) { padding: var(--margin0); border: 1px solid #c0c0c0; border-radius: var(--radius1); line-height: 28px; } /** SLICK SLIDER **/ .slick-arrow { position: absolute; top: 50%; z-index: 1; background-color: var(--color1); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; } .slick-arrow i { color: var(--colorbianco0); font-size: 20px; line-height: 20px; } .slick-prev-arrow { left: 5px; } .slick-next-arrow { right: 5px; } /** FINE SLICK SLIDER **/ /* COLLAPSIBLE*/ .collapsible-box { background-color: white; color: var(--color1); border-left: 2px solid var(--color1); padding: 0.75rem 1.25rem; font-size: 1.2rem; width: 100%; margin-bottom: 0.5rem; cursor: pointer; } .collapsible-content { margin-top: 1rem; } .collapsible-header { background-color: var(--color1); color: white; padding: 5px; cursor: pointer; border-radius: 10px; } .left-wrapper { display: flex; flex-direction: column; justify-content: flex-start; padding: 0.50rem; } /** FINE COLLAPSIBLE **/ /** NOTIFICA TICKET **/ .ticket_notifica { background-color: #ff0000; color: #ffffff; border-radius: 50%; padding: 2px 6px; font-size: 12px; font-weight: bold; position: absolute; top: -5px; right: -10px; display: inline-block; min-width: 20px; text-align: center; } /** FINE NOTIFICA TICKET **/ /* 05/11/2026: il numerino sul pallino Agenda (cose di oggi da fare e rimaste indietro), rosso come quello dei Task, fuori dal pallino in alto a destra (sua richiesta: dentro non era carino) */ #btn_fixed span.button.agenda { overflow: visible !important; } /* 06/11/2026 (sua richiesta): Promemoria resta com'e' per tutte le agenzie, anche dove c'e' l'agenda (tolte le regole che lo stringevano) */ /* 05/11/2026: l'avviso 15 minuti prima di un appuntamento (f4m.c3AgendaAvvisa) */ #c3-ag-avvisi { position: fixed; right: 16px; bottom: 16px; z-index: 5000; display: flex; flex-direction: column; gap: 10px; max-width: 340px; } .c3-ag-avviso { background: #fff; border: 1px solid #98CDF1; border-left: 5px solid #f4b619; border-radius: 8px; box-shadow: 0 6px 20px rgba(25,50,100,.25); padding: 10px 12px; font-size: 14px; color: #193264; } .c3-ag-avviso-t { font-weight: bold; color: #0b5c8a; margin-bottom: 4px; } .c3-ag-avviso-x { margin-bottom: 8px; word-wrap: break-word; } .c3-ag-avviso-az { display: flex; gap: 8px; justify-content: flex-end; } .c3-ag-avviso-b { cursor: pointer; border: 1px solid #98CDF1; border-radius: 6px; padding: 4px 12px; color: #0095d6; font-weight: bold; } .c3-ag-avviso-b.c3-ag-avviso-apri { background: #0095d6; border-color: #0095d6; color: #fff; } @media (max-width: 700px) { #c3-ag-avvisi { left: 10px; right: 10px; bottom: 10px; max-width: none; } } .c3-ag-notifica { background-color: #ff0000; color: #fff !important; border-radius: 10px; padding: 0 5px; font-size: 11px !important; font-weight: bold; line-height: 16px !important; min-width: 16px; text-align: center; position: absolute; top: -6px; right: -9px; border: 2px solid #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); font-family: Arial, sans-serif; z-index: 2; } /** SUPERMIX **/ div.sub_menu div.btn span.button { position: relative; top: -1px; right: -1px; } #stateButton { background-color: var(--color2); } .gs-check-center label { font-size: 1.2em !important; } .js_hidden { display: none; } .rotate { transition: transform 0.3s ease; } .rotate.down { transform: rotate(0deg); } .rotate.up { transform: rotate(180deg); } .btn-info.active { background-color: #004085 !important; /* Bootstrap dark blue shade */ border-color: #004085 !important; } .form-check-input { margin-right: 6px; /* small gap between dot and label text */ } .question-text { font-size: 14px; font-style: italic; color: #6c757d; /* Bootstrap muted gray */ line-height: 1.4; } .gs-check-center label { font-size: 18px !important; } .print-groups.error-outline { outline: 3px solid rgba(220,53,69,0.95); /* strong red */ outline-offset: 6px; border-radius: 6px; /* fallback if outline gets ignored: subtle box shadow */ box-shadow: 0 0 0 3px rgba(220,53,69,0.12); } .print-groups .error-text { display: none; color: #dc3545; margin-top: .5rem; font-size: .9rem; } .print-groups.error-outline .error-text { display: block; } .detail-box { border-top: 3px solid #00a0e3; /* blue line */ padding-top: 5px; margin-top: 10px; font-size: 0.9rem; } .detail-title { color: #00a0e3; font-weight: bold; margin-bottom: 5px; } .detail-item { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #ccc; } .detail-label { display: flex; align-items: center; color: #555; } .detail-label::before { content: "●"; color: #00a0e3; font-size: 0.7rem; margin-right: 6px; } .detail-value { font-weight: 500; } #stateModal .form-check:hover { background-color: #f1f9ff; transition: background-color 0.3s ease; } #stateModal .form-check-input:checked + .form-check-label { font-weight: 600; } .image-btn { /*width: 80px; height: 80px;*/ width: 40px; height: 40px; /**/ display: flex; justify-content: center; align-items: center; background-color: #F54927; /*red*/ border: 2px solid #00a0e3; transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; cursor: pointer; } .image-btn img { width: 85%; height: 85%; object-fit: contain; } .default-style { border-color: #00a0e3 !important; /* Light grey border */ background-color: #6d6d6d69 !important; /* Very light grey background */ color: #495057 !important; /* Dark grey text */ transition: all 0.2s ease-in-out; } .clicked-style { border-color: #00a0e3 !important; background-color: #28a745 !important; /* green */ } .processing-style { border-color: #00a0e3 !important; background-color: #ffc107 !important; /* yellow */ color: #212529 !important; /* Dark text for better contrast on yellow */ /*cursor: wait; /* Changes cursor to a loading spinner */ opacity: 0.8; } .status-red { color: #ff0000 !important; font-weight: bold; } .status-green { color: #008000 !important; font-weight: bold; } .box_button_delete { display: none !important; } .sex-disabled { pointer-events: none; opacity: 1; } input.date.datanascita { font-size: 23px !important; } input.date.data_stampa { font-size: 23px !important; } /** FINE SUPERMIX **/ /* IL + SULLA TESTATA della sezione degli orari, in TUTTE E DUE le schede (fino al 04/09/2026 era scritto solo per la Richiesta, e sul contratto il piu' usciva gigante e senza cerchietto). Il core veste quel bottoncino solo dentro "div.sub_menu" (e' li' che sta il + degli allegati): qui la testata e' di un'altra classe, quindi senza queste regole il piu' uscirebbe gigante e senza il suo cerchietto. Il bottone e' appoggiato SOPRA la barra (position absolute) e non dentro il flusso: se no la barra diventerebbe piu' alta di tutte le altre. */ div.AssunzioniNew div.collapsible-header, div.Contratti div.collapsible-header{ position: relative; } div.AssunzioniNew div.collapsible-header div.btn, div.Contratti div.collapsible-header div.btn{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); height: auto; padding: 0px; margin: 0px; line-height: 0; } div.AssunzioniNew div.collapsible-header span.button.sqr_plus, div.Contratti div.collapsible-header span.button.sqr_plus{ background-color: var(--colorbianco0, #ffffff); color: var(--color1, #0e7ab5) !important; border: 2px solid var(--colorbianco0, #ffffff); height: 20px; width: 20px; min-width: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0px; box-shadow: none; } div.AssunzioniNew div.collapsible-header span.button.sqr_plus i, div.Contratti div.collapsible-header span.button.sqr_plus i{ position: static; top: 0px !important; left: 0px !important; font-size: 12px !important; margin: 0px; } /* Negli avvisi: prima la riga che introduce, poi le mancanze a capo, una per riga. Devono essere due blocchi, se no finiscono affiancate. */ div.manca_intro{ display: block; text-align: center; margin-bottom: 6px; } ul.elenco_manca{ display: block; width: -moz-fit-content; width: fit-content; margin: 0px auto; padding: 0px; list-style: none; text-align: left; } ul.elenco_manca li{ font-weight: bold; padding: 3px 0px 3px 14px; position: relative; } ul.elenco_manca li:before{ content: "\2022"; position: absolute; left: 0px; color: var(--color1, #0e7ab5); } /* ===== ORARI DI LAVORO ===== La settimana in sola lettura sulla scheda, e la finestrella che la modifica (AssunzioniNew.orari). Stessa tabella per tutti e due, cosi' quello che si vede nella finestrella e' quello che resta sulla scheda. */ div.tab_orari_scroll{ overflow-x: auto; margin-top: 10px; } table.tab_orari{ width: 100%; min-width: 700px; border-collapse: collapse; font-size: 0.95em; } table.tab_orari th{ background: rgba(0,0,0,.04); color: var(--c3-ink, #123); font-weight: 600; text-align: center; padding: 6px 8px; border: 1px solid var(--c3-line2, #D8E3EC); white-space: nowrap; } table.tab_orari tr.sotto_testata th{ font-weight: 400; font-style: italic; font-size: 0.85em; padding: 3px 8px; } table.tab_orari td{ padding: 4px 8px; border: 1px solid var(--c3-line2, #D8E3EC); text-align: center; vertical-align: middle; height: 38px; } table.tab_orari td.c_gg{ text-align: left; white-space: nowrap; width: 170px; } table.tab_orari td.c_gg label{ display: flex; align-items: center; gap: 8px; margin: 0px; cursor: pointer; font-weight: 600; } table.tab_orari th.c_ore, table.tab_orari td.c_ore{ width: 96px; font-weight: 600; } table.tab_orari th.c_r, table.tab_orari td.c_r{ width: 44px; } table.tab_orari th.c_dup, table.tab_orari td.c_dup{ width: 46px; } table.tab_orari tbody tr:nth-child(even){ background: rgba(0,0,0,.018); } table.tab_orari td input[type="text"]{ width: 78px; text-align: center; margin: 0px auto; } /* Come nel cloud: sul giorno in cui non si lavora non si vede nessun comando, e senza la spunta della seconda fascia il rientro non c'e'. */ table.tab_orari tr.riga_gg.spenta td.c_gg label{ font-weight: 400; color: var(--c3-muted, #8CA3B5); } table.tab_orari tr.riga_gg.spenta td.c_ore, table.tab_orari tr.riga_gg.spenta td.c_f1 select, table.tab_orari tr.riga_gg.spenta td.c_r input, table.tab_orari tr.riga_gg.spenta td.c_dup i{ visibility: hidden; } table.tab_orari tr.riga_gg.senza_rientro td.c_f2 select{ visibility: hidden; } /* L'iconcina che copia l'orario del giorno sugli altri giorni spuntati: e' il "Duplica orari" del vecchio riquadro. */ table.tab_orari td.c_dup i{ color: var(--color1, #0e7ab5); cursor: pointer; font-size: 15px; opacity: .75; } table.tab_orari td.c_dup i:hover{ opacity: 1; } /* Sulla scheda si legge soltanto: si modifica dal + o cliccando la riga. */ table.tab_orari.sola_lettura tbody tr{ cursor: pointer; } table.tab_orari.sola_lettura tbody tr:hover{ background: rgba(0,0,0,.05); } table.tab_orari.sola_lettura tbody tr.vuota td{ color: var(--c3-muted, #8CA3B5); } div.nessun_orario{ margin-top: 12px; font-style: italic; color: var(--c3-muted, #8CA3B5); } /* ===== LA FINESTRELLA ===== Larga il giusto per la settimana, non a tutto schermo. Il bordo del BOX non serve: la cornice ce l'ha gia' la finestrella, e due bordi uno dentro l'altro fanno l'effetto "incollato". */ /* La finestrella prende tutta la larghezza che il framework le da'. Serve dirlo: il core la disegna `inline-block`, e siccome la settimana sta dentro un riquadro che scorre (overflow-x:auto), una scatola inline-block si stringe sul minimo e il risultato erano 400px con la tabella che sbordava e le etichette una sopra l'altra. */ /* La finestrella e' larga quanto le serve, non quanto lo schermo: la settimana con le due fasce sta in circa 780px, e allargarla oltre vorrebbe dire o un vuoto a destra o una colonna dei giorni mezza vuota (viste tutte e due il 04/09/2026). Sotto gli 800px si stringe da sola e la tabella scorre. Il `width` serve perche' il core disegna la sottoscheda `inline-block`: senza, con la tabella dentro un riquadro che scorre, si stringerebbe sul minimo. */ /* ANCHE LA FINESTRA SI STRINGE, non solo il suo contenuto: il core disegna ogni sottoscheda in un riquadro da 1024px fissi, e per la settimana degli orari erano cento pixel di bianco per lato. Si restringe SOLO questa finestra, riconoscendola dal contenuto (`:has`), cosi' le altre sottoschede del portale (per esempio le Valutazioni sull'Operatore) restano come sono. Il centraggio lo fa il margine automatico del core, che si rifa' da solo sulla nuova larghezza. */ div.F4M_SUBTAB:has(> div.AssunzioniNew_orari), div.F4M_SUBTAB:has(> div.Contratti_orari){ /* Larga quanto serve alla settimana: con le tendine la tabella e' larga circa 800px, e con 1000 ci sta tutta senza scorrere a destra e a sinistra (chiesto da lei il 04/09/2026). */ width: 1000px; max-width: 96vw; /* IL FONDO BIANCO VA DETTO. Dietro la sottoscheda c'e' un velo scuro (F4M_SUBTAB_BOX, nero al 60%): se il riquadro resta trasparente il velo traspare e la finestrella si vede tutta spenta, come se fosse disattivata - e' quello che succedeva aprendola dal Contratto (04/09/2026). */ background: var(--colorbianco0, #ffffff); } div.AssunzioniNew_orari, div.Contratti_orari{ min-width: 320px; width: 100%; max-width: 960px; margin: 0px auto; box-sizing: border-box; } div.AssunzioniNew_orari div.BOX, div.Contratti_orari div.BOX{ padding: 14px 18px 18px 18px; } div.AssunzioniNew_orari div.BOX, div.Contratti_orari div.BOX, div.AssunzioniNew_orari form.TAB, div.Contratti_orari form.TAB{ border: none !important; box-shadow: none !important; background: transparent; } div.AssunzioniNew_orari div.tit_orari, div.Contratti_orari div.tit_orari{ font-size: 1.15em; font-weight: 600; color: var(--color1, #0e7ab5); margin-bottom: 10px; } div.AssunzioniNew_orari div.sotto_tit, div.Contratti_orari div.sotto_tit{ font-weight: 600; font-style: italic; color: var(--color1, #0e7ab5); margin: 14px 0px 4px 0px; } div.AssunzioniNew_orari div.riga_sotto_tit, div.Contratti_orari div.riga_sotto_tit{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; } div.AssunzioniNew_orari div.riga_sotto_tit div.sotto_tit, div.Contratti_orari div.riga_sotto_tit div.sotto_tit{ margin: 0px; } div.AssunzioniNew_orari span.bt_standard, div.Contratti_orari span.bt_standard{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--color1, #0e7ab5); color: var(--color1, #0e7ab5); background: var(--colorbianco0, #ffffff); font-size: 0.88em; cursor: pointer; white-space: nowrap; } div.AssunzioniNew_orari span.bt_standard:hover, div.Contratti_orari span.bt_standard:hover{ background: var(--color1, #0e7ab5); color: var(--colorbianco0, #ffffff); } /* La striscia con le due persone e il regime. Le regole di div.AssunzioniNew non arrivano qui: la finestrella e' un contenitore suo. */ div.AssunzioniNew_orari div.riga_info, div.Contratti_orari div.riga_info{ display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 0px 0px 4px 0px; padding: 10px 14px; border-radius: 8px; background: rgba(0,0,0,.035); } div.AssunzioniNew_orari div.voce_info, div.Contratti_orari div.voce_info{ display: flex; flex-direction: column; min-width: 150px; max-width: 420px; } div.AssunzioniNew_orari div.voce_info span, div.Contratti_orari div.voce_info span{ font-size: 0.8em; text-transform: uppercase; letter-spacing: .03em; color: var(--c3-muted, #8CA3B5); } div.AssunzioniNew_orari div.voce_info b, div.Contratti_orari div.voce_info b{ font-size: 0.95em; color: var(--c3-ink, #123); word-break: break-word; } div.AssunzioniNew_orari div.riga_totali, div.Contratti_orari div.riga_totali{ display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 14px; padding: 10px 12px; background: var(--c3-surface2, #EEF4F9); border-radius: var(--radius1, 10px); } div.AssunzioniNew_orari div.voce_tot, div.Contratti_orari div.voce_tot{ display: flex; flex-direction: column; min-width: 170px; } div.AssunzioniNew_orari div.voce_tot span, div.Contratti_orari div.voce_tot span{ font-size: 0.8em; text-transform: uppercase; letter-spacing: .03em; color: var(--c3-muted, #8CA3B5); } div.AssunzioniNew_orari div.voce_tot b, div.Contratti_orari div.voce_tot b{ font-size: 1.1em; color: var(--c3-ink, #123); } div.AssunzioniNew_orari div.nota_orari, div.Contratti_orari div.nota_orari{ margin-top: 10px; font-size: 0.85em; font-style: italic; color: var(--c3-muted, #8CA3B5); } /* La finestrella si comporta come le altre sottoschede del portale (Valutazioni, Allegati): il framework nasconde la scheda e la mette in mezzo. Qui si aggiunge solo l'ombra, per staccarla dallo sfondo. */ div.F4M_SUBTAB_BOX:has(div.AssunzioniNew_orari){ padding: 24px 16px; } div.F4M_SUBTAB_BOX:has(div.AssunzioniNew_orari) div.F4M_SUBTAB{ background: var(--colorbianco0, #ffffff); box-shadow: 0px 18px 50px rgba(0,0,0,.35); } /* Negli avvisi: prima la riga che introduce, poi le voci a capo, una per riga. Devono essere due blocchi, se no finiscono affiancate. */ div.manca_intro{ display: block; text-align: center; margin-bottom: 6px; } ul.elenco_manca{ display: block; width: -moz-fit-content; width: fit-content; max-width: 100%; margin: 0px auto; padding: 0px; list-style: none; text-align: left; } ul.elenco_manca li{ padding: 3px 0px 3px 14px; position: relative; } ul.elenco_manca li:before{ content: "\2022"; position: absolute; left: 0px; color: var(--color1, #0e7ab5); } /* IMPORTANTE: il tema del portale nasconde le caselle di spunta normali (display:none) perche' ne disegna una sua. Qui servono quelle vere, e vanno rimesse in vista: senza, la tabella sembra vuota e non si riesce a spuntare niente - ne' il giorno, ne' la seconda fascia. */ table.tab_orari input[type="checkbox"]{ display: inline-block !important; -webkit-appearance: checkbox !important; appearance: checkbox !important; position: static !important; width: 17px; height: 17px; min-width: 17px; margin: 0px; padding: 0px; opacity: 1; cursor: pointer; accent-color: var(--color1, #0e7ab5); } /* ===== NERO E AZZURRO, NON TUTTO AZZURRO ===== Nelle strisce in sola lettura e nella settimana degli orari il testo ereditava l'azzurro del tema e finiva per essere azzurro dalla prima all'ultima parola. Qui si dice chi e' cosa: etichette in grigio, contenuto in nero, e l'azzurro tenuto per il dato che conta davvero (le ore) e per quello su cui si clicca. */ div.Contratti .etichetta_info, div.AssunzioniNew .etichetta_info{ color: var(--color1, #0e7ab5) !important; font-weight: 400; text-transform: uppercase; letter-spacing: .03em; opacity: 1; } div.Contratti .valore_info, div.AssunzioniNew .valore_info{ color: #1F2A33 !important; } /* Quello su cui si clicca resta azzurro: e' l'unico modo per accorgersene. */ div.Contratti .valore_info .lbl_fx, div.AssunzioniNew .valore_info .lbl_fx, div.Contratti .valore_info a, div.AssunzioniNew .valore_info a{ color: var(--color1, #0e7ab5) !important; } /* INFORMAZIONI CONTRATTUALI della Richiesta: i valori della STESSA misura delle caselle della scheda, numero del contratto compreso (richiesta degli utenti del 29/09/2026). In maiuscolo solo FULL / LIGHT / BASIC: lo fa AssunzioniNew.js (mostraInformazioni), non il CSS. */ div.Contratti .riga_info .etichetta_info, div.AssunzioniNew .riga_info .etichetta_info{ /* e le etichette sopra i valori come quelle dei campi (gs-label: 16px, niente maiuscolo) - richiesta del 29/09/2026 */ font-size: 1rem !important; text-transform: none !important; letter-spacing: normal !important; } div.AssunzioniNew #a_ammin .riga_info .valore_info, div.AssunzioniNew #a_ammin .riga_info .valore_info *, div.Contratti #c_ammin .riga_info .valore_info, div.Contratti #c_ammin .riga_info .valore_info *{ font-size: 1.2rem !important; } /* La settimana in sola lettura sulla scheda. */ table.tab_orari th{ color: var(--color1, #0e7ab5); } table.tab_orari tr.sotto_testata th{ color: var(--color1, #0e7ab5); opacity: .75; } table.tab_orari td.c_gg{ color: #1F2A33; } table.tab_orari td.c_f1, table.tab_orari td.c_f2{ color: #1F2A33; } /* Nella griglia della scheda le celle degli orari si chiamano v1..v4. */ table.tab_orari.sola_lettura td.c_f1, table.tab_orari.sola_lettura td.c_f2, table.tab_orari td.v1, table.tab_orari td.v2, table.tab_orari td.v3, table.tab_orari td.v4{ color: #1F2A33; font-variant-numeric: tabular-nums; } /* Le ore del giorno sono il numero che si va a cercare: restano nere come il resto del contenuto, ma in grassetto, cosi' si fanno trovare lo stesso. */ table.tab_orari td.c_ore{ color: #1F2A33; font-weight: 700; } table.tab_orari tr.riga_gg.spenta td.c_gg, table.tab_orari tr.riga_gg.vuota td.c_gg{ color: #9AA5AE; } /* ===== RESPIRO E ALLINEAMENTO DELLE DUE SCHEDE ===== (Richiesta d'assunzione e Contratto di lavoro: stesse regole, sono gemelle) Due difetti che si vedevano a occhio: - lo spazio fra le righe era scritto a mano su ogni riga (margin-top:15px), e con le righe che compaiono solo in certi casi diventava irregolare; - ogni tipo di campo aveva la larghezza che gli dava il tema (le date 150px, i numeri 197px, il testo tutta la colonna), percio' i bordi destri non cadevano mai sulla stessa linea. Qui lo spazio lo decide il foglio di stile, e ogni campo riempie la sua colonna: sono le colonne a dare il ritmo, come in tutte le altre schede. */ div.AssunzioniNew div.bt-row, div.Contratti div.bt-row{ margin-top: 24px; } div.AssunzioniNew div.bt-row:first-child, div.Contratti div.bt-row:first-child{ margin-top: 0px; } div.AssunzioniNew div.gs-label, div.Contratti div.gs-label{ margin-bottom: 2px; } /* Serve !important, e non e' un capriccio: i campi numerici e le date se la larghezza se la scrivono da soli sull'elemento (style="width:185px"), e uno stile scritto li' batte qualunque foglio di stile. */ div.AssunzioniNew div.elem > input, div.Contratti div.elem > input, div.AssunzioniNew div.elem > select, div.Contratti div.elem > select, div.AssunzioniNew div.elem > textarea, div.Contratti div.elem > textarea{ /* Le stesse misure della scheda Famiglie: il campo riempie la colonna ma lascia 3px per lato, se no due campi affiancati si toccano. Il box-sizing serve perche' i numerici, senza, sommano l'imbottitura alla larghezza e restano piu' larghi degli altri. */ width: calc(100% - 6px) !important; margin: 0px 3px; box-sizing: border-box; } /* Le date restano della loro misura: allungarle per riempire la colonna le faceva sembrare campi di testo, e una data e' sempre lunga uguale. */ div.AssunzioniNew div.elem > div.f4m_wrap_date, div.Contratti div.elem > div.f4m_wrap_date{ margin: 0px 3px; } /* I gruppi di pallini (convivenza, tabella G) hanno gia' la loro altezza: qui basta che non si incollino all'etichetta. */ div.AssunzioniNew div.gs-radio-center, div.Contratti div.gs-radio-center{ margin-top: 2px; } /* I gruppi di pallini occupano l'altezza di un campo (40px) anche quando sono una riga sola di "Si / No": e' li' che si formavano i vuoti piu' grossi. Qui prendono l'altezza che serve loro. */ div.AssunzioniNew div.elem.gs-radio-center, div.Contratti div.elem.gs-radio-center{ min-height: 0px; padding: 4px 0px 0px 0px; line-height: 22px; } div.AssunzioniNew div.elem.gs-radio-center label, div.Contratti div.elem.gs-radio-center label{ margin: 0px 18px 0px 0px; } /* Le sezioni respiravano troppo in fondo, prima della barra successiva. */ div.AssunzioniNew div.collapsible-content, div.Contratti div.collapsible-content{ padding-bottom: 6px; } div.AssunzioniNew div.collapsible-box, div.Contratti div.collapsible-box{ margin-bottom: 10px; } /* ===== NIENTE BUCHI A DESTRA (scheda Contratti) ===== La griglia bootstrap da' alle colonne una larghezza fissa in dodicesimi: se una riga non arriva a dodici - perche' un campo si vede solo in certi casi, o perche' la riga ne ha tre e non quattro - l'avanzo resta bianco a destra. Qui le colonne, oltre alla loro larghezza minima, si prendono l'avanzo: la riga finisce sempre sul bordo destro, e quando un campo condizionato non si vede gli altri si allargano da soli invece di lasciare il vuoto. Il max-width va tolto perche' bootstrap lo cabla insieme alla larghezza (flex: 0 0 25%; max-width: 25%) e senza toglierlo non si allarga niente. Fanno eccezione le colonne delle date (col_data): la data e' sempre lunga uguale e allargarle vorrebbe dire spostare il bianco dentro la colonna invece di toglierlo. */ div.Contratti div.bt-row > [class*="col-"]:not(.col_data){ flex-grow: 1; max-width: 100%; } div.Contratti div.bt-row > .col_data{ min-width: 165px; } /* Quando una riga va a capo (schermo stretto, o tutti i campi condizionati aperti) fra i due tronconi ci vuole lo stesso spazio che c'e' fra due righe: il margine fra righe qui sopra dentro la riga non arriva. */ div.Contratti div.bt-row{ row-gap: 20px; } /* I campi di una riga finiscono tutti sulla stessa linea, anche quando un'etichetta va a capo e le altre no: la colonna diventa una colonnina in verticale, l'etichetta resta in alto e il campo scende in fondo. Senza questo, in una riga di cinque campi corti (ferie, preavviso, permesso, patrono) i riquadri restavano sfalsati di una riga di testo. */ div.Contratti div.bt-row > [class*="col-"]{ display: flex; flex-direction: column; } div.Contratti div.bt-row > [class*="col-"] > div.gs-form-element{ display: flex; flex-direction: column; height: 100%; } div.Contratti div.bt-row > [class*="col-"] > div.gs-form-element > div.elem, div.Contratti div.bt-row > [class*="col-"] > div.elem{ margin-top: auto; } /* ...MA NON I GRUPPI DI PALLINI (23/09/2026, sua segnalazione: "i radio button hanno dello spazio immenso dalla label al pallino"). `margin-top: auto` dentro una colonna flex spinge il campo IN FONDO, e per una casella va benissimo: due caselle accanto si allineano anche se un'etichetta e' andata a capo. Una fila di pallini pero' e' alta 26px invece di 40, e accanto a una casella finiva spinta giu': misurato, **16px fra l'etichetta e i pallini contro i 2px di un campo normale**, cioe' otto volte tanto. Senza cornice intorno, quello spazio fa sembrare i pallini staccati dalla loro domanda. Qui tornano attaccati all'etichetta. Si perde l'allineamento in basso con la casella accanto, ed e' il male minore: una domanda e la sua risposta devono stare vicine piu' di quanto due controlli diversi debbano avere la stessa base. */ div.Contratti div.bt-row > [class*="col-"] > div.gs-form-element > div.elem.gs-radio-center, div.Contratti div.bt-row > [class*="col-"] > div.elem.gs-radio-center, div.AssunzioniNew div.bt-row > [class*="col-"] > div.gs-form-element > div.elem.gs-radio-center, div.AssunzioniNew div.bt-row > [class*="col-"] > div.elem.gs-radio-center{ margin-top: 2px; } /* ===== LA SETTIMANA DEGLI ORARI (scheda Contratti) ===== A sinistra la settimana, di fianco quello che la riassume: i tre totali e i due giorni di riposo. Prima la tabella si prendeva tutta la riga e i cinque campi stavano sotto, su due righe mezze vuote. */ div.Contratti div.riquadro_settimana, div.AssunzioniNew div.riquadro_settimana{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0px 24px; margin-top: 12px; } div.Contratti div.riquadro_settimana > table.griglia_orari, div.AssunzioniNew div.riquadro_settimana > table.griglia_orari{ flex: 1 1 540px; width: auto; margin: 0px; } div.Contratti div.fianco_settimana, div.AssunzioniNew div.fianco_settimana{ flex: 1 1 290px; display: flex; flex-direction: column; gap: 12px; } /* L'orario della giornata e' un campo di testo libero (in tabella e' un varchar da 50), e a video si legge male: cifre di larghezza diversa, testo piccolo come un'etichetta e un riquadro largo mezza scheda per scrivere "08:00-12:00". Qui si scrive grande, con le cifre tutte della stessa larghezza cosi' gli orari di giorni diversi restano incolonnati. */ div.Contratti table.griglia_orari td.orari input, div.Contratti table.griglia_orari td.ore input{ font-size: var(--c3-fs-md, 15px); font-variant-numeric: tabular-nums; letter-spacing: .02em; } /* Il formato giusto, scritto una volta nell'intestazione: e' un promemoria, non un'etichetta, quindi piccolo e in grigio. */ div.Contratti table.griglia_orari th span.esempio_orari, div.AssunzioniNew table.griglia_orari th span.esempio_orari{ font-weight: 400; font-size: var(--c3-fs-xs, 12px); color: var(--c3-muted, #8CA3B5); margin-left: 8px; white-space: nowrap; } /* Il segnaposto dentro le righe vuote (lo mette Contratti.js) si deve leggere come un suggerimento, non come un orario gia' scritto. */ div.Contratti table.griglia_orari td.orari input::placeholder{ color: var(--c3-muted, #8CA3B5); opacity: .8; font-style: italic; } /* I tre totali e i due giorni di riposo: si leggono, non si toccano. Li scrive la finestrella degli orari. */ /* I cinque valori in sola lettura su due righe, tre e due, con le colonne tutte della stessa larghezza: cosi' stanno incolonnati invece di andare a capo dove capita. */ div.AssunzioniNew div.riga_totali_orari{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; margin-top: 12px; } div.AssunzioniNew div.riga_totali_orari div.voce_info{ min-width: 0px; max-width: none; } @media (max-width: 700px){ div.AssunzioniNew div.riga_totali_orari{ grid-template-columns: repeat(2, 1fr); } } /* I bottoni dentro la maschera di stampa. Nelle maschere del cloud erano due immagini (./img/print.png, ./img/gear.png) che su questo portale non esistono: si vedevano due segnaposti rotti. Ora sono bottoni veri, con la stessa icona e lo stesso azzurro di quelli di Ipotesi di spesa e Lettera di incarico, ma con l'etichetta accanto perche' qui non stanno nella barra in alto e da soli non si capirebbero. */ /* La finestra sta appesa al corpo della pagina, fuori dalla scheda: le regole agganciate a div.AssunzioniNew non ci arrivano, per questo si nomina anche lei. */ div.AssunzioniNew .PRINT_BOX .bt_stampa, div.Contratti .PRINT_BOX .bt_stampa, #f4m_alert .PRINT_BOX .bt_stampa{ display: inline-flex; align-items: center; gap: 7px; margin: 12px 10px 0px 0px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--color1, #0e7ab5); background: var(--color1, #0e7ab5); color: var(--colorbianco0, #ffffff); font-size: 0.92em; cursor: pointer; white-space: nowrap; } div.AssunzioniNew .PRINT_BOX .bt_stampa:hover, div.Contratti .PRINT_BOX .bt_stampa:hover, #f4m_alert .PRINT_BOX .bt_stampa:hover{ background: var(--colorbianco0, #ffffff); color: var(--color1, #0e7ab5); } div.AssunzioniNew .PRINT_BOX .bt_stampa i, div.Contratti .PRINT_BOX .bt_stampa i, #f4m_alert .PRINT_BOX .bt_stampa i{ font-size: 15px; } /* Dentro la finestra: i campi della maschera larghi come il riquadro, le etichette come nel resto del portale, e i due bottoni in fondo affiancati. */{ padding: 16px 18px 18px 18px; } /* La finestra vestita come quella di Ipotesi di spesa: intestazione azzurra, un riquadro con dentro i campi, e i bottoni nel piede. */{ border: none; border-radius: 12px; overflow: hidden; box-shadow: 0px 18px 50px rgba(0,0,0,.35); } /* I bottoni della maschera, spostati nel piede, prendono l'aria di quelli Bootstrap della finestra di Ipotesi di spesa. */{ margin: 0px; } /* ===== LA SETTIMANA IN SOLA LETTURA (Richiesta d'assunzione) ===== Stesse colonne della scheda Contratti, ma qui non si scrive: si legge, e si cambia dalla finestrella degli orari (il + sulla testata o il clic su una riga). Le celle sono testo, non caselle: percio' vanno rialzate all'altezza che avevano i campi, se no la tabella si accartoccia. */ div.AssunzioniNew table.griglia_orari td.v_ore, div.AssunzioniNew table.griglia_orari td.v_orari{ height: 34px; font-size: var(--c3-fs-md, 15px); font-variant-numeric: tabular-nums; letter-spacing: .02em; } div.AssunzioniNew table.griglia_orari td.v_ore{ font-weight: 600; } /* Le righe si possono cliccare: si deve vedere. */ div.AssunzioniNew table.griglia_orari tbody tr.riga_gg{ cursor: pointer; } div.AssunzioniNew table.griglia_orari tbody tr.riga_gg:hover{ background: var(--c3-accent-l, #7ccdf3); background: color-mix(in srgb, var(--c3-accent, #0095d6) 12%, transparent); } /* Un giorno non lavorato resta in riga ma spento: si vede che c'e' e che e' escluso, senza far ballare la tabella (lo stesso di AssOrari). */ div.AssunzioniNew table.griglia_orari tbody tr.giorno_spento td{ opacity: .45; } /* Un campo bloccato deve restare LEGGIBILE: il contratto e' fatto, quei valori si consultano ancora. Senza questa regola un campo disabilitato sbiadisce al punto che non si legge (nel cloud c'era la classe `disabledBlack` per lo stesso motivo). Dal 22/09/2026 vale per TUTTE E DUE le schede: la Richiesta d'assunzione blocca i campi quando il Consorzio ha approvato la lettera, e ne blocca comunque alcuni sempre (amministrazione, paga CCNL, paga totale). ATTENZIONE aggiungendo altri nomi qui: il resto del selettore va ripetuto per intero su ogni riga, se no la prima diventa un selettore a se' - e' l'errore del 04/09/2026 sulla finestrella degli orari. */ div.Contratti .campo_bloccato, div.Contratti select.campo_bloccato, div.Contratti input.campo_bloccato, div.Contratti .campo_bloccato input, div.Contratti .campo_bloccato select, div.AssunzioniNew .campo_bloccato, div.AssunzioniNew select.campo_bloccato, div.AssunzioniNew input.campo_bloccato, div.AssunzioniNew .campo_bloccato input, div.AssunzioniNew .campo_bloccato select{ color: var(--c3-text, #193264) !important; -webkit-text-fill-color: var(--c3-text, #193264); opacity: 1; /* LO SFONDO VUOLE `!important` E UN GRIGIO CHE SI VEDA (23/09/2026). Prima non ce l'aveva - l'aveva solo il testo - e in `main`, che NON usa CORE3 ma il vecchio angelus.css, il foglio del core vinceva sulle TENDINE: un campo bloccato era trasparente, identico a uno da compilare. Su una scheda dove si puo' cambiare solo tre cose su quarantasette, non vedere quali e' il difetto peggiore di tutti. Il colore e' --c3-bg2 e non --c3-bg: il primo e' un grigio piu' deciso, e sul bianco --c3-bg si distingueva del 4%, cioe' non si distingueva. `angelus.css` NON si tocca: online e' piu' aggiornato del nostro. */ /* BIANCO, DAL 29/09/2026 (richiesta degli utenti): "i box bianchi come su operatore". Prima era grigio (vedi sopra, 23/09). La differenza con un campo da compilare ora la fanno la freccia della tendina e il pulsante cerca, che sui campi bloccati spariscono (regole qui sotto). */ background-color: #fff !important; cursor: default; } /* Sola lettura = solo il testo: niente freccia nelle tendine, niente casella "cerca" e lente nelle searchcombo (29/09/2026). */ div.Contratti select.campo_bloccato, div.AssunzioniNew select.campo_bloccato{ -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: none !important; } div.Contratti .f4m_wrap_searchcombo.campo_bloccato .f4m_searchcombo_box_search, div.Contratti .f4m_wrap_searchcombo.campo_bloccato .f4m_searchcombo_box_icon, div.AssunzioniNew .f4m_wrap_searchcombo.campo_bloccato .f4m_searchcombo_box_search, div.AssunzioniNew .f4m_wrap_searchcombo.campo_bloccato .f4m_searchcombo_box_icon{ display: none !important; } /* Senza il pezzo "cerca" a sinistra la tendina resta con gli angoli sinistri squadrati (il core li arrotonda solo a destra): si arrotondano tutti e quattro, come le altre caselle (29/09/2026). */ div.Contratti .f4m_wrap_searchcombo.campo_bloccato select, div.AssunzioniNew .f4m_wrap_searchcombo.campo_bloccato select{ border-radius: 10px !important; } /* I valori in sola lettura dentro le strisce (riposi, totali): li' il bianco non serve, stanno gia' nel loro riquadro. */ div.Contratti .valore_info.campo_bloccato, div.AssunzioniNew .valore_info.campo_bloccato{ background-color: transparent !important; } /* Le date bloccate: via il calendario, come la lente delle searchcombo. */ div.Contratti .f4m_wrap_date:has(input.campo_bloccato) .f4m_date_picker, div.AssunzioniNew .f4m_wrap_date:has(input.campo_bloccato) .f4m_date_picker{ display: none !important; } div.Contratti .f4m_wrap_date input.campo_bloccato, div.AssunzioniNew .f4m_wrap_date input.campo_bloccato{ border-radius: 10px !important; } /* "Di anticipare TFR": una risposta sola, quindi una casella bianca arrotondata come le altre, non la striscia grigia (29/09/2026). */ div.AssunzioniNew .riga_info.riga_tfr{ background: #fff; border: 1px solid #c0c0c0; border-radius: 10px; padding: 8px 12px; margin-top: 0; } /* ===== LA FINESTRA DELLE STAMPE (scheda Contratti) ===== Stessa forma di quella di Ipotesi di spesa: e' un avviso del framework (#f4m_alert) con il titolo in azzurro, [ANNULLA] in alto e un bottone STAMPA in fondo. Qui si veste solo il contenuto. */ #f4m_alert .tit_stampe{ color: var(--c3-accent, #0095d6); font-weight: 700; font-size: var(--c3-fs-md, 15px); } /* La finestra e' larga quanto basta ai campi, non di piu' (04/09/2026): con una sola scelta e due caselle corte, quattrocento pixel erano tutti bianchi. */ #f4m_alert .finestra_stampe{ text-align: left; min-width: 400px; max-width: 620px; } #f4m_alert .finestra_stampe .gs-form-element{ margin-bottom: 12px; } /* PULSANTI E SPUNTE DENTRO LA MASCHERA DELLA STAMPA (23/09/2026). A DISEGNARLI E' IL FRAMEWORK, come nella scheda: `preparaMaschera` scrive il gruppo nella forma che usa la scheda (`