:root {
    --cor-verde-ame: #1ABC9C; 
    --cor-azul-ame: #005480;  

    --primary: var(--cor-verde-ame); 
    --primary-dark: #0c7863;
    --cinza-titulo: #34485b;
    --bg-body: #dbece5;
    --bg-card: #ffffff;
    --text-main: #2c3e50;
    --border-radius: 15px;
}

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background-color: var(--bg-body); 
    color: var(--text-main);
    margin: 0;
    
    /* FLEXBOX GLOBAL PARA CENTRALIZAR O APP */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    min-height: 100vh;       /* Garante que o body tenha a altura da tela */
    padding: 20px;           /* Espaço nas bordas para mobile */
    box-sizing: border-box;
}

.container { 
    width: 100%;             /* Ocupa a largura disponível */
    max-width: 900px;        /* Mas trava em 900px */
    background: var(--bg-card); 
    padding: 40px; 
    border-radius: var(--border-radius); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Sombra mais suave e moderna */
    
    /* Flex interno para organizar o conteúdo verticalmente */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espaço padrão entre os blocos (título, linhas, botões) */
}

/* --- Cabeçalho e Logo --- */
.logo-container { text-align: center; margin-bottom: 15px; }
.logo-container img { max-height: 180px; max-width: 100%; object-fit: contain; }

/* 1. SEU H1 AJUSTADO */
h1 { 
    color: var(--cinza-titulo); 
    text-align: center; 
    
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    
    /* DEFININDO A SIMETRIA */
    padding-bottom: 15px; /* Distância do Título até a Linha */
    margin-bottom: 15px;  /* Distância da Linha até o subtítulo (ERA 25px) */
    
    border-bottom: 4px solid; 
    border-image: linear-gradient(to right, var(--cor-verde-ame), var(--cor-azul-ame)) 1;
}

h1::after {
    display: none;
}

/* 2. REGRA PARA O TEXTO "LOGADO COMO" COLAR NA BARRA */
/* Isso pega qualquer <p> ou <div> que venha logo depois do h1 e remove o espaço extra */
h1 + p, h1 + div {
    margin-top: 0 !important;   /* Zera a margem de cima do texto */
    padding-top: 0 !important;
    text-align: center;         /* Garante que fique centralizado */
}

/* --- Formulário (Grid) --- */
.row { 
    display: flex; 
    flex-direction: row;     /* Padrão: lado a lado */
    flex-wrap: wrap;         /* Permite quebrar linha se faltar espaço */
    gap: 20px;               /* Espaço entre os campos (substitui margin) */
    margin-bottom: 0;        /* Remove margin antiga pois o container já tem gap */
    align-items: flex-start;   /* Alinha os campos pela base (útil se tiver label maior) */
}

.col { 
    flex: 1;                 /* Cresce para ocupar espaço igual */
    min-width: 250px;        /* Se ficar menor que 250px, quebra para linha de baixo */
    display: flex;           /* Torna a coluna flex também (para alinhar label e input) */
    flex-direction: column;  /* Um embaixo do outro */
}

