/* =========================================================
   TEMA STILE "DESIGNERS ITALIA" PER ASSESSMENT TINFO
   ========================================================= */
/* Importa il font Titillium Web ufficiale di Designers Italia */
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700;900&display=swap');

/* --- 1. VARIABILI COLORI (Ispirati a Designers Italia) --- */
:root {
    --di-blu-primario: #0066CC;
    --di-testo-scuro: #1C2024;
    --di-testo-secondario: #5A6772;
    --di-sfondo-input: #F2F6FA;
    --di-bordo-input: #7D97B0;
    --di-rosso-errore: #E02B20;
}

/* --- 2. STILI PER L'HEADER (Aggiornato allo stile DI) --- */
.tinfo-header-container {
    background-color: #FFFFFF;
    padding: 30px 0 40px 0;
    text-align: left; /* Designers Italia predilige l'allineamento a sinistra */
    border-bottom: 2px solid #E6E9F2;
    margin-bottom: 40px;
}

.tinfo-logo-text {
    font-size: 24px;
    font-weight: bold;
    color: var(--di-testo-scuro);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tinfo-header-title {
    color: var(--di-blu-primario);
    font-size: 40px;
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 15px;
    line-height: 1.2;
}

.tinfo-header-subtitle {
    color: var(--di-testo-secondario);
    font-size: 20px;
    max-width: 800px;
    line-height: 1.5;
}

/* --- 3. STILI PER IL MODULO (Form Liferay) --- */

/* Margini tra i gruppi di domande */
.form-group {
    margin-bottom: 30px !important;
}

/* Stile delle Etichette (Domande) */
.form-group label {
    color: var(--di-testo-scuro);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}

/* Asterisco dei campi obbligatori */
.form-group label .reference-mark {
    fill: var(--di-rosso-errore); /* Colora l'icona SVG di rosso */
    width: 14px;
    height: 14px;
    margin-left: 4px;
}

/* Stile dei campi di testo */
.form-control {
    background-color: var(--di-sfondo-input);
    border: 1px solid var(--di-bordo-input);
    border-radius: 4px;
    padding: 16px;
    font-size: 16px;
    color: var(--di-testo-scuro);
    box-shadow: none;
    transition: all 0.2s ease-in-out;
}

/* Effetto quando l'utente clicca sul campo (Focus) */
.form-control:focus {
    outline: none;
    background-color: #FFFFFF;
    border-color: var(--di-blu-primario);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.3) !important; /* Alone azzurro accessibile */
}

/* Nascondere il conteggio caratteri in basso (se non necessario) */
#elfw-length-info {
    display: none !important;
}

/* --- 4. STILE DEL PULSANTE DI INVIO --- */
.lfr-layout-structure-item-form .btn-primary {
    background-color: var(--di-blu-primario);
    border-color: var(--di-blu-primario);
    padding: 12px 32px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 102, 204, 0.2);
    transition: background-color 0.3s;
}

.lfr-layout-structure-item-form .btn-primary:hover {
    background-color: #004d99; /* Blu più scuro al passaggio del mouse */
    border-color: #004d99;
}

/* Forza l'uso del font Titillium Web su tutto l'header e il modulo */
.tinfo-header-container,
.tinfo-header-container *,
.lfr-layout-structure-item-form,
.lfr-layout-structure-item-form * {
    font-family: 'Titillium Web', sans-serif !important;
}

/* --- STILE PER CAMPI COMPLETATI --- */
.campo-completato {
    border-color: #28A745 !important; /* Bordo Verde Successo */
    background-color: #F8FFF9 !important; /* Sfondo leggermente verdino per dare enfasi */
    transition: all 0.3s ease;
}

/* Colora di verde anche l'etichetta (label) sopra il campo per un effetto ancora più bello */
.label-completata {
    color: #28A745 !important;
}