/* ================================== */
/* DEFINIÇÃO DAS VARIÁVEIS DE COR     */
/* ================================== */
:root {
    /* Paleta Principal e-Chama */
    --cor-primaria: #e67e22;       /* Laranja e-Chama */
    --cor-primaria-hover: #d35400; /* Laranja e-Chama mais escuro para hover */
    --cor-secundaria: #2c3e50;    /* Azul Escuro (para sidebars, etc.) */
    --cor-texto-claro: #ecf0f1;    /* Branco acinzentado para texto em fundos escuros */
    --cor-texto-escuro: #34495e;   /* Cinza escuro para texto em fundos claros */
    
    /* Cores de Fundo */
    --cor-fundo-principal: #f4f7f6; /* Fundo geral do dashboard e páginas */
    --cor-fundo-container: #ffffff; /* Fundo de caixas, cards, inputs */

    /* Cores de Feedback */
    --cor-sucesso: #27ae60;        /* Verde */
    --cor-erro: #e74c3c;           /* Vermelho */
    --cor-aviso: #f39c12;          /* Amarelo */
    --cor-info: #3498db;           /* Azul claro */

    /* Cores de UI (Interface do Usuário) */
    --cor-borda: #e0e0e0;
    --cor-sombra: rgba(0, 0, 0, 0.1);
    --cor-link: var(--cor-primaria);
}

/* ================================== */
/* ESTILOS GERAIS E RESET             */
/* ================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap' );

/* ADICIONAR no reset geral */
html {
    scroll-behavior: smooth;
}
*, *::before, *::after {
    box-sizing: border-box;
}

/* Seu código atual está correto no input, mas adicione no universal */

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    background-color: var(--cor-fundo-principal);
}

/* Remove o comportamento padrão do body para o dashboard */
body.dashboard-body {
    display: block;
}

/* Comportamento padrão para páginas de login/cadastro */
body:not(.dashboard-body) {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ================================== */
/* LAYOUT DA TELA DE LOGIN (NOVO)     */
/* ================================== */
.split-screen-container {
    display: flex;
    width: 100vw;
    height: 100vh;
}

.left-pane {
    flex: 1;
    background-image: url('https://images.unsplash.com/photo-1576707995936-a6cffe26ef7b?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' ); /* Imagem de exemplo */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--cor-texto-claro);
    text-align: center;
}

.left-pane::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(44, 62, 80, 0.7); /* Overlay com --cor-secundaria e transparência */
}

.image-overlay {
    position: relative; /* Para ficar acima do overlay */
    padding: 2rem;
}

.image-overlay h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.image-overlay p {
    font-size: 1.2rem;
}

.right-pane {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cor-fundo-container);
}

/* ================================== */
/* COMPONENTES DE FORMULÁRIO (LOGIN/CADASTRO) */
/* ================================== */
.login-container, .login-form-container {
    background-color: var(--cor-fundo-container);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 10px 25px var(--cor-sombra);
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.logo-header h1, .login-form-container h2 {
    color: var(--cor-secundaria);
    margin: 0 0 10px 0;
    font-size: 2rem;
    font-weight: 700;
}

.logo-header p, .login-form-container p {
    color: var(--cor-texto-escuro);
    margin: 5px 0 30px 0;
}

.input-group {
    margin-bottom: 20px;
    text-align: left;
}

label {
    display: block;
    margin-bottom: 8px;
    color: var(--cor-texto-escuro);
    font-size: 14px;
}

input[type="email"], input[type="password"], input[type="text"] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper input {
    padding-right: 40px;
}

/* ATUALIZAR de .toggle-password para button.toggle-password */
.password-wrapper button.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--cor-texto-escuro);
    background: none;
    border: none;
    padding: 0;
    width: auto;
    font-size: 20px;
    transition: color 0.3s ease;
}

.password-wrapper button.toggle-password:hover {
    color: var(--cor-primaria);
}

.forgot-password {
    display: block;
    margin-top: 8px;
    font-size: 0.9em;
    text-align: right;
    color: var(--cor-link);
    text-decoration: none;
    font-weight: bold;
}

.forgot-password:hover {
    text-decoration: underline;
}

.signup-link a,
.terms-group a {
    color: var(--cor-link);
    text-decoration: none;
    font-weight: bold;
}

.signup-link a:hover,
.terms-group a:hover {
    text-decoration: underline;
}