label { font-weight: bold; margin-bottom: 5px; color: #2c3e50; display: block; }

/* AJUSTE DE ALTURA UNIFICADA */
input, select { 
    width: 100%; 
    
    /* O SEGREDO ESTÁ AQUI: */
    height: 45px;      /* 1. Define uma altura fixa igual para todos */
    padding: 0 12px;   /* 2. Zera o padding vertical (0) para não somar com a altura */
    
    border: 1px solid #2c3e50; 
    border-radius: 5px; 
    box-sizing: border-box; /* Garante que a borda não aumente o tamanho total */
    font-size: 14px;
    transition: border-color 0.3s;
    background-color: #fff; /* Garante fundo branco */
}
input:focus, select:focus { border-color: #2c3e50;; outline: none; }

/* Input com ícone de busca (datalist) */
input[list] { background-color: #fff; }

/* --- Botões --- */
button { cursor: pointer; transition: background 0.3s; font-family: inherit; }

.btn-historico { 
    background: #fff; 
    color: #2c3e50; 
    border: 1px solid #2c3e50; 
    padding: 8px 15px; 
    border-radius: 50px !important; /* O segredo: valor alto deixa redondo */
    padding-left: 20px !important;  /* Mais espaço nas laterais para o texto não colar na curva */
    padding-right: 20px !important; 
    font-weight: bold; 
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.btn-historico:hover { background: #f8f8f8; color: var(--primary); border-color: #2c3e50; }

.btn-add { 
    background: #E67E22; 
    color: white; 
    border: 1px solid #2c3e50; 
    padding: 6px 12px; 
    border-radius: 50px !important; /* O segredo: valor alto deixa redondo */
    padding-left: 20px !important;  /* Mais espaço nas laterais para o texto não colar na curva */
    padding-right: 20px !important; 
    float: right; 
    font-size: 0.9em;
    cursor: pointer; /* Mãozinha ao passar o mouse */
    transition: background-color 0.2s ease; /* Suavidade na troca de cor */
    /*ÍCONE FICAR ALINHADO: */
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Espaço entre ícone e texto */
    
    transition: background 0.2s;
    font-weight: 600; /* Deixa o texto um pouco mais forte */
}

/* O Efeito ao passar o mouse */
.btn-add:hover {
    background: #c8640c; /* Um tom de verde mais escuro/fechado */
    border-color: #c8640c !important;
}

.btn-remove { 
    background: #ffebeb; 
    color: #d63031; 
    border: 1px solid #db3c3c; 
    border-radius: 50%;     /* Vira um círculo perfeito */
    width: 38px !important; /* Força largura igual a altura */
    height: 38px !important;
    padding: 0 !important; /* O segredo: valor alto deixa redondo */
    
    font-weight: bold;
}
.btn-remove:hover { background: #fea6a6; }

.btn-salvar { 
    width: 100%; 
    padding: 15px; 
    
    /* Força uma cor de fundo sólida (Verde Escuro da Logo) */
    background-color: #1ABC9C; 
    
    /* Força a cor do texto para Branco */
    color: #ffffff; 
    
    font-size: 1.2em; 
    font-weight: bold; 
    border: 1px solid #2c3e50; 
    border-radius: 50px !important; /* O segredo: valor alto deixa redondo */
    padding-left: 20px !important;  /* Mais espaço nas laterais para o texto não colar na curva */
    padding-right: 20px !important; 
    margin-top: 25px; 
    
    /* Garante que o botão seja visível */
    opacity: 1;
    visibility: visible;
}

.btn-salvar:hover { 
    /* Um verde bem mais escuro e sério */
    background-color: #148f77 !important; 
    transform: translateY(-2px);
}

.btn-limpar { 
    background: #f1f1f1; 
    color: #2c3e50; 
    border: none; 
    padding: 6px 12px; 
    margin-top: 8px; 
    border-radius: 4px; 
    font-size: 0.9em;
}
.btn-limpar:hover { background: #e2e2e2; }

/* --- Tabela --- */
table { width: 100%; border-collapse: collapse; margin-bottom: 20px; border: 1px solid #eee; }
th { background: #f8f9fa; text-align: left; padding: 12px; border-bottom: 2px solid #ddd; color: #2c3e50; }
td { padding: 10px; border-bottom: 1px solid #eee; }
.status-assinado { color: #1ABC9C; font-weight: bold; display: flex; align-items: center; gap: 5px; }

/* --- Área de Assinatura --- */
.box-assinatura { 
    border: 2px dashed #2c3e50;
    padding: 15px; 
    background: #fafafa; 
    border-radius: 8px; 
    text-align: center; 
}
.box-assinatura:hover { border-color: #2c3e50; background: #fff; }
canvas { 
    border: 1px solid #2c3e50;
    background: white; 
    width: 100%; 
    height: 120px; 
    cursor: crosshair;
}

.box-assinatura label {
    text-align: center;
    width: 100%;       /* Garante que o texto ocupe toda a largura para poder centralizar */
    display: block;    /* Garante que se comporte como bloco */
    margin-bottom: 10px; /* Um respiro entre o texto e a área de desenho */
    font-size: 1.1rem;   /* Um pouco maior para destaque */
    color: #2c3e50;
}

/* --- MODAL (Histórico) --- */
#modalHistorico { 
    display: none; 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.6); 
    z-index: 1000; 
    backdrop-filter: blur(3px);
}
.modal-content { 
    background: white; 
    width: 90%; 
    max-width: 600px; 
    margin: 60px auto; 
    border-radius: 10px; 
    max-height: 80vh; 
    display: flex; 
    flex-direction: column; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    overflow: hidden; 
}

/* Cabeçalho do Modal (Título Centralizado) */
.modal-header {
    padding: 15px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #2c3e50;
    position: relative; /* Necessário para posicionar o X */
    text-align: center; /* Centraliza o texto */
}

.modal-header h2 { 
    margin: 0; 
    font-size: 1.3rem; 
    color: #2c3e50; 
}

/* --- NOVO: Container para alinhar filtros lado a lado --- */
.filtros-linha {
    display: flex;           /* O segredo: coloca itens em linha */
    gap: 10px;               /* Espaço entre cada filtro */
    padding: 10px 20px;      /* Margem interna */
    background-color: #fff;  /* Fundo branco */
    align-items: center;     /* Centraliza verticalmente */
}

/* Estilo para os Selects ficarem bonitos e alinhados */
.filtros-linha select {
    flex: 1;                 /* Faz todos ocuparem o mesmo espaço */
    padding: 8px;            /* Altura confortável */
    border: 1px solid #2c3e50;  /* Borda suave */
    border-radius: 5px;      /* Cantos arredondados */
    background-color: white;
    cursor: pointer;
    min-width: 0; /* Impede que estoure em telas pequenas */
}

/* Botão de fechar (Posicionado no canto direito) */
.close-modal { 
    position: absolute; /* Sai do fluxo normal */
    right: 20px;        /* Cola na direita */
    top: 50%;           /* Centraliza verticalmente */
    transform: translateY(-50%); /* Ajuste fino do centro vertical */
    cursor: pointer; 
    font-size: 28px; 
    font-weight: bold; 
    color: #2c3e50; 
    line-height: 1;
}
.close-modal:hover { color: #d63031; }

/* Lista de Arquivos */
#listaHistorico { 
    padding: 10px; 
    overflow-y: auto; 
    flex: 1; 
}
.item-historico { 
    padding: 12px 15px; 
    border-bottom: 1px solid #f0f0f0; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    transition: background 0.2s;
}
.item-historico:hover { background: #f0fdf4; color: var(--primary-dark); }

/* Botão Editar dentro da lista */
.btn-editar-item {
    background-color: #e5e7eb;
    color: #2c3e50;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}
.item-historico:hover .btn-editar-item {
    background-color: #1ABC9C;
    color: white;
}

#inputBuscaHistorico {
    display: block; /* Garante que ocupe a linha toda */
    width: 90%;     /* Ocupa 90% da largura do modal */
    margin: 15px auto; /* 'auto' nas laterais centraliza o bloco horizontalmente */
    padding: 12px;
    border: 1px solid #2c3e50;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box; /* Garante que padding não aumente a largura total */
}
#inputBuscaHistorico:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(122, 184, 0, 0.1);
}

/* --- Loading Spinner --- */
#loadingOverlay {
    display: none;
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--primary);
    border-radius: 50%;
    width: 50px; height: 50px;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.top-bar {
display: flex;
justify-content: space-between; /* Um em cada ponta */
align-items: center;
margin-bottom: 15px;
}

/* CLASSE BASE (Mantive a sua, só garanti o alinhamento) */
.btn-mini {
    padding: 6px 16px;       /* Um pouco mais largo para ficar bonito */
    font-size: 0.85rem;
    border-radius: 50px;     /* Garante o formato Pílula perfeito */
    font-weight: 700;        /* Negrito para leitura fácil */
    cursor: pointer;
    border: 1px solid transparent; /* Prepara para receber cor de borda */
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;                /* Espaço entre ícone e texto */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;   /* Caso use tag <a> */
}

/* --- 1. BOTÃO QUE ABRE O HISTÓRICO (Laranja com Borda Escura) --- */
.btn-hist {
    background-color: #E67E22;
    color: #ffffff;
    
    /* A BORDA ESCURA QUE VOCÊ PEDIU (#2c3e50) */
    border: 1px solid #2c3e50 !important; 
    
    /* Estilo padrão dos seus botões */
    border-radius: 50px;
    padding: 6px 20px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

.btn-hist:hover {
    background-color: #d35400;
    border-color: #d35400 !important; /* Mantém a borda escura */
    transform: translateY(-2px);
}

/* --- 2. NOVO BOTÃO 'SAIR' (DENTRO DO MODAL) --- */
/* Substitui o antigo botão de X */
.btn-fechar-modal {
    background-color: transparent;
    color: #c0392b;          /* Texto Vermelho */
    border: 2px solid #c0392b; /* Borda Vermelha */
    
    border-radius: 50px;     /* Formato Pílula */
    padding: 4px 16px;       /* Tamanho compacto */
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    
    /* Garante alinhamento */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-fechar-modal:hover {
    background-color: #c0392b; /* Fundo fica vermelho */
    color: white;              /* Texto vira branco */
}

/* =========================================
   1. VARIÁVEIS E CONFIGURAÇÕES GERAIS
   ========================================= */
:root {
    --verde-fundo: #dbece5; /* Cor da imagem */
    --azul-botao: #2c849c;  /* Azul petróleo */
    --azul-botao-hover: #22687a;
    --cinza-texto: #2c3e50;
    --vermelho-erro: #f4341e;
    --verde-sucesso: #1ABC9C;
}

body.login-page {
    font-family: 'Nunito', sans-serif;
    background-color: var(--verde-fundo);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* =========================================
   2. CARTÃO DE LOGIN
   ========================================= */
.login-card {
    background-color: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.logo-container img {
    width: 220px;     /* Largura fixa para manter proporção */
    max-width: 100%; /* Segurança para não estourar a tela no celular */
    height: auto;    /* Garante que a imagem não fique esticada/achatada */
    margin-bottom: 25px;
}

/* =========================================
   3. INPUTS E BOTÕES
   ========================================= */
label {
    display: block;
    text-align: left;
    margin-bottom: 5px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9rem;
}

input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #2c3e50;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box; 
    outline: none;
    transition: border-color 0.3s;
}

input:focus {
    border-color: var(--azul-botao);
}

/* --- BOTÃO DE LOGIN (ACESSAR SISTEMA) --- */
.btn-login {
    width: 100%;
    padding: 12px;
    background-color: #1ABC9C;
    color: white;
    
    /* AQUI ESTÁ A MUDANÇA: Borda Escura */
    border: 2px solid #2c3e50 !important; 
    
    border-radius: 50px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    
    /* Mudei para 'all' para animar a subidinha também */
    transition: all 0.3s ease; 
    margin-top: 10px;
}

.btn-login:hover {
    background-color: #148f77;     /* Verde mais escuro */
    border-color: #148f77 !important;         /* Mantém a borda escura */
    
    /* EFEITO EXTRA: Faz o botão 'flutuar' levemente igual aos outros */
    transform: translateY(-2px);   
    box-shadow: 0 4px 10px rgba(26, 188, 156, 0.3); 
}
/* =========================================
   4. INPUT DE SENHA COM BOTÃO DE MOSTRAR/ESCONDER
   ========================================= */
/* O Container define o espaço */
.password-container {
    position: relative; 
    width: 100%;
    /* Altura fixa igual à do input para garantir o centro */
    height: 48px; 
    margin-bottom: 15px; /* Espaço abaixo igual aos outros inputs */
}

/* O Input ocupa 100% do pai */
.password-container input {
    width: 100%;
    height: 100%; /* Força altura total */
    padding: 12px;
    padding-right: 45px; /* Espaço para o ícone não cobrir o texto */
    margin-bottom: 0;    /* Remove margem do input, quem controla é o container */
    border: 1px solid #2c3e50;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

.password-container input:focus {
    border-color: var(--azul-botao);
}

/* O Botão do Olho */
.toggle-password {
    position: absolute;
    right: 10px;
    
    /* Centralização Absoluta */
    top: 50%;
    transform: translateY(-50%);
    
    /* Reseta estilos de botão do navegador */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    
    /* Garante tamanho e cursor */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2c3e50 !important;
    z-index: 10;
    
    /* Tamanho fixo para evitar distorção */
    width: 24px;
    height: 24px;
}

.toggle-password:hover {
    color: var(--azul-botao);
}

/* Ajuste fino para o SVG não ficar gigante */
.toggle-password svg {
    stroke: #2c3e50 !important;
    width: 20px;
    height: 20px;
}

/* =========================================
   5. MENSAGENS E LINKS
   ========================================= */
.erro-msg {
    color: var(--vermelho-erro);
    font-size: 0.9rem;
    display: none;
    margin-top: 10px;
    font-weight: 600;
}

/* Validação de Senha (Requisitos) */
.password-requirements {
    display: none;
    text-align: left;
    font-size: 0.8rem;
    margin-bottom: 15px;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
}

.invalid { color: var(--vermelho-erro); }
.valid { color: var(--verde-sucesso); }

/* =========================================
   6. MODAIS (Pop-ups)
   ========================================= */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 350px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    text-align: left;
}

.modal-content .form-group {
    margin-bottom: 10px;
}

.modal-content input, .modal-content select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    box-sizing: border-box;
}

/* --- BARRA DE TOPO --- */
.top-bar {
    display: flex;
    justify-content: space-between; /* Histórico na esq, Perfil na dir */
    align-items: center;
    margin-bottom: 25px;
    position: relative; /* Para o menu absoluto funcionar */
}

/* --- BOLINHA DE PERFIL (AVATAR) --- */
.perfil-container {
    position: relative;
    display: inline-block;
}

.avatar-circle {
    width: 45px;
    height: 45px;
    background-color: #1ABC9C; /* Verde AME */
    color: white;
    border: 3px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: none;
    transition: transform 0.2s;
    user-select: none;
}

.avatar-circle:hover {
    transform: scale(1.1);
    background-color: var(--primary-dark);
}

/* --- MENU DROPDOWN MODERNIZADO --- */
.dropdown-content {
    display: none; 
    position: absolute;
    right: 0;
    top: 65px; /* Um pouco mais para baixo para não grudar */
    background-color: white;
    min-width: 240px; /* Um pouco mais largo para ler melhor */
    
    /* Sombra mais difusa e elegante */
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    
    border-radius: 16px; /* Cantos bem arredondados */
    border: 1px solid rgba(0,0,0,0.05); /* Borda quase invisível */
    z-index: 2000;
    
    /* O Segredo do Design Moderno: Espaço interno */
    padding: 8px; 
}

/* Animação de entrada suave */
.dropdown-content.show {
    display: block;
    animation: menuPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes menuPop { 
    from { opacity: 0; transform: translateY(-15px) scale(0.95); } 
    to { opacity: 1; transform: translateY(0) scale(1); } 
}

/* --- CABEÇALHO (Nome do Usuário) --- */
.dropdown-header {
    padding: 12px 16px;
    margin-bottom: 8px;
    background-color: transparent; /* Remove fundo cinza antigo */
    display: flex;
    flex-direction: column;
}

.dropdown-header strong { 
    color: #2c3e50; /* Preto suave */
    font-size: 1.05rem;
}

.dropdown-header small { 
    color: #2c3e50; 
    font-size: 0.75rem; 
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* --- ITENS DO MENU (Links) --- */
.dropdown-content a {
    color: #2c3e50; /* Cinza escuro (Cor AME) */
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    font-size: 0.95rem;
    font-weight: 500;
    align-items: center;
    gap: 12px;
    
    /* Design do Botão */
    border-radius: 10px; /* Botões arredondados DENTRO do menu */
    margin-bottom: 2px; /* Espacinho entre um e outro */
    transition: all 0.2s ease;
}

/* --- O NOVO HOVER (A Mágica) --- */
.dropdown-content a:hover {
    /* Fundo cinza bem clarinho (neutro e chique) */
    background-color: #f3f4f6; 
    
    /* Cor do texto muda para o Verde ou Azul da marca */
    color: #1ABC9C; /* Verde Turquesa AME */
    
    /* REMOVIDO: padding-left: 25px (Isso causava o pulo feio) */
    transform: translateX(3px); /* Um movimento muito sutil, quase imperceptível */
}

/* --- EXCEÇÃO: BOTÃO SAIR --- */
/* Geralmente o último item é Sair, fica bonito se for vermelhinho no hover */
.dropdown-content a[onclick*="sair"]:hover {
    background-color: #fff5f5; /* Fundo vermelho bebê */
    color: #ea2d18; /* Vermelho alerta */
}

/* Separadores */
hr { 
    border: 0; 
    border-top: 1px solid #f1f1f1; 
    margin: 6px 0; 
}

/* --- ESTILO DO MODAL DE CADASTRO (ATUALIZADO) --- */

/* Ajuste da Janela */
.modal-content {
    background: white; width: 90%; max-width: 400px;
    padding: 0; border-radius: 12px; border: none;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    display: flex; flex-direction: column; overflow: hidden;
}

.modal-body { padding: 20px; max-height: 70vh; overflow-y: auto; }

/* Título */
.modal-content h3 {
    background-color: #f8f9fa; margin: 0; padding: 15px;
    font-size: 1.1rem; color: #2c3e50; text-align: center;
    border-bottom: 1px solid #eee; font-weight: 700;
}

/* Campos */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9rem; color: #2c3e50; }
.form-group input, .form-group select {
    width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box;
}

/* Container da Senha (Para o ícone ficar dentro) */
.password-container { position: relative; display: flex; align-items: center; }
.password-container input { padding-right: 40px; } /* Espaço para o ícone não cobrir o texto */

/* Botão do Olhinho */
.toggle-password {
    position: absolute; right: 10px; background: none; border: none;
    cursor: pointer; color: #2c3e50; display: flex; align-items: center;
}
.toggle-password:hover { color: #2c3e50; }

/* Mensagem de Requisitos da Senha */
.password-requirements {
    font-size: 0.75rem; color: #2c3e50; margin-top: 5px;
    background: #fdfdfd; padding: 5px; border-radius: 4px; border: 1px solid #eee;
    display: none; /* Escondido até digitar */
}
.password-requirements.valid { color: #1ABC9C; border-color: #1ABC9C; background: #eafff2; }
.password-requirements.invalid { color: #d63031; }

/* --- BOTÕES DO RODAPÉ (AJUSTE DE TAMANHO) --- */
.modal-actions {
    display: flex; 
    gap: 15px; 
    padding: 20px;
    background-color: #fff; 
    border-top: 1px solid #eee;
}

/* Regra Unificada para garantir tamanho IGUAL */
.modal-actions button {
    flex: 1;                /* Ocupam exatamente 50% cada */
    padding: 12px 0;        /* Altura interna igual */
    border-radius: 6px;
    
    font-size: 15px !important; /* FORÇA o tamanho da letra ser igual */
    font-weight: 600;           /* Negrito igual */
    line-height: 1.5;           /* Altura da linha igual */
    
    border: none;
    cursor: pointer;
    transition: filter 0.2s;
}

/* Cores */
.btn-cancelar {
    background-color: #e74c3c;
    color: white;
}
.btn-cancelar:hover { filter: brightness(0.9); }

.modal-actions .btn-salvar {
    background-color: #1ABC9C;
    color: white;
    margin: 0; /* Garante que não tenha margem extra */
}
.modal-actions .btn-salvar:hover { filter: brightness(0.9); }

/* --- ESTILO PADRÃO PARA MODAIS (PROFISSIONAL E RECEPCIONISTA) --- */

/* Fundo do Modal (Escuro) */
#modalNovoUsuario {
    background-color: rgba(0, 0, 0, 0.6); /* Mais escuro para foco */
    backdrop-filter: blur(2px); /* Desfoque leve no fundo */
}

/* A Caixa Branca do Modal */
.modal-content-box {
    background: #fff;
    padding: 30px;
    border-radius: 12px; /* Cantos bem arredondados */
    width: 450px;
    max-width: 90%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Títulos */
/* Estilo do Título do Modal de Novo Usuário */
.modal-content-box h3 {
    text-align: center;      /* <--- O QUE CENTRALIZA */
    width: 100%;             /* Garante que ocupe a linha toda */
    display: block;
    margin-top: 0;
    margin-bottom: 20px;     /* Espaço entre o título e o primeiro campo */
    color: #2c3e50;          /* Cor cinza escuro profissional */
    font-size: 1.5rem;
    border-bottom: 1px solid #eee; /* Linha cinza clara embaixo */
    padding-bottom: 15px;    /* Espaço entre o texto e a linha */
}

/* Labels */
.modal-content-box label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.9rem;
}

/* Inputs e Selects */
.modal-content-box .form-control {
    width: 100%;
    padding: 12px 15px; /* Mais gordinho */
    margin-bottom: 15px;
    border: 1px solid #ced4da;
    border-radius: 8px; /* Arredondado igual ao profissional */
    font-size: 1rem;
    transition: border-color 0.2s;
    box-sizing: border-box; /* Garante que não estoure a largura */
}

.modal-content-box .form-control:focus {
    border-color: #1ABC9C;
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.1);
}

/* Botões (Rodapé) */
.modal-actions {
    display: flex;
    justify-content: space-between; /* Um em cada ponta */
    gap: 15px;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid #f0f2f5;
}

.btn-modal {
    flex: 1; /* Tamanho igual para os dois */
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    transition: transform 0.1s;
}

.btn-modal:active { transform: scale(0.98); }

.btn-cancelar { background-color: #e74c3c; color: white; } /* Vermelho */
.btn-salvar { background-color: #1ABC9C; color: white; }   /* Verde */

/* --- CORREÇÃO DO CSS --- */

/* 1. O Wrapper agora controla o espaço externo (margem) */
.password-wrapper {
    position: relative; /* Essencial para o ícone ficar preso aqui */
    width: 100%;
    margin-bottom: 15px; /* A margem que antes estava no input fica aqui */
    display: flex;       /* Garante que a altura do wrapper abrace o input */
    align-items: center; /* Alinha itens verticalmente */
}

/* 2. O Input perde a margem para não brigar com o ícone */
.password-wrapper .form-control {
    width: 100%;
    padding-right: 45px; /* Espaço interno para o texto não bater no ícone */
    margin-bottom: 0 !important; /* FORÇA margem zero para não desalinhar */
    height: 45px; /* Altura fixa ajuda a evitar surpresas, ajuste se quiser */
}

/* 3. O ícone flutua exatamente no meio */
.eye-icon {
    position: absolute;
    right: 12px;           /* Distância da direita */
    top: 50%;              /* Topo no meio da div pai */
    transform: translateY(-50%); /* Puxa o ícone 50% pra cima (centralização exata) */
    cursor: pointer;
    color: #2c3e50;
    z-index: 10;
    
    /* Garante que o ícone não tenha tamanho estranho */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px; 
    height: 24px;
}

.eye-icon:hover {
    color: #2c3e50;
}

/* --- FORÇAR VISUAL NO MODAL DE PROFISSIONAL (#modalCadastro) --- */

/* 1. Ajuste da Caixa Principal */
#modalCadastro .modal-content {
    width: 500px !important;    /* Força a largura */
    max-width: 95%;
    padding: 30px !important;   /* Mais espaçamento interno */
    border-radius: 12px;        /* Arredondado */
}

/* 2. Transformar os Inputs em "Gordinhos" (Igual ao código que você mandou) */
#modalCadastro input[type="text"],
#modalCadastro input[type="password"],
#modalCadastro select {
    width: 100%;                /* Estica até a borda */
    padding: 12px 15px;         /* Aumenta a altura interna */
    margin-bottom: 15px;        /* Espaço entre eles */
    border: 1px solid #ced4da;
    border-radius: 8px;         /* Cantos arredondados */
    font-size: 1rem;            /* Letra maior */
    box-sizing: border-box;     /* Evita que estoure a largura */
    outline: none;              /* Remove borda preta padrão ao clicar */
    transition: all 0.2s;
}

/* Efeito ao clicar (Foco) */
#modalCadastro input:focus,
#modalCadastro select:focus {
    border-color: #1ABC9C;      /* Verde do sistema */
    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.1); /* Brilho leve */
}

/* 3. Ajuste do Ícone de Olho (Senha) */
/* Como o input ficou maior, precisamos reposicionar o olho */
#modalCadastro .password-container {
    position: relative;
    width: 100%;
}

#modalCadastro .toggle-password {
    position: absolute;
    right: 15px;        /* Afastado da borda direita */
    top: 45%;           /* Centralizado verticalmente (ajuste fino para inputs altos) */
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #2c3e50;
}

/* 4. Labels (Títulos dos campos) */
#modalCadastro label {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
    display: block;
}

/* =========================================
   ESTILOS DO MODAL GERENCIAR EQUIPE (AJUSTE FINAL)
   ========================================= */

/* --- CABEÇALHO DO MODAL --- */

.modal-header-custom {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
    padding-top: 0; 
}

/* Título */
.modal-header-custom h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.6rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.2;
}

.modal-header-custom p {
    font-size: 15px;
    color: #2c3e50;
    margin: 0;
    font-weight: 500;
}

/* CORREÇÃO DO BOTÃO X (HOVER VERMELHO) */
.btn-close-modal {
    position: absolute;
    top: -5px;
    right: 0;
    background: transparent;
    border: none;
    font-size: 2rem;
    line-height: 0.8;
    color: #2c3e50; /* Cor padrão cinza */
    cursor: pointer;
    transition: all 0.2s ease; /* Suaviza a transição */
    padding: 0;
}

.btn-close-modal:hover {
    color: #e74c3c !important; /* FORÇA O VERMELHO */
    transform: scale(1.1);      /* Dá um leve zoom para indicar clique */
}


/* --- BARRA DE PESQUISA (CORREÇÃO DA LUPA) --- */

.search-container {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    /* Força a altura do container ser igual à do input para alinhar a referência */
    height: 45px; 
}

.search-input {
    width: 100%;
    height: 100%; /* Ocupa toda a altura do container (45px) */
    padding: 0 15px 0 50px; /* Espaço na esquerda para a lupa */
    border: 1px solid #2c3e50;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.3s;
    box-sizing: border-box;
    margin: 0; /* Remove qualquer margem que possa empurrar */
}

.search-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

/* LUPA: TÉCNICA DO 'MARGIN AUTO' PARA CENTRO PERFEITO */
.search-icon-svg {
    position: absolute;
    left: 15px;
    
    /* O SEGREDO DO ALINHAMENTO: */
    top: 0;
    bottom: 0;
    margin: auto; /* O navegador calcula o centro vertical automaticamente */
    
    color: #2c3e50;
    width: 20px;  /* Tamanho fixo */
    height: 20px; /* Tamanho fixo */
    
    pointer-events: none;
    z-index: 10;
}

.user-card-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #fff;
    border: 1px solid #f0f2f5;
    margin-bottom: 10px;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
}

.user-card-item:hover {
    border-color: #2c3e50;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transform: translateY(-1px);
}

.user-main-name {
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
}

.user-sub-info {
    font-size: 14px;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-badge {
    background: #e9ecef;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-delete-pro {
    border: none;
    background: #fee2e2;
    color: #dc2626;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete-pro:hover {
    background: #dc2626;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

/* =========================================
   ESTILOS DA PÁGINA DE PERFIL (meuperfil.html)
   ========================================= */

/* Classe específica para o body do Perfil para não quebrar o Index */
body.page-profile {
    background-color: #dbece5;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

.profile-card { 
    width: 100%; 
    max-width: 500px; 
    background: white; 
    padding: 40px; 
    border-radius: 16px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    text-align: center; 
    position: relative;
}

/* Botão Voltar (Ícone no canto) */
.btn-voltar-icon {
    position: absolute; 
    top: 20px; 
    left: 20px; 
    background: #f0f2f5; 
    color: #2c3e50; 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    border: none;
    font-size: 1.2rem; 
    transition: all 0.2s;
}

.btn-voltar-icon:hover { 
    background: #e4e6eb; 
    color: #2c3e50; 
    transform: translateX(-3px); 
}

/* Avatar e Upload */
.avatar-container { 
    position: relative; 
    width: 120px; 
    height: 120px; 
    margin: 0 auto 20px; 
}

.profile-avatar-large {
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    background-color: #1ABC9C; /* Certifique-se de ter essa variável ou troque por uma cor fixa ex: #007bff */
    color: white;
    font-size: 3.5rem; 
    font-weight: bold; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    box-shadow: 0 5px 15px rgba(26, 188, 156, 0.3); 
    object-fit: cover;
}

.btn-upload-foto {
    position: absolute; 
    bottom: 0; 
    right: 0; 
    background: white; 
    color: #2c3e50; 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer;
    border: 1px solid #2c3e50; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn-upload-foto:hover { 
    background: #f9f9f9; 
    color: #1ABC9C; 
}

/* Títulos e Layout */
.section-title {
    text-align: left; 
    margin-top: 30px; 
    margin-bottom: 15px; 
    color: var(--azul-titulo); /* Certifique-se de ter essa variável */
    border-bottom: 1px solid #eee; 
    padding-bottom: 5px;
    font-weight: 600;
}

.input-group-senha { 
    position: relative; 
}

/* Container que segura APENAS o input e o botão */
.password-wrapper {
    position: relative; 
    width: 100%;
}

/* Ajuste no Input para o texto não ficar atrás do ícone */
.password-wrapper input {
    width: 100%;
    padding-right: 40px !important; 
    box-sizing: border-box;
}

/* O Botão do Olhinho */
.btn-toggle-senha {
    position: absolute; 
    right: 10px;        
    top: 50%;           
    transform: translateY(-50%); 
    background: none;
    border: none;
    cursor: pointer;
    color: #2c3e50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
}

.btn-toggle-senha:hover { 
    color: #2c3e50; 
}

/* Botão de Download na lista de histórico */
.btn-download-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #2c3e50; /* Cinza escuro */
    padding: 5px;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-download-icon:hover {
    color: #1ABC9C; /* Verde */
    background-color: #dcfce7; /* Verde bem claro */
    transform: translateY(-2px);
}

/* --- RESPONSIVIDADE TABELA DE DATAS (MOBILE) --- */
@media (max-width: 768px) {

    /* 1. Esconde o cabeçalho da tabela (Data | Horário | Status...) pois atrapalha no celular */
    #tabelaDatas thead {
        display: none;
    }

    /* 2. Transforma a linha da tabela (tr) em um Container Flexível */
    tr.linha-responsiva {
        display: flex;       /* Ativa o Flexbox na linha da tabela */
        flex-wrap: wrap;     /* Permite quebrar para a linha de baixo! */
        background: #f8f9fa; /* Fundo cinza claro para parecer um cartão */
        margin-bottom: 15px; /* Separação entre uma data e outra */
        border: 1px solid #2c3e50;
        border-radius: 8px;
        padding: 10px;
    }

    /* 3. Configura as Células (td) para se comportarem como blocos */
    tr.linha-responsiva td {
        display: block;      /* Remove comportamento de célula de tabela */
        padding: 5px;
        border: none;        /* Remove bordas padrões da tabela */
    }

    /* --- ORGANIZAÇÃO DOS ITENS --- */

    /* Data e Hora: Ficam na primeira linha, lado a lado (50% cada) */
    tr.linha-responsiva td:nth-child(1), /* Célula da Data */
    tr.linha-responsiva td:nth-child(2)  /* Célula da Hora */ {
        flex: 1 1 45%;       /* Ocupa ~45% do espaço */
    }

    /* Status: Fica na linha de baixo, ocupando tudo */
    tr.linha-responsiva td:nth-child(3) {
        flex: 1 1 100%;      /* Ocupa 100% da largura (força quebra de linha) */
        text-align: center;
        margin-top: 5px;
        font-weight: bold;
    }

    /* Botão X: Fica na última linha, ocupando tudo, bem grande */
    tr.linha-responsiva td:nth-child(4) {
        flex: 1 1 100%;
    }

    tr.linha-responsiva .btn-remove {
        width: 100%;         /* Botão largura total */
        height: 40px;        /* Mais alto para o dedo */
        background-color: #ffcccc;
        color: #d32f2f;
        margin-top: 5px;
    }
    
    /* Ajuste visual para os inputs ficarem bonitos */
    tr.linha-responsiva input {
        width: 100%;
        box-sizing: border-box; /* Importante para não estourar a tela */
    }
}

/* --- AJUSTE DO TÍTULO E BOTÃO ADICIONAR --- */

h3 {
    display: flex;             /* Transforma o título em uma caixa flexível */
    justify-content: space-between; /* Joga texto p/ esquerda e botão p/ direita */
    align-items: center;       /* Alinha eles na altura */
    flex-wrap: wrap;           /* Permite quebrar linha se a tela for pequena */
    gap: 10px;                 /* Espacinho entre eles */
}

/* Regra específica para Celular: Botão Grande e Fácil de Clicar */
@media (max-width: 768px) {
    h3 {
        justify-content: center; /* Centraliza o texto */
    }

    h3 .btn-add {
        width: 100%;           /* O botão ocupa a largura total da tela */
        margin-top: 5px;       /* Um pouco de espaço do título */
        padding: 12px;         /* Deixa o botão mais "gordo" para o dedo */
        font-size: 16px;       /* Letra maior */
        display: flex;         /* Garante que o texto (+) fique no meio do botão */
        justify-content: center;
    }
}

/* =========================================
   BOTÃO DE ADICIONAR PACIENTE (+)
   ========================================= */
.btn-add-paciente {
    background-color: #1ABC9C; 
    color: white;
    border: 1px solid #304356;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    
    /* 1. TAMANHO FIXO (Igual à altura dos inputs) */
    width: 45px !important;  
    height: 45px !important; 
    
    /* 2. FORMA DE CÍRCULO PERFEITO */
    border-radius: 50% !important; 
    padding: 0 !important;   
    margin: 0 !important;    
    
    /* 3. ALINHAMENTO DO ÍCONE */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    /* 4. O SEGREDO: Impede o botão de ser esmagado pelo input */
    flex-shrink: 0 !important;
}

.btn-add-paciente:hover {
    background-color: #148f77;
    border-color: #148f77 !important;
    transform: scale(1.1);
    filter: brightness(0.9);
}

/* Ajuste no SVG para garantir que caiba bem no centro */
.btn-add-paciente svg {
    width: 24px;
    height: 24px;
    display: block; /* Remove espaços fantasmas de imagens */
}

/* Ajuste fino para inputs ficarem na mesma altura visual */
input[type="text"], input[type="number"], select {
    height: 43px; /* Força todos os campos a terem a mesma altura do botão */
    box-sizing: border-box;
}

/* =========================================
   ESTILO DO EXPLORER (HISTÓRICO ÁRVORE)
   ========================================= */

.explorer-body {
    display: flex;
    flex: 1; /* Ocupa todo o espaço restante do modal */
    overflow: hidden; /* Evita barra de rolagem dupla */
    height: 100%;
}

/* --- COLUNA DA ESQUERDA (ÁRVORE) --- */
.tree-sidebar {
    width: 350px; /* Largura fixa para a árvore */
    border-right: 1px solid #2c3e50;
    background-color: #fff;
    overflow-y: auto; /* Rolagem apenas na lista */
    padding: 10px;
    font-size: 14px;
}

/* Itens da Árvore */
.tree-item {
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    white-space: nowrap; /* Não quebra linha */
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.1s;
}

.tree-item:hover {
    background-color: #f0f8ff;
}

/* Item Selecionado */
.tree-item.active {
    background-color: #e0eef9;
    border: 1px solid #2c3e50;
    font-weight: 600;
    color: #005480;
}

/* Ícones */
.icon-folder { color: #f1c40f; font-weight: bold; } /* Amarelo Pastinha */
.icon-file { color: #e74c3c; } /* Vermelho PDF */

/* Subníveis (Indentação) */
.tree-group {
    margin-left: 18px; /* Recuo para filhos */
    border-left: 1px solid #eee; /* Linha guia visual */
    display: none; /* Escondido por padrão (collapse) */
}
.tree-group.open { display: block; } /* Mostrar quando aberto */

/* Seta de expandir */
.tree-caret {
    display: inline-block;
    width: 12px;
    text-align: center;
    color: #2c3e50;
    font-size: 10px;
    transition: transform 0.2s;
}
.tree-caret.down { transform: rotate(90deg); }


/* --- COLUNA DA DIREITA (PREVIEW) --- */
.preview-pane {
    flex: 1; /* Ocupa o resto da largura */
    background-color: #2c3e50; /* Fundo cinza escuro padrão de visualizador PDF */
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Botões Flutuantes no Preview */
.preview-actions {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    background: rgba(255,255,255,0.9);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-action {
    border: none; padding: 10px 20px; border-radius: 5px;
    font-weight: bold; cursor: pointer; text-transform: uppercase; font-size: 0.8rem;
}
.btn-action.edit { background-color: #ff9800; color: white; }
.btn-action.down { background-color: #2c3e50; color: white; }
.btn-action:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* --- AJUSTE FINO DA TABELA --- */
/* --- CORREÇÃO DA TABELA DE DATAS --- */
/* --- CORREÇÃO FINAL DE ALINHAMENTO (Régua) --- */

/* 1. Regra Geral para a Tabela */
#tabelaDatas td {
    height: 50px; /* Altura fixa da linha da tabela */
    padding: 4px !important;
    vertical-align: middle !important; /* Manda tudo pro meio da linha */
}

/* 2. Força TODOS os itens (Inputs e Botões) a terem a MESMA altura */
#tabelaDatas .input-data,
#tabelaDatas .input-hora,
.btn-assinatura, 
.btn-falta, 
.btn-remove {
    height: 38px !important;       /* Altura fixa igual para todos */
    line-height: 1 !important;     /* Centraliza texto internamente */
    margin: 0 !important;          /* Remove margens que desalinham */
    vertical-align: middle !important; 
    box-sizing: border-box !important; /* Garante que a borda não aumente o tamanho */
    display: inline-flex;          /* Garante comportamento flexível */
    align-items: center;           /* Centraliza ícones e textos dentro do botão */
    justify-content: center;       /* Centraliza horizontalmente */
}

/* 3. Ajuste específico para a Célula de Assinatura (para manter sem linha embaixo) */
.celula-assinatura {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    border: none !important; /* Mantém sem linha */
    height: 100%;
}

/* --- CORREÇÃO FINAL: ALINHAMENTO DOS TÍTULOS --- */

#tabelaDatas thead th {
    /* Alinhamento Horizontal e Vertical */
    text-align: center !important;
    vertical-align: middle !important;
    
    /* Ajuste visual */
    padding: 12px 5px !important; /* Espaço interno equilibrado */
    font-weight: 700;             /* Negrito */
    color: #2c3e50;               /* Cinza escuro profissional */
    border-bottom: 2px solid #2c3e50; /* Linha de separação nítida */
    
    /* Garante que o texto não "flutue" estranho */
    line-height: 1.2;
}

/* Garante que a coluna de Assinaturas tenha largura suficiente para não espremer */
#tabelaDatas th:nth-child(3) {
    width: 40%; /* Ajuste a largura da coluna de assinaturas se necessário */
}

/* --- NOVO BOTÃO DE ASSINATURA --- */
.btn-assinatura {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    background-color: #fff;
    border: 1px solid #2c3e50;
    color: #2c3e50;
    
    padding: 8px 12px; /* Um pouco mais de espaço interno */
    border-radius: 50px !important; /* O segredo: valor alto deixa redondo */
    padding-left: 20px !important;  /* Mais espaço nas laterais para o texto não colar na curva */
    padding-right: 20px !important;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-assinatura:hover {
    background-color: #f8f9fa;
    border-color: #2c3e50;
}

/* Estado: ASSINADO (Verde) */
.btn-assinatura.assinado {
    background-color:  #1ABC9C !important;
    border-color:  #1ABC9C !important;
    color: white !important;
}

/* =========================================
   CORREÇÃO DO SELECT CORTADO NO MODAL
   ========================================= */

/* Isso remove a altura fixa de 45px apenas dentro do modal,
   permitindo que o padding de 12px defina o tamanho real,
   o que impede que o texto "Itapajé" fique cortado.
*/
.modal-content-box select.form-control {
    height: auto !important;     /* Altura automática para caber o texto */
    padding-top: 12px !important; 
    padding-bottom: 12px !important;
    line-height: normal !important; /* Garante que o texto fique no meio */
}

/* =========================================
   AJUSTES DO MODAL DE PROFISSIONAL
   ========================================= */

/* 1. Centralizar o Título */
#modalCadastro h3 {
    text-align: center !important;
    width: 100%;
    display: block;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
    color: #2c3e50;
}

/* 2. Corrigir texto cortado no Select de Cidade */
#modalCadastro select {
    height: auto !important;         /* Remove altura fixa */
    padding-top: 12px !important;    /* Espaço interno confortável */
    padding-bottom: 12px !important;
    line-height: normal !important;
}

/* --- ESTILOS PARA NOVA TABELA DE ASSINATURAS --- */

/* Linha de Falta (Vermelha) */
tr.linha-falta {
    background-color: #fff0f0 !important; 
}
tr.linha-falta input {
    color: #cc0000; 
    font-weight: bold;
}

/* Botões de Assinatura na Linha */
.btn-ass-row {
    font-size: 0.85rem;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 5px;
}
.btn-ass-row:hover { background-color: #e2e6ea; }

/* Botão de Ausente/Falta */
.btn-falta {
    background-color: #ffda21; 
    border: 2px solid #2c3e50;
    padding: 6px 10px;
    border-radius: 50px !important; /* O segredo: valor alto deixa redondo */
    padding-left: 20px !important;  /* Mais espaço nas laterais para o texto não colar na curva */
    padding-right: 20px !important;
    cursor: pointer;
    font-size: 0.8rem;
    margin-right: 5px;
    color: #2c3e50;
    font-weight: bold;
}

.btn-falta:hover {
    background-color: #e3b500;
    border-color: #e3b500 !important;
}

/* Estilo do botão quando já está marcado como falta */
tr.linha-falta .btn-falta {
    background-color: white;
    border: 1px solid #cc0000;
    color: #cc0000;
}

/* --- CORREÇÃO MOBILE: ROLAGEM DO MODAL --- */
@media (max-width: 768px) {
    
    /* 1. O modal ocupa quase a tela toda */
    .modal-content {
        height: 95vh !important; /* Altura máxima segura */
        margin-top: 10px !important;
        
        /* AQUI ESTÁ A SOLUÇÃO 2: Cria a barra de rolagem NO MODAL */
        overflow-y: auto !important; 
        
        /* Garante que o modal saiba que é uma coluna */
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Ajuste para a árvore e o preview não ficarem espremidos */
    .explorer-body {
        /* No celular, um fica embaixo do outro */
        flex-direction: column !important; 
        
        /* Deixa o tamanho livre para crescer e ativar a rolagem */
        height: auto !important; 
        overflow: visible !important; 
    }

    /* 3. Define tamanhos mínimos para conseguir ver o conteúdo */
    .tree-sidebar {
        width: 100% !important;
        height: auto !important;
        max-height: 250px; /* A árvore não cresce demais */
        border-right: none !important;
        border-bottom: 1px solid #ddd;
        flex: none !important; /* Não estica */
    }

    .preview-pane {
        width: 100% !important;
        min-height: 400px; /* Garante altura para ver o PDF */
        flex: none !important;
    }
}

/* --- ESTILO DE REPOSIÇÃO (AZUL) --- */

/* Botão de Adicionar Reposição */
.btn-add-reposicao {
    background-color: #5BC0DE; /* Azul */
    color: white;
    border: 1px solid #2c3e50;
    border-radius: 50px !important; /* O segredo: valor alto deixa redondo */
    padding-left: 20px !important;  /* Mais espaço nas laterais para o texto não colar na curva */
    padding-right: 20px !important;
    cursor: pointer;
    font-size: 0.9em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.2s;
    margin-left: 10px; /* Espaço do botão verde */
    float: right; /* Para alinhar junto com o outro */
}

.btn-add-reposicao:hover {
    background-color: #2889a7;
    border-color: #2889a7;
}

/* A Linha da Tabela quando for Reposição */
tr.linha-reposicao {
    background-color: #eaf6ff !important; /* Fundo azul bem clarinho */
    border-left: 4px solid #3498db; /* Detalhe lateral azul */
}

/* Inputs dentro da reposição ficam azuis para destacar */
tr.linha-reposicao input {
    color: #005480;
    font-weight: 600;
}

/* ================================================================= */
/* --- CORREÇÃO FINAL: BARRAS LATERAIS (ALINHADAS DENTRO DA TABELA) --- */
/* ================================================================= */

/* 1. ESTADO PADRÃO (PENDENTE) - LARANJA */
tr.linha-responsiva {
    /* TRUQUE: Usa sombra interna (inset) em vez de borda */
    /* Isso garante que a cor fique DENTRO da linha e não empurre para fora */
    box-shadow: inset 6px 0 0 0 #E67E22 !important; 
    border-left: none !important; /* Garante que a borda antiga suma */
    
    background-color: #fff;
    transition: all 0.3s ease;
}

/* 2. ESTADO REPOSIÇÃO - AZUL */
tr.linha-reposicao {
    /* Pinta a faixa azul internamente */
    box-shadow: inset 6px 0 0 0 #3498db !important; 
    background-color: #eaf6ff !important; 
}

/* Ajuste para inputs na reposição */
tr.linha-reposicao input {
    color: #2980b9;
    font-weight: 600;
}

/* 3. ESTADO ASSINADO - VERDE */
/* A classe .linha-assinada é adicionada pelo JS */
tr.linha-assinada {
    box-shadow: inset 6px 0 0 0 #1ABC9C !important;
}

/* 4. ESTADO FALTA (AUSÊNCIA) - VERMELHO */
/* Falta tem prioridade máxima */
tr.linha-falta {
    box-shadow: inset 6px 0 0 0 #e74c3c !important;
    background-color: #fff5f5 !important;
}

tr.linha-falta input {
    color: #c0392b !important;
    font-weight: bold;
    text-decoration: none !important;
}

/* ================================================================= */
/* --- CORREÇÃO DEFINITIVA: AFASTAR DATA DA BARRA COLORIDA --- */
/* ================================================================= */

/* Usamos o ID (#tabelaDatas) para vencer qualquer outra regra antiga */
#tabelaDatas tr.linha-responsiva td:first-child {
    /* Aumenta o espaço na esquerda apenas da primeira coluna (Data) */
    /* 6px da barra colorida + 10px de respiro = 16px */
    padding-left: 16px !important; 
}

/* Ajuste Extra para Mobile (Celular) */
@media (max-width: 768px) {
    #tabelaDatas tr.linha-responsiva td:first-child {
        /* No celular, garante que o input tenha espaço para não colar na borda */
        padding-left: 16px !important;
    }
}

/* --- CAMPOS DE TEXTO E SELEÇÃO ARREDONDADOS (ESTILO PÍLULA) --- */

/* 1. Aplica o visual em todos os inputs e selects do sistema */
input[type="text"],
input[type="number"],
input[type="password"],
select,
/* --- CORREÇÃO DOS INPUTS DA TABELA (Texto Cortado) --- */
.input-data, 
.input-hora {
    height: 40px !important;       /* Altura fixa confortável */
    line-height: 40px !important;  /* O Segredo: Centraliza o texto verticalmente */
    padding: 0 15px !important;    /* Espaço nas laterais, zero em cima/baixo */
    
    border-radius: 50px !important;
    border: 1px solid #2c3e50;
    width: 100%;
    box-sizing: border-box;        /* Garante que a borda não aumente o tamanho */
    font-size: 0.95rem;            /* Tamanho de fonte legível */
    color: #2c3e50;
}

/* Garante que o placeholder não fique cortado também */
.input-data::placeholder, 
.input-hora::placeholder {
    line-height: normal; /* Reseta alinhamento do texto cinza */
}

/* 2. Efeito bonito quando você clica para digitar (Foco) */
input:focus, 
select:focus,
.input-data:focus,
.input-hora:focus {
    border-color: #1ABC9C !important; /* Fica verde quando selecionado */
    box-shadow: 0 0 0 4px rgba(26, 188, 156, 0.15) !important; /* Brilho suave */
    outline: none;
}

/* 3. Ajuste específico para o Select (Dropdown) para a setinha não sumir */
select {
    /* Garante que o texto não sobreponha a seta de abrir a lista */
    padding-right: 35px !important;
    cursor: pointer;
}

/* --- CAIXA DE CRITÉRIOS DE SENHA --- */
.box-criterios {
    background-color: #ffffff; /* Cinza bem suave */
    border-radius: 12px;       /* Cantos levemente arredondados */
    padding: 15px;
    margin-top: 10px;
    border: 1px solid #2c3e50;
    font-size: 0.85rem;        /* Texto um pouco menor e elegante */
    color: #ffffff;
}

/* Estilo de cada item da lista (para alinhar o ícone com o texto) */
.criterio-item {
    display: flex;
    align-items: center;
    gap: 8px;       /* Espaço entre o ícone e o texto */
    margin-bottom: 6px;
    transition: color 0.3s;
}

/* Quando o critério for atendido (Sucesso) */
.criterio-sucesso {
    color: #27ae60; /* Verde escuro */
    font-weight: 600;
}

/* Quando o critério não for atendido (Erro/Pendente) */
.criterio-erro {
    color: #e74c3c; /* Vermelho suave ou cinza, você decide */
}

/* --- BOTÕES DE AÇÃO DO PREVIEW (Editar e Baixar) --- */

/* 1. Botão EDITAR (Laranja) */
#btnEditPreview {
    /* Mantém a cor de fundo laranja */
    background-color: #E67E22 !important; 
    color: white !important;
    
    /* ADICIONANDO A BORDA */
    border: 2px solid #2c3e50 !important; 
    
    /* Garante o formato arredondado bonito */
    border-radius: 50px !important;
    padding: 8px 24px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease;
}

#btnEditPreview:hover {
    background-color: #d35400 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(230, 126, 34, 0.4);
}

/* 2. Botão BAIXAR (Verde) */
#btnDownloadPreview {
    /* Mantém a cor de fundo verde */
    background-color: #1ABC9C !important;
    color: white !important;
    
    /* ADICIONANDO A BORDA (Verde Escuro) */
    border: 2px solid #2c3e50 !important;
    
    /* Garante o formato arredondado bonito */
    border-radius: 50px !important;
    padding: 8px 24px !important;
    font-weight: 700 !important;
    transition: all 0.3s ease;
}

#btnDownloadPreview:hover {
    background-color: #16a085 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(26, 188, 156, 0.4);
}

/* --- CORREÇÃO AVANÇADA DE SETAS (SELECTS E INPUTS) --- */

/* 1. PADRONIZAÇÃO DAS CAIXAS DE SELEÇÃO (SELECT) */
select {
    /* Desliga o visual padrão do navegador (remove a seta feia) */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Adiciona nossa seta personalizada SVG (Cor #2c3e50) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    
    background-repeat: no-repeat;
    
    /* POSICIONAMENTO PERFEITO */
    /* right 15px: Fica a 15px da direita (longe da curva) */
    /* center: Centraliza verticalmente */
    background-position: right 15px center;
    
    /* Tamanho da seta */
    background-size: 16px;
    
    /* Adiciona espaço interno na direita para o texto não ficar em cima da seta */
    padding-right: 40px !important;
    
    cursor: pointer;
}

/* 2. REMOVER SETAS DE NÚMERO (SPINNERS) DO CAMPO ANO */

/* Para Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

/* Para Firefox (O aviso amarelo no seu editor é normal, pode ignorar) */
input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield; 
}

/* --- CORREÇÃO PARA CAMPOS COM SUGESTÃO (PACIENTE, PROFISSIONAL, ETC) --- */

/* 1. Aplica a Seta Personalizada nos inputs de lista (Datalist) */
input[list] {
    /* Mesma seta SVG azul-escura usada nos selects */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    
    background-repeat: no-repeat;
    
    /* Mesma posição exata dos selects para ficarem alinhados */
    background-position: right 15px center;
    background-size: 16px;
    
    /* Espaço para o texto não ficar em cima da seta */
    padding-right: 40px !important;
    
    cursor: text; /* Mantém cursor de texto pois você pode digitar neles */
}

/* 2. Some com a setinha preta padrão do navegador */
/* Deixamos ela invisível (opacity: 0) mas ela continua lá para abrir a lista se clicar bem no canto */
input[list]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    cursor: pointer;
}

/* Efeito de foco para combinar com o resto */
input[list]:focus {
    background-image: none; /* Opcional: Se quiser que a seta suma ao digitar, descomente. Se quiser manter, apague essa linha. */
}

/* --- AUTOCOMPLETE PERSONALIZADO (Substitui o Datalist preto) --- */

/* Container para segurar o input e a lista juntos */
.autocomplete-wrapper {
    position: relative;
    width: 100%;
}

/* --- AJUSTE DE ALTURA PARA IGUALAR AOS SELECTS --- */

/* Força os inputs de texto e número a terem a mesma altura real dos selects customizados */
.autocomplete-wrapper input, 
input[type="number"] { 
    /* Ajustado para 48px para compensar a borda e o render do navegador (47.67px) */
    height: 48px !important;       
    line-height: 48px !important;  
    
    /* Garante que a borda e o arredondamento sejam idênticos */
    border: 1px solid #2c3e50 !important; 
    border-radius: 50px !important;
    
    /* Garante que o padding não aumente o tamanho total além dos 48px */
    box-sizing: border-box !important; 
}

/* A Lista Flutuante */
.custom-list {
    position: absolute;
    top: 50px; /* Fica logo abaixo do input */
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #2c3e50; /* Sua cor padrão */
    border-radius: 15px;       /* Cantos arredondados */
    max-height: 200px;         /* Altura máxima com scroll */
    overflow-y: auto;          /* Barra de rolagem se tiver muitos itens */
    z-index: 1000;             /* Fica por cima de tudo */
    display: none;             /* Escondido por padrão */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Itens da Lista */
.list-item {
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    color: #2c3e50;
    font-weight: 600;
    transition: background 0.2s;
}

/* Último item sem borda embaixo */
.list-item:last-child {
    border-bottom: none;
}

/* Efeito ao passar o mouse (Hover) */
.list-item:hover {
    background-color: #ffffff; /* Fundo verde clarinho do seu tema */
    color: #1ABC9C;            /* Texto verde forte */
}

/* Personalizar a barra de rolagem da lista */
.custom-list::-webkit-scrollbar {
    width: 8px;
}
.custom-list::-webkit-scrollbar-thumb {
    background: #bdc3c7;
    border-radius: 4px;
}

/* --- SELECT CUSTOMIZADO (SUBSTITUI O NATIVO) --- */

/* Container que segura tudo */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}

/* A Caixa Fechada (O Botão) - Imita seus Inputs */
.custom-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-size: 1rem;
    font-weight: 400;
    color: #2c3e50;
    height: 45px;
    background: #fff;
    border: 1px solid #2c3e50; /* Mesma borda dos inputs */
    border-radius: 50px;       /* Pílula */
    cursor: pointer;
    transition: all 0.3s;
}

/* Seta Personalizada (SVG) na direita */
.custom-select-trigger::after {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s;
}

/* Quando aberto, a seta gira */
.custom-select.open .custom-select-trigger::after {
    transform: rotate(180deg);
}

/* A Lista de Opções (Flutuante) */
.custom-options {
    position: absolute;
    display: block;
    top: 110%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #2c3e50; /* Borda da sua identidade visual */
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    max-height: 250px;
    overflow-y: auto;
}

/* Estado Aberto da Lista */
.custom-select.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
}

/* Cada Opção Individual */
.custom-option {
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 1px solid #2c3e50;
    color: #2c3e50;
    transition: background 0.2s;
}

.custom-option:last-child {
    border-bottom: none;
}

.custom-option:hover {
    background-color: #ffffff; /* Seu verde claro */
    color: #1ABC9C;            /* Seu verde forte */
    font-weight: 600;
}

/* Opção Selecionada */
.custom-option.selected {
    background-color: #1ABC9C;
    color: #fff;
}

/* --- AJUSTE DE CORES DO MODAL HISTÓRICO --- */

/* 1. Muda a cor do texto de ajuda "Filtrar pastas ou arquivos..." */
#inputBuscaHistorico::placeholder {
    color: #2c3e50 !important;
    opacity: 1; /* Garante que o Firefox use a cor exata */
}

/* Muda a cor do texto enquanto você digita no filtro também */
#inputBuscaHistorico {
    color: #2c3e50 !important;
}

/* 2. Muda a cor do texto e do ícone "Selecione um arquivo para visualizar" */
#emptyState {
    color: #2c3e50 !important; /* O !important é necessário para vencer o estilo inline #999 */
}

/* Garante que o ícone do estado vazio também pegue a cor */
#emptyState svg {
    stroke: #2c3e50 !important;
}

