/* ferias/static/ferias/css/style.css */

/*
 * ETAPA 1: DEFINIÇÃO DAS VARIÁVEIS DE ESTILO (VERSÃO "SUAVE")
*/
:root {
    --cor-primaria: #FF4500;
    --cor-primaria-hover: #E03E00;
    --cor-fundo: #f8f9fa;
    --cor-fundo-card: #ffffff;
    --cor-texto: #212529;
    --cor-texto-suave: #6c757d;
    --cor-borda: #dee2e6;
    
    --raio-borda-arredondado: 50px;
    --raio-borda-padrao: 8px;

    --fonte-principal: 'Lato', sans-serif;
    --peso-titulo: 700;
    --peso-normal: 400;
    --peso-leve: 300;
}

/* --- RESET BÁSICO E APLICAÇÃO DA BASE --- */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
    font-family: var(--fonte-principal);
    font-weight: var(--peso-normal);
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    margin: 0;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--peso-titulo);
    text-transform: none;
    margin-top: 0;
}

p {
    font-weight: var(--peso-leve);
}

/* --- COMPONENTES ATUALIZADOS --- */

/* 1. Layout e Navegação */
.container-principal {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 15px;
}

.navegacao-principal {
    width: 100%;
    background-color: var(--cor-fundo-card);
    padding: 15px 0;
    border-bottom: 1px solid var(--cor-borda);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.navegacao-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.logo {
    font-family: var(--fonte-principal);
    font-size: 1.5rem;
    font-weight: var(--peso-titulo);
    color: var(--cor-primaria);
    text-decoration: none;
    text-transform: uppercase;
}

.menu-principal ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu-principal li {
    display: inline-block;
    margin-left: 25px;
}
.menu-principal a {
    color: var(--cor-texto-suave);
    text-decoration: none;
    font-size: 1rem;
    font-weight: var(--peso-normal);
    transition: color 0.2s;
}
.menu-principal a:hover {
    color: var(--cor-primaria);
}

.menu-navegacao-container {
    display: flex;
    align-items: center;
}
.menu-acoes-usuario {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 25px;
}

/* 2. Botões */
.botao-acao-principal,
.botao-principal,
.botao-sucesso,
.botao-perigo,
.botao-secundario {
    display: inline-block;
    padding: 10px 25px;
    font-size: 0.9rem;
    font-weight: var(--peso-titulo);
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: var(--raio-borda-arredondado);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    text-transform: uppercase;
}
.botao-acao-principal:hover,
.botao-principal:hover,
.botao-sucesso:hover,
.botao-perigo:hover,
.botao-secundario:hover {
    transform: translateY(-2px);
}

.botao-acao-principal,
.botao-principal,
.botao-sucesso {
    background-color: var(--cor-primaria);
    box-shadow: 0 4px 15px rgba(255, 69, 0, 0.2);
}
.botao-acao-principal:hover,
.botao-principal:hover,
.botao-sucesso:hover {
    background-color: var(--cor-primaria-hover);
}
.botao-secundario {
    background-color: #E9ECEF;
    color: var(--cor-texto);
    box-shadow: none;
}
.botao-secundario:hover {
    background-color: #dee2e6;
}
.botao-perigo {
    background-color: #dc3545;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.2);
}
.botao-perigo:hover {
    background-color: #bb2d3b;
}

/* 3. Formulários */
.campo-form {
    margin-bottom: 20px;
}
.campo-form label {
    font-weight: var(--peso-titulo);
    text-transform: none;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 8px;
    color: var(--cor-texto-suave);
}

.input-form {
    width: 100%;
    padding: 10px 15px;
    font-size: 1rem;
    font-family: var(--fonte-principal);
    font-weight: var(--peso-normal);
    color: var(--cor-texto);
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda-padrao);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.input-form:focus {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 0.2rem rgba(255, 69, 0, 0.25);
    outline: none;
}

.input-form.azul-focus:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Container para inputs com ícones */
.input-group {
    position: relative;
    width: 100%;
}
.input-group .input-form {
    padding-right: 40px; /* Espaço para o ícone à direita */
}
.input-group-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cor-texto-suave);
    pointer-events: none;
}