.g-recaptcha {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

button:not(.toggle-password):not(.action-btn):not(.close-button) {
    width: 100%;
    padding: 15px;
    background-color: var(--cor-primaria);
    color: var(--cor-texto-claro);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

button:not(.toggle-password):not(.action-btn):not(.close-button):hover {
    background-color: var(--cor-primaria-hover);
}

button:disabled {
    background-color: var(--cor-borda);
    cursor: not-allowed;
    opacity: 0.6;
}

.error-message {
    color: var(--cor-erro);
    text-align: center;
    margin-top: 15px;
    height: 20px;
    font-weight: bold;
}

/* ================================== */
/* ESTILOS DO DASHBOARD               */
/* ================================== */
.dashboard-layout { display: flex; min-height: 100vh; }
.sidebar { width: 250px; background-color: var(--cor-secundaria); color: var(--cor-texto-claro); display: flex; flex-direction: column; flex-shrink: 0; }
.sidebar-header { padding: 20px; text-align: center; font-size: 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.sidebar-nav { flex-grow: 1; }
.sidebar-nav ul { list-style: none; padding: 0; margin: 20px 0; }
.sidebar-nav li a { display: flex; align-items: center; padding: 15px 20px; color: var(--cor-texto-claro); text-decoration: none; transition: background-color 0.3s; }
.sidebar-nav li a:hover, .sidebar-nav li.active a { background-color: var(--cor-primaria); }
.sidebar-nav i { margin-right: 15px; width: 20px; text-align: center; }
.sidebar-footer { padding: 20px; border-top: 1px solid rgba(255,255,255,0.1); }
.sidebar-footer a { display: flex; align-items: center; color: var(--cor-texto-claro); text-decoration: none; }
.sidebar-footer a:hover { color: var(--cor-erro); }

.main-content { flex-grow: 1; display: flex; flex-direction: column; }
.main-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: var(--cor-fundo-container); border-bottom: 1px solid var(--cor-borda); }
.user-info { display: flex; align-items: center; }
.user-info span { margin-right: 15px; }
.user-info i { font-size: 1.8rem; color: var(--cor-texto-escuro); }
.content-area { padding: 20px; flex-grow: 1; }

.summary-cards { display: flex; gap: 20px; margin-bottom: 30px; }
.card { background-color: var(--cor-fundo-container); padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px var(--cor-sombra); flex-grow: 1; }
.card h3 { margin-top: 0; }
.card .card-number { font-size: 2rem; font-weight: bold; color: var(--cor-secundaria); }
.card .card-status.conformes { color: var(--cor-sucesso); }
.card-alerta { border-left: 5px solid var(--cor-erro); }

/* ================================== */
/* TABELAS E MODAIS                   */
/* ================================== */
.toolbar { margin-bottom: 20px; }
.toolbar button { padding: 10px 15px; font-size: 1rem; }
.table-container { background-color: var(--cor-fundo-container); border-radius: 8px; box-shadow: 0 2px 5px var(--cor-sombra); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px; text-align: left; border-bottom: 1px solid var(--cor-borda); }
thead th { background-color: var(--cor-fundo-principal); color: var(--cor-texto-escuro); font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background-color: var(--cor-fundo-principal); }

.status-ok { background-color: var(--cor-sucesso); }
.status-vencido { background-color: var(--cor-erro); }
.status-atencao { background-color: var(--cor-aviso); color: var(--cor-texto-escuro); }

.action-btn { background: none; border: none; cursor: pointer; color: var(--cor-info); margin-right: 10px; font-size: 1.1rem; }
.action-btn.delete { color: var(--cor-erro); }

.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5); }
.modal-content { background-color: var(--cor-fundo-container); margin: 10% auto; padding: 30px; border-radius: 8px; width: 80%; max-width: 500px; position: relative; }
.close-button { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close-button:hover { color: black; }

#map { height: 75vh; width: 100%; border-radius: 8px; box-shadow: 0 2px 5px var(--cor-sombra); }
/* ================================== */
/* CONTINUAÇÃO E CORREÇÕES FINAIS     */
/* ================================== */

/* Estilos para o botão do Google e o divisor (agora usando variáveis) */
.google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background-color: #4285F4; /* Cor oficial do Google - mantida por branding */
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
}

.google-btn:hover {
    background-color: #357ae8;
}

.google-btn img {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    background-color: white;
    border-radius: 50%;
    padding: 2px;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--cor-texto-escuro);
    margin: 20px 0;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--cor-borda);
}

.divider span {
    padding: 0 15px;
    font-size: 12px;
    font-weight: bold;
}

/* Ajustes Finais de Formulário */
.terms-group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    font-size: 14px;
}

.terms-group input[type="checkbox"] {
    margin-right: 10px;
}

.terms-group label {
    margin: 0;
    color: var(--cor-texto-escuro);
}

.signup-link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}

/* Estilo para o container de upload na página de documentos */
.upload-container {
    padding: 30px;
    background-color: var(--cor-fundo-container);
    border-radius: 8px;
    box-shadow: 0 2px 5px var(--cor-sombra);
}
.upload-container h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