/* --- BOTÃO DE ATUALIZAR (REFRESH) DO HISTÓRICO --- */

/* 1. Configuração Base do Botão */
#modalHistorico button[title="Atualizar Lista"] {
    /* Garante a transição suave para cor, sombra e movimento */
    transition: all 0.3s ease !important; 
    
    /* Sombra inicial discreta */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; 
}

/* 2. Efeito ao Passar o Mouse (Hover) */
#modalHistorico button[title="Atualizar Lista"]:hover {
    /* Cor: Azul mais escuro e intenso */
    background-color: #058db6 !important; 
    
    /* Profundidade: O botão "sobe" 3 pixels */
    transform: translateY(-3px) !important; 
    
    /* Sombra: Aumenta e fica difusa para dar a sensação de altura */
    box-shadow: 0 6px 15px rgba(91, 192, 222, 0.4) !important; 
}

/* 3. Efeito ao Clicar (Active) - Opcional, para parecer que afundou */
#modalHistorico button[title="Atualizar Lista"]:active {
    transform: translateY(0) !important; /* Volta pro lugar */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; /* Sombra diminui */
}

/* ================================================================= */
/* --- FILTROS DO HISTÓRICO (VISUAL PROFISSIONAL) --- */
/* ================================================================= */

/* 1. O Container da Barra (Fundo Branco) */
.historico-filtros-bar {
    padding: 15px 20px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #2c3e50 !important;
    display: flex !important;
    gap: 15px !important; /* Espaço entre os filtros */
    align-items: center !important;
}

