/* =======================================
login
   ======================================= */
.open-login-modal:hover,
.logout-button:hover { cursor: pointer; }
.modal-hidden { display: none; }
#login-modal.modal-visible { display: flex; position: fixed; z-index: 9999999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(4px); justify-content: center; align-items: center; }
.modal-content { padding: 26px; border-radius: 10px; border: 1px solid var(--border-color); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8); width: 90%; max-width: 400px; background: var(--main-bg-cont); position: relative; animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn {
 from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
 }
.modal-content h3 { text-align: left; color: var(--main-text-clear); margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.modal-content h3 svg { margin-right: 8px; width: 20px; height: 20px; }
/* Botão de fechar (X) */
.close-button { color: var(--main-text-white); float: right; font-size: 28px; font-weight: bold; position: absolute; top: 10px; right: 15px; cursor: pointer; transition: color 0.2s; }
.close-button:hover,
.close-button:focus { color: var(--red); text-decoration: none; cursor: pointer; }
.form-group { margin-bottom: 25px; }
.form-group input[type="text"],
.form-group input[type="password"] { width: 100%; background: var(--main-bg-cont-2); padding: 16px; border: 1px solid var(--border-color); color: var(--main-text-white); border-radius: 25px; }
.remember-me { display: flex; align-items: center; margin-bottom: 20px; justify-content: center; gap: 6px; }
.remember-me label { margin-bottom: 0; font-weight: normal; }
#submit-login { width: 100%; padding: 16px; background: var(--bg-menu); color: var(--bg-menu-color); border: none; border-radius: 25px; font-size: 1em; cursor: pointer; font-weight: 600; transition: background-color 0.3s; display: flex; flex-wrap: wrap; justify-content: center; flex-wrap: wrap; align-items: center; }
#submit-login:hover:not(:disabled) { background-color: var(--bg-menu); }
#submit-login:disabled { background-color: var(--border-color); cursor: not-allowed; color: var(--main-text); }
@keyframes rodar-spin {
 from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
 }
#submit-login svg { width: 23px; height: 23px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; animation: rodar-spin 1s linear infinite; }
/* =======================================
   ESTILOS DAS MENSAGENS (ERRO/SUCESSO)
   ======================================= */
.error-message { padding: 16px; margin-bottom: 25px; border: 1px solid #9413168d; background-color: #ad33334f; color: var(--main-text); border-radius: 25px; text-align: center; font-size: 0.9em; font-weight: 400; }
.success-message { padding: 16px; margin-bottom: 25px; border: 1px solid #46b44f9c; background-color: #47ff475d; color: var(--main-text-2); border-radius: 25px; text-align: center; font-weight: 500; }
.form-group-forgot-pass { margin-top: 30px; font-size: 0.9em; flex-basis: 100%; text-align: center; }