/* ================================== */
/* PARTE FINAL DO CÓDIGO (FALTANTE)   */
/* ================================== */

/* Estilos para o container dos botões de cadastro/login */
.button-container {
    display: flex;
    flex-direction: column; /* Coloca os botões um embaixo do outro */
    width: 100%;
    gap: 10px; /* Cria um espaço vertical entre os botões */
    margin-top: 15px; /* Adiciona um espaço acima do primeiro botão */
}

/*
   Nota: As classes abaixo já podem ter sido definidas acima,
   mas incluí-las aqui garante que nada se perca.
   O CSS vai simplesmente sobrescrever com os mesmos valores.
*/

.status-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: bold;
    color: white;
    font-size: 0.8em;
}

.status-ok {
    background-color: var(--cor-sucesso);
}

.status-vencido {
    background-color: var(--cor-erro);
}

.status-atencao {
    background-color: var(--cor-aviso);
    color: var(--cor-texto-escuro);
}

.card-alerta {
    border-left: 5px solid var(--cor-erro); /* Usando a variável de erro */
}

.card-alerta:hover {
    background-color: #fff2f2; /* Um vermelho bem claro no hover */
}

/* Adicione ao final de style.css */
.button-danger {
    background-color: var(--cor-erro);
}
.button-danger:hover {
    background-color: #c0392b; /* Vermelho mais escuro */
}

.password-reqs ul { list-style: none; padding: 0; margin-top: 10px; font-size: 0.9em; }
.password-reqs li { color: var(--cor-erro); transition: color 0.3s; }
.password-reqs li.valid { color: var(--cor-sucesso); text-decoration: line-through; }

/* ================================== */
/* RESPONSIVIDADE                     */
/* ================================== */

/* Tablets e telas menores */
@media (max-width: 968px) {
    .split-screen-container {
        flex-direction: column;
    }
    
    .left-pane {
        min-height: 200px;
    }
    
    .image-overlay h1 {
        font-size: 2rem;
    }
    
    .image-overlay p {
        font-size: 1rem;
    }
    
    .sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
    }
    
    .sidebar-nav ul {
        display: flex;
        margin: 0;
    }
    
    .sidebar-nav li a {
        padding: 10px 15px;
        white-space: nowrap;
    }
    
    .summary-cards {
        flex-direction: column;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .login-container, .login-form-container {
        padding: 20px;
        max-width: 100%;
        box-shadow: none;
    }
    
    .left-pane {
        display: none; /* Esconde imagem em mobile */
    }
    
    .right-pane {
        width: 100%;
    }
    
    button {
        font-size: 16px;
        padding: 12px;
    }
    
    .main-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .table-container {
        overflow-x: scroll;
    }
    
    table {
        font-size: 0.9rem;
    }
    
    th, td {
        padding: 10px 8px;
    }
}

/* ================================== */
/* ESTADOS DE FOCO (ACESSIBILIDADE)   */
/* ================================== */

/* Focus visível para navegação por teclado */
input:focus,
button:focus,
a:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
}

/* Remove outline apenas se o usuário estiver usando mouse */
input:focus:not(:focus-visible),
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* Estados de hover e focus para links */
a {
    transition: color 0.3s ease;
}

/* Melhorar contraste dos badges */
.status-badge {
    padding: 5px 10px; /* Aumentar um pouco o padding */
    border-radius: 12px;
    font-weight: bold;
    color: white;
    font-size: 0.85em;
    display: inline-block;
}

/* Para animações suaves */
button,
.action-btn,
.sidebar-nav li a,
.toggle-password {
    will-change: transform, background-color;
}

/* Remover will-change após animação (fazer via JS se necessário) */

/* ADICIONAR depois de 'button' geral */
button:not(.toggle-password):not(.action-btn):not(.close-button) {
    width: 100%;
    padding: 15px;
    background-color: var(--cor-primaria);
    color: var(--cor-texto-claro);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

button:not(.toggle-password):not(.action-btn):not(.close-button):hover {
    background-color: var(--cor-primaria-hover);
}

button:disabled {
    background-color: var(--cor-borda);
    cursor: not-allowed;
    opacity: 0.6;
}



/* ================================== */
/* ANIMAÇÕES E TRANSIÇÕES             */
/* ================================== */

/* Fade in para modais */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal.show {
    display: block;
    animation: fadeIn 0.3s ease;
}

.modal-content {
    animation: fadeIn 0.3s ease;
}

/* Loading spinner (caso precise) */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    border: 3px solid var(--cor-borda);
    border-top: 3px solid var(--cor-primaria);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

/* Transição suave para cards */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px var(--cor-sombra);
}