/* 2. Regra de Z-Index em Cascata (IMPORTANTE) */
/* Garante que o filtro da esquerda sempre abra POR CIMA do da direita */
.historico-filtros-bar .filtro-wrapper-individual:nth-child(1) { z-index: 40 !important; }
.historico-filtros-bar .filtro-wrapper-individual:nth-child(2) { z-index: 30 !important; }
.historico-filtros-bar .filtro-wrapper-individual:nth-child(3) { z-index: 20 !important; }
.historico-filtros-bar .filtro-wrapper-individual:nth-child(4) { z-index: 10 !important; }

/* 3. Ajuste fino do botão dentro do histórico */
.historico-filtros-bar .custom-select-trigger {
    height: 40px !important; /* Um pouco mais compacto que o da equipe */
    font-size: 0.9rem !important;
    background-color: #f8f9fa !important; /* Cinza bem clarinho */
}

/* ================================================================= */
/* --- EFEITO DE PROFUNDIDADE (3D) PARA BOTÕES DO FORMULÁRIO --- */
/* ================================================================= */

/* 1. SELEÇÃO DE TODOS OS BOTÕES ALVO */
/* Adicionar Data, Reposição, Assinaturas, Ausente e Remover (X) */
.btn-add,
.btn-add-reposicao,
.btn-assinatura,
.btn-falta,
.btn-remove {
    /* Define a suavidade da animação para todos */
    transition: all 0.2s ease !important;
    
    /* Sombra base suave (estado normal) */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    
    /* Garante que o posicionamento permita o movimento */
    transform: translateY(0); 
}

