/* ————————————————————————————————
   BASE
——————————————————————————————— */
body[class*="theme-"] {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    padding: 25px;
    color: #333;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
	font-stretch: ultra-condensed;
}
body[class*="themebg-"]::before {
    content: "";
    position: fixed;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    filter: blur(6px) brightness(1.05) contrast(0.95);
    transform: scale(1.04);
    z-index: -2;
    pointer-events: none;
}
body.themebg-SUP::before { background-image: url("/assets/img/SfondoCopagSupport.png"); }
body.themebg-DEF::before { background-image: url("/assets/img/SfondoCopag.png"); }
body.themebg-OUT::before { background-image: url("/assets/img/SfondoCopagEsterno.png"); }
body.themebg-LOG::before { background-image: url("/assets/img/SfondoCopagLogistica.png"); }
body.themebg-FAR::before { background-image: url("/assets/img/SfondoCopagFarmacia.png"); }
body.themebg-SRV::before { background-image: url("/assets/img/SfondoCopagIt.png"); }
body.themebg-AMM::before { background-image: url("/assets/img/SfondoCopagAmministrazione.png"); }
body.themebg-AGE::before { background-image: url("/assets/img/SfondoCopagAgente.png"); }
body[class^="theme-"]::after,
body[class*=" theme-"]::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
body.theme-CP::after,
body.theme-BL::after {
    background:
        radial-gradient( ellipse at center,rgba(255, 255, 255, 0.50) 0%,rgba(255, 255, 255, 0.25) 40%,rgba(1, 111, 148, 0.45) 100% ),
        rgba(1, 111, 148, 0.62);
}
body.theme-VF::after {
    background:
        radial-gradient( ellipse at center,rgba(255, 255, 255, 0.50) 0%,rgba(255, 255, 255, 0.25) 40%,rgba(54, 111, 38, 0.45) 100% ),
        rgba(54, 111, 38, 0.62);
}
body.theme-VA::after {
    background:
        radial-gradient( ellipse at center,rgba(255, 255, 255, 0.50) 0%,rgba(255, 255, 255, 0.25) 40%,rgba(0,177,54,0.25) 100% ),
        rgba(0, 177, 54, 0.42);
}
body.theme-PI::after {
    background:
        radial-gradient( ellipse at center,rgba(255, 255, 255, 0.50) 0%,rgba(255, 255, 255, 0.25) 40%,rgba(235, 169, 205, 0.45) 100% ),
        rgba(235, 169, 205, 0.62);
}
body.theme-LA::after {
    background:
        radial-gradient( ellipse at center,rgba(255, 255, 255, 0.50) 0%,rgba(255, 255, 255, 0.25) 40%,rgba(163, 38, 106, 0.45) 100% ),
        rgba(163, 38, 106, 0.62);
}
body.theme-LE::after {
    background:
        radial-gradient( ellipse at center,rgba(255, 255, 255, 0.50) 0%,rgba(255, 255, 255, 0.25) 40%,rgba(236,236,57, 0.45) 100% ),
        rgba(236,236,57, 0.62);
}
body.theme-SL::after { 
    background:
        radial-gradient( ellipse at center,rgba(255, 255, 255, 0.50) 0%,rgba(255, 255, 255, 0.25) 40%,rgba(102,102,102,0.45) 100% ),
        rgba(102,102,102, 0.62);
}
body.theme-AM::after { 
    background:
        radial-gradient( ellipse at center,rgba(255, 255, 255, 0.50) 0%,rgba(255, 255, 255, 0.25) 40%,rgba(205,10,0,0.45) 100% ),
        rgba(205,10,0, 0.62);
}
body.theme-DG::after { 
    background:
        radial-gradient( ellipse at center,rgba(255, 255, 255, 0.50) 0%,rgba(255, 255, 255, 0.25) 40%,rgba(40,40,40,0.45) 100% ),
        rgba(40,40,40, 0.62);
}
body.theme-LG::after { 
    background:
        radial-gradient( ellipse at center,rgba(255, 255, 255, 0.50) 0%,rgba(255, 255, 255, 0.25) 40%,rgba(70,70,70,0.45) 100% ),
        rgba(70,70,70, 0.62);
}
body.theme-TE::after { 
    background:
        radial-gradient( ellipse at center,rgba(255, 255, 255, 0.50) 0%,rgba(255, 255, 255, 0.25) 40%,rgba(0,0,0,0.45) 100% ),
        rgba(0,0,0, 0.62);
}
*,
*::before,
*::after {
    box-sizing: border-box;
}


