@import url('https://fonts.googleapis.com/css?family=Orbitron:300,300i,700,700i');

:root {
    --color-danger: #ed3737;
    --color-dark: #0d0d0d;
    --color-highlight-blue: #2bede6;
    --color-danger-rgb: 237, 55, 55;
    --color-black-transparent: rgba(13, 13, 13, 0.9);
    --color-modal-elements: #ed3737;
    --color-transition-duration: 7s; 
    --fade-out-duration: 5s;       
    --background-change-duration: 5s;
}

body.mutating-to-blue {
    --color-danger: var(--color-highlight-blue) !important;
    --color-danger-rgb: 43, 237, 230 !important;
}

body {
    background-image: url('https://wallpapers.com/images/hd/moon-4k-red-aesthetic-in-forest-mydtfe7ls5cf90pb.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Orbitron', sans-serif;
    color: var(--color-danger);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    text-shadow: 0px 0px 5px rgba(var(--color-danger-rgb), 0.5);
    background-color: transparent;
}

#diagonal-transition-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 0; opacity: 0; visibility: hidden; transition: opacity var(--background-change-duration) ease-in-out; pointer-events: none;}
#diagonal-transition-overlay.active { opacity: 1; visibility: visible; }
#neuralCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 8s ease-in; pointer-events: none; }
#neuralCanvas.visible { opacity: 0.8; }

.login-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--color-black-transparent);
    background-image: repeating-linear-gradient(45deg, rgba(var(--color-danger-rgb), 0.05) 0, rgba(var(--color-danger-rgb), 0.05) 1px, transparent 1px, transparent 20px);
    border: 1px solid rgba(var(--color-danger-rgb), 0.4);
    box-shadow: 0 0 20px rgba(var(--color-danger-rgb), 0.5);
    padding: 2rem;
    max-width: 550px;
    color: var(--color-danger);
    text-align: center;
    opacity: 1;
    visibility: visible;
    transition: 
        opacity var(--fade-out-duration) ease-in-out, 
        visibility var(--fade-out-duration),
        border-color var(--color-transition-duration) ease-in-out,
        box-shadow var(--color-transition-duration) ease-in-out,
        color var(--color-transition-duration) ease-in-out;
}

.login-container.fade-out { opacity: 0; visibility: hidden; pointer-events: none; }
.login-container h1 { font-size: 1.5rem; margin-bottom: 20px; text-align: center; text-shadow: 0 0 10px rgba(var(--color-danger-rgb), 0.9); transition: all var(--color-transition-duration) ease-in-out; }
.login-container h1 svg path { fill: var(--color-danger); transition: fill var(--color-transition-duration) ease-in-out; }
.input-group { display: flex; margin-bottom: 15px; }
.input-group input { flex-grow: 1; background-color: transparent; border: 1px solid var(--color-danger); color: var(--color-danger); padding: 10px; font-size: 1rem; outline: none; box-shadow: 0 0 5px rgba(var(--color-danger-rgb), 0.5); transition: all var(--color-transition-duration) ease-in-out; }
.username-label-button, .password-label-button { background-color: var(--color-danger); color: var(--color-dark); border: none; padding: 10px; font-size: 0.8rem; font-weight: bold; cursor: default; text-shadow: none; transition: all var(--color-transition-duration) ease-in-out; }
.username-label-button svg path, .password-label-button svg path { fill: var(--color-dark); }
.button-group { display: flex; gap: 10px; margin-top: 20px; }

.button-group button {
    background-color: transparent;
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
    padding: 10px 15px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out, color var(--color-transition-duration), border-color var(--color-transition-duration);
    white-space: nowrap;
    flex-grow: 1;
}

.button-group button:hover { background-color: rgba(var(--color-danger-rgb), 0.2); box-shadow: 0 0 15px rgba(var(--color-danger-rgb), 0.8); }
.button-group button svg { vertical-align: middle; margin-right: 5px; }
.button-group button svg path { fill: var(--color-danger); transition: fill var(--color-transition-duration) ease-in-out; }

.loading { background: linear-gradient(to bottom, rgba(43,237,230,0.05) 0%, rgba(43,237,230,0.1) 100%) !important; border-color: var(--color-highlight-blue) !important; color: var(--color-highlight-blue) !important; text-shadow: none !important; box-shadow: 0 0 15px var(--color-glow-highlight) !important; cursor: default !important; transition: all 0.5s ease !important; }
.spinner-grow { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; border-radius: 50%; opacity: 0; animation: 0.75s linear infinite spinner-grow-animation; }
.spinner-grow-sm { width: 0.8rem; height: 0.8rem; }
@keyframes spinner-grow-animation { 0% { transform: scale(0); } 50% { opacity: 1; transform: none; } }
.animation-paused { animation: none !important; opacity: 1 !important; }
.spinner-solo { position: fixed; z-index: 1001; transition: top 1.5s ease-in-out, left 1.5s ease-in-out; }
.spinner-solo.center { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
.spinner-solo.hidden { opacity: 0; visibility: hidden; transition: opacity 0.5s ease-out, visibility 0.5s; }
#jarvis-gif { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9999; width: 300px; height: auto; opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in, visibility 0.5s; pointer-events: none; }
#jarvis-gif.visible { opacity: 1; visibility: visible; }

/* ==================================== */
/* LÓGICA DE MODAIS CORRIGIDA E LIMPA   */
/* ==================================== */

#modal-overlay, .modal {
    /* Estado Padrão: Escondido e Inativo */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, visibility 0.3s, transform 0.3s ease-in-out;
}

#modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 5000;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    z-index: 5001;
    width: 600px;
    height: 550px;
    background-color: var(--color-black-transparent);
    border: 1px solid var(--color-modal-elements);
    box-shadow: 0 0 20px var(--color-modal-elements);
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.modal .modal-content {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.modal .modal-content img { max-width: 100%; max-height: 100%; object-fit: contain; }

.modal .close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: 1px solid var(--color-modal-elements);
    color: var(--color-modal-elements);
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 16px;
    margin-top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

/* Estado Ativo: Visível e Interativo */
#modal-overlay.visible, .modal.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal.visible {
    transform: translate(-50%, -50%) scale(1);
}