/* 2. ESTADO HOVER (AO PASSAR O MOUSE) */
/* O botão "sobe" e a sombra aumenta */
.btn-add:hover,
.btn-add-reposicao:hover,
.btn-assinatura:hover,
.btn-falta:hover,
.btn-remove:hover {
    /* Move o botão 3 pixels para cima */
    transform: translateY(-3px) !important;
    
    /* A sombra cresce e fica mais difusa (dá a sensação de altura) */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2) !important;
}

/* 3. ESTADO ACTIVE (AO CLICAR) */
/* O botão "afunda" de volta */
.btn-add:active,
.btn-add-reposicao:active,
.btn-assinatura:active,
.btn-falta:active,
.btn-remove:active {
    /* Volta para a posição original (efeito de clique físico) */
    transform: translateY(0) !important;
    
    /* Sombra diminui para parecer que encostou no fundo */
    box-shadow: 0 2px 3px rgba(0,0,0,0.1) !important;
}

/* --- AJUSTE EXTRA PARA O BOTÃO REMOVER (X) --- */
/* Como ele é redondo e pequeno, a sombra precisa ser mais sutil para não ficar estranho */
.btn-remove:hover {
    box-shadow: 0 4px 8px rgba(214, 48, 49, 0.3) !important; /* Sombra avermelhada */
}