.logologin
{
    display: block;
    width: 120px;
    height:120px;
	position:relative;
	border-spacing: 0px;padding: 1px;
	box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2),0 9px 30px 0 rgba(0,0,0,0.19);
    /* visualizza l'immagine */
    background: transparent url(/assets/img/cplogologin.png) no-repeat 0 0; 
	animation: ombramobile 3s steps(20, start) infinite;	
} 
@keyframes ombramobile {
    0% {
		box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.19);
	}
    30% {
		box-shadow: 0 4px 4px 0 rgba(0,100,185,0.2),0 9px 20px 0 rgba(0,100,185,0.19);
		transform: rotate(-0.5deg) translateZ(-1px);
	}
	70% {
		box-shadow: 0 4px 4px 0 rgba(50,100,185,0.2),0 9px 20px 0 rgba(50,100,185,0.19);
		transform: rotate(0.5deg) translateZ(-1px);
	}
	100% {
		box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2),0 6px 10px 0 rgba(0,0,0,0.19);
	}
}
.container {
    max-width: 900px;
    margin: auto;
    padding: 1.5em;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
/*---------------------------------
	TITOLI
 ----------------------------------*/
 .TitoloLogin {
	font-family: arial;
	color:#01516b; font-size:120%!important; 
	text-shadow: 0.1em 0.1em 0.15em #e5e5e5;
	font-weight: bold;
}
 .SottoTitoloLogin {
	font-family: arial;
	color:#01516b; font-size:100%!important; 
	text-shadow: 0.1em 0.1em 0.15em #e5e5e5;
	font-weight: bold;
}

.home-area {
    width: 100%;
	margin-top: 1rem;
    font-size: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    resize: vertical;
	text-align: justify;
	font-style: italic;
}
/* ————————————————————————————————
   LOGIN PANEL (isolato dal resto)
——————————————————————————————— */
.login-panel {
    max-width: 60%;
    margin: 0 auto;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 18px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
    color: #000000;
}

.login-error {
    background: rgba(0,0,0,0.45);
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 15px;
    color: #ffdddd;
    font-weight: 600;
    text-align: center;
    backdrop-filter: blur(6px);
}
/* ————————————————————————————————
   DESCRIZIONE
——————————————————————————————— */
.login-description {
    font-size: 1rem;
    margin-bottom: 20px;
   text-shadow: 0 2px 4px rgba(255,255,255,0.55);
   text-align: center;
}


/* ————————————————————————————————
   FORM
——————————————————————————————— */
.login-form {
	margin; 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.login-input {
	
    padding: 12px 14px;
    font-size: 1rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.25);
    color: #000000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.login-input::placeholder {
    color: rgba(0,0,0,0.45);
}

.mfa-boxes {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 18px 0;
}

.mfa-digit {
    width: 42px;
    height: 52px;
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.75);
    color: #222;
    outline: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.mfa-digit:focus {
    border-color: #2b6cb0;
    background: rgba(255,255,255,0.95);
}

/* ————————————————————————————————
   BOTTONE
——————————————————————————————— */
.button {
    padding: 12px 18px;
    font-size: 1rem;
    border-radius: 10px;
	background: rgba(0,122,255,0.65);
    color: #fff;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

.button:hover {
    background: rgba(0,122,255,0.95);
}

/* ————————————————————————————————
   FOOTER
——————————————————————————————— */
.footer {
    margin-top: 1rem;
    padding: 0.3rem;
    font-size: 1rem;
    color:  rgba(0,0,40,0.85);
    border-radius: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    text-align: center;
}

.footer-item {
    flex: 0 0 auto;      /* <— Safari NON può più comprimere */
    /* white-space: nowrap; */
}
#warning-sicurezza-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 10000;

    display: flex;
    justify-content: center;
    align-items: center;
}

#warning-sicurezza-box {
    width: 650px;
    max-width: 90vw;

    background: #ffffff;
    border-radius: 12px;

    padding: 25px;

    box-shadow: 0 0 25px rgba(0,0,0,0.3);
}

#warning-sicurezza-box h2 {
    margin-top: 0;
    color: #c00000;
}

#warning-sicurezza-box ul {
    margin-top: 10px;
    margin-bottom: 20px;
}

.warning-buttons {
    text-align: right;
    margin-top: 20px;
}

.warning-buttons .button {
    margin-left: 10px;
}

.warning-link {
    background-color: #2f6fed;
}