/* ============================================
DREAMBORN PMA - SUITE SOFTWARE
Procreazione Medica Assistita
© 2020-2026 KG Partners srl
WCAG 2.0 Level AA Compliant
============================================
INDICE DELLE SEZIONI:
0. FONT GLOBALE E RESET
1. BODY E TIPOGRAFIA
2. LABELS E ETICHETTE
3. LOADER
4. FORM CONTROLS - INPUT TEXT
5. FORM CONTROLS - SELECT
6. FORM CONTROLS - TEXTAREA
7. FORM CONTROLS - DATETIME
8. FORM CONTROLS - CHECKBOX
9. FORM CONTROLS - STATI (readonly, disabled)
10. PULSANTI BASE
11. PULSANTI TEMATICI
12. PULSANTI DONNA/UOMO
13. TABELLE
14. CARD E CONTENITORI CNF
15. DIVISORI COLORATI
16. TAB NAVIGATION
17. CERTIFICAZIONI
18. SITUAZIONE E CUSTOM
19. CLOSE BUTTON
20. LOGIN PAGE
21. LAYOUT - SEZIONE PRINCIPALE
22. BLOC NOTES E MESSAGGI
23. FIXED E RELATIVE POSITIONING
24. AUTOCOMPLETE
25. NAVBAR SUPERIORE E BREADCRUMBS
26. USER INFO - NAVBAR DESTRA
27. SEPARATORI E FOOTER
28. SIDEBAR MENU
29. FONT AWESOME - ICONE
============================================ */
/* ============================================
0. FONT GLOBALE E RESET
============================================ */
* {
box-sizing: border-box;
font-family: 'Titillium Web', sans-serif !important;
}
/* ============================================
1. BODY E TIPOGRAFIA
============================================ */
body {
padding-right: 0 !important;
font-family: 'Titillium Web', sans-serif !important;
font-size: 16px;
line-height: 1.5;
color: #212529;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Titillium Web', sans-serif !important;
line-height: 1.3;
margin-bottom: 0.5em;
}
body.cnf {
background-color: #ffffff;
}
body.cnflogin {
background-color: #09699c;
margin: 2px 2px 100px 2px;
}
h4.cnf {
color: #1e5a96;
background-color: transparent;
margin: 12px 12px 12px;
font-weight: 600;
}
p.cnf {
background-color: transparent;
color: #1e5a96;
font-size: 20px;
margin: 12px 12px 12px;
line-height: 1.5;
}
a.cnf {
margin: 12px 12px 12px;
white-space: pre-wrap;
word-wrap: break-word;
display: block;
color: #0056b3;
text-decoration: underline;
font-weight: 600;
}
a.cnf:hover {
color: #003d82;
text-decoration: none;
}
a.cnf:focus {
outline: 3px solid #0056b3;
outline-offset: 2px;
}
/* ============================================
1.5. TITOLI PAGINA GLOBALI
============================================ */
/* Titolo principale di pagina */
.page-title {
color: #00695c;
font-weight: 700;
font-size: 20px;
margin: 0;
padding: 0;
line-height: 1.3;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 8px;
}
.page-title i,
.page-title [data-feather] {
font-size: 18px;
color: #004d40;
flex-shrink: 0;
}
/* Varianti dimensioni */
.page-title.page-title-lg {
font-size: 23px;
}
.page-title.page-title-lg i,
.page-title.page-title-lg [data-feather] {
font-size: 21px;
}
.page-title.page-title-sm {
font-size: 17px;
}
.page-title.page-title-sm i,
.page-title.page-title-sm [data-feather] {
font-size: 16px;
}
/* Varianti colore */
.page-title.page-title-primary {
color: #0056b3;
}
.page-title.page-title-primary i,
.page-title.page-title-primary [data-feather] {
color: #004085;
}
.page-title.page-title-danger {
color: #dc3545;
}
.page-title.page-title-danger i,
.page-title.page-title-danger [data-feather] {
color: #c92a2a;
}
.page-title.page-title-warning {
color: #e67e22;
}
.page-title.page-title-warning i,
.page-title.page-title-warning [data-feather] {
color: #d35400;
}
.page-title.page-title-donna {
color: #c2185b;
}
.page-title.page-title-donna i,
.page-title.page-title-donna [data-feather] {
color: #a01548;
}
.page-title.page-title-uomo {
color: #1976d2;
}
.page-title.page-title-uomo i,
.page-title.page-title-uomo [data-feather] {
color: #1565c0;
}
/* Sottotitolo pagina */
.page-subtitle {
color: #6c757d;
font-weight: 500;
font-size: 16px;
margin: 8px 0 0 0;
line-height: 1.4;
}
/* Responsive */
@media (max-width: 768px) {
.page-title {
font-size: 24px;
}
.page-title i,
.page-title [data-feather] {
font-size: 22px;
}
.page-title.page-title-lg {
font-size: 28px;
}
.page-title.page-title-sm {
font-size: 20px;
}
.page-subtitle {
font-size: 14px;
}
}
/* ============================================
2. LABELS E ETICHETTE - MODERNIZZATE
============================================ */
.mylabel {
font-family: 'Titillium Web', sans-serif !important;
color: #212529;
font-size: 12px;
font-weight: 600; /* SEMIBOLD invece di 700 */
padding: 2px 0; /* RIDOTTO da 6px 12px 6px 0 a 2px 0 */
margin: 0 0 2px 0; /* RIDOTTO: solo 2px bottom margin */
display: block;
line-height: 1.3; /* RIDOTTO da 1.4 a 1.3 */
letter-spacing: 0.2px;
text-transform: none;
}
label.cnf {
font-family: 'Titillium Web', sans-serif !important;
color: #ffffff;
font-weight: 700;
text-shadow: 0 1px 3px rgba(0,0,0,0.4);
letter-spacing: 0.3px;
}
/* ============================================
3. LOADER
============================================ */
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('../img/page-loader.gif') 50% 50% no-repeat #FFF;
}
/* ============================================
4. FORM CONTROLS - INPUT TEXT - MODERNIZZATI
============================================ */
/* Input base - tutti i type */
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=date],
input[type=time],
input[type=datetime-local] {
font-family: 'Titillium Web', sans-serif !important;
background-color: #ffffff;
width: 100%;
min-height: 32px; /* RIDOTTO da 46px */
border: 2px solid #ced4da;
border-radius: 4px;
font-weight: 600; /* SEMIBOLD */
color: #212529;
padding: 4px 8px; /* RIDOTTO */
margin: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
input[type=text]:hover,
input[type=email]:hover,
input[type=tel]:hover,
input[type=number]:hover,
input[type=date]:hover,
input[type=time]:hover,
input[type=datetime-local]:hover {
border-color: #00897b;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=date]:focus,
input[type=time]:focus,
input[type=datetime-local]:focus {
outline: none;
border-color: #00695c !important;
box-shadow: 0 0 0 3px rgba(0, 105, 92, 0.15);
background-color: #f8fffe;
}
input:disabled {
background-color: #f1f3f5;
cursor: not-allowed;
opacity: 0.7;
border-color: #dee2e6;
}
/* Input di testo base - COMPATTO */
.mytext {
font-family: 'Titillium Web', sans-serif !important;
width: 100%;
height: auto;
min-height: 32px; /* RIDOTTO da 44px a 32px */
border: 2px solid #ced4da;
border-radius: 4px; /* RIDOTTO da 6px a 4px */
font-size: 14px;
font-style: normal;
font-weight: 600; /* SEMIBOLD */
color: #212529;
padding: 4px 8px; /* RIDOTTO da 12px 14px a 4px 8px */
margin: 0; /* AZZERATO */
background-color: #ffffff !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Ridotta ombra */
}
.mytext:hover {
border-color: #00897b;
}
.mytext:focus {
outline: none;
border-color: #00695c !important;
box-shadow: 0 0 0 3px rgba(0, 105, 92, 0.15);
background-color: #f8fffe;
}
/* Input centrato - COMPATTO */
.mytextcenter {
font-family: 'Titillium Web', sans-serif !important;
width: 100%;
height: auto;
min-height: 32px; /* RIDOTTO da 46px a 32px */
border: 2px solid #ced4da;
border-radius: 4px;
font-size: 14px;
font-style: normal;
font-weight: 600; /* SEMIBOLD */
color: #212529;
padding: 4px 8px; /* RIDOTTO da 12px 14px a 4px 8px */
margin: 0; /* AZZERATO */
text-align: center;
background-color: #ffffff !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.mytextcenter:hover {
border-color: #00897b;
}
.mytextcenter:focus {
outline: none;
border-color: #00695c !important;
box-shadow: 0 0 0 3px rgba(0, 105, 92, 0.15);
background-color: #f8fffe;
}
/* Input numerico compatto per valori a 2 cifre (es. numero personale) */
.input-numero-personale {
font-family: 'Titillium Web', sans-serif !important;
width: 80px !important;
max-width: 80px;
height: auto;
min-height: 40px;
border: 2px solid #ced4da;
border-radius: 4px;
font-size: 20px !important;
font-weight: 600;
color: #212529;
padding: 8px 12px;
text-align: center;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.input-numero-personale:hover {
border-color: #00897b;
}
.input-numero-personale:focus {
outline: none;
border-color: #00695c !important;
box-shadow: 0 0 0 3px rgba(0, 105, 92, 0.15);
background-color: #f8fffe;
}
.input-numero-personale:disabled {
background-color: #f1f3f5;
cursor: not-allowed;
opacity: 0.7;
border-color: #dee2e6;
}
/* ============================================
5. FORM CONTROLS - SELECT - MODERNIZZATI
============================================ */
.myselect {
font-family: 'Titillium Web', sans-serif !important;
width: 100%;
min-height: 32px; /* RIDOTTO da 46px a 32px */
height: auto;
border: 2px solid #ced4da;
border-radius: 4px;
font-size: 14px;
font-style: normal;
font-weight: 600; /* SEMIBOLD */
color: #212529;
padding: 4px 32px 4px 8px; /* RIDOTTO: 4px verticale, 8px sinistra, 32px destra per freccia */
margin: 0; /* AZZERATO */
background-color: #ffffff !important;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 6px center; /* RIDOTTO da 10px a 6px */
background-size: 20px; /* RIDOTTO da 22px a 20px */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.myselect:hover {
border-color: #00897b;
background-image: url('data:image/svg+xml;utf8,');
}
.myselect:focus {
outline: none;
border-color: #00695c !important;
box-shadow: 0 0 0 3px rgba(0, 105, 92, 0.15);
background-color: #f8fffe;
}
.myselect:disabled {
background-color: #f1f3f5;
cursor: not-allowed;
opacity: 0.7;
border-color: #dee2e6;
}
/* ============================================
6. FORM CONTROLS - TEXTAREA - MODERNIZZATI
============================================ */
.mytextarea {
font-family: 'Titillium Web', sans-serif !important;
width: 100%;
min-height: 80px; /* RIDOTTO da 120px a 80px */
border: 2px solid #ced4da;
border-radius: 4px;
font-size: 14px;
font-style: normal;
font-weight: 600; /* SEMIBOLD */
color: #212529;
padding: 6px 8px; /* RIDOTTO da 12px 14px a 6px 8px */
margin: 0; /* AZZERATO */
background-color: #ffffff !important;
resize: vertical;
line-height: 1.4; /* RIDOTTO da 1.6 a 1.4 */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.mytextarea:hover {
border-color: #00897b;
}
.mytextarea:focus {
outline: none;
border-color: #00695c !important;
box-shadow: 0 0 0 3px rgba(0, 105, 92, 0.15);
background-color: #f8fffe;
}
/* ============================================
7. FORM CONTROLS - DATETIME - MODERNIZZATI
============================================ */
.mydatetime {
font-family: 'Titillium Web', sans-serif !important;
width: 100%;
height: auto;
min-height: 32px; /* RIDOTTO da 46px a 32px */
border: 2px solid #ced4da;
border-radius: 4px;
font-size: 14px;
font-style: normal;
font-weight: 600; /* SEMIBOLD */
color: #212529;
padding: 4px 8px; /* RIDOTTO da 12px 14px a 4px 8px */
margin: 0; /* AZZERATO */
text-align: center;
background-color: #ffffff !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: pointer;
}
.mydatetime:hover {
border-color: #00897b;
background-color: #f8fffe;
}
.mydatetime:focus {
outline: none;
border-color: #00695c !important;
box-shadow: 0 0 0 3px rgba(0, 105, 92, 0.15);
background-color: #f8fffe;
}
/* ============================================
8. FORM CONTROLS - CHECKBOX - MODERNIZZATI
============================================ */
.mycheckbox {
width: 22px;
height: 22px;
margin: 0; /* AZZERATO */
cursor: pointer;
accent-color: #00695c;
border: 2px solid #ced4da;
border-radius: 3px; /* RIDOTTO da 4px a 3px */
transition: all 0.2s ease;
}
.mycheckbox:hover {
transform: scale(1.1);
border-color: #00897b;
}
.mycheckbox:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 105, 92, 0.2);
}
.mycheckbox:checked {
background-color: #00695c;
border-color: #00695c;
}
/* ============================================
9. FORM CONTROLS - STATI - MODERNIZZATI
============================================ */
.myreadonly {
background-color: #f1f3f5 !important; /* Grigio più chiaro */
cursor: not-allowed;
opacity: 0.95;
border-color: #dee2e6 !important;
color: #6c757d !important; /* Testo grigio */
font-size: 14px;
font-style: italic; /* Italico per indicare readonly */
}
.myreadonly:hover {
border-color: #dee2e6 !important; /* Non cambia al passaggio */
}
/* ============================================
10. PULSANTI BASE
============================================ */
.btn-white {
color: #212529;
background-color: #ffffff;
border: 2px solid #6c757d;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
min-height: 44px;
padding: 10px 20px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 16px;
}
.btn-white:hover {
background-color: #f8f9fa;
border-color: #495057;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.btn-white:focus {
outline: 3px solid #0056b3;
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.1);
}
.btn-white:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.btn-grey {
color: #212529;
background-color: #e9ecef;
border: 2px solid #6c757d;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
min-height: 44px;
padding: 10px 20px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 16px;
}
.btn-grey:hover {
background-color: #dee2e6;
border-color: #495057;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.btn-grey:focus {
outline: 3px solid #0056b3;
outline-offset: 2px;
}
.btn-grey:active {
transform: translateY(0);
}
/* ============================================
11. PULSANTI TEMATICI
============================================ */
/*Aggiungi esame*/
.btn-add-esame {
background-color: #a61e1e !important;
color: #ffffff !important;
border: 2px solid #8b1919;
min-height: 24px;
padding: 5px 5px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-add-esame:hover {
background-color: #8b1919 !important;
transform: translateY(-1px);
}
.btn-add-esame:focus {
outline: 3px solid #a61e1e;
outline-offset: 2px;
}
.btn-referto {
background-color: #4a6fa5 !important;
color: #ffffff !important;
border: 2px solid #3d5a85;
min-height: 44px;
padding: 10px 20px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-referto:active,
.btn-referto:hover,
.btn-referto:focus {
background-color: #3d5a85 !important;
color: #ffffff !important;
outline: 3px solid #4a6fa5;
outline-offset: 2px;
transform: translateY(-1px);
}
.primary-b3 {
background-color: #1e5a96 !important;
color: #ffffff !important;
border: 2px solid #164570;
min-height: 44px;
padding: 10px 20px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.primary-b3:hover {
background-color: #164570 !important;
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(30, 90, 150, 0.3);
}
.primary-b3:active,
.primary-b3:focus {
background-color: #1e5a96 !important;
color: #ffffff !important;
outline: 3px solid #4a6fa5;
outline-offset: 2px;
}
.primary-b4 {
background-color: #00695c !important;
color: #ffffff !important;
border: 2px solid #004d40;
min-height: 44px;
padding: 10px 20px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.primary-b4:hover {
background-color: #004d40 !important;
color: #ffffff !important;
transform: translateY(-1px);
}
.primary-b4:focus {
outline: 3px solid #00695c;
outline-offset: 2px;
}
.primary-b5 {
background-color: #4a90e2 !important;
color: #ffffff !important;
border: 2px solid #3a7bc8;
min-height: 44px;
padding: 10px 20px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.primary-b5:hover {
background-color: #3a7bc8 !important;
color: #ffffff !important;
transform: translateY(-1px);
}
.primary-b5:focus {
outline: 3px solid #4a90e2;
outline-offset: 2px;
}
.verde-bg {
background-color: #00695c !important;
color: #ffffff !important;
border: 2px solid #004d40;
min-height: 44px;
padding: 10px 20px;
font-weight: 600;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.verde-bg:hover {
background-color: #004d40 !important;
transform: translateY(-1px);
}
.verde-bg:focus {
outline: 3px solid #00695c;
outline-offset: 2px;
}
/* ============================================
12. PULSANTI AGGIUNG CARTELLA DONNA/UOMO
============================================ */
.rosa_top {
display: inline-block;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 1.5;
transition: all 0.2s ease;
width: 100%;
padding: 12px;
background-color: #c2185b;
color: #ffffff;
border: 2px solid #a01548;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
min-height: 50px;
}
.rosa_top:hover {
background-color: #a01548;
transform: translateY(-1px);
}
.rosa_top:focus {
outline: 3px solid #c2185b;
outline-offset: 2px;
}
.rosa_bottom {
display: inline-block;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 1.5;
transition: all 0.2s ease;
width: 100%;
padding: 8px;
background-color: #ffffff;
color: #c2185b;
border: 2px solid #c2185b;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
font-weight: 600;
cursor: pointer;
min-height: 44px;
}
.rosa_bottom:hover {
background-color: #fce4ec;
color: #a01548;
}
.rosa_bottom:focus {
outline: 3px solid #c2185b;
outline-offset: 2px;
}
.blu_top {
display: inline-block;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 1.5;
transition: all 0.2s ease;
width: 100%;
padding: 12px;
background-color: #1976d2;
color: #ffffff;
border: 2px solid #1565c0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
min-height: 50px;
}
.blu_top:hover {
background-color: #1565c0;
transform: translateY(-1px);
}
.blu_top:focus {
outline: 3px solid #1976d2;
outline-offset: 2px;
}
.blu_bottom {
display: inline-block;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 1.5;
transition: all 0.2s ease;
width: 100%;
padding: 8px;
background-color: #ffffff;
color: #1976d2;
border: 2px solid #1976d2;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
font-weight: 600;
cursor: pointer;
min-height: 44px;
}
.blu_bottom:hover {
background-color: #e3f2fd;
color: #1565c0;
}
.blu_bottom:focus {
outline: 3px solid #1976d2;
outline-offset: 2px;
}
.scarlato_top {
display: inline-block;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 1.5;
transition: all 0.2s ease;
width: 100%;
padding: 12px;
background-color: #c92a2a;
color: #ffffff;
border: 2px solid #a61e1e;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
min-height: 50px;
}
.scarlato_top:hover {
background-color: #a61e1e;
transform: translateY(-1px);
}
.scarlato_top:focus {
outline: 3px solid #c92a2a;
outline-offset: 2px;
}
.scarlato_bottom {
display: inline-block;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 1.5;
transition: all 0.2s ease;
width: 100%;
padding: 8px;
background-color: #ffffff;
color: #c92a2a;
border: 2px solid #c92a2a;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
font-weight: 600;
cursor: pointer;
min-height: 44px;
}
.scarlato_bottom:hover {
background-color: #ffe3e3;
color: #a61e1e;
}
.scarlato_bottom:focus {
outline: 3px solid #c92a2a;
outline-offset: 2px;
}
.violet_top {
display: inline-block;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 1.5;
transition: all 0.2s ease;
width: 100%;
padding: 12px;
background-color: #ac60d4;
color: #ffffff;
border: 2px solid #1565c0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
min-height: 50px;
}
.violet_top:hover {
color: #004d40;
}
.violet_bottom {
display: inline-block;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 1.5;
transition: all 0.2s ease;
width: 100%;
padding: 8px;
background-color: #ffffff;
color: #ac60d4;
border: 2px solid #c92a2a;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
font-weight: 600;
cursor: pointer;
min-height: 44px;
}
.violet_bottom:hover {
color: #004d40;
}
/* ============================================
12.5. PULSANTI AZIONI STANDARD
============================================ */
/* Contenitore pulsanti azioni fine pagina */
.actions-container {
background-color: #fffbcc; /* giallo chiaro */
border-color: #fff59d; /* bordo leggermente più scuro */
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 6px 3px;
margin-top: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* Wrapper per i pulsanti con flexbox */
.actions-buttons-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px; /* Spaziatura tra i pulsanti */
}
/* Responsive: su schermi piccoli i pulsanti vanno a capo */
@media (max-width: 768px) {
.actions-buttons-wrapper {
flex-direction: column;
gap: 15px;
}
.actions-buttons-wrapper .btn-action {
width: 100%;
max-width: 300px;
}
}
/* Pulsante base compatto per azioni standard */
.btn-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 32px;
padding: 6px 14px;
font-size: 14px;
font-weight: 500;
border-radius: 5px;
border: 1px solid;
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
white-space: nowrap;
}
.btn-action:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
text-decoration: none;
}
.btn-action:focus {
outline: 3px solid currentColor;
outline-offset: 2px;
}
.btn-action:active {
transform: translateY(0);
}
.btn-action:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
}
.btn-action i {
font-size: 18px;
}
/* 1. Indietro / Torna */
.btn-back {
background-color: #6c757d;
color: #ffffff;
border-color: #545b62;
}
.btn-back:hover {
background-color: #545b62;
color: #ffffff;
}
.btn-back::before {
content: '\f060'; /* fa-arrow-left */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* 2. Salva */
.btn-save {
background-color: #28a745;
color: #ffffff;
border-color: #1e7e34;
}
.btn-save:hover {
background-color: #1e7e34;
color: #ffffff;
}
.btn-save::before {
content: '\f0c7'; /* fa-floppy-disk */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* 3. Elimina */
.btn-delete {
background-color: #dc3545;
color: #ffffff;
border-color: #c92a2a;
}
.btn-delete:hover {
background-color: #c92a2a;
color: #ffffff;
}
.btn-delete::before {
content: '\f2ed'; /* fa-trash-can */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* 4. Apri */
.btn-open {
background-color: #17a2b8;
color: #ffffff;
border-color: #117a8b;
}
.btn-open:hover {
background-color: #117a8b;
color: #ffffff;
}
.btn-open::before {
content: '\f07c'; /* fa-folder-open */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* 5. Nuovo */
.btn-new {
background-color: #00695c;
color: #ffffff;
border-color: #004d40;
}
.btn-new:hover {
background-color: #004d40;
color: #ffffff;
}
.btn-new::before {
content: '\2b'; /* fa-plus */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
.btn-new-esame {
background-color: #c62828;
color: #ffffff;
border-color: #8e0000;
cursor: pointer;
}
.btn-new-esame:hover {
background-color: #8e0000;
color: #ffffff;
}
.btn-new-esame::before {
content: '\2b'; /* fa-plus */
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
.btn-import {
background-color: #1565c0;
color: #ffffff;
border-color: #0d47a1;
}
.btn-import:hover {
background-color: #0d47a1;
color: #ffffff;
}
.btn-import::before {
content: '\f56f'; /* fa-file-import */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
.btn-coppia {
background-color: #6a1b9a;
color: #ffffff;
border-color: #4a148c;
}
.btn-coppia:hover {
background-color: #4a148c;
color: #ffffff;
}
.btn-coppia::before {
content: '\f500'; /* fa-user-friends */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
.btn-donna {
background-color: #ad1457;
color: #ffffff;
border-color: #880e4f;
}
.btn-donna:hover {
background-color: #880e4f;
color: #ffffff;
}
.btn-donna::before {
content: '\f221'; /* fa-venus */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
.btn-uomo {
background-color: #1565c0;
color: #ffffff;
border-color: #0d47a1;
}
.btn-uomo:hover {
background-color: #0d47a1;
color: #ffffff;
}
.btn-uomo::before {
content: '\f222'; /* fa-mars */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
.btn-anonimo {
background-color: #424242;
color: #ffffff;
border-color: #212121;
}
.btn-anonimo:hover {
background-color: #212121;
color: #ffffff;
}
.btn-anonimo::before {
content: '\f21b'; /* fa-user-secret */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* 6. Filtra */
.btn-filter {
background-color: #e67e22;
color: #ffffff;
border-color: #d35400;
}
.btn-filter:hover {
background-color: #d35400;
color: #ffffff;
}
.btn-filter::before {
content: '\f0b0'; /* fa-filter */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* 7. Reset Filtro */
.btn-reset-filter {
background-color: #95a5a6;
color: #ffffff;
border-color: #7f8c8d;
}
.btn-reset-filter:hover {
background-color: #7f8c8d;
color: #ffffff;
}
.btn-reset-filter::before {
content: '\f056'; /* fa-circle-xmark */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* 8. Stampa */
.btn-print {
background-color: #343a40;
color: #ffffff;
border-color: #23272b;
}
.btn-print:hover {
background-color: #23272b;
color: #ffffff;
}
.btn-print::before {
content: '\f02f'; /* fa-print */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* 9. Calcola */
.btn-calcola {
background-color: #7b1fa2;
color: #ffffff;
border-color: #6a1b9a;
}
.btn-calcola:hover {
background-color: #6a1b9a;
color: #ffffff;
}
.btn-calcola::before {
content: '\f1ec'; /* fa-calculator */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* Variante outline per btn-calcola */
.btn-calcola.btn-outline {
background-color: transparent;
color: #7b1fa2;
border-color: #7b1fa2;
}
.btn-calcola.btn-outline:hover {
background-color: #7b1fa2;
color: #ffffff;
}
/* 9. Avanti */
.btn-next {
background-color: #0056b3;
color: #ffffff;
border-color: #004085;
}
.btn-next:hover {
background-color: #004085;
color: #ffffff;
}
.btn-next::after {
content: '\f061'; /* fa-arrow-right */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-left: 8px;
}
/* 10. Inizio (prima pagina) */
.btn-first {
background-color: #0056b3;
color: #ffffff;
border-color: #004085;
}
.btn-first:hover {
background-color: #004085;
color: #ffffff;
}
.btn-first::before {
content: '\f100'; /* fa-angles-left */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* 11. Fine (ultima pagina) */
.btn-last {
background-color: #0056b3;
color: #ffffff;
border-color: #004085;
}
.btn-last:hover {
background-color: #004085;
color: #ffffff;
}
.btn-last::after {
content: '\f101'; /* fa-angles-right */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-left: 8px;
}
/* 12 Pulsante Invia Email */
.btn-email {
background-color: #198754; /* verde */
color: #ffffff;
border-color: #146c43;
}
.btn-email:hover {
background-color: #146c43;
color: #ffffff;
}
.btn-email::after {
content: '\f0e0'; /* fa-envelope */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-left: 8px;
}
/* Pulsante Verifica */
.btn-check {
background-color: #0d6efd; /* blu verifica */
color: #ffffff;
border-color: #0a58ca;
}
.btn-check:hover {
background-color: #0a58ca;
color: #ffffff;
}
.btn-check::after {
content: '\f00c'; /* fa-check */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-left: 8px;
}
/* Pulsante Toggle */
.btn-toggle {
background-color: #6c757d; /* grigio neutro */
color: #ffffff;
border-color: #565e64;
}
.btn-toggle:hover {
background-color: #565e64;
color: #ffffff;
}
.btn-toggle::after {
content: '\f205'; /* fa-toggle-on */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-left: 8px;
}
/* Pulsante Ricerca */
.btn-search {
background-color: #0d6efd; /* blu ricerca */
color: #ffffff;
border-color: #0a58ca;
}
.btn-search:hover {
background-color: #0a58ca;
color: #ffffff;
}
.btn-search::before {
content: '\f002'; /* fa-magnifying-glass */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* Pulsante Upload/Caricamento */
.btn-upload {
background-color: #0dcaf0; /* azzurro chiaro */
color: #000000;
border-color: #0aa2c0;
}
.btn-upload:hover {
background-color: #0aa2c0;
color: #000000;
}
.btn-upload::before {
content: '\f093'; /* fa-upload */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* 14 Pulsante tipo Link */
.btn-link {
background-color: transparent;
color: #00695c !important;
border: none;
text-decoration: underline;
padding: 8px 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-link:hover {
background-color: rgba(0, 105, 92, 0.1);
color: #004d40 !important;
text-decoration: none;
}
.btn-link:focus,
.btn-link:active {
color: #004d40 !important;
}
.btn-link i {
color: #00695c !important;
margin-right: 0;
}
.btn-link:hover i {
color: #004d40 !important;
}
.btn-link::before {
content: '\f0c1'; /* fa-link */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 0;
color: #00695c !important;
display: none; /* Nasconde l'icona automatica quando c'è già un'icona */
}
/* Se c'è già un'icona , nascondi ::before */
.btn-link:has(i)::before {
display: none;
}
/* Variante primaria */
.btn-link.btn-link-primary {
color: #0d6efd !important;
}
.btn-link.btn-link-primary:hover {
background-color: rgba(13, 110, 253, 0.1);
color: #0a58ca !important;
}
.btn-link.btn-link-primary i,
.btn-link.btn-link-primary::before {
color: #0d6efd !important;
}
.btn-link.btn-link-primary:hover i {
color: #0a58ca !important;
}
/* Variante danger */
.btn-link.btn-link-danger {
color: #dc3545 !important;
}
.btn-link.btn-link-danger:hover {
background-color: rgba(220, 53, 69, 0.1);
color: #c82333 !important;
}
.btn-link.btn-link-danger i,
.btn-link.btn-link-danger::before {
color: #dc3545 !important;
}
/* Senza icona */
.btn-link.btn-link-no-icon::before {
content: none;
display: none;
}
/* Versione compatta per navigazione */
.btn-link.btn-nav {
padding: 10px 12px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-radius: 8px;
}
.btn-link.btn-nav:hover {
background-color: rgba(0, 105, 92, 0.15);
}
/* Allegati */
.btn-allegati {
background-color: #607d8b;
color: #ffffff;
border-color: #455a64;
}
.btn-allegati:hover {
background-color: #455a64;
color: #ffffff;
}
.btn-allegati::before {
content: '\f0c6'; /* fa-paperclip */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* Esami */
.btn-esami {
background-color: #607d8b;
color: #ffffff;
border-color: #455a64;
}
.btn-esami:hover {
background-color: #455a64;
color: #ffffff;
}
.btn-esami::before {
content: '\f477'; /* fa-file-medical */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* Accettazione LS */
.btn-accettazione-ls {
background-color: #607d8b;
color: #ffffff;
border-color: #455a64;
}
.btn-accettazione-ls:hover {
background-color: #455a64;
color: #ffffff;
}
.btn-accettazione-ls::before {
content: '\f058'; /* fa-circle-check */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* Prodotti utilizzati */
.btn-prodotti {
background-color: #607d8b;
color: #ffffff;
border-color: #455a64;
}
.btn-prodotti:hover {
background-color: #455a64;
color: #ffffff;
}
.btn-prodotti::before {
content: '\f466'; /* fa-box */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* Protocollo stimolazione */
.btn-protocollo {
background-color: #607d8b;
color: #ffffff;
border-color: #455a64;
}
.btn-protocollo:hover {
background-color: #455a64;
color: #ffffff;
}
.btn-protocollo::before {
content: '\f15c'; /* fa-file-lines */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* Consensi e informative */
.btn-consensi {
background-color: #607d8b;
color: #ffffff;
border-color: #455a64;
}
.btn-consensi:hover {
background-color: #455a64;
color: #ffffff;
}
.btn-consensi::before {
content: '\f56e'; /* fa-file-contract */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* Relazione finale */
.btn-relazione {
background-color: #607d8b;
color: #ffffff;
border-color: #455a64;
}
.btn-relazione:hover {
background-color: #455a64;
color: #ffffff;
}
.btn-relazione::before {
content: '\f570'; /* fa-file-invoice */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* Percorso medico */
.btn-percorso-medico {
background-color: #d32f2f;
color: #ffffff;
border-color: #b71c1c;
}
.btn-percorso-medico:hover {
background-color: #b71c1c;
color: #ffffff;
}
.btn-percorso-medico::before {
content: '\f0f0'; /* fa-user-doctor */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* Percorso biologico */
.btn-percorso-biologico {
background-color: #0288d1;
color: #ffffff;
border-color: #01579b;
}
.btn-percorso-biologico:hover {
background-color: #01579b;
color: #ffffff;
}
.btn-percorso-biologico::before {
content: '\f492'; /* fa-microscope */
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-right: 8px;
}
/* Varianti dimensioni */
.btn-action.btn-sm {
min-height: 36px;
padding: 6px 12px;
font-size: 14px;
}
.btn-action.btn-sm i,
.btn-action.btn-sm::before,
.btn-action.btn-sm::after {
font-size: 14px;
}
.btn-action.btn-lg {
min-height: 52px;
padding: 14px 28px;
font-size: 18px;
}
.btn-action.btn-lg i,
.btn-action.btn-lg::before,
.btn-action.btn-lg::after {
font-size: 20px;
}
/* Variante outline */
.btn-action.btn-outline {
background-color: transparent;
}
.btn-back.btn-outline {
color: #6c757d;
border-color: #6c757d;
}
.btn-back.btn-outline:hover {
background-color: #6c757d;
color: #ffffff;
}
.btn-save.btn-outline {
color: #28a745;
border-color: #28a745;
}
.btn-save.btn-outline:hover {
background-color: #28a745;
color: #ffffff;
}
.btn-delete.btn-outline {
color: #dc3545;
border-color: #dc3545;
}
.btn-delete.btn-outline:hover {
background-color: #dc3545;
color: #ffffff;
}
.btn-open.btn-outline {
color: #17a2b8;
border-color: #17a2b8;
}
.btn-open.btn-outline:hover {
background-color: #17a2b8;
color: #ffffff;
}
.btn-new.btn-outline {
color: #00695c;
border-color: #00695c;
}
.btn-new.btn-outline:hover {
background-color: #00695c;
color: #ffffff;
}
.btn-filter.btn-outline {
color: #e67e22;
border-color: #e67e22;
}
.btn-filter.btn-outline:hover {
background-color: #e67e22;
color: #ffffff;
}
.btn-reset-filter.btn-outline {
color: #95a5a6;
border-color: #95a5a6;
}
.btn-reset-filter.btn-outline:hover {
background-color: #95a5a6;
color: #ffffff;
}
.btn-print.btn-outline {
color: #343a40;
border-color: #343a40;
}
.btn-print.btn-outline:hover {
background-color: #343a40;
color: #ffffff;
}
.btn-next.btn-outline,
.btn-first.btn-outline,
.btn-last.btn-outline {
color: #0056b3;
border-color: #0056b3;
}
.btn-next.btn-outline:hover,
.btn-first.btn-outline:hover,
.btn-last.btn-outline:hover {
background-color: #0056b3;
color: #ffffff;
}
/* Variante solo icona */
.btn-action.btn-icon-only {
padding: 10px;
min-width: 44px;
}
.btn-action.btn-icon-only::before,
.btn-action.btn-icon-only::after {
margin: 0;
}
/* Responsive */
@media (max-width: 768px) {
.btn-action {
font-size: 14px;
padding: 8px 16px;
min-height: 40px;
}
.btn-action i,
.btn-action::before,
.btn-action::after {
font-size: 16px;
}
}
/* ============================================
12.6. PULSANTI AZIONI - SUPPORTO INPUT SUBMIT
============================================ */
/* Override per input type=submit con classi btn-action */
input[type=submit].btn-action {
display: inline-block; /* inline-flex non funziona bene con input */
text-align: center;
vertical-align: middle;
line-height: 1.5;
font-family: 'Titillium Web', sans-serif !important;
}
/* Rimuove il pseudo-elemento ::before per input (non supportato) */
input[type=submit].btn-save::before,
input[type=submit].btn-back::before,
input[type=submit].btn-delete::before,
input[type=submit].btn-new::before,
input[type=submit].btn-filter::before,
input[type=submit].btn-print::before {
content: none !important;
}
/* Assicura che gli stili di colore si applichino */
input[type=submit].btn-save {
background-color: #28a745 !important;
color: #ffffff !important;
border-color: #1e7e34 !important;
}
input[type=submit].btn-save:hover {
background-color: #1e7e34 !important;
color: #ffffff !important;
}
input[type=submit].btn-save:focus {
outline: 3px solid #28a745;
outline-offset: 2px;
}
input[type=submit].btn-back {
background-color: #6c757d !important;
color: #ffffff !important;
border-color: #545b62 !important;
}
input[type=submit].btn-back:hover {
background-color: #545b62 !important;
color: #ffffff !important;
}
input[type=submit].btn-delete {
background-color: #dc3545 !important;
color: #ffffff !important;
border-color: #c92a2a !important;
}
input[type=submit].btn-delete:hover {
background-color: #c92a2a !important;
color: #ffffff !important;
}
input[type=submit].btn-new {
background-color: #00695c !important;
color: #ffffff !important;
border-color: #004d40 !important;
}
input[type=submit].btn-new:hover {
background-color: #004d40 !important;
color: #ffffff !important;
}
.supp {
border: none;
cursor: pointer;
}
/* Responsive */
@media (max-width: 768px) {
input[type=submit].btn-action {
font-size: 14px;
padding: 8px 16px;
min-height: 40px;
}
}
/* ============================================
13. TABELLE
============================================ */
table {
border-collapse: separate !important; /* Cambiato da collapse a separate */
border-spacing: 0;
width: 100%;
border: 2px solid #6c757d;
font-size: 16px;
border-radius: 10px; /* Aggiunto border-radius */
overflow: hidden; /* Aggiunto per far funzionare il border-radius */
}
.table th {
font-size: 16px;
font-weight: 700;
color: #ffffff;
background-color: #343a40;
padding: 12px;
text-align: left;
border: 2px solid #495057;
}
/* Arrotonda gli angoli superiori dell'header */
.table thead tr:first-child th:first-child {
border-top-left-radius: 8px;
}
.table thead tr:first-child th:last-child {
border-top-right-radius: 8px;
}
.table td {
font-size: 16px;
font-weight: 500;
padding: 10px 12px;
border: 1px solid #dee2e6;
line-height: 1.5;
}
/* Arrotonda gli angoli inferiori dell'ultima riga */
.table tbody tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
.table tbody tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}
.table tbody tr:nth-child(odd) {
background-color: #ffffff;
}
.table tbody tr:nth-child(even) {
background-color: #f8f9fa;
}
.table tbody tr:hover {
background-color: #e9ecef;
}
.table td:focus-within {
outline: 3px solid #0056b3;
outline-offset: -3px;
}
.thead-custom {
background-color: #343a40 !important;
color: #ffffff !important;
}
/* ============================================
13. TABELLE - CLASSI CNF (COMPATTE)
============================================ */
/* Specificità aumentata per sovrascrivere Bootstrap */
.table thead tr.cnftitolo,
table tr.cnftitolo {
text-align: center;
color: #ffffff;
background: linear-gradient(135deg, #00695c 0%, #004d40 100%);
height: auto;
min-height: 28px;
font-family: 'Titillium Web', sans-serif !important;
font-size: 12px !important; /* IMPORTANTE! */
font-weight: 600;
text-transform: none;
letter-spacing: 0.2px;
padding: 4px 6px;
border-bottom: 3px solid #004d40;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Celle th dentro cnftitolo - maggiore specificità */
.table thead tr.cnftitolo th,
table tr.cnftitolo th {
font-family: 'Titillium Web', sans-serif !important;
font-size: 12px !important; /* IMPORTANTE! */
font-weight: 600;
text-align: center;
vertical-align: middle;
padding: 4px 4px !important; /* IMPORTANTE per sovrascrivere Bootstrap */
color: #ffffff;
background: transparent;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.table thead tr.cnftitolo th:last-child,
table tr.cnftitolo th:last-child {
border-right: none;
}
/* Righe dati - maggiore specificità */
.table tbody tr.cnfrighe,
table tbody tr.cnfrighe {
text-align: left;
height: auto;
min-height: 24px;
font-family: 'Titillium Web', sans-serif !important;
font-size: 12px !important; /* IMPORTANTE! */
font-weight: 600;
color: #212529;
padding: 3px 4px;
transition: background-color 0.2s ease;
}
/* Celle td dentro cnfrighe - maggiore specificità */
.table tbody tr.cnfrighe td,
table tbody tr.cnfrighe td {
font-family: 'Titillium Web', sans-serif !important;
font-size: 12px !important; /* IMPORTANTE! */
font-weight: 600;
color: #212529;
padding: 3px 6px !important; /* IMPORTANTE per sovrascrivere Bootstrap */
vertical-align: middle;
border: 1px solid #e9ecef;
}
/* Strong dentro celle */
.table tbody tr.cnfrighe td strong,
table tbody tr.cnfrighe td strong {
font-size: 12px !important; /* IMPORTANTE! */
font-weight: 700; /* Ancora più grassetto per strong */
}
/* Hover sulle righe */
.table tbody tr.cnfrighe:hover,
table tbody tr.cnfrighe:hover {
background-color: #e8f5f3 !important;
cursor: pointer;
}
/* Zebra striping - sovrascrive Bootstrap */
.table tbody tr.cnfrighe:nth-child(even),
table tbody tr.cnfrighe:nth-child(even) {
background-color: #f8f9fa !important;
}
.table tbody tr.cnfrighe:nth-child(odd),
table tbody tr.cnfrighe:nth-child(odd) {
background-color: #ffffff !important;
}
/*SECONDA PARTE*/
th.cnf {
width: auto;
min-width: 40px;
padding: 10px;
}
.edit {
width: 100%;
min-height: 44px;
padding: 8px;
border: 2px solid transparent;
transition: border-color 0.2s ease;
}
.editMode {
border: 2px solid #0056b3;
background-color: #fff3cd;
}
.editMode:focus {
outline: 3px solid #0056b3;
outline-offset: 2px;
}
.txtedit {
display: none;
width: 99%;
min-height: 44px;
padding: 8px;
font-size: 16px;
border: 2px solid #0056b3;
}
.edit_aborto {
width: 100%;
min-height: 44px;
color: #0056b3;
font-size: 16px;
font-style: normal;
font-weight: 600;
padding: 8px;
}
.editMode_aborto {
border: 2px solid #0056b3;
color: #0056b3;
background-color: #e7f3ff;
font-size: 16px;
font-style: normal;
font-weight: 600;
}
.txtedit_aborto {
display: none;
width: 99%;
min-height: 44px;
color: #0056b3;
font-size: 16px;
font-style: normal;
font-weight: 600;
padding: 8px;
}
.myrighetabella {
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 1.5;
padding: 8px;
}
/* ============================================
13.5. AZIONI NELLE TABELLE
============================================ */
/* Colonna azioni */
.table-action {
width: 60px !important;
text-align: center !important;
vertical-align: middle !important;
padding: 8px !important;
}
/* Link azioni */
.table-action-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 6px;
transition: all 0.2s ease;
text-decoration: none;
cursor: pointer;
border: 2px solid transparent;
}
.table-action-link:hover {
transform: scale(1.1);
text-decoration: none;
}
.table-action-link:focus {
outline: 3px solid currentColor;
outline-offset: 2px;
}
.table-action-link i {
font-size: 18px;
}
/* Azione Modifica/Apri */
.table-action-edit {
color: #0056b3;
background-color: transparent;
}
.table-action-edit:hover {
color: #ffffff;
background-color: #0056b3;
border-color: #004085;
}
/* Azione Elimina */
.table-action-delete {
color: #dc3545;
background-color: transparent;
}
.table-action-delete:hover {
color: #ffffff;
background-color: #dc3545;
border-color: #c92a2a;
}
/* Azione Visualizza */
.table-action-view {
color: #17a2b8;
background-color: transparent;
}
.table-action-view:hover {
color: #ffffff;
background-color: #17a2b8;
border-color: #117a8b;
}
/* Azione Download */
.table-action-download {
color: #28a745;
background-color: transparent;
}
.table-action-download:hover {
color: #ffffff;
background-color: #28a745;
border-color: #1e7e34;
}
/* Azione Disabilitata */
.table-action-link.disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
/* Responsive */
@media (max-width: 768px) {
.table-action {
width: 50px !important;
padding: 6px !important;
}
.table-action-link {
width: 32px;
height: 32px;
}
.table-action-link i {
font-size: 16px;
}
}
.myInputAll {
color: blue;
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
font-style: normal;
font-weight: bold;
font-stretch: expanded;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
.mySelectAll {
color: blue;
background-position: 1px 1px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
font-style: normal;
font-weight: bold;
font-stretch: expanded;
padding: 12px 2px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
/* ============================================
14. CARD E CONTENITORI CNF
============================================ */
div.cnfshadow {
background-color: #ffffff;
margin: 12px 0px 12px 0px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-radius: 4px;
border: 1px solid #dee2e6;
}
div.cnfcardbody {
background-color: #ffffff;
margin: 12px 0px 12px 0px;
padding: 16px;
border-radius: 4px;
}
div.cnfedit {
font-size: 16px;
font-weight: 500;
padding: 8px;
}
/* ============================================
15. DIVISORI COLORATI
============================================ */
.div-grigio {
background-color: #e9ecef;
border-left: 4px solid #6c757d;
padding: 12px;
}
.div-verdechiaro {
background-color: #d4edda;
border-left: 4px solid #28a745;
padding: 12px;
}
.div-giallo {
background-color: #fff3cd;
border-left: 4px solid #ffc107;
padding: 12px;
}
.div-verde {
background-color: #d4edda;
border-left: 4px solid #28a745;
padding: 12px;
}
.div-blu {
background-color: #cce5ff;
border-left: 4px solid #0056b3;
padding: 12px;
}
.div-bluchiaro {
background-color: #e7f3ff;
border-left: 4px solid #4a90e2;
padding: 12px;
}
.div_backcolor {
background-color: #cae8ca;
}
/* ============================================
16.1. TAB STANDARD (VERDE - Default app)
============================================ */
/* Container tabs base */
.nav-tabs {
border-bottom: 3px solid #00695c;
background-color: #e8f5e9;
padding: 10px 10px 0 10px;
border-radius: 8px 8px 0 0;
margin-bottom: 0;
gap: 8px;
display: flex;
flex-wrap: wrap;
}
.nav-tabs i {
margin-right: 6px;
}
.nav-tabs > li {
margin-bottom: -3px;
border: none;
}
.nav-tabs > li > a {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 20px;
font-family: 'Titillium Web', sans-serif !important;
font-size: 15px;
font-weight: 600;
color: #004d40;
background-color: #ffffff;
border: 2px solid #a5d6a7;
border-radius: 8px 8px 0 0;
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
white-space: nowrap;
line-height: 1.3;
}
.nav-tabs > li > a:hover {
color: #00695c;
background-color: #e8f5e9;
border-color: #66bb6a;
transform: translateY(-2px);
text-decoration: none;
}
.nav-tabs > li > a:focus {
outline: 3px solid #00897b;
outline-offset: 2px;
}
/* Tab attiva */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #ffffff !important;
background: linear-gradient(135deg, #00695c, #004d40) !important;
border-color: #00695c !important;
font-weight: 700;
box-shadow: 0 4px 8px rgba(0, 105, 92, 0.3);
cursor: default;
transform: none;
}
/* Barra indicatore sotto tab attiva */
.nav-tabs > li.active > a::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
right: 0;
height: 3px;
background-color: #00695c;
}
/* Icone nelle tab */
.nav-tabs > li > a i {
font-size: 18px;
flex-shrink: 0;
}
/* Badge/contatori nelle tab */
.nav-tabs > li > a .badge {
background-color: rgba(255,255,255,0.3);
color: inherit;
font-size: 11px;
padding: 3px 8px;
margin-left: 8px;
font-weight: 600;
border-radius: 12px;
}
.nav-tabs > li.active > a .badge {
background-color: rgba(255,255,255,0.9);
color: #00695c;
}
/* Heading dentro tab (per retrocompatibilità) */
.nav-tabs > li > a h4,
.nav-tabs > li > a h5 {
margin: 0;
font-size: inherit;
font-weight: inherit;
display: inline;
}
/* Contenuto tab */
.tab-content {
background-color: #ffffff;
padding: 20px;
border: 2px solid #a5d6a7;
border-top: none;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
/* ============================================
16.2. TAB VARIANTI COLORE
============================================ */
/* Tab Viola (Biobanca/Laboratorio) */
.nav-tabs.tabs-purple {
border-bottom-color: #7b1fa2;
background-color: #f3e5f5;
}
.nav-tabs.tabs-purple > li > a {
color: #4a148c;
border-color: #e1bee7;
}
.nav-tabs.tabs-purple > li > a:hover {
color: #7b1fa2;
background-color: #f3e5f5;
border-color: #ab47bc;
}
.nav-tabs.tabs-purple > li.active > a,
.nav-tabs.tabs-purple > li.active > a:hover,
.nav-tabs.tabs-purple > li.active > a:focus {
background: linear-gradient(135deg, #7b1fa2, #6a1b9a) !important;
border-color: #7b1fa2 !important;
box-shadow: 0 4px 8px rgba(123, 31, 162, 0.3);
}
.nav-tabs.tabs-purple > li.active > a::after {
background-color: #7b1fa2;
}
.nav-tabs.tabs-purple ~ .tab-content {
border-color: #e1bee7;
}
/* Tab Blu (Area Medica) */
.nav-tabs.tabs-blue {
border-bottom-color: #1976d2;
background-color: #e3f2fd;
}
.nav-tabs.tabs-blue > li > a {
color: #0d47a1;
border-color: #bbdefb;
}
.nav-tabs.tabs-blue > li > a:hover {
color: #1976d2;
background-color: #e3f2fd;
border-color: #64b5f6;
}
.nav-tabs.tabs-blue > li.active > a,
.nav-tabs.tabs-blue > li.active > a:hover,
.nav-tabs.tabs-blue > li.active > a:focus {
background: linear-gradient(135deg, #1976d2, #1565c0) !important;
border-color: #1976d2 !important;
box-shadow: 0 4px 8px rgba(25, 118, 210, 0.3);
}
.nav-tabs.tabs-blue > li.active > a::after {
background-color: #1976d2;
}
.nav-tabs.tabs-blue ~ .tab-content {
border-color: #bbdefb;
}
/* Tab Indaco (Sezioni Secondarie) */
.nav-tabs.tabs-indigo {
border-bottom-color: #5c6bc0;
background-color: #e8eaf6;
}
.nav-tabs.tabs-indigo > li > a {
color: #283593;
border-color: #c5cae9;
}
.nav-tabs.tabs-indigo > li > a:hover {
color: #5c6bc0;
background-color: #e8eaf6;
border-color: #7986cb;
}
.nav-tabs.tabs-indigo > li.active > a,
.nav-tabs.tabs-indigo > li.active > a:hover,
.nav-tabs.tabs-indigo > li.active > a:focus {
background: linear-gradient(135deg, #5c6bc0, #3f51b5) !important;
border-color: #5c6bc0 !important;
box-shadow: 0 4px 8px rgba(92, 107, 192, 0.3);
}
.nav-tabs.tabs-indigo > li.active > a::after {
background-color: #5c6bc0;
}
.nav-tabs.tabs-indigo ~ .tab-content {
border-color: #c5cae9;
}
/* Tab Arancione (Avvisi/Warning) */
.nav-tabs.tabs-orange {
border-bottom-color: #f57c00;
background-color: #fff3e0;
}
.nav-tabs.tabs-orange > li > a {
color: #e65100;
border-color: #ffe0b2;
}
.nav-tabs.tabs-orange > li > a:hover {
color: #f57c00;
background-color: #fff3e0;
border-color: #ffb74d;
}
.nav-tabs.tabs-orange > li.active > a,
.nav-tabs.tabs-orange > li.active > a:hover,
.nav-tabs.tabs-orange > li.active > a:focus {
background: linear-gradient(135deg, #f57c00, #e65100) !important;
border-color: #f57c00 !important;
box-shadow: 0 4px 8px rgba(245, 124, 0, 0.3);
}
.nav-tabs.tabs-orange > li.active > a::after {
background-color: #f57c00;
}
/* Tab Teal (Alternativa) */
.nav-tabs.tabs-teal {
border-bottom-color: #00897b;
background-color: #e0f2f1;
}
.nav-tabs.tabs-teal > li > a {
color: #004d40;
border-color: #b2dfdb;
}
.nav-tabs.tabs-teal > li > a:hover {
color: #00897b;
background-color: #e0f2f1;
border-color: #4db6ac;
}
.nav-tabs.tabs-teal > li.active > a,
.nav-tabs.tabs-teal > li.active > a:hover,
.nav-tabs.tabs-teal > li.active > a:focus {
background: linear-gradient(135deg, #00897b, #00695c) !important;
border-color: #00897b !important;
box-shadow: 0 4px 8px rgba(0, 137, 123, 0.3);
}
/* ============================================
16.3. TAB COMPATTE (per spazi ridotti)
============================================ */
.nav-tabs.tabs-compact {
padding: 6px 6px 0 6px;
gap: 4px;
}
.nav-tabs.tabs-compact > li > a {
padding: 8px 14px;
font-size: 13px;
}
.nav-tabs.tabs-compact > li > a i {
font-size: 14px;
}
.nav-tabs.tabs-compact ~ .tab-content {
padding: 15px;
}
/* ============================================
16.4. TAB VERTICALI (opzionale)
============================================ */
.nav-tabs.tabs-vertical {
flex-direction: column;
border-bottom: none;
border-right: 3px solid #00695c;
border-radius: 8px 0 0 8px;
padding: 10px 0 10px 10px;
}
.nav-tabs.tabs-vertical > li {
margin-bottom: 0;
margin-right: -3px;
}
.nav-tabs.tabs-vertical > li > a {
border-radius: 8px 0 0 8px;
width: 100%;
}
.nav-tabs.tabs-vertical > li.active > a::after {
top: 0;
bottom: 0;
left: auto;
right: -3px;
width: 3px;
height: auto;
}
/* ============================================
16.5. TAB RESPONSIVE
============================================ */
@media (max-width: 768px) {
.nav-tabs {
padding: 6px;
gap: 4px;
}
.nav-tabs > li > a {
padding: 10px 14px;
font-size: 13px;
gap: 6px;
}
.nav-tabs > li > a i {
font-size: 16px;
}
.tab-content {
padding: 15px;
}
}
@media (max-width: 480px) {
.nav-tabs > li > a {
padding: 8px 10px;
font-size: 12px;
}
.nav-tabs > li > a i {
font-size: 14px;
}
/* Nascondi testo, mostra solo icone su schermi molto piccoli */
.nav-tabs.tabs-icon-only > li > a span {
display: none;
}
.nav-tabs.tabs-icon-only > li > a {
padding: 10px;
min-width: 44px;
justify-content: center;
}
}
/* ====================================================================
TAB NAVIGATION - ULTRA COMPACT VERSION (edit_trattamento.html)
==================================================================== */
/* Tab container - riduzione massima spazio verticale e orizzontale */
#myTabMedico,
#myTabBiologo {
border-bottom: 2px solid #00695c !important;
margin-bottom: 8px !important; /* RIDOTTO da 15-20px */
padding-left: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 3px !important; /* RIDOTTO: spazio minimo tra le tab */
font-family: 'Titillium Web', sans-serif !important;
}
/* Singolo elemento lista - compattazione massima */
#myTabMedico > li,
#myTabBiologo > li {
margin-bottom: 0 !important;
margin-right: 0 !important; /* ELIMINATO spazio tra tab */
flex-shrink: 0 !important;
}
/* Link delle tab - riduzione padding e font */
#myTabMedico > li > a,
#myTabBiologo > li > a {
padding: 5px 10px !important; /* RIDOTTO da 12px 20px (~60%) */
font-size: 12px !important; /* RIDOTTO da 15-16px */
font-weight: 600 !important;
color: #495057 !important;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
border: 1px solid #dee2e6 !important;
border-bottom: none !important;
border-radius: 6px 6px 0 0 !important;
transition: all 0.2s ease !important;
display: flex !important;
align-items: center !important;
gap: 4px !important; /* RIDOTTO da 8px */
min-height: 32px !important; /* RIDOTTO da 44-48px */
white-space: nowrap !important;
text-decoration: none !important;
font-family: 'Titillium Web', sans-serif !important;
line-height: 1.2 !important;
}
/* Icone nelle tab - ridimensionate */
#myTabMedico > li > a i,
#myTabBiologo > li > a i {
font-size: 11px !important; /* RIDOTTO da 14-16px */
margin-right: 3px !important; /* RIDOTTO */
flex-shrink: 0 !important;
}
/* Hover state - compatto */
#myTabMedico > li > a:hover,
#myTabBiologo > li > a:hover {
background: linear-gradient(135deg, #00897b 0%, #00695c 100%) !important;
color: #ffffff !important;
border-color: #00695c !important;
transform: translateY(-1px) !important; /* RIDOTTO da -2px */
box-shadow: 0 2px 6px rgba(0, 105, 92, 0.2) !important;
}
/* Tab attiva - versione compatta */
#myTabMedico > li.active > a,
#myTabMedico > li.active > a:hover,
#myTabMedico > li.active > a:focus,
#myTabBiologo > li.active > a,
#myTabBiologo > li.active > a:hover,
#myTabBiologo > li.active > a:focus {
background: linear-gradient(135deg, #00695c 0%, #004d40 100%) !important;
color: #ffffff !important;
border-color: #00695c !important;
border-bottom: 2px solid #00695c !important;
box-shadow: 0 3px 8px rgba(0, 105, 92, 0.3) !important;
font-weight: 700 !important;
transform: translateY(0) !important;
}
/* Focus state - accessibilità */
#myTabMedico > li > a:focus,
#myTabBiologo > li > a:focus {
outline: 2px solid #00695c !important;
outline-offset: 1px !important;
z-index: 10 !important;
}
/* Variante tab biologiche (myTabBiologo) - tema blu */
#myTabBiologo > li > a {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
color: #1565c0 !important;
border-color: #90caf9 !important;
}
#myTabBiologo > li > a:hover {
background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%) !important;
color: #ffffff !important;
border-color: #1565c0 !important;
}
#myTabBiologo > li.active > a,
#myTabBiologo > li.active > a:hover,
#myTabBiologo > li.active > a:focus {
background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%) !important;
color: #ffffff !important;
border-color: #1565c0 !important;
border-bottom: 2px solid #1565c0 !important;
}
/* Contenuto tab - margine ridotto */
.tab-content {
padding-top: 8px !important; /* RIDOTTO da 15-20px */
min-height: 100px !important;
}
/* Responsive - Tablet */
@media (max-width: 992px) {
#myTabMedico > li > a,
#myTabBiologo > li > a {
padding: 4px 8px !important;
font-size: 11px !important;
min-height: 30px !important;
gap: 3px !important;
}
#myTabMedico > li > a i,
#myTabBiologo > li > a i {
font-size: 10px !important;
margin-right: 2px !important;
}
#myTabMedico,
#myTabBiologo {
gap: 2px !important;
}
}
/* Responsive - Mobile */
@media (max-width: 768px) {
#myTabMedico,
#myTabBiologo {
gap: 2px !important;
margin-bottom: 6px !important;
}
#myTabMedico > li > a,
#myTabBiologo > li > a {
padding: 3px 6px !important;
font-size: 10px !important;
min-height: 28px !important;
gap: 2px !important;
}
#myTabMedico > li > a i,
#myTabBiologo > li > a i {
font-size: 9px !important;
margin-right: 2px !important;
}
/* Su mobile: possibilità di nascondere testo e mostrare solo icone */
#myTabMedico.tabs-icon-only-mobile > li > a i,
#myTabBiologo.tabs-icon-only-mobile > li > a i {
margin-right: 0 !important;
font-size: 14px !important;
}
#myTabMedico.tabs-icon-only-mobile > li > a,
#myTabBiologo.tabs-icon-only-mobile > li > a {
padding: 6px 8px !important;
min-width: 36px !important;
justify-content: center !important;
}
}
/* Variante ULTRA-COMPACT (opzionale) - per pagine con molte tab */
#myTabMedico.tabs-ultra-compact > li > a,
#myTabBiologo.tabs-ultra-compact > li > a {
padding: 3px 8px !important;
font-size: 11px !important;
min-height: 28px !important;
gap: 3px !important;
}
#myTabMedico.tabs-ultra-compact > li > a i,
#myTabBiologo.tabs-ultra-compact > li > a i {
font-size: 10px !important;
}
/* Scroll orizzontale per molte tab - evita overflow */
.nav-tabs-wrapper {
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: thin !important;
scrollbar-color: #00695c #f8f9fa !important;
}
.nav-tabs-wrapper::-webkit-scrollbar {
height: 4px !important;
}
.nav-tabs-wrapper::-webkit-scrollbar-track {
background: #f8f9fa !important;
border-radius: 2px !important;
}
.nav-tabs-wrapper::-webkit-scrollbar-thumb {
background: #00695c !important;
border-radius: 2px !important;
}
.nav-tabs-wrapper::-webkit-scrollbar-thumb:hover {
background: #004d40 !important;
}
/* Messaggio relazione finale */
.messaggio-relazione {
background-color: #fff3cd;
border-left: 4px solid #ffc107;
padding: 6px;
margin: 2px 0;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.messaggio-relazione h4 {
color: #856404;
font-family: 'Titillium Web', sans-serif !important;
font-size: 14px;
font-weight: 600;
margin: 0;
}
/* Contenuto tab */
.tab-content {
background-color: #ffffff;
padding: 25px;
border: 2px solid #dee2e6;
border-top: none;
border-radius: 0 0 8px 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
/* ============================================
17. CERTIFICAZIONI
============================================ */
.myCertDonna {
background-color: rgba(194, 24, 91, 0.15);
padding: 16px;
border: 2px solid #c2185b;
border-radius: 4px;
}
.myCertUomo {
background-color: rgba(25, 118, 210, 0.15);
padding: 16px;
border: 2px solid #1976d2;
border-radius: 4px;
}
/* ============================================
18. SITUAZIONE E CUSTOM
============================================ */
.p_custom {
font-weight: 600;
line-height: 1.5;
}
.mySituazione {
background-color: #f8d7da;
border: 2px solid #c92a2a;
border-radius: 6px;
padding: 12px;
font-weight: 600;
}
/* ============================================
19. CLOSE BUTTON
============================================ */
.myclosebtn {
margin: 2px;
font-size: 32px;
font-weight: 700;
cursor: pointer;
vertical-align: text-top;
color: #6c757d;
background: none;
border: none;
padding: 8px;
min-width: 44px;
min-height: 44px;
transition: all 0.2s ease;
}
.myclosebtn:hover {
color: #212529;
transform: scale(1.1);
}
.myclosebtn:focus {
outline: 3px solid #0056b3;
outline-offset: 2px;
}
/* ============================================
20. LOGIN PAGE
============================================ */
.login-page {
background: linear-gradient(135deg, #00695c 0%, #00897b 100%), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-blend-mode: overlay;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.login-container {
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
.login-header {
background: linear-gradient(135deg, #00695c 0%, #00897b 100%);
color: #ffffff;
padding: 20px 30px;
border-radius: 15px 15px 0 0;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
border-bottom: 5px solid #004d40;
}
.login-header-logos {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
text-align: left;
}
.login-hospital-logo {
max-height: 90px;
height: auto;
}
.login-header-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.login-header-title {
font-size: 1.8rem;
font-weight: 700;
margin: 0;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.login-header-subtitle {
font-size: 1.2rem;
margin: 5px 0 0 0;
font-weight: 500;
color: #e0f2f1;
}
.login-card {
background: white;
border-radius: 0 0 15px 15px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15);
overflow: hidden;
}
.login-card-body {
padding: 25px 20px;
}
.login-image-section {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
border-right: 3px solid #e0e0e0;
max-height: 400px;
}
.login-image {
max-width: 100%;
max-height: 360px;
width: auto;
height: auto;
border-radius: 10px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
object-fit: contain;
}
.login-form-section {
padding: 20px 25px;
}
.login-brand {
text-align: center;
margin-bottom: 20px;
padding: 15px;
background: linear-gradient(135deg, #e7ecee 0%, #f5f7fa 100%);
border-radius: 10px;
}
.login-brand-logo {
width: 40px;
height: auto;
margin-bottom: 8px;
}
.login-brand-title {
color: #1e3c72;
font-size: 24px;
font-weight: 700;
margin: 8px 0 0 0;
}
.login-medical-icons {
display: flex;
justify-content: space-around;
margin-top: 20px;
margin-bottom: 10px;
padding: 15px 10px;
}
.medical-icon-item {
text-align: center;
flex: 1;
}
.medical-icon {
font-size: 36px;
color: #00695c;
margin-bottom: 8px;
animation: pulse 2s infinite;
}
.medical-icon-item p {
font-size: 13px;
font-weight: 600;
color: #333;
margin: 0;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.login-input-group {
margin-bottom: 15px;
position: relative; /* Importante per il toggle password */
}
/* Input base login - SPECIFICITÀ ALTA per sovrascrivere altri stili */
input.login-input,
input.login-input-username,
input.login-input-password {
width: 100% !important;
height: 50px !important;
min-height: 50px !important;
padding: 12px 12px 12px 45px !important;
border: 2px solid #e0e0e0 !important;
border-radius: 10px !important; /* BORDI ARROTONDATI */
font-size: 15px !important;
font-family: 'Titillium Web', sans-serif !important;
font-weight: 500 !important;
color: #212529 !important;
line-height: 1.5 !important;
transition: all 0.3s ease !important;
background-size: 22px !important;
background-position: 12px center !important;
background-repeat: no-repeat !important;
background-color: #ffffff !important;
box-sizing: border-box !important;
}
/* Focus UGUALE per entrambi - BLU ARROTONDATO */
input.login-input:focus,
input.login-input-username:focus,
input.login-input-password:focus {
border-color: #667eea !important; /* BLU */
border-radius: 10px !important; /* ARROTONDATO */
outline: none !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}
/* Placeholder UGUALE per entrambi */
input.login-input::placeholder,
input.login-input-username::placeholder,
input.login-input-password::placeholder {
color: #999 !important;
font-weight: 400 !important;
opacity: 1 !important;
}
/* Username - con icona utente */
input.login-input-username {
background-image: url('/static/img/icon-form-user_26.png') !important;
}
/* Password - con icona lucchetto e spazio per toggle */
input.login-input-password {
background-image: url('/static/img/icon-form-pw-26.png') !important;
padding-right: 50px !important; /* Spazio per icona toggle */
}
.login-input {
width: 100%;
height: 50px; /* ALTEZZA FISSA ESPLICITA */
min-height: 50px; /* AGGIUNTO per sicurezza */
padding: 12px 12px 12px 45px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 15px;
font-family: 'Titillium Web', sans-serif !important;
font-weight: 500;
color: #212529;
line-height: 1.5;
transition: all 0.3s ease;
background-size: 22px;
background-position: 12px center;
background-repeat: no-repeat;
background-color: #ffffff;
box-sizing: border-box; /* IMPORTANTE: include border e padding nell'altezza */
}
.login-input:focus {
border-color: #667eea;
outline: none;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.login-input::placeholder {
color: #999;
font-weight: 400;
}
/* Username input - con icona */
.login-input-username {
background-image: url('/static/img/icon-form-user_26.png');
height: 50px; /* ESPLICITA */
min-height: 50px;
}
/* Password input - con icona */
.login-input-password {
background-image: url('/static/img/icon-form-pw-26.png');
height: 50px; /* ESPLICITA */
min-height: 50px;
padding-right: 45px; /* AGGIUNTO: spazio per l'icona toggle */
}
/* Toggle visibilità password */
.login-password-toggle {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #999;
font-size: 18px;
transition: color 0.2s ease;
z-index: 10;
pointer-events: auto; /* Assicura che sia cliccabile */
}
.login-password-toggle:hover {
color: #667eea;
}
.login-password-toggle:focus {
outline: 2px solid #667eea;
outline-offset: 2px;
border-radius: 4px;
}
/* IMPORTANTE: Sovrascrivi stili globali input che potrebbero interferire */
.login-page input[type="text"],
.login-page input[type="password"] {
border-radius: 10px !important;
}
.login-page input[type="text"]:focus,
.login-page input[type="password"]:focus {
border-color: #667eea !important;
border-radius: 10px !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}
.login-certifications {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin-top: 20px;
margin-bottom: 10px;
padding-top: 20px;
border-top: 2px solid #e0e0e0;
flex-wrap: wrap;
}
.cert-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 12px;
background-color: #f8f9fa;
border-radius: 8px;
border: 2px solid #00695c;
min-width: 130px;
transition: all 0.3s ease;
}
.cert-badge i {
font-size: 18px;
color: #00695c;
}
.cert-badge span {
font-size: 12px;
font-weight: 600;
color: #333;
}
.cert-badge img {
max-height: 26px;
max-width: 100%;
object-fit: contain;
}
.cert-badge:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 105, 92, 0.2);
border-color: #004d40;
background-color: #e8f5f3;
}
.cert-badge:hover i {
color: #004d40;
}
.login-submit-btn {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
border-radius: 10px;
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.login-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.login-submit-btn:active {
transform: translateY(0);
}
.login-links {
text-align: center;
margin-top: 15px;
}
.login-link {
display: block;
color: #667eea;
font-weight: 600;
font-size: 14px;
text-decoration: none;
padding: 8px;
transition: all 0.3s ease;
border-radius: 5px;
}
.login-link:hover {
background-color: #f5f7fa;
color: #764ba2;
text-decoration: none;
}
.login-link-primary {
color: #e74c3c;
font-size: 15px;
}
.login-alert {
border-radius: 10px;
padding: 12px 18px;
margin: 15px 0;
position: relative;
font-size: 14px;
}
.login-alert-success {
background-color: #d4edda;
border: 2px solid #c3e6cb;
color: #155724;
}
.login-alert-error {
background-color: #f8d7da;
border: 2px solid #f5c6cb;
color: #721c24;
}
.login-alert-warning {
background-color: #fff3cd;
border: 2px solid #ffeaa7;
color: #856404;
}
.login-alert-close {
position: absolute;
top: 8px;
right: 12px;
font-size: 20px;
font-weight: bold;
color: inherit;
cursor: pointer;
background: none;
border: none;
opacity: 0.7;
}
.login-alert-close:hover {
opacity: 1;
}
.login-footer {
text-align: center;
margin-top: 15px;
padding: 15px;
color: white;
font-size: 16px;
}
.login-footer a {
color: white;
text-decoration: underline;
}
.login-footer p {
margin-top: 10px;
margin-bottom: 0;
}
@media (max-width: 992px) {
.login-header-logos {
flex-direction: column;
text-align: center;
gap: 12px;
}
.login-header-text {
text-align: center;
}
.login-header-title {
font-size: 17px;
}
.login-header-subtitle {
font-size: 13px;
}
.login-image-section {
border-right: none;
border-bottom: 3px solid #e0e0e0;
padding: 20px;
max-height: 300px;
}
.login-image {
max-height: 260px;
}
.login-form-section {
padding: 20px 15px;
}
.login-certifications {
gap: 12px;
}
.cert-badge {
min-width: 110px;
font-size: 11px;
padding: 6px 10px;
}
.medical-icon {
font-size: 32px;
}
.medical-icon-item p {
font-size: 12px;
}
}
@media (max-width: 768px) {
.login-page {
padding: 5px;
}
.login-header {
padding: 12px 15px;
}
.login-hospital-logo {
height: 40px;
}
.login-header-title {
font-size: 15px;
}
.login-header-subtitle {
font-size: 12px;
}
.login-brand-title {
font-size: 20px;
}
.login-brand-logo {
width: 35px;
}
.login-submit-btn {
font-size: 15px;
padding: 10px;
}
.cert-badge {
min-width: 95px;
padding: 6px 8px;
}
.cert-badge i {
font-size: 16px;
}
.cert-badge span {
font-size: 11px;
}
.medical-icon {
font-size: 28px;
}
.medical-icon-item p {
font-size: 11px;
}
.login-card-body {
padding: 20px 15px;
}
}
@media (min-width: 993px) and (max-width: 1200px) {
.login-image {
max-height: 340px;
}
.login-image-section {
max-height: 380px;
}
}
/* ============================================
21. LAYOUT - SEZIONE PRINCIPALE
============================================ */
div.menu_sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 0;
z-index: 1000;
white-space: nowrap;
overflow: visible;
background-color: white;
}
div.relative_menu {
position: -webkit-sticky;
position: relative;
top: 0;
right: 0;
width: 100%;
margin: 4px;
z-index: 1;
}
.container-fluid.relative_menu {
position: relative;
z-index: 1;
}
div.titolo {
height: 30px;
width: 100%;
height: 80px;
border: 1px solid #4CAF50;
}
.titolo-header {
height: 80px;
}
span.titolo {
height: 10px;
}
.header-title {
color: darkblue;
text-align: center;
}
.right {
position: absolute;
right: 0px;
bottom: 2px;
width: 100%;
padding: 2px;
}
.my_footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: white;
color: white;
text-align: center;
}
/* DATA_STICKY*/
div.data_sticky {
position: -webkit-sticky;
position: sticky;
top: 80px; /* RIDOTTO da 100px a 80px */
z-index: 2;
white-space: nowrap;
overflow: hidden;
background-color: white;
box-shadow: 0 5px 4px -3px rgba(0, 0, 0, 0.4);
margin-bottom: 5px; /* AGGIUNTO: riduce lo spazio sotto sticky */
padding-bottom: 5px; /* AGGIUNTO: riduce padding interno */
}
/* Copertura SUPERIORE - nasconde contenuto che scorre verso l'alto */
div.data_sticky::before {
content: '';
position: absolute;
top: -50px;
left: 0;
right: 0;
height: 50px;
background-color: #ffffff;
z-index: 101;
pointer-events: none;
}
/* Copertura INFERIORE con sfumatura */
div.data_sticky::after {
content: '';
position: absolute;
bottom: -20px;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
pointer-events: none;
z-index: 101;
}
/* RELATIVE_DATA*/
div.relative_data {
position: relative;
top: 0;
right: 0;
width: 100%;
margin: 0; /* RIDOTTO da 4px a 0 */
padding-top: 0; /* AGGIUNTO: elimina padding sopra */
z-index: 1;
}
/* Wrapper per il contenuto scrollabile */
.content-wrapper {
position: relative;
background-color: #ffffff;
margin-top: 10px;
padding-top: 10px;
min-height: 200px;
}
/* ============================================
22. BLOC NOTES E MESSAGGI
============================================ */
.blocconotes {
width: 300px;
background-color: yellow;
box-shadow: 10px 10px 5px #888888;
text-align: center;
border: 10px;
}
.div-1 {
background-color: yellow;
}
.div-2 {
margin-bottom: 15px;
padding: 4px 12px;
}
.danger {
background-color: #ffdddd;
border-left: 6px solid #f44336;
}
.success {
background-color: #ddffdd;
border-left: 6px solid #4CAF50;
}
.info {
background-color: #e7f3fe;
border-left: 6px solid #2196F3;
}
.warning {
background-color: #ffffcc;
border-left: 6px solid #ffeb3b;
}
#TabMessaggi .tab-content {
color: white;
background-color: white;
padding: 5px 15px;
}
/* ============================================
22.5. ALERT E NOTIFICHE MODERNE (VERSIONE COMPATTA)
============================================ */
/* Alert container base - versione compatta */
.alert-modern {
position: relative;
padding: 12px 16px;
margin-bottom: 15px;
border-radius: 8px;
border-left: 5px solid;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 12px;
animation: slideInDown 0.4s ease-out;
min-height: 48px;
transition: all 0.3s ease;
}
.alert-modern:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
/* Icona alert - ridimensionata */
.alert-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
/* Contenuto alert - tutto su una riga */
.alert-content {
flex: 1;
display: flex;
align-items: center;
padding: 0;
line-height: 1.4;
}
.alert-title {
display: none; /* Non più utilizzato */
}
.alert-message {
font-size: 15px;
font-weight: 500;
margin: 0;
line-height: 1.4;
color: inherit;
}
.alert-message strong {
font-weight: 700;
margin-right: 4px;
}
/* Pulsante chiudi alert - VERSIONE PIÙ GRANDE */
.alert-close {
flex-shrink: 0;
background: none;
border: none;
font-size: 26px;
font-weight: 700;
color: inherit;
cursor: pointer;
padding: 6px 10px;
opacity: 0.7;
transition: all 0.2s ease;
min-width: 36px;
min-height: 36px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
margin-left: auto;
}
.alert-close:hover {
opacity: 1;
background-color: rgba(0, 0, 0, 0.15);
transform: scale(1.15);
}
.alert-close:active {
transform: scale(1.05);
}
.alert-close:focus {
outline: 3px solid currentColor;
outline-offset: 2px;
opacity: 1;
}
/* Mobile - ancora più grande */
@media (max-width: 768px) {
.alert-close {
font-size: 28px;
min-width: 40px;
min-height: 40px;
padding: 8px 12px;
}
}
/* SUCCESS - Verde */
.alert-success-modern {
background-color: #d4edda;
border-color: #28a745;
color: #155724;
}
.alert-success-modern .alert-icon {
background-color: #28a745;
color: #ffffff;
}
.alert-success-modern .alert-icon::before {
content: '\f058'; /* fa-circle-check */
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
/* ERROR/DANGER - Rosso */
.alert-error-modern {
background-color: #f8d7da;
border-color: #dc3545;
color: #721c24;
}
.alert-error-modern .alert-icon {
background-color: #dc3545;
color: #ffffff;
}
.alert-error-modern .alert-icon::before {
content: '\f06a'; /* fa-circle-exclamation */
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
/* WARNING - Giallo/Arancione */
.alert-warning-modern {
background-color: #fff3cd;
border-color: #ffc107;
color: #856404;
}
.alert-warning-modern .alert-icon {
background-color: #ffc107;
color: #212529;
}
.alert-warning-modern .alert-icon::before {
content: '\f071'; /* fa-triangle-exclamation */
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
/* INFO - Blu */
.alert-info-modern {
background-color: #d1ecf1;
border-color: #17a2b8;
color: #0c5460;
}
.alert-info-modern .alert-icon {
background-color: #17a2b8;
color: #ffffff;
}
.alert-info-modern .alert-icon::before {
content: '\f05a'; /* fa-circle-info */
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
/* Animazioni */
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeOut {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.95);
}
}
.alert-dismissing {
animation: fadeOut 0.3s ease-out forwards;
}
/* Variante extra compatta (opzionale) */
.alert-modern.alert-xs {
padding: 8px 12px;
min-height: 40px;
gap: 10px;
}
.alert-modern.alert-xs .alert-icon {
width: 28px;
height: 28px;
font-size: 16px;
}
.alert-modern.alert-xs .alert-message {
font-size: 14px;
}
/* Container per alert multipli (toast-style) */
.alerts-container {
position: fixed;
top: 90px;
right: 20px;
z-index: 1070;
max-width: 450px;
width: 100%;
pointer-events: none;
}
.alerts-container .alert-modern {
pointer-events: all;
margin-bottom: 12px;
}
/* Responsive */
@media (max-width: 768px) {
.alert-modern {
padding: 10px 12px;
gap: 10px;
min-height: 44px;
}
.alert-icon {
width: 28px;
height: 28px;
font-size: 16px;
}
.alert-message {
font-size: 14px;
}
.alerts-container {
top: 70px;
right: 10px;
left: 10px;
max-width: none;
}
}
/* Progress bar per auto-dismiss (opzionale) */
.alert-progress {
position: absolute;
bottom: 0;
left: 0;
height: 3px;
background-color: currentColor;
opacity: 0.3;
animation: shrinkWidth 5s linear;
}
@keyframes shrinkWidth {
from {
width: 100%;
}
to {
width: 0%;
}
}
/* ============================================
23. FIXED E RELATIVE POSITIONING
============================================ */
div.fixed_anag {
position: fixed;
top: 90px;
left: 270px;
right: 10px;
z-index: 0;
white-space: nowrap;
overflow: hidden;
}
div.fixed_menu {
position: fixed;
top: 180px;
left: 270px;
right: 10px;
z-index: 0;
white-space: nowrap;
overflow: hidden;
}
div.relative {
position: relative;
top: 80px;
bottom: 80px;
left: 10px;
right: 10px;
z-index: -1;
white-space: nowrap;
overflow: hidden;
}
/* ============================================
24. AUTOCOMPLETE
============================================ */
.autocomplete {
position: relative;
display: inline-block;
}
/* Input autocomplete - Allineato con .mytext */
.autocomplete input[type=text] {
width: 100%;
height: auto;
min-height: 44px;
border: 2px solid #6c757d;
border-radius: 4px;
font-size: 16px;
font-style: normal;
font-weight: 600;
padding: 10px 12px;
background-color: #ffffff !important;
transition: all 0.2s ease;
}
.autocomplete input[type=text]:focus {
outline: 3px solid #0056b3;
outline-offset: 2px;
border-color: #0056b3;
box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.1);
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
top: 100%;
left: 0;
right: 0;
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-radius: 0 0 4px 4px;
}
.autocomplete-items div {
padding: 10px 12px;
cursor: pointer;
background-color: #ffffff;
border-bottom: 1px solid #e9ecef;
transition: background-color 0.2s ease;
font-size: 16px;
font-weight: 500;
}
.autocomplete-items div:hover {
background-color: #f8f9fa;
}
.autocomplete-items div:last-child {
border-bottom: none;
border-radius: 0 0 4px 4px;
}
.autocomplete-active {
background-color: #0056b3 !important;
color: #ffffff;
font-weight: 600;
}
/* ============================================
25. NAVBAR SUPERIORE E BREADCRUMBS
============================================ */
.navbar-main {
height: auto;
min-height: 50px;
padding: 5px 10px;
background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border-bottom: 1px solid #dee2e6;
position: relative;
z-index: 1010;
}
.nav-item.dropdown {
position: relative;
z-index: 1050;
}
.nav-item.dropdown .nav-link {
position: relative;
z-index: 1051;
}
.nav-item.dropdown.show {
z-index: 1060 !important;
}
.navbar-row {
width: 100%;
min-height: 50px;
display: flex;
align-items: center;
}
.sidebar-toggle-btn {
margin-left: 5px;
margin-top: 0;
padding: 6px;
border-radius: 6px;
transition: all 0.3s ease;
cursor: pointer;
}
.sidebar-toggle-btn:hover {
background-color: #e9ecef;
}
.sidebar-toggle .hamburger {
width: 20px;
height: 20px;
color: #00695c;
}
.breadcrumb-container {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 0;
font-size: 13px;
}
.breadcrumb-link {
color: #495057;
text-decoration: none;
font-weight: 500;
padding: 3px 6px;
border-radius: 4px;
transition: all 0.2s ease;
font-size: 13px;
}
.breadcrumb-link:hover {
background-color: #00695c;
color: white;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 105, 92, 0.2);
}
.breadcrumb-link:active {
transform: translateY(0);
}
.breadcrumb-link:first-child::before {
content: '\1F3E0';
margin-right: 6px;
font-size: 14px;
}
.breadcrumb-separator {
color: #adb5bd;
font-size: 14px;
margin: 0 2px;
}
.breadcrumb-link.active {
background-color: #00695c;
color: white;
cursor: default;
pointer-events: none;
font-weight: 700;
}
/* ============================================
26. USER INFO - NAVBAR DESTRA
============================================ */
.navbar-collapse-custom {
margin-right: 10px;
}
.user-info-container {
display: flex;
align-items: center;
gap: 8px;
position: relative;
z-index: 1050;
}
.user-info {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 8px;
border-radius: 8px;
transition: all 0.2s ease;
cursor: pointer;
}
.user-info:hover {
background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
border-color: #00695c;
box-shadow: 0 4px 12px rgba(0, 105, 92, 0.15);
}
.user-info-text {
text-align: right;
line-height: 1.2;
margin-right: 4px;
}
.user-info-role {
font-size: 11px;
color: #6c757d;
font-weight: 500;
margin-bottom: 1px;
}
.user-info-name {
font-size: 13px;
font-weight: 600;
color: #212529;
}
.avatar-icon {
width: 34px;
height: 34px;
border-radius: 50%;
border: 2px solid #00695c;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
object-fit: cover;
}
.user-info:hover .avatar-icon {
transform: scale(1.1);
border-color: #004d40;
}
.notification-badge {
position: relative;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: all 0.3s ease;
}
.notification-badge:hover {
background-color: #f8f9fa;
}
.notification-badge i {
font-size: 22px;
color: #495057;
}
.notification-badge .badge {
position: absolute;
top: 2px;
right: 2px;
background-color: #dc3545;
color: white;
border-radius: 10px;
padding: 2px 6px;
font-size: 10px;
font-weight: 700;
min-width: 18px;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.quick-actions-btn {
padding: 8px 16px;
background: linear-gradient(135deg, #00695c 0%, #00897b 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.quick-actions-btn:hover {
background: linear-gradient(135deg, #004d40 0%, #00695c 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 105, 92, 0.3);
}
.quick-actions-btn i {
font-size: 16px;
}
.global-search {
position: relative;
max-width: 300px;
margin-right: 15px;
}
.global-search input {
width: 100%;
padding: 10px 40px 10px 40px;
border: 2px solid #e9ecef;
border-radius: 25px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
}
.global-search input:focus {
outline: none;
border-color: #00695c;
box-shadow: 0 0 0 3px rgba(0, 105, 92, 0.1);
}
.global-search .search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
font-size: 16px;
}
.global-search .clear-icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #6c757d;
font-size: 14px;
cursor: pointer;
display: none;
}
.global-search input:not(:placeholder-shown) ~ .clear-icon {
display: block;
}
.dropdown-menu {
position: absolute;
z-index: 1055 !important;
border-radius: 8px;
border: 1px solid #e9ecef;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
padding: 4px 0;
margin-top: 6px;
background-color: white;
}
.dropdown-menu.show {
z-index: 1060 !important;
}
.dropdown-item-compact {
padding: 6px 15px;
font-size: 14px;
font-weight: 500;
color: #495057;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 10px;
}
.dropdown-item-compact:hover {
background-color: #f8f9fa;
color: #00695c;
padding-left: 18px;
}
.dropdown-item-compact i {
width: 18px;
font-size: 14px;
}
.dropdown-divider {
margin: 4px 0;
border-top: 1px solid #e9ecef;
}
.dropdown-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
}
@media (max-width: 992px) {
.breadcrumb-container {
display: none;
}
.user-info-name {
font-size: 12px;
}
.user-info-role {
font-size: 10px;
}
.avatar-icon {
width: 32px;
height: 32px;
}
.global-search {
max-width: 200px;
}
}
@media (max-width: 768px) {
.navbar-main {
min-height: 45px;
padding: 4px 8px;
}
.navbar-row {
min-height: 45px;
}
.avatar-icon {
width: 30px;
height: 30px;
}
.sidebar-toggle-btn {
padding: 4px;
}
.sidebar-toggle .hamburger {
width: 18px;
height: 18px;
}
.user-info-text {
display: none;
}
.global-search {
display: none;
}
.quick-actions-btn span {
display: none;
}
}
/* ============================================
27. SEPARATORI E FOOTER
============================================ */
.separator-line {
height: 2px;
border-width: 0;
color: gray;
background-color: gray;
}
.footer-title {
color: #000000;
font-weight: 700;
font-size: 1.6rem;
letter-spacing: 0.7px;
font-family: 'Arial', sans-serif;
}
.footer-text {
color: #111111;
font-weight: 500;
font-size: 1.35rem;
line-height: 1.5;
letter-spacing: 0.35px;
font-family: 'Arial', sans-serif;
}
.divider-gradient {
border: none;
height: 2px;
margin: 6px 0;
background: linear-gradient( to right, transparent, #6c757d, transparent );
}
.divider-strong {
border: none;
height: 4px;
margin: 12px 0;
border-radius: 2px;
background: linear-gradient( to right, #00695c, #00897b, #26a69a );
box-shadow: 0 2px 6px rgba(0, 105, 92, 0.3);
}
/* ============================================
28. SIDEBAR MENU
============================================ */
.sidebar {
background-color: #f8f9fa;
border-right: 1px solid #dee2e6;
overflow-y: auto;
}
.sidebar-content {
padding: 10px 0;
}
.titolo-header {
background: linear-gradient(135deg, #00695c 0%, #00897b 100%);
color: #ffffff;
text-align: center;
padding: 18px 12px;
margin-bottom: 15px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.titolo-header .header-title {
font-size: 17px;
font-weight: 700;
margin: 0;
line-height: 1.4;
color: #ffffff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
letter-spacing: 0.3px;
}
.sidebar-brand {
display: block;
padding: 15px 20px;
transition: opacity 0.3s ease;
}
.sidebar-brand:hover {
opacity: 0.8;
}
.sidebar-brand img {
max-width: 100%;
height: auto;
}
.sidebar-nav {
padding: 0;
margin: 0;
list-style: none;
}
.sidebar-item {
margin-bottom: 2px;
}
.sidebar-link {
display: flex;
align-items: center;
padding: 14px 20px;
color: #2c3e50;
text-decoration: none;
transition: all 0.3s ease;
font-size: 16px;
font-weight: 600; /* Già grassetto - OK */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-left: 3px solid transparent;
}
.sidebar-link:hover {
background-color: #e3f2fd;
color: #00695c;
text-decoration: none;
padding-left: 24px;
border-left: 3px solid #00695c;
}
.sidebar-link:active,
.sidebar-link.active {
background-color: #00695c;
color: white;
border-left: 3px solid #004d40;
}
.sidebar-link i,
.sidebar-link [data-feather] {
width: 22px;
height: 22px;
margin-right: 14px;
flex-shrink: 0;
stroke-width: 2.5px;
}
.sidebar-link .align-middle {
flex: 1;
font-size: 16px;
line-height: 1.5;
font-weight: 600; /* Già grassetto - OK */
}
.sidebar-dropdown {
list-style: none;
padding-left: 0;
margin: 0;
background-color: #f8f9fa;
border-left: 2px solid #00695c;
}
.sidebar-dropdown .sidebar-link {
padding: 12px 20px 12px 55px;
font-size: 15px;
font-weight: 600; /* CAMBIATO: era 500, ora 600 per grassetto */
}
.sidebar-dropdown .sidebar-link:hover {
padding-left: 59px;
background-color: #e8f5e9;
}
/* Submenu di secondo livello - CAMBIATO DA 500 A 600 */
.sidebar-dropdown .sidebar-dropdown {
background-color: #f1f3f5;
border-left: 2px solid #4db6ac;
}
.sidebar-dropdown .sidebar-dropdown .sidebar-link {
padding-left: 75px;
font-size: 14px;
font-weight: 600; /* CAMBIATO: era 500, ora 600 per grassetto */
}
.sidebar-dropdown .sidebar-dropdown .sidebar-link:hover {
padding-left: 79px;
background-color: #e0f2f1;
}
.sidebar-link.collapsed[data-toggle="collapse"]::after {
content: '\25BC';
font-size: 11px;
margin-left: auto;
transition: transform 0.3s ease;
color: #00695c;
font-weight: bold;
}
.sidebar-link:not(.collapsed)[data-toggle="collapse"]::after {
content: '\25B2';
font-size: 11px;
margin-left: auto;
color: #00695c;
font-weight: bold;
}
.collapse:not(.show) {
display: none;
}
.collapsing {
transition: height 0.35s ease;
}
@media (max-width: 768px) {
.titolo-header .header-title {
font-size: 15px;
}
.sidebar-link {
font-size: 15px;
padding: 12px 15px;
}
.sidebar-link .align-middle {
font-size: 15px;
}
.sidebar-dropdown .sidebar-link {
font-size: 14px;
padding-left: 45px;
}
.sidebar-dropdown .sidebar-dropdown .sidebar-link {
font-size: 13px;
padding-left: 60px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.titolo-header .header-title {
font-size: 16px;
}
.sidebar-link {
font-size: 15px;
}
.sidebar-link .align-middle {
font-size: 15px;
}
}
.sidebar::-webkit-scrollbar {
width: 10px;
}
.sidebar::-webkit-scrollbar-track {
background: #f1f3f5;
}
.sidebar::-webkit-scrollbar-thumb {
background: #00695c;
border-radius: 5px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
background: #004d40;
}
.sidebar-link:focus {
outline: 2px solid #00695c;
outline-offset: -2px;
}
.sidebar-item.active > .sidebar-link {
background-color: #00695c;
color: white;
font-weight: 700;
}
/* ============================================
29. FONT AWESOME - ICONE
============================================ */
.fas, .far, .fab, .fa {
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
font-weight: 900;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block;
}
.far {
font-weight: 400 !important;
}
.fab {
font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
font-weight: 400 !important;
}
.medical-icon,
.cert-badge i,
.login-link i,
.login-submit-btn i,
.login-password-toggle {
display: inline-block !important;
font-style: normal !important;
font-variant: normal !important;
text-rendering: auto !important;
line-height: 1 !important;
}
/* ============================================
SEZIONE AREE ABILITATE - DESIGN MODERNO COMPATTO
============================================ */
.aree-abilitate-card {
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
margin: 20px 0;
overflow: hidden;
transition: box-shadow 0.3s ease;
}
.aree-abilitate-card:hover {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
/* Header della Card - PIÙ COMPATTO */
.aree-abilitate-header {
background: linear-gradient(135deg, #00695c 0%, #00897b 100%);
color: white;
padding: 15px 20px;
display: flex; /* disposizione orizzontale */
align-items: center; /* allineamento verticale */
justify-content: center; /* centrato orizzontalmente */
gap: 12px; /* spazio tra elementi */
text-align: left; /* evita centratura testo interna */
}
.aree-abilitate-header i {
font-size: 1.8rem;
margin-bottom: 0; /* rimosso margine verticale */
opacity: 0.95;
}
.aree-abilitate-header h4 {
margin: 0; /* rimosi margini verticali */
font-size: 1.25rem;
font-weight: 700;
}
.aree-abilitate-header .subtitle {
margin: 0;
font-size: 0.95rem;
opacity: 0.92;
font-weight: 500;
}
/* Body della Card - PADDING RIDOTTO */
.aree-abilitate-body {
padding: 20px 15px;
}
/* Gruppi di Aree - MENO SPAZIO */
.area-group {
margin-bottom: 20px;
padding-bottom: 18px;
border-bottom: 1px dashed #dee2e6;
}
.area-group:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.area-group .group-title {
color: #2c3e50;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 3px solid #667eea;
display: inline-block;
}
.area-group .group-title i {
color: #667eea;
margin-right: 12px;
font-size: 1.6rem; /* Icona molto più grande */
vertical-align: middle;
display: inline-block;
}
/* Checkbox Cards - MOLTO PIÙ COMPATTI */
.checkbox-card {
background: #f8f9fa;
border: 2px solid #e0e0e0;
border-radius: 6px;
padding: 10px 12px;
margin-bottom: 10px;
transition: all 0.25s ease;
cursor: pointer;
position: relative;
min-height: 50px;
display: flex;
align-items: center;
}
.checkbox-card:hover {
background: #ffffff;
border-color: #667eea;
box-shadow: 0 2px 6px rgba(102, 126, 234, 0.12);
transform: translateY(-1px);
}
.checkbox-card.alert-checkbox {
background: #fff5f5;
border-color: #fecaca;
}
.checkbox-card.alert-checkbox:hover {
background: #ffffff;
border-color: #f87171;
}
/* Custom Checkbox Styling - PIÙ GRANDE */
.custom-checkbox {
width: 22px;
height: 22px;
cursor: pointer;
margin-right: 10px;
accent-color: #667eea;
flex-shrink: 0;
}
.checkbox-label {
cursor: pointer;
margin: 0px 0px 0px 10px;
font-size: 1.5rem;
font-weight: 600;
color: #2c3e50;
line-height: 1.3;
user-select: none;
}
.checkbox-label.danger-label {
color: #dc3545;
font-weight: 700;
}
/* Stato Checked */
.custom-checkbox:checked + .checkbox-label {
color: #667eea;
font-weight: 700;
}
.checkbox-card:has(.custom-checkbox:checked) {
background: #f0f4ff;
border-color: #667eea;
border-width: 2px;
box-shadow: 0 0 0 1px rgba(102, 126, 234, 0.1);
}
.checkbox-card.alert-checkbox:has(.custom-checkbox:checked) {
background: #fee2e2;
border-color: #ef4444;
}
/* Animazione Focus */
.custom-checkbox:focus {
outline: 3px solid #667eea;
outline-offset: 2px;
}
/* Responsive - 6 PER RIGA SU DESKTOP */
@media (min-width: 1200px) {
.area-group .row > div {
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.aree-abilitate-body {
padding: 18px 12px;
}
.area-group .group-title {
font-size: 1.05rem;
}
.checkbox-label {
font-size: 0.95rem;
}
}
@media (max-width: 991px) {
.aree-abilitate-body {
padding: 15px 10px;
}
.area-group {
margin-bottom: 15px;
padding-bottom: 15px;
}
.area-group .group-title {
font-size: 1rem;
}
.checkbox-card {
padding: 8px 10px;
min-height: 46px;
}
.checkbox-label {
font-size: 0.92rem;
}
}
@media (max-width: 768px) {
.aree-abilitate-header {
padding: 12px 15px;
}
.aree-abilitate-header i {
font-size: 1.5rem;
}
.aree-abilitate-header h4 {
font-size: 1.1rem;
}
.aree-abilitate-header .subtitle {
font-size: 0.88rem;
}
.checkbox-card {
padding: 8px 10px;
min-height: 44px;
}
.checkbox-label {
font-size: 0.9rem;
}
.custom-checkbox {
width: 20px;
height: 20px;
}
}
/* ============================================
SEZIONE FILTRI COMPATTI
============================================ */
.filter-section {
background: #ffffff;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.filter-header {
background: linear-gradient(135deg, #00695c 0%, #00897b 100%);
color: white;
padding: 10px 18px;
border-radius: 6px 6px 0 0;
margin: -15px -15px 12px -15px;
font-size: 1.425rem;
font-weight: 700;
text-align: center;
letter-spacing: 0.3px;
}
.filter-header i {
margin-right: 8px;
font-size: 1.35rem;
}
.filter-group {
padding: 12px;
border-radius: 6px;
background-color: #f8f9fa;
border: 1px solid #e9ecef;
margin-bottom: 12px;
min-height: 180px; /* ALTEZZA FISSA per uniformità */
display: flex;
flex-direction: column;
}
.filter-group-title {
font-size: 1.35rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 2px solid #00695c;
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0; /* Non si comprime */
}
.filter-group-title i {
color: #00695c;
font-size: 1.425rem;
}
/* Form Controls Compatti */
.filter-label {
font-size: 1.275rem;
font-weight: 600;
color: #495057;
margin-bottom: 5px;
display: block;
}
.filter-input,
.filter-select,
.filter-date {
width: 100%;
min-height: 42px;
padding: 8px 12px;
font-size: 1.35rem;
font-weight: 500;
border: 2px solid #ced4da;
border-radius: 4px;
background-color: #ffffff;
transition: all 0.2s ease;
}
.filter-input:focus,
.filter-select:focus,
.filter-date:focus {
outline: 2px solid #00695c;
outline-offset: 0;
border-color: #00695c;
box-shadow: 0 0 0 3px rgba(0, 105, 92, 0.1);
}
.filter-select {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 18px;
padding-right: 38px;
}
.filter-date {
text-align: center;
padding-right: 10px;
}
.filter-row {
margin-bottom: 8px;
}
/* Contenuto flessibile che riempie lo spazio */
.filter-group-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* Pulsanti Filtro Compatti */
.filter-actions {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
min-height: 180px; /* STESSA ALTEZZA dei filtri */
justify-content: center;
}
.btn-filter-compact {
min-height: 44px;
padding: 10px 16px;
font-size: 1.35rem;
font-weight: 600;
border-radius: 6px;
border: 2px solid;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
text-decoration: none;
}
.btn-filter-compact:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
text-decoration: none;
}
.btn-filter-compact:active {
transform: translateY(0);
}
.btn-filter-compact i {
font-size: 1.425rem;
}
.btn-filter-apply {
background-color: #00695c;
color: #ffffff;
border-color: #004d40;
}
.btn-filter-apply:hover {
background-color: #004d40;
color: #ffffff;
}
.btn-filter-reset {
background-color: #6c757d;
color: #ffffff;
border-color: #545b62;
}
.btn-filter-reset:hover {
background-color: #545b62;
color: #ffffff;
}
/* Layout Griglia Compatta */
.filter-col {
padding-left: 8px;
padding-right: 8px;
}
/* Responsive */
@media (max-width: 1200px) {
.filter-group {
margin-bottom: 12px;
min-height: auto; /* Rimuove altezza fissa su schermi piccoli */
}
.filter-actions {
flex-direction: row;
justify-content: center;
min-height: auto;
}
.btn-filter-compact {
width: auto;
min-width: 130px;
}
}
@media (max-width: 768px) {
.filter-section {
padding: 12px;
}
.filter-header {
font-size: 1.2rem;
padding: 8px 12px;
}
.filter-header i {
font-size: 1.125rem;
}
.filter-group {
padding: 10px;
min-height: auto;
}
.filter-group-title {
font-size: 1.125rem;
}
.filter-group-title i {
font-size: 1.2rem;
}
.filter-label {
font-size: 1.05rem;
}
.filter-input,
.filter-select,
.filter-date {
min-height: 38px;
font-size: 1.125rem;
padding: 6px 10px;
}
.btn-filter-compact {
min-height: 40px;
font-size: 1.125rem;
padding: 8px 14px;
}
.btn-filter-compact i {
font-size: 1.2rem;
}
}
/* ============================================
NAVIGAZIONE TRATTAMENTO - TABS MIGLIORATI
============================================ */
/* Badge tipo trattamento */
.page-title .badge {
vertical-align: middle;
font-weight: 600;
padding: 6px 14px;
border-radius: 20px;
}
/* Nav-tabs centrato */
.nav-tabs.justify-content-center {
border-bottom: 2px solid #dee2e6;
flex-wrap: wrap;
gap: 5px;
padding-bottom: 5px;
}
/* Link delle tabs */
.nav-tabs .nav-link {
padding: 8px 14px; /* ridotto (era 12px 20px) */
background: #6c757d;
color: white;
border: none;
border-radius: 5px 5px 0 0; /* leggermente ridotto */
text-decoration: none;
font-weight: 600;
font-size: 13px; /* ridotto */
line-height: 1.2; /* aggiunto per migliorare leggibilità */
transition: all 0.25s ease; /* leggermente più veloce */
display: flex;
align-items: center;
gap: 6px; /* ridotto (era 8px) */
margin-bottom: -1px; /* più coerente con dimensioni ridotte */
}
.nav-tabs .nav-link:hover {
background: #495057;
color: white;
transform: translateY(-1px); /* meno “salto” */
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12); /* più leggero */
}
.nav-tabs .nav-link.active {
background: linear-gradient(135deg, #00695c 0%, #00897b 100%);
color: white;
box-shadow: 0 3px 8px rgba(0, 105, 92, 0.25); /* più proporzionato */
border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link i {
font-size: 14px; /* ridotto (era 16px) */
}
.nav-tabs .nav-link:focus {
outline: 2px solid #0056b3; /* leggermente meno invasivo */
outline-offset: 2px;
}
/* Responsive - testo abbreviato su mobile */
@media (max-width: 991px) {
.nav-tabs .nav-link {
padding: 10px 16px;
font-size: 14px;
}
.nav-tabs .nav-link i {
font-size: 14px;
}
}
@media (max-width: 768px) {
.page-title {
font-size: 20px;
}
.page-title .badge {
font-size: 0.7em;
padding: 4px 10px;
}
.nav-tabs .nav-link {
padding: 8px 12px;
font-size: 13px;
}
.nav-tabs .nav-link i {
font-size: 14px;
}
}
/* ============================================
WEBCAM E ACQUISIZIONE IMMAGINI
============================================ */
/* Titolo sezione */
.section-title {
color: #00695c;
font-weight: 700;
font-size: 22px;
margin-bottom: 20px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.section-title i {
font-size: 24px;
color: #004d40;
}
/* Container webcam */
.webcam-container {
background: #f8f9fa;
border: 2px solid #dee2e6;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.webcam-container:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
border-color: #00695c;
}
/* Preview webcam - DIMENSIONI FISSE */
.webcam-preview {
width: 320px;
height: 240px;
margin: 0 auto;
border: 2px solid #6c757d;
border-radius: 6px;
background: #000000;
overflow: hidden;
position: relative;
}
/* Stile per #my_camera */
#my_camera {
width: 320px !important;
height: 240px !important;
border: none !important;
}
/* Immagine catturata */
.captured-image {
width: 320px;
height: 240px;
object-fit: cover;
display: block;
}
.captured-image.hidden {
visibility: hidden;
opacity: 0;
}
.captured-image:not(.hidden) {
visibility: visible;
opacity: 1;
transition: opacity 0.3s ease;
}
/* Classe per nascondere elementi */
.hidden {
visibility: hidden !important;
opacity: 0;
pointer-events: none;
}
.visible {
visibility: visible !important;
opacity: 1;
pointer-events: auto;
}
/* Pulsante Cattura Webcam */
.btn-webcam-capture {
background: linear-gradient(135deg, #00695c 0%, #00897b 100%);
color: #ffffff;
border-color: #004d40;
}
.btn-webcam-capture:hover {
background: linear-gradient(135deg, #004d40 0%, #00695c 100%);
color: #ffffff;
transform: translateY(-2px);
}
.btn-webcam-capture:focus {
outline: 3px solid #00695c;
outline-offset: 2px;
}
.btn-webcam-capture::before {
content: none;
}
.btn-webcam-capture i {
margin-right: 8px;
}
/* Responsive */
@media (max-width: 768px) {
.webcam-container {
padding: 15px;
}
.webcam-preview,
#my_camera,
.captured-image {
width: 280px;
height: 210px;
}
.section-title {
font-size: 18px;
}
.section-title i {
font-size: 20px;
}
}
@media (max-width: 576px) {
.webcam-preview,
#my_camera,
.captured-image {
width: 100%;
max-width: 280px;
height: auto;
aspect-ratio: 4 / 3;
}
}
/* ============================================
STAMPA CONSENSI - INFO HEADER E MENU
============================================ */
/* Card informazioni header - RIDOTTA 30% */
.info-header-card {
background: linear-gradient(135deg, #00695c 0%, #00897b 100%);
border-radius: 8px;
padding: 12px 15px; /* Era 20px - RIDOTTO 40% */
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
margin-bottom: 15px; /* Era 20px - RIDOTTO 25% */
}
.info-box {
padding: 10px 12px; /* Era 15px - RIDOTTO 33% */
background: rgba(255, 255, 255, 0.95);
border-radius: 6px;
margin: 3px; /* Era 5px - RIDOTTO 40% */
transition: all 0.3s ease;
}
.info-box:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.info-label {
font-size: 11px; /* Era 13px - RIDOTTO 15% */
font-weight: 600;
color: #00695c;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 5px; /* Era 8px - RIDOTTO 37% */
line-height: 1.2;
}
.info-value {
font-size: 16px; /* Era 20px - RIDOTTO 20% */
font-weight: 700;
color: #212529;
line-height: 1.2;
}
/* Menu consensi - VERDE MEDICALE */
.consent-menu {
background: linear-gradient(135deg, #00695c 0%, #00897b 100%) !important;
border-radius: 8px;
padding: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.consent-menu-header {
background: rgba(255, 255, 255, 0.1);
color: #ffffff !important;
padding: 15px 20px;
font-weight: 700;
font-size: 16px;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
border-radius: 8px 8px 0 0;
}
.consent-menu-header:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateX(5px);
}
.consent-menu-header i {
color: #ffffff !important;
width: 24px;
height: 24px;
}
/* Link nei dropdown - VERDE CHIARO su hover */
.consent-link {
color: #ffffff !important;
padding: 12px 20px 12px 45px;
font-weight: 500;
font-size: 14px;
display: block;
transition: all 0.3s ease;
border-left: 3px solid transparent;
background: rgba(255, 255, 255, 0.05);
margin: 2px 0;
}
.consent-link:hover {
background: rgba(255, 255, 255, 0.2) !important;
color: #b2dfdb !important;
border-left-color: #b2dfdb;
padding-left: 50px;
text-decoration: none;
}
.consent-link:active {
background: rgba(255, 255, 255, 0.25) !important;
}
/* Dropdown aperto */
.sidebar-dropdown {
background: rgba(0, 0, 0, 0.15);
padding: 5px 0;
border-radius: 0 0 8px 8px;
}
/* Responsive */
@media (max-width: 992px) {
.info-header-card {
padding: 10px 12px;
}
.info-box {
margin: 3px 0;
padding: 8px 10px;
}
.info-label {
font-size: 10px;
}
.info-value {
font-size: 15px;
}
.consent-menu-header {
font-size: 15px;
padding: 12px 15px;
}
.consent-link {
font-size: 13px;
padding: 10px 15px 10px 35px;
}
.consent-link:hover {
padding-left: 40px;
}
}
@media (max-width: 768px) {
.info-header-card {
padding: 8px 10px;
}
.info-box {
padding: 6px 8px;
}
.info-value {
font-size: 14px;
}
.info-label {
font-size: 9px;
}
}
/* ============================================
CARTELLA CLINICA - SISTEMA MODULARE GENERICO
============================================ */
/* ============================================
VARIABILI COLORI (utilizzabili ovunque)
============================================ */
:root {
--color-brand-primary: #00695c;
--color-brand-secondary: #00897b;
--color-brand-dark: #004d40;
--color-donna-light: #FFF0F5;
--color-donna-medium: #FFE4E1;
--color-donna-border: #E91E63;
--color-donna-icon: #E91E63;
--color-uomo-light: #E3F2FD;
--color-uomo-medium: #BBDEFB;
--color-uomo-border: #2196F3;
--color-uomo-icon: #2196F3;
--border-radius-small: 8px;
--border-radius-medium: 12px;
--border-radius-large: 15px;
--shadow-small: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.1);
--shadow-large: 0 6px 20px rgba(0, 0, 0, 0.15);
}
/* ============================================
HEADER CARTELLA CLINICA (generico)
============================================ */
/* Container principale header cartella - COMPATTATO */
.cartella-header {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
border-radius: 8px !important;
padding: 10px 12px !important; /* RIDOTTO da padding standard */
margin-bottom: 10px !important;
border: 1px solid #dee2e6 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
font-family: 'Titillium Web', sans-serif !important;
}
/* ============================================
INFO GENERALI CARTELLA
============================================ */
/* Info generali cartella (Protocollo, Anno, Data arrivo, ecc.) - COMPATTATO */
.info-generali-cartella {
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
border-radius: 6px !important;
padding: 8px 10px !important; /* RIDOTTO da 15-20px */
margin-bottom: 8px !important; /* RIDOTTO da 15px */
border: 1px solid #81c784 !important;
}
.info-generali-cartella .row {
margin-left: -6px !important;
margin-right: -6px !important;
}
.info-generali-cartella [class*="col-"] {
padding-left: 6px !important;
padding-right: 6px !important;
}
/* Info box - singoli campi info - COMPATTATO */
.info-box {
padding: 4px 6px !important; /* RIDOTTO da 10-12px */
margin-bottom: 0 !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
flex-wrap: wrap !important;
}
.info-box h3 {
font-size: 16px !important; /* RIDOTTO da 20-22px */
font-weight: 700 !important;
margin: 0 !important;
color: #00695c !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-family: 'Titillium Web', sans-serif !important;
}
.info-box h3 i {
font-size: 15px !important; /* RIDOTTO */
color: #004d40 !important;
}
.info-label {
font-size: 11px !important; /* RIDOTTO da 13-14px */
font-weight: 600 !important;
color: #555 !important;
margin-right: 3px !important;
font-family: 'Titillium Web', sans-serif !important;
}
.info-value {
font-size: 13px !important; /* RIDOTTO da 15-16px */
font-weight: 700 !important;
color: #212529 !important;
font-family: 'Titillium Web', sans-serif !important;
}
/* ============================================
CARD PAZIENTE (generico Donna/Uomo)
============================================ */
/* Card paziente (donna/uomo) - COMPATTATO */
.paziente-card-cartella {
border-radius: 6px !important;
padding: 4px 10px !important; /* ridotto verticale */
margin-top: 0 !important;
margin-bottom: 2px !important; /* minimo ma leggibile */
border: 2px solid !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
transition: all 0.2s ease !important;
}
.paziente-card-cartella:hover {
transform: translateY(-2px) !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}
.paziente-card-cartella .row {
margin-left: -4px !important;
margin-right: -4px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
align-items: center !important;
}
.paziente-card-cartella [class*="col-"] {
padding-left: 4px !important;
padding-right: 4px !important;
}
/* Variante DONNA - Rosa */
.paziente-donna {
background: linear-gradient(135deg, #FFF0F5 0%, #FFE4E1 100%);
border-color: #ec407a !important;
}
.paziente-donna .mylabel {
color: #880e4f !important;
}
/* Variante UOMO - Azzurro */
.paziente-uomo {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
border-color: #42a5f5 !important;
}
.paziente-uomo .mylabel {
color: #0d47a1 !important;
}
/* Icona paziente (Venus/Mars) - COMPATTATA */
.paziente-icon {
font-size: 28px !important; /* RIDOTTO da 36-40px */
margin: 0 !important;
padding: 4px !important;
}
.paziente-donna .paziente-icon {
color: #ec407a !important;
}
.paziente-uomo .paziente-icon {
color: #42a5f5 !important;
}
/* Input custom per visualizzazione dati paziente - COMPATTATO */
.input_custom {
background-color: #ffffff !important;
border: 1px solid #dee2e6 !important;
border-radius: 4px !important;
padding: 4px 6px !important; /* RIDOTTO da 8-10px */
font-size: 12px !important; /* RIDOTTO da 14-15px */
font-weight: 500 !important;
color: #212529 !important;
min-height: 26px !important; /* RIDOTTO da 36-40px */
display: flex !important;
align-items: center !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
font-family: 'Titillium Web', sans-serif !important;
}
.input_custom strong {
font-weight: 700 !important;
color: #212529 !important;
}
/* Elementi comuni card paziente */
.paziente-card-cartella .paziente-icon {
font-size: 28px;
text-align: center;
margin-bottom: 8px; /* Era 10px - RIDOTTO a 8px */
display: block;
}
.paziente-card-cartella .input_custom {
background-color: white !important;
border-radius: var(--border-radius-small);
padding: 6px 12px; /* Era 8px 12px - RIDOTTO verticale a 6px */
margin-bottom: 8px; /* Era 10px - RIDOTTO a 8px */
box-shadow: var(--shadow-small);
font-size: 14px;
color: #212529;
line-height: 1.3; /* Ridotto line-height */
min-height: 38px; /* Altezza minima per uniformità */
}
.paziente-card-cartella .input_custom strong {
font-weight: 700;
color: #212529;
}
/* Riduzione gap nelle righe */
.paziente-card-cartella .row {
margin-bottom: 0;
}
.paziente-card-cartella .row [class*="col-"] {
padding-top: 4px; /* Ridotto da default */
padding-bottom: 4px; /* Ridotto da default */
}
/* Label all'interno delle card paziente - COMPATTATA */
.paziente-card-cartella .mylabel {
font-size: 10px !important; /* RIDOTTO da 12px */
font-weight: 600 !important;
padding: 2px 0 !important;
margin-bottom: 2px !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
}
/* Responsive - Mobile */
@media (max-width: 768px) {
.cartella-header {
padding: 8px 10px !important;
}
.info-generali-cartella {
padding: 6px 8px !important;
}
.paziente-card-cartella {
padding: 6px 8px !important;
margin-bottom: 8px !important;
}
.paziente-icon {
font-size: 24px !important;
}
.info-box h3 {
font-size: 14px !important;
}
.info-label {
font-size: 10px !important;
}
.info-value {
font-size: 12px !important;
}
.input_custom {
font-size: 11px !important;
padding: 3px 5px !important;
min-height: 24px !important;
}
}
/* ============================================
HEADER TITOLO PAGINA
============================================ */
.page-header-cartella {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding: 15px 20px;
background: white;
border-radius: var(--border-radius-medium);
box-shadow: var(--shadow-small);
border-left: 4px solid var(--color-brand-primary);
}
.page-header-cartella .page-title {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
font-size: 20px;
font-weight: 700;
color: #212529;
}
.page-header-cartella .page-title i {
font-size: 24px;
color: var(--color-brand-primary);
}
/* ============================================
SEZIONE DOCUMENTI/FORM
============================================ */
.documenti-section {
margin-top: 30px;
}
.documento-card {
border: 2px solid #dee2e6;
border-radius: var(--border-radius-medium);
padding: 20px;
background: white;
box-shadow: var(--shadow-small);
margin-bottom: 15px;
}
.documento-card.donna {
border-top: 4px solid var(--color-donna-border);
}
.documento-card.uomo {
border-top: 4px solid var(--color-uomo-border);
}
.documento-card .fa-venus,
.documento-card .fa-mars {
font-size: 32px;
margin-bottom: 15px;
}
.documento-card.donna .fa-venus {
color: var(--color-donna-icon);
}
.documento-card.uomo .fa-mars {
color: var(--color-uomo-icon);
}
/* ============================================
MENU SEZIONI (generico, non solo consensi)
============================================ */
.section-menu {
padding: 0;
margin: 0;
list-style: none;
}
.section-menu .sidebar-item {
list-style: none;
}
.section-menu-header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 15px;
background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
color: white;
border-radius: 10px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
margin-bottom: 10px;
transition: all 0.3s;
cursor: pointer;
}
.section-menu-header:hover {
background: linear-gradient(135deg, var(--color-brand-dark) 0%, var(--color-brand-primary) 100%);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 105, 92, 0.3);
color: white;
text-decoration: none;
}
.section-menu-header i {
font-size: 18px;
}
.section-menu-link {
display: block;
padding: 10px 15px 10px 35px;
color: #495057;
font-size: 14px;
text-decoration: none;
border-left: 3px solid transparent;
transition: all 0.3s;
margin-bottom: 5px;
}
.section-menu-link:hover {
background: #f8f9fa;
border-left-color: var(--color-brand-primary);
color: var(--color-brand-primary);
text-decoration: none;
padding-left: 40px;
}
.section-menu-link:active {
background: #e9ecef;
}
/* Sidebar Dropdown */
.sidebar-dropdown {
background: white;
border-radius: var(--border-radius-small);
padding: 10px 0;
margin-bottom: 15px;
box-shadow: var(--shadow-small);
}
/* ============================================
CLASSI UTILITY RIUTILIZZABILI
============================================ */
/* Badges informativi */
.badge-donna {
background: var(--color-donna-border);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.badge-uomo {
background: var(--color-uomo-border);
color: white;
padding: 5px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
/* Icone gender */
.icon-donna {
color: var(--color-donna-icon) !important;
}
.icon-uomo {
color: var(--color-uomo-icon) !important;
}
/* Card generica cartella */
.card-cartella {
background: white;
border-radius: var(--border-radius-medium);
padding: 20px;
box-shadow: var(--shadow-small);
margin-bottom: 20px;
border: 1px solid #dee2e6;
}
.card-cartella-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 2px solid #e9ecef;
}
.card-cartella-title {
font-size: 18px;
font-weight: 700;
color: #212529;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.card-cartella-title i {
color: var(--color-brand-primary);
font-size: 20px;
}
/* Sezione dati compatta */
.dati-compatti {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
.dato-item {
background: #f8f9fa;
border-left: 3px solid var(--color-brand-primary);
padding: 10px 12px;
border-radius: var(--border-radius-small);
}
.dato-label {
font-size: 11px;
color: #6c757d;
font-weight: 600;
text-transform: uppercase;
display: block;
margin-bottom: 4px;
}
.dato-value {
font-size: 15px;
font-weight: 700;
color: #212529;
display: block;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1199px) {
.cartella-header {
padding: 15px;
}
.info-generali-cartella {
margin-bottom: 15px;
}
}
@media (max-width: 768px) {
.cartella-header {
padding: 12px;
}
.info-generali-cartella .info-box h3 {
font-size: 16px;
}
.info-generali-cartella .info-box h3 i {
font-size: 20px;
}
.paziente-card-cartella {
padding: 12px;
}
.paziente-card-cartella .paziente-icon {
font-size: 24px;
}
.page-header-cartella {
flex-direction: column;
gap: 15px;
text-align: center;
padding: 15px;
}
.page-header-cartella .page-title {
font-size: 18px;
}
.dati-compatti {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.info-generali-cartella .info-label {
font-size: 10px;
}
.info-generali-cartella .info-value {
font-size: 13px;
}
.paziente-card-cartella .input_custom {
font-size: 13px;
padding: 6px 10px;
}
.section-menu-header {
font-size: 14px;
padding: 10px 12px;
}
.section-menu-link {
font-size: 13px;
padding: 8px 12px 8px 30px;
}
}
/* ============================================
CLASSI SPECIFICHE PER SEZIONI (backward compatible)
============================================ */
/* Se non supporta @extend, usa classi duplicate */
.consent-menu {
padding: 0;
margin: 0;
list-style: none;
}
.consent-menu .sidebar-item {
list-style: none;
}
.consent-menu-header {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 15px;
background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) 100%);
color: white;
border-radius: 10px;
font-weight: 600;
font-size: 15px;
text-decoration: none;
margin-bottom: 10px;
transition: all 0.3s;
cursor: pointer;
}
.consent-link {
display: block;
padding: 10px 15px 10px 35px;
color: #495057 !important;
font-size: 14px;
text-decoration: none;
border-left: 3px solid transparent;
transition: all 0.3s;
margin-bottom: 5px;
white-space: normal; /* permette il ritorno a capo */
word-break: break-word; /* spezza parole lunghe */
}
/* ============================================
MENU AZIONI RAPIDE - VERSIONE ULTRA COMPATTA
============================================ */
.menu-actions-container {
margin-bottom: 20px;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border: 2px solid #dee2e6;
border-left: 5px solid var(--color-brand-primary);
}
.menu-actions-container .btn-action {
height: 100%;
min-height: 48px;
display: inline-flex; /* inline-flex per stare in riga */
flex-direction: row; /* icona e testo in riga orizzontale */
align-items: center;
justify-content: flex-start; /* allineamento a sinistra */
gap: 6px; /* spazio ridotto tra icona e testo */
padding: 8px 10px; /* padding compatto */
text-align: left;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
white-space: normal; /* permette al testo di andare a capo */
word-wrap: break-word;
flex-grow: 1; /* riempie lo spazio disponibile */
max-width: 100%; /* non sfora */
}
.menu-actions-container .btn-action i {
font-size: 18px;
margin: 0;
flex-shrink: 0; /* icona non si restringe */
}
.menu-actions-container .btn-action span {
font-size: 12px;
line-height: 1.2;
font-weight: 600;
display: block;
flex: 1; /* testo prende lo spazio restante */
}
.menu-actions-container .btn-action:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.menu-actions-container .btn-action::before,
.menu-actions-container .btn-action::after {
content: none !important; /* Rimuove le icone automatiche */
}
/* Griglia compatta - PIÙ PULSANTI PER RIGA */
.menu-actions-container .row {
--bs-gutter-x: 8px; /* riduce spaziatura tra colonne */
--bs-gutter-y: 8px;
}
.menu-actions-container .row > [class*="col-"] {
padding-left: 4px;
padding-right: 4px;
margin-bottom: 8px;
}
/* LAYOUT DESKTOP GRANDI - 8 pulsanti per riga */
@media (min-width: 1400px) {
.menu-actions-container .col-12 {
flex: 0 0 12.5%; /* 100/8 = 12.5% */
max-width: 12.5%;
}
}
/* LAYOUT DESKTOP - 6 pulsanti per riga */
@media (min-width: 1200px) {
.menu-actions-container .col-12 {
flex: 0 0 16.666667%; /* 100/6 = 16.666% */
max-width: 16.666667%;
}
}
/* LAYOUT TABLET - 4 pulsanti per riga */
@media (min-width: 768px) and (max-width: 1199px) {
.menu-actions-container .col-12 {
flex: 0 0 25%; /* 100/4 = 25% */
max-width: 25%;
}
.menu-actions-container .btn-action {
min-height: 44px;
padding: 6px 8px;
}
.menu-actions-container .btn-action i {
font-size: 16px;
}
.menu-actions-container .btn-action span {
font-size: 11px;
}
}
/* LAYOUT MOBILE - 2 pulsanti per riga */
@media (max-width: 767px) {
.menu-actions-container .col-12 {
flex: 0 0 50%; /* 100/2 = 50% */
max-width: 50%;
}
.menu-actions-container .btn-action {
min-height: 42px;
padding: 6px 6px;
gap: 4px;
}
.menu-actions-container .btn-action i {
font-size: 16px;
}
.menu-actions-container .btn-action span {
font-size: 11px;
}
}
/* LAYOUT SMARTPHONE PICCOLO - 1 pulsante per riga */
@media (max-width: 480px) {
.menu-actions-container .col-12 {
flex: 0 0 100%;
max-width: 100%;
}
.menu-actions-container .btn-action {
justify-content: flex-start;
}
}
/* ============================================
AZIONI RAPIDE PILLS (scrollabile horizontal)
============================================ */
.azioni-rapide {
background: white;
padding: 15px;
border-radius: 12px;
margin-bottom: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.azioni-scroll {
display: flex;
gap: 10px;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 10px;
scrollbar-width: thin;
scrollbar-color: #00695c #f0f0f0;
}
.azioni-scroll::-webkit-scrollbar {
height: 6px;
}
.azioni-scroll::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 10px;
}
.azioni-scroll::-webkit-scrollbar-thumb {
background: #00695c;
border-radius: 10px;
}
.azioni-scroll::-webkit-scrollbar-thumb:hover {
background: #004d40;
}
.pill-action {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border: 2px solid #dee2e6;
border-radius: 25px;
color: #495057;
font-weight: 600;
font-size: 12px;
white-space: nowrap;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
}
.pill-action:hover {
background: linear-gradient(135deg, #00695c 0%, #00897b 100%);
color: white;
border-color: #00695c;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 105, 92, 0.3);
text-decoration: none;
}
.pill-action i {
font-size: 14px;
}
/* ============================================
LAYOUT DUE COLONNE DONNA/UOMO
============================================ */
.sezioni-pazienti {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
.sezione-card {
background: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border-top: 4px solid;
}
.sezione-donna {
background: linear-gradient(135deg, #FFF0F5 0%, #FFE4E1 100%);
border-top-color: #E91E63;
}
.sezione-uomo {
background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);
border-top-color: #2196F3;
}
.sezione-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}
.sezione-header h3 {
margin: 0;
font-size: 20px;
font-weight: 700;
}
.sezione-icon {
font-size: 32px;
}
.sezione-gruppo {
margin-bottom: 20px;
}
.sezione-gruppo h4 {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
color: #6c757d;
margin: 0 0 12px 0;
display: flex;
align-items: center;
gap: 8px;
}
.sezione-buttons {
display: flex;
flex-direction: column;
gap: 8px;
}
.btn-sezione {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: white;
border: 2px solid #dee2e6;
border-radius: 10px;
color: #495057;
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
}
.btn-sezione:hover {
background: linear-gradient(135deg, #00695c 0%, #00897b 100%);
color: white;
border-color: #00695c;
transform: translateX(5px);
box-shadow: 0 4px 12px rgba(0, 105, 92, 0.2);
text-decoration: none;
}
.btn-sezione i {
font-size: 16px;
min-width: 18px;
}
/* ====================================================================
CERTIFICATI SECTION - Compact styling with background
==================================================================== */
.certificati-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
border-radius: 8px !important;
padding: 12px 15px !important;
margin-bottom: 15px !important;
border: 1px solid #dee2e6 !important;
font-family: 'Titillium Web', sans-serif !important;
}
/* Riduci i margini delle righe interne */
.certificati-section .row {
margin-left: -8px !important;
margin-right: -8px !important;
}
.certificati-section .col-12,
.certificati-section [class*="col-"] {
padding-left: 8px !important;
padding-right: 8px !important;
}
/* Elimina il margin-top delle righe interne */
.certificati-section .row.mt-3 {
margin-top: 8px !important;
}
.certificati-section .row.mt-3:first-child {
margin-top: 0 !important;
}
/* Compatta il titolo della sezione */
.certificati-section .page-title {
font-size: 16px !important;
font-weight: 700 !important;
margin-bottom: 0 !important;
color: #212529 !important;
font-family: 'Titillium Web', sans-serif !important;
}
.certificati-section .page-title i {
margin-right: 6px !important;
font-size: 15px !important;
}
/* Riduci padding della tabella all'interno della sezione */
.certificati-section table {
margin-bottom: 0 !important;
}
.certificati-section .table-bordered {
border: 1px solid #dee2e6 !important;
}
/* Variante con background alternativo (verde chiaro medico) */
.certificati-section.section-green {
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
border-color: #81c784 !important;
}
/* Variante con background alternativo (azzurro) */
.certificati-section.section-blue {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
border-color: #64b5f6 !important;
}
/* ============================================
Accordion
============================================ */
.section-title {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
font-size: 20px;
font-weight: 700;
color: #f57c00;
}
.accordion-item {
background: white;
border-radius: 10px;
margin-bottom: 10px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
cursor: pointer;
transition: all 0.3s;
}
.accordion-header:hover {
background: #f8f9fa;
}
.accordion-title {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.accordion-toggle {
font-size: 18px;
color: #6c757d;
transition: transform 0.3s;
}
.accordion-item.active .accordion-toggle {
transform: rotate(90deg);
}
.accordion-actions {
display: flex;
gap: 8px;
}
.btn-icon {
padding: 8px 12px;
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 6px;
color: #495057;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
}
.btn-icon:hover {
background: #00695c;
color: white;
border-color: #00695c;
text-decoration: none;
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
padding: 0 15px;
}
.accordion-item.active .accordion-content {
max-height: 500px;
padding: 0 15px 15px;
}
/* ====================================================================
BIOBANCA SECTION - Compact styling with background
==================================================================== */
.biobanca-section {
background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%) !important;
border-radius: 8px !important;
padding: 12px 15px !important;
margin-bottom: 15px !important;
border: 1px solid #81c784 !important;
font-family: 'Titillium Web', sans-serif !important;
}
/* Riduci i margini delle righe interne */
.biobanca-section .row {
margin-left: -8px !important;
margin-right: -8px !important;
}
.biobanca-section .col-12,
.biobanca-section [class*="col-"] {
padding-left: 8px !important;
padding-right: 8px !important;
}
/* Elimina il margin-top delle righe interne */
.biobanca-section .row.mt-3 {
margin-top: 8px !important;
}
.biobanca-section .row.mt-3:first-child {
margin-top: 0 !important;
}
/* Compatta il titolo della sezione */
.biobanca-section .page-title {
font-size: 16px !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
color: #2e7d32 !important;
font-family: 'Titillium Web', sans-serif !important;
}
.biobanca-section .page-title i {
margin-right: 6px !important;
font-size: 15px !important;
color: #7b1fa2 !important;
}
/* Compatta le stat-card */
.biobanca-section .stats-grid {
display: flex !important;
gap: 10px !important;
margin: 8px 0 !important;
flex-wrap: wrap !important;
}
.biobanca-section .stat-card {
background: white !important;
border-radius: 6px !important;
padding: 8px 12px !important;
flex: 1 1 calc(33.333% - 10px) !important;
min-width: 100px !important;
text-align: center !important;
border: 1px solid #a5d6a7 !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
.biobanca-section .stat-icon {
font-size: 20px !important;
margin-bottom: 4px !important;
}
.biobanca-section .stat-value {
font-size: 18px !important;
font-weight: 700 !important;
color: #2e7d32 !important;
margin: 2px 0 !important;
}
.biobanca-section .stat-label {
font-size: 11px !important;
font-weight: 600 !important;
color: #555 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
/* Compatta l'area form riepilogo */
.biobanca-section [style*="background-color:aliceblue"] {
background: linear-gradient(135deg, #e1f5fe 0%, #b3e5fc 100%) !important;
padding: 8px !important;
border-radius: 6px !important;
margin-top: 8px !important;
}
.biobanca-section .mytextarea {
min-height: 60px !important;
}
/* ============================================
STAT
============================================ */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px; /* Era circa 20px - RIDOTTO */
margin: 15px 0; /* Era circa 20-30px - RIDOTTO */
padding: 0;
}
.stat-card {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border: 2px solid #dee2e6;
border-radius: 10px;
padding: 12px 15px; /* RIDOTTO da 20px a 12px verticale */
text-align: center;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100px; /* RIDOTTO da circa 120-140px */
}
.stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
border-color: #00695c;
}
.stat-icon {
font-size: 32px; /* RIDOTTO da 40-48px */
margin-bottom: 6px; /* RIDOTTO da 10-12px */
line-height: 1;
}
.stat-value {
font-size: 28px; /* RIDOTTO da 36-42px */
font-weight: 700;
color: #00695c;
margin: 4px 0; /* RIDOTTO da 8-10px */
line-height: 1.1;
}
.stat-label {
font-size: 13px; /* RIDOTTO da 14-16px */
font-weight: 600;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
line-height: 1.2;
}
/* Responsive */
@media (max-width: 768px) {
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
margin: 12px 0;
}
.stat-card {
padding: 10px 12px;
min-height: 90px;
}
.stat-icon {
font-size: 28px;
margin-bottom: 5px;
}
.stat-value {
font-size: 24px;
margin: 3px 0;
}
.stat-label {
font-size: 12px;
}
}
@media (max-width: 576px) {
.stats-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.stat-card {
padding: 8px 10px;
min-height: 80px;
}
.stat-icon {
font-size: 24px;
}
.stat-value {
font-size: 22px;
}
.stat-label {
font-size: 11px;
}
}
/* ====================================================================
CICLI SECTION - Compact styling with background
==================================================================== */
.cicli-section {
background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%) !important;
border-radius: 8px !important;
padding: 12px 15px !important;
margin-bottom: 15px !important;
border: 1px solid #ffb74d !important;
font-family: 'Titillium Web', sans-serif !important;
}
/* Riduci i margini delle righe interne */
.cicli-section .row {
margin-left: -8px !important;
margin-right: -8px !important;
}
.cicli-section .col-12,
.cicli-section [class*="col-"] {
padding-left: 8px !important;
padding-right: 8px !important;
}
/* Elimina il margin-top delle righe interne */
.cicli-section .row.mt-3 {
margin-top: 8px !important;
}
.cicli-section .row.mt-3:first-child {
margin-top: 0 !important;
}
/* Compatta il titolo della sezione */
.cicli-section .page-title {
font-size: 16px !important;
font-weight: 700 !important;
margin-bottom: 0 !important;
color: #e65100 !important;
font-family: 'Titillium Web', sans-serif !important;
}
.cicli-section .page-title i {
margin-right: 6px !important;
font-size: 15px !important;
}
/* Riduci padding della tabella all'interno della sezione */
.cicli-section table {
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.cicli-section .table-bordered {
border: 1px solid #ffb74d !important;
}
/* Compatta le icone di stato nella tabella */
.cicli-section img[height="24"] {
height: 20px !important;
width: 20px !important;
}
/* Variante alternativa azzurra per cicli-section */
.cicli-section.section-blue {
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
border-color: #64b5f6 !important;
}
.cicli-section.section-blue .page-title {
color: #1565c0 !important;
}
/* Variante alternativa viola per cicli-section */
.cicli-section.section-purple {
background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%) !important;
border-color: #ba68c8 !important;
}
.cicli-section.section-purple .page-title {
color: #6a1b9a !important;
}
/* ============================================
Timeline verticale
============================================ */
.timeline {
position: relative;
padding-left: 40px;
}
.timeline::before {
content: '';
position: absolute;
left: 15px;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, #8BC34A 0%, #AED581 100%);
}
.timeline-item {
position: relative;
margin-bottom: 25px;
background: white;
border-radius: 10px;
padding: 15px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s;
}
.timeline-item:hover {
transform: translateX(5px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}
.timeline-marker {
position: absolute;
left: -33px;
top: 15px;
width: 16px;
height: 16px;
border-radius: 50%;
background: white;
border: 4px solid;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.timeline-marker.success {
border-color: #4CAF50;
}
.timeline-marker.warning {
border-color: #FFC107;
}
.timeline-marker.error {
border-color: #F44336;
}
.timeline-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.timeline-info {
flex: 1;
}
.timeline-title {
font-weight: 700;
font-size: 16px;
color: #212529;
margin-bottom: 5px;
}
.timeline-date {
font-size: 13px;
color: #6c757d;
display: flex;
align-items: center;
gap: 5px;
}
.timeline-badge {
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
}
.badge-success {
background: #C8E6C9;
color: #2E7D32;
}
.badge-warning {
background: #FFF9C4;
color: #F57C00;
}
.badge-error {
background: #FFCDD2;
color: #C62828;
}
.cicli-actions {
display: flex;
gap: 10px;
margin-top: 20px;
}
/* ============================================
TABS MODERNE - TUTTI SU UNA RIGA
============================================ */
.tabs-container {
margin: 30px 0;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.tabs-header {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 20px;
border-bottom: 3px solid #00695c;
}
.tabs-header .page-title {
margin: 0;
}
/* Nav tabs - VERSIONE ULTRA COMPATTA - TUTTI SU UNA RIGA */
.nav-tabs-modern {
border-bottom: 3px solid #dee2e6;
padding: 0 10px;
background: #e9ecef;
flex-wrap: nowrap; /* NON VA A CAPO - tutto su una riga */
margin-bottom: 0;
gap: 3px;
overflow-x: auto; /* Scroll orizzontale se necessario */
overflow-y: hidden;
white-space: nowrap;
}
/* Nasconde scrollbar su Firefox */
.nav-tabs-modern {
scrollbar-width: thin;
scrollbar-color: #00695c #e9ecef;
}
/* Nasconde scrollbar su Chrome/Edge/Safari */
.nav-tabs-modern::-webkit-scrollbar {
height: 4px;
}
.nav-tabs-modern::-webkit-scrollbar-track {
background: #e9ecef;
}
.nav-tabs-modern::-webkit-scrollbar-thumb {
background: #00695c;
border-radius: 2px;
}
.nav-tabs-modern .nav-item {
margin-bottom: -3px;
flex-shrink: 0; /* Non si restringe */
}
.nav-tabs-modern .nav-link {
border: 2px solid transparent;
border-bottom: 3px solid transparent;
background: #ffffff;
color: #212529;
font-weight: 700;
font-size: 12px; /* Font ridotto per far stare tutto */
padding: 8px 8px; /* Padding ridottissimo */
transition: all 0.3s ease;
display: flex;
flex-direction: column; /* Icona sopra, testo sotto */
align-items: center;
justify-content: center;
gap: 3px;
border-radius: 6px 6px 0 0;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
margin-top: 4px;
min-width: 80px; /* Larghezza minima */
max-width: 100px; /* Larghezza massima */
height: 70px; /* Altezza fissa per contenere 2 righe */
white-space: normal; /* Permette al testo di andare a capo */
word-wrap: break-word;
text-align: center;
line-height: 1.2;
}
.nav-tabs-modern .nav-link i {
font-size: 18px; /* Icona più grande per bilanciare */
color: #00695c;
flex-shrink: 0;
}
.nav-tabs-modern .nav-link span {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
hyphens: auto; /* Sillabare se necessario */
}
.nav-tabs-modern .nav-link:hover {
background: #f8f9fa;
color: #00695c;
border-color: #00897b;
border-bottom-color: #00897b;
transform: translateY(-2px);
box-shadow: 0 -4px 8px rgba(0, 105, 92, 0.15);
z-index: 5;
}
.nav-tabs-modern .nav-link:hover i {
color: #00695c;
transform: scale(1.1);
}
/* TAB ATTIVO - LEGGIBILE */
.nav-tabs-modern .nav-link.active {
background: #ffffff !important;
color: #004d40 !important; /* Verde molto scuro */
border-color: #00695c;
border-bottom-color: #ffffff;
font-weight: 800;
box-shadow: 0 -4px 12px rgba(0, 105, 92, 0.2);
position: relative;
z-index: 10;
}
.nav-tabs-modern .nav-link.active i {
color: #004d40 !important;
font-weight: 900;
}
/* VARIANTE CON GRADIENTE */
.nav-tabs-modern.tabs-gradient .nav-link {
background: linear-gradient(180deg, #ffffff 0%, #f1f3f5 100%);
}
.nav-tabs-modern.tabs-gradient .nav-link:hover {
background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
}
.nav-tabs-modern.tabs-gradient .nav-link.active {
background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%) !important;
color: #004d40 !important;
}
/* Tab content */
.tab-content {
padding: 25px;
background: #ffffff;
min-height: 400px;
border-top: none;
}
/* Header sezione tab */
.tab-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #e9ecef;
flex-wrap: wrap;
gap: 15px;
}
.tab-section-header .page-title {
margin: 0;
}
.tab-section-header .page-subtitle {
margin: 5px 0 0 0;
font-size: 14px;
color: #6c757d;
font-style: italic;
}
.tab-section-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* RESPONSIVE - Su tablet/mobile mantieni lo scroll orizzontale */
@media (max-width: 1200px) {
.nav-tabs-modern .nav-link {
font-size: 10px;
padding: 6px 6px;
min-width: 70px;
max-width: 85px;
height: 60px;
}
.nav-tabs-modern .nav-link i {
font-size: 16px;
}
}
@media (max-width: 768px) {
.tabs-header {
padding: 15px;
}
.nav-tabs-modern {
padding: 0 8px;
}
.nav-tabs-modern .nav-link {
font-size: 9px;
padding: 5px 5px;
min-width: 60px;
max-width: 75px;
height: 55px;
}
.nav-tabs-modern .nav-link i {
font-size: 14px;
}
.tab-content {
padding: 15px;
}
.tab-section-header {
flex-direction: column;
align-items: flex-start;
}
.tab-section-actions {
width: 100%;
}
.tab-section-actions .btn-action {
flex: 1;
min-width: 140px;
}
}
@media (max-width: 576px) {
.nav-tabs-modern .nav-link {
font-size: 8px;
padding: 4px 4px;
min-width: 55px;
max-width: 65px;
height: 50px;
}
.nav-tabs-modern .nav-link i {
font-size: 12px;
}
}
/* ============================================
FINE DREAMBORN PMA STYLESHEET
============================================ */