/* ================================================================= */
/* --- ESTILIZAÇÃO FORÇADA: MODAIS DE CADASTRO (CORRIGIDO) --- */
/* ================================================================= */

/* 1. SELETORES AGRUPADOS (Aplica aos 3 modais de uma vez) */
#modalNovoPaciente .modal-content,
#modalNovoConvenio .modal-content,
#modalNovaEspecialidade .modal-content {
    padding: 30px !important;
    border-radius: 15px !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
    width: 420px !important;
    border: 1px solid #eee !important;
    display: flex !important;
    flex-direction: column !important;
    background: white !important; /* Garante fundo branco no modal */
}

/* 2. O TÍTULO (H3) - CORREÇÃO DE CENTRALIZAÇÃO */
#modalNovoPaciente h3,
#modalNovoConvenio h3,
#modalNovaEspecialidade h3 {
    /* --- CORREÇÃO DO ALINHAMENTO --- */
    display: block !important;                /* Garante que seja um bloco simples */
    text-align: center !important;            /* Centraliza o texto */
    
    /* MUDANÇA PRINCIPAL AQUI: */
    width: auto !important;                   /* Remove o 100% que causava deslocamento */
    margin-left: 0 !important;                /* Zera empurrão da esquerda */
    margin-right: 0 !important;               /* Zera empurrão da direita */
    margin-top: 0 !important;
    
    /* --- Estilos Visuais --- */
    background: transparent !important;       /* Sem fundo */
    color: #2c3e50 !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    
    /* Espaçamento inferior */
    margin-bottom: 25px !important;
    padding-bottom: 15px !important;
    
    /* Borda (Se quiser remover a linha, mude para 'none') */
    border-bottom: 2px solid #f0f0f0 !important; 
}

/* 3. O LABEL (Texto acima do input) */
#modalNovoPaciente label,
#modalNovoConvenio label,
#modalNovaEspecialidade label {
    color: #2c3e50 !important;
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
}

/* 4. O CAMPO DE TEXTO (INPUT) */
#modalNovoPaciente input,
#modalNovoConvenio input,
#modalNovaEspecialidade input {
    height: 48px !important;
    padding: 0 15px !important;
    border: 1px solid #2c3e50 !important;
    border-radius: 8px !important;
    font-size: 1rem !important;
    margin-top: 0 !important;
    box-shadow: none !important;
}

#modalNovoPaciente input:focus,
#modalNovoConvenio input:focus,
#modalNovaEspecialidade input:focus {
    border-color: #1ABC9C !important;
    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.2) !important;
}

/* 5. A LINHA DOS BOTÕES (DIV PAI) */
#modalNovoPaciente div[style*="flex"],
#modalNovoConvenio div[style*="flex"],
#modalNovaEspecialidade div[style*="flex"] {
    display: flex !important;
    gap: 15px !important;
    justify-content: space-between !important;
    margin-top: 25px !important;
    padding-top: 20px !important;
    border-top: 1px solid #eee !important;
}

/* 6. ESTILO BASE DOS BOTÕES */
#modalNovoPaciente button,
#modalNovoConvenio button,
#modalNovaEspecialidade button {
    flex: 1 !important;
    width: auto !important;
    height: 45px !important;
    padding: 0 !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    border: none !important;
    cursor: pointer !important;
    color: white !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 5px rgba(0,0,0,0.15) !important;
    transform: translateY(0);
}

/* 7. COR DO BOTÃO CANCELAR */
#modalNovoPaciente button:first-child,
#modalNovoConvenio button:first-child,
#modalNovaEspecialidade button:first-child {
    background: #e74c3c !important;
    border: 1px solid #c0392b !important;
}

/* 8. COR DO BOTÃO SALVAR */
#modalNovoPaciente button:last-child,
#modalNovoConvenio button:last-child,
#modalNovaEspecialidade button:last-child {
    background: #1ABC9C !important;
    border: 1px solid #16a085 !important;
}

/* 9. EFEITO 3D (HOVER) */
#modalNovoPaciente button:hover,
#modalNovoConvenio button:hover,
#modalNovaEspecialidade button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 15px rgba(0,0,0,0.2) !important;
    filter: brightness(0.95) !important;
}

/* 10. EFEITO CLIQUE (ACTIVE) */
#modalNovoPaciente button:active,
#modalNovoConvenio button:active,
#modalNovaEspecialidade button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1) !important;
}

/* ================================================================= */
/* --- REMOÇÃO DAS LINHAS DIVISÓRIAS NOS MODAIS DE CADASTRO --- */
/* ================================================================= */

/* 1. Remove a linha abaixo do Título (H3) */
#modalNovoPaciente h3,
#modalNovoConvenio h3,
#modalNovaEspecialidade h3 {
    border-bottom: none !important; /* Remove a linha */
    margin-bottom: 15px !important; /* Ajusta o espaço para não ficar buraco */
    padding-bottom: 0 !important;
}

/* 2. Remove a linha acima dos Botões (Abaixo do campo de texto) */
/* Seleciona a div que agrupa os botões */
#modalNovoPaciente div[style*="flex"],
#modalNovoConvenio div[style*="flex"],
#modalNovaEspecialidade div[style*="flex"] {
    border-top: none !important;    /* Remove a linha */
    padding-top: 0 !important;      /* Remove o espaço interno extra */
    margin-top: 20px !important;    /* Mantém um afastamento visual limpo */
}

/* ================================================================= */
/* --- CORREÇÃO FINAL: MODAL ASSINATURA (LIMPEZA TOTAL) --- */
/* ================================================================= */

/* 1. A CAIXA DO MODAL (Respiro e Fundo) */
#modalAssinatura .modal-content {
    background-color: #ffffff !important;
    width: 700px !important;
    max-width: 90% !important;
    
    /* O RESPIRO: 40px de borda branca interna */
    padding: 40px !important;
    box-sizing: border-box !important;
    
    border-radius: 15px !important;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centraliza os itens no meio */
    border: none !important;
}

/* 2. O TÍTULO (Correção do CSS Global que atrapalhava) */
#modalAssinatura h3 {
    /* Desliga o FLEXBOX global que jogava o texto pro lado */
    display: block !important; 
    
    width: 100% !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 30px !important;
    
    color: #2c3e50 !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* 3. A DIV QUE ENVOLVE O CANVAS (Remove a linha preta antiga) */
/* Seleciona a primeira DIV dentro do modal (que é a do canvas) */
#modalAssinatura .modal-content > div:nth-of-type(1) {
    border: none !important;      /* Remove a borda preta/verde antiga */
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    background: transparent !important;
}

/* 4. O CANVAS (Área de desenho) */
#modalAssinatura canvas {
    width: 100% !important;
    height: 270px !important;     /* Altura boa */
    
    background-color: #fdfdfd !important;
    border: 3px dashed #bdc3c7 !important; /* Borda pontilhada cinza */
    border-radius: 12px !important;
    
    margin-bottom: 30px !important; /* Afasta dos botões */
    cursor: crosshair !important;
    box-sizing: border-box !important;
}

/* 5. A BARRA DE BOTÕES */
/* Seleciona a última DIV do modal (que é a dos botões) */
#modalAssinatura .modal-content > div:last-of-type {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important; /* Um em cada ponta */
    align-items: center !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 6. ESTILO DOS BOTÕES */
#modalAssinatura button {
    height: 48px !important;
    border-radius: 50px !important;
    padding: 0 30px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.9rem !important;
    border: none !important;
    cursor: pointer !important;
    color: white !important;
    
    /* Efeito 3D */
    box-shadow: 0 4px 6px rgba(0,0,0,0.15) !important;
    transition: transform 0.2s !important;
    transform: translateY(0);
}

/* 7. EFEITO DE PULO (HOVER) */
#modalAssinatura button:hover {
    transform: translateY(-3px) !important;
    filter: brightness(0.95);
}

/* 8. CORES */
/* Botão Limpar (Amarelo) */
#modalAssinatura button[onclick*="Limpar"] {
    background-color: #f39c12 !important; 
}

/* Botão Cancelar (Vermelho) */
#modalAssinatura button[onclick*="fechar"],
#modalAssinatura button[onclick*="Cancelar"] {
    background-color: #e74c3c !important; 
}

/* Botão Confirmar (Verde) */
#modalAssinatura button[onclick*="salvar"],
#modalAssinatura button[onclick*="CONFIRMAR"] {
    background-color: #1ABC9C !important; 
    min-width: 150px !important; /* Maior destaque */
}

/* ================================================================= */
/* --- CORREÇÃO FINAL: MODAL NOVO ADMINISTRADOR/USUÁRIO --- */
/* ================================================================= */

/* 1. A CAIXA DO MODAL (Ajuste de espaço e contorno) */
#modalNovoUsuario .modal-content-box {
    padding: 40px !important;        /* Mais espaço interno */
    border-radius: 16px !important;  /* Cantos modernos */
    width: 450px !important;         /* Largura fixa ideal */
    box-shadow: 0 25px 60px rgba(0,0,0,0.4) !important; /* Sombra profunda */
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
}

/* 2. O TÍTULO (Remover linha e centralizar) */
#modalNovoUsuario h3 {
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    padding-bottom: 0 !important;
    
    /* REMOVENDO A LINHA */
    border-bottom: none !important;
    
    color: #2c3e50 !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important; /* Deixa imponente */
}

/* 3. OS CAMPOS (Inputs e Selects) - BORDA #2c3e50 */
#modalNovoUsuario input,
#modalNovoUsuario select,
#modalNovoUsuario .form-control {
    height: 48px !important;         /* Altura gordinha */
    padding: 0 15px !important;      /* Espaço interno */
    
    /* A COR DA BORDA QUE VOCÊ PEDIU */
    border: 1px solid #2c3e50 !important; 
    
    border-radius: 8px !important;
    font-size: 1rem !important;
    color: #2c3e50 !important;
    box-shadow: none !important;
    margin-bottom: 15px !important;
}

/* Campo "Função" (Readonly) - Visual diferenciado */
#modalNovoUsuario input[readonly] {
    background-color: #f2f4f6 !important; /* Cinza claro */
    border-color: #2c3e50 !important;     /* Borda mais suave */
    font-weight: bold !important;
    color: #2c3e50 !important;
}

/* Efeito ao clicar no campo */
#modalNovoUsuario input:not([readonly]):focus,
#modalNovoUsuario select:focus {
    border-color: #1ABC9C !important;     /* Verde */
    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.2) !important;
}

/* 4. LABELS (Textos acima dos campos) */
#modalNovoUsuario label {
    color: #2c3e50 !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* 5. ÁREA DOS BOTÕES (Alinhamento Perfeito) */
#modalNovoUsuario .modal-actions {
    display: flex !important;
    gap: 20px !important;            /* Espaço fixo entre eles */
    width: 100% !important;          /* Garante que a barra ocupe tudo */
    justify-content: center !important; /* Centraliza o bloco */
    
    border-top: none !important;     
    padding-top: 10px !important;
    margin-top: 25px !important;
    box-sizing: border-box !important; /* Evita estouro */
}

/* 6. ESTILO DOS BOTÕES (Gêmeos Idênticos) */
#modalNovoUsuario .btn-modal {
    flex: 1 !important;              /* O PULO DO GATO: Força divisão 50/50 exata */
    max-width: 50% !important;       /* Impede que um cresça mais que o outro */
    
    height: 48px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.95rem !important;
    border: none !important;
    cursor: pointer !important;
    color: white !important;
    margin: 0 !important;            /* Remove qualquer margem que desalinhe */
    
    /* Centraliza o texto dentro do botão */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* EFEITO DE PROFUNDIDADE 3D */
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15) !important;
    transform: translateY(0);
}

/* 7. CORES DOS BOTÕES */

/* Botão Cancelar */
#modalNovoUsuario .btn-cancelar {
    background-color: #e74c3c !important; /* Vermelho bonito */
    border: 1px solid #c0392b !important; /* Borda sutil */
}

/* Botão Salvar */
#modalNovoUsuario .btn-salvar {
    background-color: #1ABC9C !important; /* Verde AME */
    border: 1px solid #16a085 !important; /* Borda sutil */
}