/* 4. Tabelas */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
th, td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--cor-borda);
    text-align: left;
    font-weight: var(--peso-normal);
}
thead th {
    background-color: var(--cor-fundo-card);
    font-weight: var(--peso-titulo);
    text-transform: none;
    font-size: 0.9rem;
    color: var(--cor-texto-suave);
}

/* 5. Cards */
.card {
    background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda-padrao);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    overflow: hidden;
}
.card-header {
    padding: 20px 25px;
    background-color: var(--cor-fundo-card);
    border-bottom: 1px solid var(--cor-borda);
}
.card-body {
    padding: 25px;
    font-weight: var(--peso-leve);
}

/* 6. Badges (Etiquetas de Status) */
.badge {
    display: inline-block;
    padding: 5px 12px;
    font-size: 0.8rem;
    font-weight: var(--peso-titulo);
    border-radius: var(--raio-borda-arredondado);
    color: #fff;
    text-transform: uppercase;
}
.badge-sucesso { background-color: #198754; }
.badge-perigo { background-color: #dc3545; }
.badge-aviso { background-color: #ffc107; color: #000; }

/* 7. Dropdown do Usuário */
.dropdown-usuario {
    position: relative;
    margin-left: 15px;
}
.dropdown-menu {
    display: none; position: absolute; right: 0; top: 100%;
    min-width: 200px; background-color: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda-padrao);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 100; padding: 10px 0; margin-top: 10px;
}
.dropdown-menu.ativo { display: block; }

.dropdown-menu li { list-style: none; }
.dropdown-menu a {
    display: block; padding: 8px 15px;
    color: var(--cor-texto); text-decoration: none;
    font-weight: var(--peso-normal);
}
.dropdown-menu a:hover { background-color: var(--cor-fundo); }
.dropdown-menu hr { border: 0; border-top: 1px solid var(--cor-borda); margin: 5px 0; }
.dropdown-info {
    display: block; padding: 8px 15px;
    color: var(--cor-texto-suave); font-style: italic; font-size: 0.9rem;
}
.dropdown-link-botao {
    background: none; border: none; color: var(--cor-primaria);
    padding: 8px 15px; text-align: left; width: 100%;
    cursor: pointer; font-size: 1rem; font-family: var(--fonte-principal);
    font-weight: var(--peso-normal);
}
.dropdown-link-botao:hover { background-color: var(--cor-fundo); }

/* 8. Estilos do Dashboard */
.container-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.titulo-secao {
    margin-top: 30px;
    margin-bottom: 15px;
}

/* 9. Estilos da Página de Login */
.login-page {
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; background-color: var(--cor-fundo);
}
.login-container-externo {
    width: 100%; max-width: 1000px; padding: 20px;
}
.login-card {
    display: flex; background-color: var(--cor-fundo-card);
    border-radius: var(--raio-borda-padrao);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    overflow: hidden; min-height: 500px;
}
.login-left {
    flex: 1; background-color: var(--cor-fundo-card);
    padding: 40px; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    color: var(--cor-texto);
    border-right: 1px solid var(--cor-borda);
}
.login-right {
    flex: 1; padding: 40px; display: flex;
    flex-direction: column; justify-content: center;
    background-color: var(--cor-fundo-card);
}
.login-titulo {
    font-size: 2.5rem; color: #003366; /* Azul escuro */
    margin-bottom: 20px; line-height: 1.1;
    text-transform: uppercase;
}
.login-brasao {
    max-width: 150px;
    height: auto;
    margin-top: 10px;
}
.login-subtitulo {
    font-size: 1.1rem; color: var(--cor-texto-suave);
    line-height: 1.6; font-weight: var(--peso-leve);
}
.form-titulo {
    font-size: 2rem; margin-bottom: 30px;
    text-align: center; color: var(--cor-texto);
    text-transform: none;
}
.botao-principal.full-width {
    width: 100%; margin-top: 20px;
}
.login-links {
    text-align: center; margin-top: 20px;
}
.login-links .link-texto {
    color: var(--cor-texto-suave); text-decoration: none;
    font-size: 0.95rem; font-weight: var(--peso-normal);
}
.login-links .link-texto:hover {
    color: var(--cor-primaria); text-decoration: underline;
}

@media (max-width: 768px) {
    .login-card { flex-direction: column; min-height: auto; }
    .login-left {
        text-align: center; align-items: center;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--cor-borda);
        border-right: none;
    }
    .login-titulo { font-size: 2rem; }
    .form-titulo { margin-top: 20px; }
}

/* 10. Alertas */
.mensagens-container {
    margin-bottom: 20px;
}
.alerta {
    padding: 15px 20px;
    border: 1px solid transparent;
    border-radius: var(--raio-borda-padrao);
}
.alerta-success {
    background-color: #d1e7dd;
    color: #0f5132;
    border-color: #badbcc;
}
.alerta-error {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}
.alerta-info {
    padding: 15px 20px;
    background-color: #f0f4f8;
    color: #31708f;
    border: 1px solid #bce8f1;
    border-radius: var(--raio-borda-padrao);
}

/* 11. Modal */
.modal {
    display: none; position: fixed; z-index: 1000;
    left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
    justify-content: center; align-items: center;
}
.modal.ativo { display: flex; }
.modal-conteudo {
    background-color: var(--cor-fundo-card);
    border-radius: var(--raio-borda-padrao);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 100%; max-width: 500px;
    animation: modalFadeIn 0.3s ease-out;
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 20px; border-bottom: 1px solid var(--cor-borda);
}
.modal-header h3 { margin: 0; font-size: 1.5rem; }
.modal-fechar {
    font-size: 2rem; font-weight: bold; line-height: 1;
    color: #aaa; cursor: pointer; background: none; border: none;
}
.modal-fechar:hover { color: var(--cor-texto); }
.modal-body { padding: 20px; }
.modal-body p { font-weight: var(--peso-normal); }
.modal-body strong { font-weight: var(--peso-titulo); color: var(--cor-primaria); }
.modal-footer {
    display: flex; justify-content: flex-end;
    gap: 10px; padding: 15px 20px;
    border-top: 1px solid var(--cor-borda);
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 12. Calendário */
.fc { font-family: var(--fonte-principal); }
.fc .fc-button {
    background-color: #E9ECEF; color: var(--cor-texto);
    border: none; padding: 8px 15px;
    font-weight: var(--peso-titulo); text-transform: uppercase;
    font-size: 0.8rem; border-radius: var(--raio-borda-arredondado);
    transition: background-color 0.2s; box-shadow: none;
}
.fc .fc-today-button {
    background-color: var(--cor-primaria);
    color: #fff;
    box-shadow: 0 4px 15px rgba(255, 69, 0, 0.2);
}
.fc .fc-button:hover { background-color: #dee2e6; }
.fc .fc-today-button:hover { background-color: var(--cor-primaria-hover); }
.fc-daygrid-event {
    background-color: #198754; border: none;
    border-radius: 4px; padding: 2px 5px;
}
.fc .fc-toolbar-title {
    font-weight: var(--peso-titulo);
    font-size: 1.8rem;
}
.fc .fc-col-header-cell-cushion {
    font-weight: var(--peso-titulo);
    color: var(--cor-texto-suave);
    text-decoration: none;
    font-size: 0.9rem;
}
.fc .fc-day-today { background-color: var(--cor-fundo); }

/* 13. O CÓDIGO QUE FALTAVA (ESTILOS DA FOTO NO HEADER) */
.dropdown-botao-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    overflow: hidden;
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    cursor: pointer;
}
.navbar-profile-pic {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.dropdown-botao-icone .bi-person-circle {
     font-size: 2.2rem;
     color: var(--cor-texto-suave);
     line-height: 1;
}
.dropdown-botao-icone:hover .bi-person-circle {
    color: var(--cor-primaria);
}

/* 14. TEMA ESCURO (TODO O RESTO) */
body.tema-escuro { background-color: #121212; color: #e0e0e0; }
body.tema-escuro .navegacao-principal { background-color: #1a1a1a; border-color: #333; }
body.tema-escuro .logo { color: var(--cor-primaria); }
body.tema-escuro .menu-principal a { color: #aaa; }
body.tema-escuro .menu-principal a:hover { color: #fff; }
body.tema-escuro .dropdown-botao-icone { background-color: #333; border-color: #555; }
body.tema-escuro .dropdown-botao-icone .bi-person-circle { color: #777; }
body.tema-escuro .dropdown-menu { background-color: #2c2c2c; border-color: #555; }
body.tema-escuro .dropdown-menu a { color: #eee; }
body.tema-escuro .dropdown-menu a:hover { background-color: #3f3f3f; }
body.tema-escuro .dropdown-menu hr { border-top: 1px solid #555; }
body.tema-escuro .dropdown-info { color: #aaa; }
body.tema-escuro .dropdown-link-botao { color: #ff8a8a; }
body.tema-escuro .dropdown-link-botao:hover { background-color: #3f3f3f; }
body.tema-escuro th, body.tema-escuro td { border-bottom: 1px solid #444; }
body.tema-escuro thead th { background-color: #1e1e1e; color: #aaa; }
body.tema-escuro .input-form { background-color: #2c2c2c; color: #eee; border-color: #555; }
body.tema-escuro .card { background-color: #1e1e1e; border-color: #444; }
body.tema-escuro .card-header { background-color: #2c2c2c; border-bottom: 1px solid #444; }
body.tema-escuro .login-page { background-color: #0d0d0d; }
body.tema-escuro .login-card { background-color: #1a1a1a; }
body.tema-escuro .login-left { background-color: #121212; color: #e0e0e0; }
body.tema-escuro .login-subtitulo { color: #aaa; }
body.tema-escuro .form-titulo { color: #e0e0e0; }
body.tema-escuro .login-links .link-texto { color: #aaa; }
body.tema-escuro .alerta-info { background-color: #1a2a33; color: #a3daff; border-color: #2a5a75; }
body.tema-escuro .alerta-success { background-color: #1a3a2a; color: #a3ffc7; border-color: #2a5a3a; }
body.tema-escuro .alerta-error { background-color: #4a272a; color: #ffbaba; border-color: #a44a4a; }
body.tema-escuro .modal-conteudo { background-color: #1e1e1e; border-color: #444; }
body.tema-escuro .modal-header, body.tema-escuro .modal-footer { border-color: #444; }
body.tema-escuro .modal-fechar { color: #777; }
body.tema-escuro .modal-fechar:hover { color: #eee; }
body.tema-escuro .fc .fc-button { background-color: #343a40; color: #eee; }
body.tema-escuro .fc .fc-today-button { background-color: var(--cor-primaria); }
body.tema-escuro .fc .fc-toolbar-title { color: #eee; }
body.tema-escuro .fc .fc-col-header-cell-cushion { color: #aaa; }
body.tema-escuro .fc .fc-day-today { background-color: #1a1a1a; }
body.tema-escuro .fc-theme-standard th, body.tema-escuro .fc-theme-standard td { border-color: #444; }
body.tema-escuro .fc-theme-standard th { background-color: #1e1e1e; }
body.tema-escuro .fc .fc-daygrid-day-number { color: #eee; }
body.tema-escuro .fc .fc-day-other .fc-daygrid-day-number { color: #777; }


/* === ESTILOS DA TELA DE ONBOARDING === */

.onboarding-card-body {
    display: flex;
    justify-content: space-between; /* Joga o input para um lado e o check para o outro */
    align-items: center;
    gap: 20px;
    padding: 15px 20px;
}

.onboarding-campo {
    flex-grow: 1; /* Faz o campo de input ocupar o espaço disponível */
}

.onboarding-check {
    flex-shrink: 0; /* Impede que o checkbox encolha */
    /* Estilização bonita para o checkbox, como na foto */
    transform: scale(1.5); /* Aumenta o tamanho do checkbox */
    accent-color: var(--cor-primaria); /* Deixa o checkbox laranja */
}

/* Remove as setinhas do input de número (para ficar mais limpo) */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
input[type=number] {
  -moz-appearance: textfield;
}