/* estil-formulari-inici.css */
#formulari-inici-modern {
    max-width: 350px; /* Caixa més ampla */
    margin: 0 auto;
    padding: 20px;
    background-color: #fdf3ee; /* Fons ataronjat suau */
    border: 1px solid #f3ddd0;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#formulari-inici-modern h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

#formulari-inici-modern .form-group {
    margin-bottom: 15px;
}

#formulari-inici-modern label {
    display: block;
    margin-bottom: 5px;
    color: #333;
}

#formulari-inici-modern input[type="text"],
#formulari-inici-modern input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
    box-sizing: border-box; /* Important per l'amplada */
}

#formulari-inici-modern input[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #d97a4f;
    color: white;
    border: none;
    border-radius: 3px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#formulari-inici-modern input[type="submit"]:hover {
    background-color: #c4683f;
}

/* --- Arregla el "Recorda'm" --- */
#formulari-inici-modern .form-group label[for="rememberme"] {
    display: inline-block; /* Fes que es quedi a la mateixa línia */
    margin-bottom: 0;
    vertical-align: middle; /* Alinea-ho amb el checkbox */
}

#formulari-inici-modern input[type="checkbox"] {
    vertical-align: middle; /* Alinea-ho amb el text */
    margin-right: 5px;
}

/* --- Estils per posar l'ull a lloc --- */
.password-wrapper {
    position: relative; 
}

#formulari-inici-modern input[type="password"] {
    padding-right: 40px; /* Deixa espai per l'ull */
}

.toggle-password {
    position: absolute; /* Col·loca l'ull */
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #777;
    user-select: none;
}

.toggle-password:hover {
    color: #333;
}

/* --- Estils per al missatge de benvinguda --- */
/* --- Estils per al missatge de benvinguda --- */
.contenidor-missatge-benvinguda {
    text-align: right;
    /* Hem mogut els marges a la caixa de sota, que és la visible */
}

.missatge-benvinguda-discret {
    display: inline-block;
    padding: 8px 15px;
    font-size: 14px;
    color: #333;
    background-color: #fdf3ee;
    border: 1px solid #f3ddd0;
    border-radius: 5px;
    
    /* AFEGIT: Apliquem els marges directament a la caixa */
    margin-top: 25px;     /* Per baixar-la */
    margin-bottom: 25px;  /* Espai per sota */
    margin-right: 30px;   /* Per separar-la de la vora dreta */
}



.missatge-benvinguda-discret span {
    margin-right: 10px;
}
.missatge-benvinguda-discret .button-logout {
    color: #0073aa;
    text-decoration: underline;
    font-weight: bold;
}
.missatge-benvinguda-discret .button-logout:hover {
    color: #d9534f;
}

/* --- Separador "o" abans del botó de Google --- */
.separador-google {
    display: flex;
    align-items: center;
    text-align: center;
    color: #999;
    margin: 20px 0;
}

.separador-google::before,
.separador-google::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
}

.separador-google span {
    padding: 0 12px;
    font-size: 14px;
}

/* --- Botó "Entra amb Google" --- */
.google-login-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#google-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 20px;
    background-color: #d97a4f;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#google-login-btn:hover {
    background-color: #c4683f;
}

#google-login-btn .google-icon {
    background: #ffffff;
    border-radius: 50%;
    padding: 2px;
    flex-shrink: 0;
}

.google-nota {
    margin-top: 10px;
    font-size: 12px;
    color: #777;
    text-align: center;
}

/* --- Casella d'acceptació dels Termes i condicions --- */
.fim-termes-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 1.4;
    color: #444;
}

.fim-termes-check input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.fim-termes-check label {
    margin-bottom: 0;
    cursor: pointer;
}

.fim-termes-check a {
    color: #c4683f;
    font-weight: 600;
    text-decoration: underline;
}

.fim-termes-check a:hover {
    color: #a9542f;
}

/* Botó de Google desactivat mentre no s'accepten els termes */
#google-login-btn:disabled {
    background-color: #e0cabb;
    cursor: not-allowed;
    opacity: 0.8;
}

#google-login-btn:disabled:hover {
    background-color: #e0cabb;
}

/* --- Finestra emergent (modal) dels Termes i condicions --- */
.fim-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background-color: rgba(0, 0, 0, 0.55);
    padding: 20px;
    /* Centrat */
    align-items: center;
    justify-content: center;
}

.fim-modal-overlay.is-open {
    display: flex;
}

.fim-modal {
    position: relative;
    background-color: #ffffff;
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.fim-modal-tancar {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0;
    z-index: 1;
}

.fim-modal-tancar:hover {
    color: #333;
}

.fim-modal-cos {
    padding: 28px 26px 10px;
    overflow-y: auto;
}

.fim-modal-peu {
    padding: 15px 26px;
    border-top: 1px solid #eee;
    text-align: right;
    background-color: #fdf3ee;
}

.fim-boto-acceptar {
    padding: 10px 28px;
    background-color: #d97a4f;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.fim-boto-acceptar:hover {
    background-color: #c4683f;
}

/* Text legal dins la modal */
.fim-termes-contingut {
    color: #333;
    font-size: 14px;
    line-height: 1.55;
}

.fim-termes-contingut h3 {
    margin: 0 0 4px;
    font-size: 19px;
    color: #333;
}

.fim-termes-meta {
    margin: 0 0 16px;
    font-size: 12px;
    color: #888;
}

.fim-termes-contingut h4 {
    margin: 18px 0 6px;
    font-size: 15px;
    color: #c4683f;
}

.fim-termes-contingut p {
    margin: 0 0 10px;
}

.fim-termes-contingut ul {
    margin: 0 0 10px;
    padding-left: 20px;
}

.fim-termes-contingut li {
    margin-bottom: 4px;
}

.fim-termes-contingut a {
    color: #c4683f;
}

/* --- Sessió iniciada: targeta de l'usuari connectat --- */
#formulari-inici-modern.fim-sessio-iniciada {
    text-align: center;
    padding: 30px 25px;
}

.fim-usuari {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fim-usuari img,
.fim-usuari .avatar,
.fim-usuari .fim-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    margin-bottom: 15px;
}

.fim-usuari .fim-avatar {
    overflow: hidden;
    background-color: #fdf3ee;
    line-height: 0;
}

.fim-usuari .fim-avatar svg,
.fim-usuari .fim-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fim-usuari h2 {
    margin: 0 0 18px;
    font-size: 22px;
    color: #333;
}

.fim-usuari-dada {
    width: 100%;
    margin: 0 0 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: #444;
    background-color: #ffffff;
    border: 1px solid #f3ddd0;
    border-radius: 6px;
    box-sizing: border-box;
    text-align: left;
    word-break: break-word;
}

.fim-usuari-dada strong {
    color: #c4683f;
    margin-right: 6px;
}

.fim-usuari-estat {
    margin: 16px 0 22px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #1e7e34;
    background-color: #eaf7ee;
    border: 1px solid #c3e6cb;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
}

.fim-usuari-accions {
    margin: 0;
    width: 100%;
}

.fim-boto-sortir {
    display: inline-block;
    width: 100%;
    padding: 11px 20px;
    background-color: #d97a4f;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

.fim-boto-sortir:hover {
    background-color: #c4683f;
    color: #ffffff;
}

/* --- Forgot Password Link --- */
.forgot-password-link {
    text-align: center;
    margin-top: 15px; 
}

.forgot-password-link a {
    font-size: 14px;
    text-decoration: none;
    color: #0073aa;
    transition: color 0.3s ease;
}

.forgot-password-link a:hover {
    color: #005177;
    text-decoration: underline;
}