/* 8. ANIMAÇÃO DE CLIQUE E MOUSE (3D) */
#modalNovoUsuario .btn-modal:hover {
    transform: translateY(-3px) !important; /* Sobe */
    box-shadow: 0 6px 10px rgba(0,0,0,0.15) !important; /* Sombra cresce */
    filter: brightness(0.95) !important;
}

#modalNovoUsuario .btn-modal:active {
    transform: translateY(2px) !important;  /* Afunda */
    box-shadow: none !important;            /* Sombra some */
}

/* 9. AJUSTE DO ÍCONE DE OLHO DA SENHA */
#modalNovoUsuario .password-wrapper {
    position: relative !important;
    margin-bottom: 15px !important;
}
/* Força o ícone a ficar no lugar certo dentro do input */
#modalNovoUsuario .eye-icon {
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 15px !important;
    color: #2c3e50 !important;
}

/* ================================================================= */
/* --- CORREÇÃO DE ALINHAMENTO: OLHO DA SENHA (NOVO ADMIN) --- */
/* ================================================================= */

/* 1. Remove a margem do Input de Senha para não confundir o centro */
#modalNovoUsuario .password-wrapper input {
    margin-bottom: 0 !important; /* Zera a margem do campo */
    height: 48px !important;     /* Garante a altura */
    padding-right: 45px !important; /* Espaço para o ícone não cobrir o texto */
}

/* 2. O Container assume o espaço que o input tinha */
#modalNovoUsuario .password-wrapper {
    margin-bottom: 15px !important; /* O espaço fica aqui agora */
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* 3. Posicionamento Cirúrgico do Olho */
#modalNovoUsuario .eye-icon {
    position: absolute !important;
    top: 50% !important;           /* Metade da altura */
    right: 15px !important;        /* Distância da direita */
    transform: translateY(-50%) !important; /* Puxa 50% para cima (Centro Exato) */
    
    /* Garante que o ícone não tenha margens ocultas */
    margin: 0 !important;
    padding: 0 !important;
    height: 24px !important;       /* Altura fixa do ícone */
    width: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    cursor: pointer !important;
    color: #2c3e50 !important;
}

/* Ajuste do SVG dentro do ícone */
#modalNovoUsuario .eye-icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 2px !important;
}

/* ================================================================= */
/* --- MODAL GERENCIAR EQUIPE (VISUAL PROFISSIONAL COMPLETO) --- */
/* ================================================================= */

/* 1. CAIXA DO MODAL */
#modalGerenciar .modal-content-box {
    background: #ffffff !important;
    width: 700px !important;        /* Mais largo para caber as infos */
    max-width: 95% !important;
    height: 85vh !important;        /* Altura fixa */
    padding: 40px !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
    position: relative !important;
}

/* 2. TÍTULO (Correção do Bug de Alinhamento) */
#modalGerenciar .header-gerenciar {
    text-align: center !important;
    margin-bottom: 25px !important;
    flex-shrink: 0 !important; /* Impede que o cabeçalho encolha */
}

#modalGerenciar h3 {
    /* ANULA O FLEXBOX GLOBAL QUE BAGUNÇAVA TUDO */
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    
    margin: 0 0 5px 0 !important;
    color: #2c3e50 !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: none !important;
}

#modalGerenciar p {
    color: #2c3e50 !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* 3. ÁREA DE FILTROS E BUSCA */
.filtros-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    flex-shrink: 0 !important;
}

/* 4. OS SELECTS (Lado a Lado) */
.row-filtros-equipe {
    display: flex !important;
    gap: 15px !important;
}

#modalGerenciar select.input-filtro {
    flex: 1 !important;
    height: 45px !important;
    padding: 0 15px !important;
    border: 1px solid #2c3e50 !important;
    border-radius: 50px !important; /* Pílula */
    background-color: white !important;
    color: #2c3e50 !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 5. BARRA DE PESQUISA (Correção da Lupa Sobreposta) */
.search-box-equipe {
    position: relative !important;
    width: 100% !important;
}

#modalGerenciar #inputBuscaEquipe {
    width: 100% !important;
    height: 48px !important;
    
    /* A CORREÇÃO: Espaço na esquerda para a lupa */
    padding-left: 50px !important; 
    padding-right: 20px !important;
    
    border: 1px solid #2c3e50 !important;
    border-radius: 50px !important;
    font-size: 1rem !important;
    margin: 0 !important;
}

/* A Lupa (Posição Absoluta) */
#modalGerenciar .search-icon-svg {
    position: absolute !important;
    left: 18px !important;          /* Encostado na esquerda */
    top: 50% !important;
    transform: translateY(-50%) !important; /* Centralizado verticalmente */
    width: 22px !important;
    height: 22px !important;
    color: #2c3e50 !important;
    pointer-events: none !important; /* Clique passa através */
}

/* Efeitos de Foco (Verde AME) */
#modalGerenciar select:focus,
#modalGerenciar input:focus {
    border-color: #1ABC9C !important;
    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.2) !important;
}

/* 6. LISTA DE USUÁRIOS (Scroll Interno) */
#listaUsuariosContainer {
    flex: 1 !important;             /* Ocupa todo o espaço restante */
    overflow-y: auto !important;    /* Scroll aparece aqui */
    padding: 5px 5px 20px 5px !important;
}

/* 7. CARTÕES DE USUÁRIO (Design 3D) */
.user-card-item {
    background-color: #ffffff !important;
    border: 1px solid #2c3e50 !important;
    border-radius: 12px !important;
    padding: 15px 20px !important;
    margin-bottom: 12px !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    
    /* Sombra Suave Inicial */
    box-shadow: 0 4px 6px rgba(0,0,0,0.03) !important;
    transition: all 0.2s ease !important;
}

/* Hover no Cartão */
.user-card-item:hover {
    transform: translateY(-3px) !important; /* Levanta */
    box-shadow: 0 8px 15px rgba(0,0,0,0.1) !important; /* Sombra aumenta */
    border-color: #1ABC9C !important; /* Borda Verde */
}

/* Textos do Cartão */
.user-main-name {
    color: #2c3e50 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 4px !important;
}

.user-sub-info {
    color: #2c3e50 !important;
    font-size: 0.85rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Etiquetas (Badges) */
.role-badge {
    background-color: #f0f2f5 !important;
    color: #2c3e50 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: 1px solid #2c3e50 !important;
}

/* 8. BOTÃO DE EXCLUIR */
.btn-delete-pro {
    background: #fff5f5 !important;
    color: #e74c3c !important;
    border: 1px solid #ffcccc !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.btn-delete-pro:hover {
    background: #e74c3c !important;
    color: white !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3) !important;
}

/* 9. BOTÃO FECHAR (X) */
#modalGerenciar .btn-close-custom {
    position: absolute !important;
    right: 25px !important;
    top: 25px !important;
    font-size: 2rem !important;
    color: #bdc3c7 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    line-height: 0.7 !important;
    transition: color 0.2s !important;
    z-index: 20 !important;
}
#modalGerenciar .btn-close-custom:hover {
    color: #e74c3c !important;
}

/* ================================================================= */
/* --- CUSTOM SELECT PARA FILTROS (Visual Profissional) --- */
/* ================================================================= */

/* 1. O Container que segura tudo */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    flex: 1; /* Ocupa espaço igual na linha */
}

/* 2. O Botão (O que aparece quando está fechado) */
.custom-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #2c3e50;
    height: 45px;
    background: #fff;
    border: 1px solid #2c3e50; /* Borda Azul Escura */
    border-radius: 50px;       /* Formato Pílula */
    cursor: pointer;
    transition: all 0.3s;
}

/* Seta Personalizada */
.custom-select-trigger::after {
    content: '';
    width: 12px;
    height: 12px;
    border-right: 2px solid #2c3e50;
    border-bottom: 2px solid #2c3e50;
    transform: rotate(45deg);
    margin-top: -4px;
    transition: transform 0.2s;
}

/* 3. A Lista Flutuante (O Dropdown em si) */
.custom-options {
    position: absolute;
    display: block;
    top: 115%;             /* Um pouquinho abaixo do botão */
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #2c3e50;
    border-radius: 12px;   /* Cantos arredondados na lista */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Sombra elegante */
    z-index: 9999;         /* Fica por cima de tudo */
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    overflow: hidden;      /* Para o arredondamento funcionar nos itens */
}

/* Quando aberto */
.custom-select.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
}

.custom-select.open .custom-select-trigger::after {
    transform: rotate(-135deg); /* Gira a seta */
    margin-top: 4px;
}

/* 4. Os Itens da Lista (Opções) */
.custom-option {
    padding: 12px 20px;
    cursor: pointer;
    color: #2c3e50;
    font-size: 0.9rem;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.1s;
}

.custom-option:last-child {
    border-bottom: none;
}

/* 5. O EFEITO PROFISSIONAL (Hover Verde igual da imagem) */
.custom-option:hover, 
.custom-option.selected {
    background-color: #1ABC9C; /* Verde AME */
    color: #ffffff;            /* Texto Branco */
    font-weight: 600;
}

/* ================================================================= */
/* --- CORREÇÃO FINAL: FILTROS LADO A LADO (ISOLADOS) --- */
/* ================================================================= */

/* 1. A LINHA MÃE */
#modalGerenciar .row-filtros-equipe {
    display: flex !important;
    gap: 20px !important;       /* Espaço entre as caixas */
    width: 100% !important;
    margin-bottom: 15px !important;
}

/* 2. AS CAIXAS INDIVIDUAIS (As "Jaulas") */
.filtro-wrapper-individual {
    flex: 1 !important;         /* Cada uma pega 50% do espaço */
    min-width: 0 !important;    /* Evita estouro */
    position: relative !important;
    z-index: 50;                /* Camada base */
}

/* 3. CORREÇÃO DE Z-INDEX */
/* Garante que a primeira caixa (Cargo) fique POR CIMA da segunda (Unidade) ao abrir */
.filtro-wrapper-individual:first-child {
    z-index: 60 !important; 
}

/* 4. O SELECT CUSTOMIZADO DENTRO DA CAIXA */
.filtro-wrapper-individual .custom-select-trigger {
    width: 100% !important;
    height: 48px !important;
    box-sizing: border-box !important;
}

/* Oculta o select original dentro da caixa */
.filtro-wrapper-individual select {
    display: none !important; 
}

/* ================================================================= */
/* --- ACABAMENTO FINAL: MODAL GERENCIAR EQUIPE --- */
/* ================================================================= */

/* 1. REMOVER A LINHA ABAIXO DA BUSCA */
#modalGerenciar .filtros-container {
    border-bottom: none !important; /* Remove a linha divisória */
    margin-bottom: 5px !important;  /* Diminui um pouco o espaço */
    padding-bottom: 5px !important;
}

/* ================================================================= */
/* --- AJUSTE FINAL: ALINHAMENTO DO BOTÃO SAIR COM O TÍTULO --- */
/* ================================================================= */

#modalGerenciar .btn-close-custom {
    position: absolute !important;
    right: 40px !important;   /* Alinhado com a margem direita */
    
    /* AQUI ESTÁ O AJUSTE DE ALINHAMENTO: */
    top: 40px !important;     /* Antes era 30px. Agora bate com o padding do modal */
    
    z-index: 20 !important;
    background: transparent !important;
    color: #e74c3c !important;
    border: 1px solid #e74c3c !important;
    border-radius: 50px !important;
    padding: 6px 20px !important;  /* Ajustei levemente para ficar elegante */
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    line-height: normal !important;
    transition: all 0.2s ease !important;
}

/* Garante que o efeito hover continue funcionando */
#modalGerenciar .btn-close-custom:hover {
    background-color: #e74c3c !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3) !important;
}

/* 3. SETA DOS FILTROS (Mais bonita e delicada) */
#modalGerenciar .custom-select-trigger::after {
    /* Remove a seta feita de bordas (triângulo tosco) */
    border: none !important;
    transform: none !important;
    margin-top: 0 !important;

    /* Adiciona Seta SVG Moderna e Pequena */
    content: '' !important;
    width: 12px !important;  /* Tamanho pequeno */
    height: 12px !important;
    
    /* Imagem da Seta (Chevron Cinza Escuro) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    
    transition: transform 0.3s ease !important;
}

/* 4. SETA GIRANDO AO ABRIR */
#modalGerenciar .custom-select-wrapper.open .custom-select-trigger::after {
    transform: rotate(180deg) !important; /* Gira suavemente */
}

/* ================================================================= */
/* --- CORREÇÃO DE EMERGÊNCIA: LISTAS, BORDAS E SETAS --- */
/* ================================================================= */

/* 1. CONSERTAR A LISTA CORTADA (Mostrar todos os meses) */
.custom-options {
    max-height: 300px !important;  /* Altura suficiente para ver mais meses */
    overflow-y: auto !important;   /* Força a barra de rolagem se passar disso */
    
    /* Restaurar a borda da caixa externa */
    border: 1px solid #2c3e50 !important; 
    border-radius: 12px !important;
    padding: 0 !important;         /* Remove espaço extra que pode atrapalhar */
}

/* 2. RESTAURAR A LINHA DE SEPARAÇÃO (#2c3e50) ENTRE OS ITENS */
.custom-option {
    border-bottom: 1px solid #2c3e50 !important; /* A cor exata que você pediu */
    padding: 12px 20px !important;
}

/* Remove a linha apenas do último item para ficar bonito */
.custom-option:last-child {
    border-bottom: none !important;
}

/* 3. CONSERTAR A SETA (SVG) NO HISTÓRICO E FORMULÁRIOS */
.custom-select-trigger::after {
    /* 1. Remove o "triângulo feio" (feito de border) */
    border: none !important;
    
    /* 2. Recoloca o SVG bonito */
    content: '' !important;
    width: 14px !important;
    height: 14px !important;
    
    /* O ícone da seta (Cor #2c3e50) */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    
    /* 3. Posicionamento Centralizado */
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

/* 4. FAZER A SETA GIRAR QUANDO ABRIR */
.custom-select-wrapper.open .custom-select-trigger::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* ================================================================= */
/* --- AJUSTE FINO: CENTRALIZAR SETA NO MODAL GERENCIAR --- */
/* ================================================================= */

/* 1. Força o alinhamento vertical exato da seta */
#modalGerenciar .custom-select-trigger::after {
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important; /* Remove margens antigas que causam deslocamento */
    right: 20px !important;   /* Um pouco mais para dentro para ficar elegante */
    position: absolute !important;
}

/* 2. Mantém a rotação funcionando quando abre (centralizada) */
#modalGerenciar .custom-select-wrapper.open .custom-select-trigger::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* 3. Garante que o texto também esteja centralizado para alinhar com a seta */
#modalGerenciar .custom-select-trigger {
    display: flex !important;
    align-items: center !important; /* Texto no meio vertical */
}

/* ================================================================= */
/* --- DESIGN FINAL: MODAL CADASTRAR PROFISSIONAL (Estilo Admin) --- */
/* ================================================================= */

/* 1. CAIXA DO MODAL */
#modalCadastro .modal-content {
    background: #ffffff !important;
    width: 500px !important;        /* Largura ideal */
    max-width: 95% !important;
    padding: 40px !important;       /* Espaço interno generoso */
    border-radius: 16px !important; /* Cantos arredondados */
    box-shadow: 0 25px 60px rgba(0,0,0,0.4) !important;
    border: 1px solid #e0e0e0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 2. TÍTULO (Limpeza total) */
#modalCadastro h3 {
    text-align: center !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    padding: 0 !important;
    
    /* Remove fundos e bordas antigas */
    background: transparent !important;
    border-bottom: none !important;
    
    color: #2c3e50 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* 3. CAMPOS (INPUTS E SELECTS) */
#modalCadastro input,
#modalCadastro select {
    height: 48px !important;        /* Altura "Gordinha" */
    padding: 0 15px !important;     
    border: 1px solid #2c3e50 !important; /* Borda Azul Escura */
    border-radius: 8px !important;
    font-size: 1rem !important;
    color: #2c3e50 !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;    /* O form-group controla o espaço */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Efeito de Foco */
#modalCadastro input:focus,
#modalCadastro select:focus {
    border-color: #1ABC9C !important;
    box-shadow: 0 0 0 3px rgba(26, 188, 156, 0.2) !important;
}

/* 4. LABELS (Títulos dos campos) */
#modalCadastro label {
    color: #2c3e50 !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    margin-bottom: 6px !important;
    display: block !important;
}

/* Espaçamento entre os campos */
#modalCadastro .form-group {
    margin-bottom: 20px !important;
}

/* 5. BOTÕES (Gêmeos e 3D) */
#modalCadastro .modal-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important;           /* Espaço entre eles */
    margin-top: 10px !important;
    border: none !important;        /* Remove linhas antigas */
    padding: 0 !important;
}

#modalCadastro button {
    flex: 1 !important;             /* Divide espaço 50/50 */
    max-width: 50% !important;
    height: 48px !important;
    border-radius: 50px !important; /* Pílula */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.95rem !important;
    border: none !important;
    cursor: pointer !important;
    color: white !important;
    
    /* Efeito 3D */
    box-shadow: 0 4px 6px rgba(0,0,0,0.15) !important;
    transition: all 0.2s ease !important;
    transform: translateY(0);
}

/* 6. CORES DOS BOTÕES */
/* Botão Cancelar */
#modalCadastro .btn-cancelar {
    background-color: #e74c3c !important; 
    border: 1px solid #c0392b !important;
}

/* Botão Salvar */
#modalCadastro .btn-salvar {
    background-color: #1ABC9C !important; 
    border: 1px solid #16a085 !important;
}

/* 7. ANIMAÇÃO HOVER */
#modalCadastro button:hover {
    transform: translateY(-3px) !important; /* Sobe */
    box-shadow: 0 8px 15px rgba(0,0,0,0.2) !important;
    filter: brightness(0.95);
}

#modalCadastro button:active {
    transform: translateY(0) !important;    /* Desce */
}

/* ================================================================= */
/* --- AJUSTE DO SELECT CIDADE NO MODAL CADASTRO --- */
/* ================================================================= */

/* 1. Garante que o seletor ocupe a largura toda (igual aos inputs) */
#modalCadastro .custom-select-wrapper {
    width: 100% !important;
    display: block !important;
}

/* 2. Estilo do Botão (Para ficar igual ao Input de Texto) */
#modalCadastro .custom-select-trigger {
    height: 48px !important;         /* Mesma altura do input */
    border-radius: 8px !important;   /* Cantos iguais aos do input (não pílula) */
    border: 1px solid #2c3e50 !important;
    color: #2c3e50 !important;
    padding-left: 15px !important;
    display: flex !important;
    align-items: center !important;
}

/* 3. Garante que o select original feio suma */
/* Isso é importante pois o CSS anterior mandava mostrar tudo */
#modalCadastro select {
    display: none !important;
}

/* 4. Z-INDEX: Garante que a lista abra por cima dos botões Salvar/Cancelar */
#modalCadastro .custom-select-wrapper.open {
    z-index: 100 !important;
}
#modalCadastro .form-group {
    position: relative !important;
    z-index: auto !important; /* Permite que o filho saia da caixa */
}
/* Se a caixa estiver aberta, o grupo sobe de nível */
#modalCadastro .form-group:has(.open) {
    z-index: 50 !important;
}

/* ================================================================= */
/* --- AJUSTES FINAIS: PERFIL (SEM MUDAR HTML) --- */
/* ================================================================= */

/* 1. REMOVER AS LINHAS ABAIXO DOS TÍTULOS */
.section-title {
    border-bottom: none !important; /* Remove a linha */
    margin-bottom: 10px !important; /* Ajusta o espaço abaixo */
}

/* ================================================================= */
/* --- CSS ISOLADO PARA SENHAS DO PERFIL (CORREÇÃO DEFINITIVA) --- */
/* ================================================================= */

/* 1. O Container (A Caixa que segura tudo) */
.box-senha-perfil {
    position: relative !important; /* Essencial para segurar o botão */
    width: 100% !important;
    height: 45px !important;       /* Altura fixa travada */
    display: block !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 2. O Input (Campo de Texto) */
.input-senha-perfil {
    width: 100% !important;
    height: 100% !important;       /* Ocupa os 45px do pai */
    padding: 0 15px !important;
    padding-right: 45px !important; /* Espaço na direita para o botão não cobrir texto */
    margin: 0 !important;          /* ZERA qualquer margem externa */
    
    border: 1px solid #2c3e50 !important;
    border-radius: 5px !important; /* Borda arredondada leve */
    box-sizing: border-box !important;
    font-size: 1rem !important;
    color: #2c3e50 !important;
    background: #fff !important;
}

/* Foco no input */
.input-senha-perfil:focus {
    border-color: #1ABC9C !important;
    outline: none !important;
}

/* 3. O Botão do Olho (A Mágica) */
.botao-olho-perfil {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;          /* Cola em cima e embaixo */
    
    width: 45px !important;        /* Largura quadrada igual à altura */
    height: 100% !important;       /* Altura total do pai */
    
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    
    /* Centraliza o ícone SVG perfeitamente no meio do quadrado */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    cursor: pointer !important;
    z-index: 10 !important;
    color: #2c3e50 !important;
    transition: color 0.2s !important;
}

.botao-olho-perfil:hover {
    color: #2c3e50 !important;
}

/* Garante que o ícone SVG não tenha margens estranhas */
.botao-olho-perfil svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
}

/* 4. Tira a linha dos títulos (Seu pedido anterior) */
.section-title {
    border-bottom: none !important;
    margin-bottom: 10px !important;
}

/* ================================================================= */
/* --- ESTILO DO BOTÃO VOLTAR (TELA DE PERFIL) --- */
/* ================================================================= */

/* 1. Estado Normal (Discreto e Elegante) */
.btn-voltar-icon {
    /* Cor inicial do ícone (Cinza médio) */
    color: #2c3e50 !important;

    /* Fundo (Cinza muito claro, quase branco) */
    background-color: #f8f9fa !important;

    /* Borda sutil para definir o círculo */
    border: 1px solid #2c3e50 !important;

    /* Define o tamanho para formar um círculo perfeito */
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;

    /* Centraliza o ícone SVG dentro do círculo */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* Remove estilos padrão feios de botão */
    cursor: pointer !important;
    padding: 0 !important;
    
    /* Suaviza a mudança de cor */
    transition: all 0.2s ease !important;
}

/* 2. Estado ao Passar o Mouse (Hover) - Cor da Marca */
.btn-voltar-icon:hover {
    /* O fundo vira o Azul Escuro da sua marca */
    background-color: #2c3e50 !important;
    border-color: #2c3e50 !important;
    
    /* O ícone vira Branco para dar contraste */
    color: #ffffff !important;

    /* Um pequeno movimento para a esquerda para dar um efeito visual legal */
    transform: translateX(-3px) !important;
    /* Sombra suave para destacar */
    box-shadow: 0 3px 8px rgba(44, 62, 80, 0.3) !important;
}

/* ================================================================= */
/* --- BOTÃO NOVA FICHA (ESTILO PROFISSIONAL) --- */
/* ================================================================= */

/* ================================================================= */
/* --- BOTÃO NOVA FICHA (POSICIONAMENTO CORRIGIDO) --- */
/* ================================================================= */

.btn-limpar-topo {
    /* Posicionamento: Cola na direita e no TOPO */
    position: absolute !important;
    right: 0 !important;
    
    /* MUDANÇA AQUI: Em vez de 50%, usamos o topo para alinhar com o texto */
    top: 0 !important; 
    margin-top: 5px !important; /* Pequeno ajuste para não colar no teto */
    
    /* Removemos o transform translateY antigo que empurrava para baixo */
    transform: none !important; 
    
    /* Visual Clean */
    background: white !important;
    border: 1px solid #2c3e50 !important;
    color: #2c3e50 !important;
    
    /* Formato */
    border-radius: 50px !important;
    padding: 8px 20px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    
    /* Flex para alinhar o ícone */
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s !important;
    z-index: 10 !important;
}

/* Hover (Efeito ao passar o mouse) */
.btn-limpar-topo:hover {
    background: #2c3e50 !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(44, 62, 80, 0.2) !important;
    transform: translateY(-2px) !important; /* Pulo sutil */
}

/* Responsividade: No celular, centraliza o botão abaixo do título */
@media (max-width: 768px) {
    .btn-limpar-topo {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin-top: 15px !important;
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ================================================================= */
/* --- BARRA DE AÇÕES DO RODAPÉ (LADO A LADO) --- */
/* ================================================================= */

/* 1. O Container (A linha que segura os dois) */
.footer-actions {
    display: flex !important;
    gap: 15px !important;       /* Espaço entre os botões */
    margin-top: 30px !important;
    width: 100% !important;
}

/* 2. Regra Geral para AMBOS os botões ficarem iguais */
.footer-actions button {
    flex: 1 !important;         /* Cada um pega 50% do espaço */
    height: 50px !important;    /* Altura igual para os dois */
    
    border-radius: 50px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    
    /* Centralizar ícone e texto */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    
    margin: 0 !important;       /* Remove margens antigas que atrapalham */
    transition: all 0.2s ease !important;
}

/* 3. Estilo Específico do Botão NOVA FICHA */
.btn-nova-ficha-footer {
    background-color: #E67E22 !important;
    color: white !important;
    border: 2px solid #2c3e50 !important; /* Borda grossa para igualar peso visual */
}

.btn-nova-ficha-footer:hover {
    background-color: #c8640c !important;
    color: #ffffff !important;
    border-color: #E67E22 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}

/* 4. Ajuste no Botão SALVAR (Caso precise forçar estilos) */
.btn-salvar {
    /* O seu verde original */
    background-color: #1ABC9C !important; 
    border: 2px solid #2c3e50 !important;
    color: white !important;
}

.btn-salvar:hover {
    background-color: #16a085 !important;
    border-color: #16a085 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(26, 188, 156, 0.3) !important;
}

/* Responsividade: No celular, um fica embaixo do outro para não apertar */
@media (max-width: 600px) {
    .footer-actions {
        flex-direction: column !important;
    }
}