@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   1. CONFIGURACOES GERAIS E LAYOUT
   ============================================================ */
body, html { 
    margin: 0;             
    padding: 0;            
    font-family: 'Segoe UI', Arial, sans-serif; 
    background-color: #e9e9e9; 
    height: 100%;          
}

body {
    display: flex;         
    flex-direction: column; 
    min-height: 100vh;     
}

/* ============================================================
   2. BARRA DE NAVEGACAO (HOTBAR) FLUTUANTE (ESTILO PILL)
   ============================================================ */
.hotbar { 
    position: fixed;       
    top: 15px;             
    left: 2%;              
    width: 96%;            
    height: 70px;          
    background-color: #006f73; 
    display: flex;         
    align-items: center;   
    justify-content: flex-start; 
    padding: 0 30px;       
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); 
    z-index: 1000;         
    box-sizing: border-box; 
    border-radius: 50px;   
}

.hotbar-dropdown-container {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    margin-right: 5px;
}

.hotbar-btn {
    background-color: transparent; 
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px; 
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.hotbar-btn:hover, 
.hotbar-btn.active { 
    background-color: rgba(0, 0, 0, 0.25) !important; 
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.4) !important;
    transform: none !important; 
}

/* --- INICIO DO MENU SUSPENSO PREMIUM (PILL STACK) --- */
/* Fechado: continua ocupando espaco no layout (nao usa "display: none"),
   so fica invisivel e sem interacao (opacity+visibility+pointer-events) -
   isso e o que permite animar a ABERTURA e o FECHAMENTO os dois de forma
   suave (transicionar "display" e impossivel, o navegador so sabe trocar
   ele na hora, sem gradual). O "visibility" some com um atraso igual a
   duracao da transicao (0.28s) - assim ele continua clicavel/visivel
   durante o fade de saida, e some de vez so quando a animacao termina. */
.hotbar-dropdown-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: absolute;
    top: 100%;
    left: 0;
    /* Mesmo verde da hotbar (nao mais um preto separado) e sem o espaco que
       existia entre o botao e a bandeja (era 8px) - como ela nasce colada na
       borda de baixo da barra, com a cor identica, o efeito e o de a propria
       barra "esticando" pra baixo, nao uma caixa nova flutuando por cima. Os
       cantos de cima ficam retos (encostados no botao); so os de baixo sao
       arredondados, reforcando esse encaixe. */
    background-color: #006f73;
    min-width: 200px;
    box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.35);
    border-radius: 0 0 20px 20px;
    z-index: 10000;
    margin-top: 0;
    padding: 10px 8px 8px;
    box-sizing: border-box;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px) scale(0.98);
    transform-origin: top left;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0.28s;
}

.hotbar-dropdown-content.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    /* Delay zerado aqui: ao ABRIR, "visibility" fica visivel na hora (nao
       espera o fade terminar) - o atraso de 0.28s so existe do lado de cima
       (estado fechado), que e quem controla a transicao de saida. */
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0s;
}

/* Efeito cascata: cada item da bandeja entra com um pequeno atraso a mais
   que o anterior, entao eles aparecem em sequencia (nao todos de uma vez).
   Nenhuma bandeja do site tem mais de 3 itens hoje, mas cobrimos ate 5 pra
   nao quebrar se um menu novo ganhar mais opcoes no futuro. */
.hotbar-dropdown-content.show .item-premium {
    animation: itemCascadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hotbar-dropdown-content.show .item-premium:nth-child(1) { animation-delay: 0.03s; }
.hotbar-dropdown-content.show .item-premium:nth-child(2) { animation-delay: 0.08s; }
.hotbar-dropdown-content.show .item-premium:nth-child(3) { animation-delay: 0.13s; }
.hotbar-dropdown-content.show .item-premium:nth-child(4) { animation-delay: 0.18s; }
.hotbar-dropdown-content.show .item-premium:nth-child(5) { animation-delay: 0.23s; }

@keyframes itemCascadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mesma linguagem visual dos botoes da hotbar (.hotbar-btn:hover/.active usa
   uma camada preta semi-transparente por cima do verde) - reaproveitada aqui
   pros itens de dentro da bandeja, agora que o fundo tambem e verde. */
.item-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background-color: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #ffffff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    box-sizing: border-box;
}

.item-premium:hover {
    background-color: rgba(0, 0, 0, 0.28);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: translateY(-1px);
}

.item-premium svg {
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.15s ease-in-out;
    flex-shrink: 0;
}

.item-premium:hover svg {
    color: #ffffff;
}

.item-premium:active {
    transform: translateY(0);
    background-color: rgba(0, 0, 0, 0.35);
}

/* ============================================================
   3. TITULO E CONTEUDO PRINCIPAL
   ============================================================ */
.titulo {
    position: fixed;
    top: 50px;
    transform: translateY(-50%);
    /* right:5% e so o valor inicial (antes do JS medir o botao de sair pela
       primeira vez) - backend/filtro.js recalcula isso sempre 15px a
       esquerda dele (ajustarHotbarResponsiva). */
    right: 5%;
    margin: 0;
    font-size: 1.4rem;
    color: #ffffff;
    z-index: 1002;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    pointer-events: none;
    white-space: nowrap;
    transition: right 0.15s ease;
}

/* Some so a parte extra do titulo (o "CGV" sozinho e curto o bastante pra
   nunca brigar de espaco com os botoes de navegacao e o sino). A classe
   "titulo-compacto" e adicionada/removida via JS (backend/filtro.js,
   ajustarHotbarResponsiva) no momento exato em que o titulo colidiria de
   verdade com o ultimo botao da hotbar - nao um breakpoint fixo. */
.titulo-extra {
    transition: opacity 0.15s ease;
}

.titulo.titulo-compacto .titulo-extra {
    display: none;
}

.titulo.titulo-compacto {
    /* So o texto encolhe - o "right" continua sendo recalculado a partir
       do botao de sair (ajustarHotbarResponsiva), independente dessa classe. */
    font-size: 1.2rem;
}

.conteudo-principal { 
    flex: 1;               
    padding: 120px 20px 40px 20px; 
}

.controles-superiores {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 70px;
}


/* Botao Vermelho Estatico de Limpar todos os filtros da tela (Canto Esquerdo Baixo) */
.btn-reset-fixo {
    position: fixed;
    bottom: 25px;
    left: 25px;
    background-color: #5b5375;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}
.btn-reset-fixo:hover {
    background-color: #453f5a !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    transform: translateY(-1px);
}

.btn-importar { 
    background-color: #006f73; 
    color: white !important; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: all 0.3s ease; 
    font-weight: bold; 
    font-size: 13px; 
    text-decoration: none; 
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2) 
}

.btn-importar:hover { 
    background-color: #5b5375 !important; 
    box-shadow: 0 6px 10px rgba(0,0,0,0.3); 
    transform: translateY(-2px);           
}

/* Estilo comum dos Botoes Importar e Exportar (Formato Verde escuro) */
.btn-exportar {
    background-color: #006f73; 
    color: white !important; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: all 0.3s ease; 
    font-weight: bold; 
    font-size: 13px;
    text-decoration: none; 
    padding: 10px 20px;
}

/* Cor muda para vermelho intenso ao passar o mouse por cima e ele sobe levemente no eixo Y */
.btn-exportar:hover {
    background-color: #5b5375 !important; 
    box-shadow: 0 6px 12px rgba(0,0,0,0.25); 
    transform: translateY(-1px); 
}


.contador-colaboradores {
    background-color: #006f73;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: bold;
}

/* Paginacao (Anterior/Proxima) - fora da caixa com rolagem da tabela, pra
   ficar sempre visivel embaixo dela, sem precisar rolar pra alcancar. */
.paginacao-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-top: 15px;
}

.btn-paginacao {
    background-color: #006f73;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    padding: 8px 18px;
    transition: all 0.3s ease;
}

.btn-paginacao:hover:not(:disabled) {
    background-color: #5b5375;
    transform: translateY(-1px);
}

.btn-paginacao:disabled {
    background-color: #c2c2c2;
    cursor: not-allowed;
}

.paginacao-info {
    font-weight: bold;
    color: #444;
    font-size: 13px;
}

/* Junta o contador numerico com o botao de criar - usado em CDV/
   SOLICITACAO/VOLANTES */
.contador-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ============================================================
   5. TABELA BASE (ESTILO SAAS / EXCEL PROFISSIONAL)
   ============================================================ */
.tabela-visualizacao {
    background-color: white;
    border-radius: 8px !important; /* Curvatura suave e séria (padrão Office 365) */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #b5b5b5 !important;
    width: 100%;
    /* Area de rolagem propria (estilo Excel): o cabecalho (thead th, sticky
       top:0 abaixo) fica fixo enquanto so as linhas internas rolam. Precisa
       ser overflow-y:auto (nao "hidden") - com "hidden" o container nunca
       rola de verdade, so cresce junto com a pagina, e isso quebra o sticky. */
    max-height: 65vh;
    overflow-y: auto !important;
    overflow-x: hidden !important; /* mantem a mesma "guilhotina" nas quinas nos outros eixos */
}

table {
    border-collapse: collapse !important; /* Devolve a grade milimétrica nativa do Excel */
    border-spacing: 0;
    width: 100%;
    font-size: 11px;
}

thead th {
    background-color: #006f73;
    color: white;
    padding: 10px 12px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 100;
    border: 1px solid #00565a;
    font-weight: bold;
}

td {
    border: 1px solid #dcdcdc;
    padding: 8px 10px;
    background-color: white;
    text-align: center;
    vertical-align: middle;
    color: #000000;
}

tr:hover td {
    background-color: #e6f1f1 !important;
}

/* Comportamento base do corpo da tabela principal - identico em CDV,
   SOLICITACAO, VOLANTES e INTERMITENTES (antes duplicado em cada pagina). */
#table-body tr {
    cursor: pointer;
    transition: background-color 0.2s;
}

#table-body tr:hover {
    background-color: #e6f1f1;
}

#table-body td {
    text-align: center;
}

/* Forca alinhamento a esquerda (nomes grandes) - usado em CDV/VOLANTES/PFM */
.alinhado-esquerda {
    text-align: left !important;
    padding-left: 20px !important;
}

/* Celula liberada pra digitar direto na tabela - usado em SOLICITACAO/
   VOLANTES/INTERMITENTES */
#table-body td.td-editavel {
    background-color: #ffffff !important;
    border: 1px solid #006f73 !important;
    border-radius: 3px;
    color: #000 !important;
    cursor: text;
}
#table-body td.td-editavel:focus {
    background-color: #ffffff !important;
    outline: 2px solid #006f73 !important;
}

.input-edit-tabela {
    width: 100%;
    padding: 2px;
    border: 1px solid #006f73;
    border-radius: 3px;
    text-align: center;
    font-size: 11px;
    box-sizing: border-box;
}

/* ============================================================
   6. BOTAO DE RESET (RODAPE)
   ============================================================ */
.btn-reset {
    background-color: #5b5375;     
    color: white;                  
    border: none;                  
    padding: 10px 20px;            
    border-radius: 5px;            
    cursor: pointer;               
    font-weight: bold;             
    font-size: 14px;               
    transition: all 0.3s ease;     
}

.btn-reset:hover {
    background-color: #453f5a;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

/* ============================================================
   7. OCULTAR BARRA DE ROLAGEM (ESTETICO)
   ============================================================ */
html::-webkit-scrollbar, 
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none !important;      
}

html, body {
    scrollbar-width: none;         
    -ms-overflow-style: none;      
    overflow-y: scroll;            
}

/* ============================================================
   8. SISTEMA DE NOTIFICACOES E SINO 
   ============================================================ */
   
.btn-sino {
    position: fixed;
    top: 50px; 
    transform: translateY(-50%); 
    right: 510px;
    background: none;
    border: none;
    font-size: 24px;
    color: white;
    cursor: pointer;
    z-index: 1002;
    transition: transform 0.2s ease;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.btn-sino:hover {
    transform: translateY(-50%) scale(1.1) rotate(10deg);
}

/* ============================================================
   9. BOTAO DE SAIR (LOGOUT)
   ============================================================ */
/* Fica na borda (right:5%) - onde o titulo ficava antes. O titulo passa a
   ser posicionado via JS (backend/filtro.js, ajustarHotbarResponsiva) 15px
   a esquerda dele, e o sino mais 15px a esquerda do titulo - mesmo
   espacamento dos dois lados. */
.btn-logout {
    position: fixed;
    top: 50px;
    right: 5%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    z-index: 1002;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
    transition: transform 0.2s ease;
}

.btn-logout svg {
    width: 22px;
    height: 22px;
}

.btn-logout:hover {
    transform: translateY(-50%) scale(1.1);
}

.badge-notificacao {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #ff831d;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.painel-notificacoes {
    display: none; 
    position: fixed;
    top: 95px; 
    right: 4%; 
    width: 350px; 
    background-color: #2c2c2c; 
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    z-index: 9999;
    flex-direction: column;
    overflow: hidden; 
}

.painel-notificacoes.show {
    display: flex;
}

.painel-header {
    background-color: #3d3d3d;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
}

.painel-header h3 {
    margin: 0;
    color: white;
    font-size: 16px;
}

.lista-notificacoes {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item-notificacao {
    background-color: #3d3d3d;
    border-left: 4px solid #ff831d; 
    padding: 12px 15px;
    border-radius: 5px;
    color: white;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.item-notificacao .data-hora {
    font-size: 11px;
    color: #ff831d;
    font-weight: bold;
    text-align: right;
}

.notificacao-vazia {
    text-align: center;
    color: #aaa;
    padding: 30px;
    font-size: 14px;
}

/* A caixa gigante que vai englobar as mensagens temporarias pra organiza-las */
.toast-container {
    position: fixed;
    top: 75px; /* Exatamente onde se inicia o painel do sino pra dar impressao de nascer de la */
    right: 40px; /* Exatamente a margem direita da janela do painel */
    display: flex;
    flex-direction: column; /* Coloca uma mensagem nova sempre embaixo da outra se tiverem 2 ou 3 juntas */
    gap: 10px; /* Cria um espaco de 10 pixels entre os balaozinhos */
    z-index: 10001; /* Maxima prioridade da tela inteira, sobrepoe modais grandes e gavetas */
    pointer-events: none; /* Garante que voce possa clicar NO FUNDO se os cartoes estiverem invisiveis */
    transition: top 0.3s ease; /* Anima o deslocamento inteiro da caixa se o JS empurrar ela pra baixo do painel */
}

/* Formato do Balaozinho/Cartao propriamente dito */
.toast-msg {
    background-color: #2c2c2c;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    /* A logica temporal (Cronometro CSS). Comeca uma animacao que entra na tela, espera 2.5s e depois some sumindo */
    animation: slideInRight 0.3s ease-out forwards, fadeOutToast 0.5s ease-out 2.5s forwards;
    border-left: 4px solid #006f73; /* Traco colorido identificador da situacao */
    max-width: 350px;
    pointer-events: auto; /* Permite interagir se o usuario clicar */
}

/* Movimentacao do balao da margem direita (invisivel) ate o eixo neutro da tela (0) */
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Remove a capacidade de visualizacao suavemente e apaga o balao da luz */
@keyframes fadeOutToast {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ============================================================
   9. FILTROS E DROPDOWNS DO CABECALHO DA TABELA
   ============================================================ */
        
/* Divisao de alinhamento em blocos para texto e filtro */
.th-content { 
    position: relative; 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
}

/* O elemento pai principal que segura o botao do menu */
.multi-select-container { 
    position: relative; 
    width: 100%; 
} 

/* Cartao branco "Todos" fixado no cabecalho */
.multi-select-button { 
    background: rgba(255, 255, 255, 0.15) !important; 
    border: 1px solid rgba(255, 255, 255, 0.3) !important; 
    padding: 5px 10px; 
    border-radius: 4px; 
    font-size: 11px; 
    color: #ffffff !important; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    transition: background 0.2s;
}

.multi-select-button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* A base que despenca e escorre revelando opcoes. Largura/altura viram
   explicitas (via JS, ver .filtro-resize-handle) quando o usuario arrasta -
   os valores aqui embaixo sao so o tamanho inicial/padrao, antes de
   qualquer redimensionamento manual. */
.multi-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    max-height: 560px;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 9999;
    border-radius: 4px;
}

/* Classe injetada pelo script pra exibir o menu aberto */
.multi-select-dropdown.show { 
    display: flex; 
    flex-direction: column; 
} 

/* Bloco cinza separador dos filtros de organizar de A-Z */
.sort-section { 
    padding: 8px; 
    background: #f9f9f9; 
    border-bottom: 1px solid #ddd; 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
}

/* Padronizacao dos botoes estendidos de organizacao */
.btn-sort { 
    background: white; 
    border: 1px solid #ccc; 
    padding: 5px 8px; 
    border-radius: 4px; 
    font-size: 11px; 
    cursor: pointer; 
    text-align: left; 
    color: #333; 
    transition: background 0.2s; 
    font-weight: bold; 
}

/* Efeito de foco nos botoes de ordenar */
.btn-sort:hover { 
    background: #e6f1f1; 
    border-color: #006f73; 
}

/* Engloba os marcadores redondos das cores RH */
.color-sort-container { 
    margin-top: 4px; 
}

/* Junta e espreme lado a lado as bolas coloridas */
.color-swatch-wrapper { 
    display: flex; 
    gap: 8px; 
    margin-top: 4px; 
}

/* Formato visual circular da bolinha de rh */
.color-swatch { 
    width: 18px; 
    height: 18px; 
    border-radius: 50%; 
    cursor: pointer; 
    border: 1px solid #aaa; 
    transition: transform 0.2s; 
}

/* Destaca a bolinha escolhida inflando em zoom no foco */
.color-swatch:hover { 
    transform: scale(1.2); 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); 
}

/* Barra base digitavel de buscas por nome isolado */
.search-box-container { 
    padding: 8px; 
    background: #f8f9fa; 
    border-bottom: 1px solid #eee; 
}

/* Formatacao text box limpa de procura */
.filter-search-input { 
    width: 100%; 
    padding: 6px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    font-size: 12px; 
    box-sizing: border-box; 
}

/* Rolagem scroll da caixa array de tags. "flex: 1" de proposito: preenche
   sozinha qualquer espaco extra quando o usuario arrasta o PAINEL inteiro
   pra ficar maior (ver .filtro-resize-handle) - sem isso, esticar o painel
   so criaria espaco em branco embaixo, sem mostrar mais itens. */
.items-list {
    overflow: auto;
    flex: 1;
    min-height: 80px;
}

/* Alca de redimensionar do PAINEL do filtro inteiro (nao so da lista) -
   arrasta em qualquer direcao (X e Y livres, ver ativarRedimensionamentoFiltro
   em filtro.js). Feita a mao (nao e o "resize" nativo do CSS) pra: 1) ficar
   bem visivel (o nativo e sutil demais, sumia encostado no conteudo); 2)
   deixar mudar largura E altura ao mesmo tempo, que o nativo sozinho nao
   fazia sem "resize: both" brigar com layout flex do dropdown. */
.filtro-resize-handle {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    z-index: 102;
    background:
        linear-gradient(135deg, transparent 0 45%, #006f73 45% 55%, transparent 55% 100%),
        linear-gradient(135deg, transparent 0 70%, #006f73 70% 80%, transparent 80% 100%);
}

.filtro-resize-handle:hover {
    background:
        linear-gradient(135deg, transparent 0 45%, #00565a 45% 55%, transparent 55% 100%),
        linear-gradient(135deg, transparent 0 70%, #00565a 70% 80%, transparent 80% 100%);
}

/* Renderizacao formatada de uma unica linha tag da lista */
.multi-select-item { 
    display: flex; 
    align-items: center; 
    padding: 6px 10px; 
    font-size: 11px; 
    cursor: pointer; 
    color: #000; 
}

/* Foco em item visual do dropdown */
.multi-select-item:hover {
    background-color: #fffdfd;
}

/* Tooltip flutuante compartilhado (ex: codigo da funcao ao passar o mouse) */
.tooltip-flutuante {
    display: none;
    position: fixed;
    background: #1a1a1a;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    z-index: 100000;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Texto dentro do item dropdown */
.multi-select-item label { 
    display: flex; 
    align-items: center; 
    width: 100%; 
    cursor: pointer; 
}

/* Caixa de selecao isolada do texto */
.multi-select-item input {
    margin-right: 10px;
}

/* ============================================================
   FILTRO HIERARQUICO DE DATAS (Ano > Mes > Dia, estilo Excel)
   ============================================================ */
.filtro-data-grupo-linha {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    font-size: 11px;
    cursor: pointer;
    color: #000;
}

.filtro-data-grupo-linha:hover {
    background-color: #fffdfd;
}

.filtro-data-grupo-linha label {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    font-weight: bold;
}

.filtro-data-grupo-linha input {
    margin-right: 10px;
}

/* Seta clicavel que expande/colapsa os filhos do grupo, sem mexer na selecao */
.filtro-data-seta {
    display: inline-flex;
    width: 14px;
    flex: none;
    justify-content: center;
    margin-right: 4px;
    color: #777;
    font-size: 9px;
    transition: transform 0.15s ease;
}

.filtro-data-seta.aberta {
    transform: rotate(90deg);
}

/* Filhos ficam ocultos ate o usuario expandir o grupo */
.filtro-data-filhos {
    display: none;
    flex-direction: column;
}

.filtro-data-filhos.expandido {
    display: flex;
}

/* Indenta cada nivel: meses dentro de um ano, dias dentro de um mes */
.filtro-data-filhos .filtro-data-grupo-linha {
    padding-left: 24px;
}

.filtro-data-filhos .multi-select-item label {
    padding-left: 24px;
}

.filtro-data-filhos .filtro-data-filhos .multi-select-item label {
    padding-left: 38px;
}

/* Agrupador inferior final de controle rapido do menu */
.dropdown-controls { 
    display: flex; 
    justify-content: space-between; 
    padding: 8px; 
    background: white; 
    border-bottom: 1px solid #eee; 
}

/* Mini botao todos e zerar */
.btn-mini { 
    font-size: 10px; 
    padding: 4px 8px; 
    border: 1px solid #006f73;
    border-radius: 5px;
    background: #006f73; 
    color: white; 
    cursor: pointer; 
}

/* Efeito visual hover do botao miudo */
.btn-mini:hover {
    background: white;
    color: #006f73;
}

/* Botao "Aplicar" - fica numa linha separada de Todos/Limpar (que so ajustam
   a selecao pendente) porque e ele quem de fato manda o filtro pra tabela,
   mas usa o MESMO visual do .btn-mini (Todos/Limpar) pra nao destoar do
   resto do site - so encostado na direita, ja que e uma acao unica (nao
   precisa da largura toda nem de par do lado esquerdo). */
.dropdown-aplicar-container {
    display: flex;
    justify-content: flex-end;
    padding: 12px;
    background: white;
    border-bottom: 1px solid #eee;
}

.btn-aplicar-filtro {
    font-size: 10px;
    padding: 4px 8px;
    border: 1px solid #006f73;
    border-radius: 5px;
    background: #006f73;
    color: white;
    cursor: pointer;
}

.btn-aplicar-filtro:hover {
    background: white;
    color: #006f73;
}


/* ============================================================
   10. MODAL PADRAO DE EDICAO DE REGISTRO (usado em CDV e VOLANTES)
   ============================================================ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #2c2c2c;
    width: 350px;
    border-radius: 10px;
    padding: 25px;
    color: white;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

.modal-header h3 {
    margin: 0;
    color: #006f73;
    font-size: 18px;
    word-break: break-all;
}

/* Agrupa nome + matricula como um bloco so, pra ficarem colados um no outro -
   sem esse wrapper, o "justify-content: space-between" do .modal-header
   jogaria a matricula pro meio do cabecalho em vez de ao lado do nome. */
.modal-header-titulo {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.modal-matricula-badge {
    flex-shrink: 0;
    background-color: rgba(51, 145, 131, 0.18);
    color: #006f73;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.btn-fechar {
    background: none;
    border: none;
    color: #aaa;
    font-size: 24px;
    cursor: pointer;
}

.btn-fechar:hover {
    color: #5b5375;
}

.info-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-group label {
    font-size: 11px;
    color: #aaa;
    text-transform: uppercase;
}

.info-group span {
    font-size: 13px;
    background: #3d3d3d;
    padding: 10px;
    border-radius: 5px;
}

.info-group input,
.info-group textarea,
.info-group select {
    width: 100%;
    background: #3d3d3d;
    border: 1px solid #444;
    color: white;
    padding: 10px;
    border-radius: 5px;
    resize: none;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.info-group input:focus,
.info-group textarea:focus,
.info-group select:focus {
    border-color: #006f73;
}

.info-group textarea {
    height: 80px;
}

.info-group input:disabled,
.info-group textarea:disabled,
.info-group input[readonly] {
    border: 1px solid transparent;
    opacity: 0.7;
}

.input-group-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.btn-lapis-mini {
    background-color: #006f73;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    height: 39px;
    min-width: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.btn-lapis-mini:hover {
    background-color: #5b5375 !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    transform: translateY(-1px);
}

.btn-acao-modal {
    background-color: #006f73;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    display: block;
    text-align: center;
    margin-top: 5px;
    box-sizing: border-box;
}

.btn-acao-modal:hover {
    background-color: #5b5375 !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    transform: translateY(-1px);
}

.btn-remover-colab {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    display: block;
    text-align: center;
    margin-top: 5px;
    box-sizing: border-box;
}

.btn-remover-colab:hover {
    background-color: #c0392b !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    transform: translateY(-1px);
}

.erro-validacao {
    color: #e74c3c;
    font-size: 11px;
    margin-top: 2px;
    display: none;
    font-weight: bold;
}

.input-erro {
    border-color: #e74c3c !important;
    background-color: rgba(231, 76, 60, 0.1) !important;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    color: #ccc;
    font-size: 13px;
}

.checkbox-group input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ============================================================
   11. BOTOES DE EDICAO EM GRADE (usado em SOLICITACAO e VOLANTES)
   ============================================================ */
.btn-lapis-grid {
    background-color: #5b5375;
    color: white;
    border: none;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-lapis-grid:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    transform: translateY(-1px);
    filter: brightness(1.08);
}
.btn-lapis-grid.modo-salvar {
    background-color: #006f73 !important;
    width: auto;
    padding: 0 12px;
    font-size: 12px;
    font-weight: bold;
}

.btn-add-grid, .btn-remove-grid {
    color: white !important;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
    font-weight: bold;
    font-size: 20px;
    width: 35px;
    height: 35px;
}
.btn-add-grid { background-color: #006f73; }
.btn-remove-grid { background-color: #453f5a; }
.btn-add-grid:hover, .btn-remove-grid:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.check-excluir-grid {
    transform: scale(1.3);
    cursor: pointer;
}

/* ============================================================
   12. CDV - CORES AUTOMATICAS DE LINHA (FILTROS DE RH)
   ============================================================ */
#table-body tr.linha-aviso,
#table-body tr.linha-aviso td {
    background-color: #d4b8e3 !important;
    color: #000 !important;
}
#table-body tr.linha-aviso:hover,
#table-body tr.linha-aviso:hover td {
    background-color: #c9a7db !important;
}

#table-body tr.linha-transferencia,
#table-body tr.linha-transferencia td {
    background-color: #eaf4fc !important;
    color: #000 !important;
}
#table-body tr.linha-transferencia:hover,
#table-body tr.linha-transferencia:hover td {
    background-color: #d7ecfa !important;
}

#table-body tr.linha-experiencia,
#table-body tr.linha-experiencia td {
    background-color: #ffcccc !important;
    color: #000 !important;
}
#table-body tr.linha-experiencia:hover,
#table-body tr.linha-experiencia:hover td {
    background-color: #ff9999 !important;
}

#table-body tr.linha-ferias,
#table-body tr.linha-ferias td {
    background-color: #fffbe0 !important;
    color: #000 !important;
}
#table-body tr.linha-ferias:hover,
#table-body tr.linha-ferias:hover td {
    background-color: #fff3b0 !important;
}

/* Botao redondo de adicionar colaborador manualmente */
.btn-adicionar-novo {
    background-color: #006f73;
    color: white;
    border: none;
    border-radius: 5px;
    width: 35px;
    height: 35px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.btn-adicionar-novo:hover {
    background-color: #5b5375;
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0,0,0,0.3);
}

/* ============================================================
   ICONE DE AJUDA "COMO USAR ESTA PAGINA" (VOLANTES)
   ============================================================ */
.ajuda-icone-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Circulo contornado com "i" - mesma cor principal do site (#006f73), pra
   nao competir visualmente com o vermelho ja usado em botoes destrutivos
   (LIMPAR FILTROS, REMOVER) - isso e so informativo, nao uma acao de risco. */
.btn-info-ajuda {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #006f73;
    color: #006f73;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: bold;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s ease;
}

.btn-info-ajuda:hover {
    background-color: #006f73;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

/* Painel escuro com o passo a passo - mesma linguagem visual do popup do
   calendario (fundo em degrade escuro, cantos bem arredondados). Usa
   opacity+visibility+transform em vez de display:none, pra abrir E fechar
   de forma suave (mesma tecnica ja usada nas bandejas da hotbar). */
.popup-ajuda {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 340px;
    background: linear-gradient(180deg, #202824 0%, #1a1d1c 30%, #141816 100%);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    padding: 20px;
    box-sizing: border-box;
    z-index: 10001;
    color: #d4d4d8;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    line-height: 1.6;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.22s cubic-bezier(0.16,1,0.3,1),
                transform 0.22s cubic-bezier(0.16,1,0.3,1),
                visibility 0s linear 0.22s;
}

.popup-ajuda.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.22s cubic-bezier(0.16,1,0.3,1),
                transform 0.22s cubic-bezier(0.16,1,0.3,1),
                visibility 0s linear 0s;
}

.popup-ajuda h4 {
    margin: 0 0 12px 0;
    color: #006f73;
    font-size: 14px;
}

.popup-ajuda ol {
    margin: 0;
    padding-left: 18px;
}

.popup-ajuda li {
    margin-bottom: 8px;
}

.popup-ajuda li:last-child {
    margin-bottom: 0;
}

.popup-ajuda strong {
    color: #ffffff;
}

/* ============================================================
   13. CDV - CALENDARIO CUSTOMIZADO (PREVISTO DESLIGAMENTO)
   ============================================================ */
.calendario-popup {
    display: none;
    position: fixed;
    z-index: 10001;
    width: 300px;
    background: linear-gradient(180deg, #202824 0%, #1a1d1c 30%, #141816 100%);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    box-sizing: border-box;
    overflow: hidden;
}

.calendario-popup.show {
    display: block;
}

.calendario-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 5px;
    border-radius: 0 0 3px 3px;
    background: #006f73;
    box-shadow: 0 0 20px 6px rgba(51,145,131,0.55);
    pointer-events: none;
}

.calendario-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.calendario-nav {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.calendario-nav:hover {
    background: rgba(255,255,255,0.12);
}

.calendario-titulo {
    position: relative;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
}

.calendario-semana {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    color: #6b6b76;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.calendario-grade {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 8px;
}

.calendario-dia {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    color: #fff;
    font-size: 14px;
    border-radius: 50%;
    cursor: pointer;
}

.calendario-dia:hover:not(.calendario-dia-fora):not(.calendario-dia-desabilitado):not(.gestor-seg-dia-coberto):not(.gestor-seg-dia-sem-cobertura) {
    background: rgba(255,255,255,0.08);
}

.calendario-dia-fora {
    color: #45454e;
    cursor: default;
}

.calendario-dia-desabilitado {
    color: #3a3a42;
    cursor: not-allowed;
}

.calendario-dia-selecionado {
    background: radial-gradient(circle, #006f73 0%, #00565a 100%);
    box-shadow: 0 0 18px rgba(51,145,131,0.7);
    font-weight: bold;
}

/* Faixa que conecta visualmente o inicio e o fim do intervalo selecionado (FERIAS) */
.calendario-dia-no-intervalo {
    background: rgba(51,145,131,0.3);
    border-radius: 4px;
}

/* Dias com capacitacao ja marcada (CDV) - clicaveis pra desmarcar, ver
   confirmarRemoverCapacitacao. Laranja pra ficar visualmente distinto tanto
   do verde de selecao/intervalo em andamento quanto do cinza de desabilitado. */
.calendario-dia-capacitacao {
    background: radial-gradient(circle, #ff831d 0%, #cc6917 100%);
    box-shadow: 0 0 18px rgba(230,126,34,0.6);
    font-weight: bold;
    cursor: pointer;
}

/* Dias com cobertura ja escalada pro volante (CDV) - vence visualmente sobre
   a capacitacao (laranja) no mesmo dia. Read-only aqui (cobertura e gerenciada
   na aba Solicitacoes) - mesmo azul do botao "VERIFICAR LISTA" (backend/filtro.js). */
.calendario-dia-cobertura {
    background: radial-gradient(circle, #4658c3 0%, #37489e 100%);
    box-shadow: 0 0 18px rgba(41,128,185,0.6);
    font-weight: bold;
    cursor: default;
}

/* Calendario de segmentos de cobertura (coberturas/solicitacoes-gestor.html) -
   dia ainda sem decisao nesta solicitacao, clicavel pra virar inicio/fim do
   novo segmento. So a borda (nao o fundo) pra nao brigar visualmente com o
   preenchimento solido usado pela selecao em andamento
   (.calendario-dia-selecionado/.calendario-dia-no-intervalo, acima). */
.gestor-seg-dia-pendente {
    border: 2px dashed #ff831d;
    color: #ff831d;
    font-weight: bold;
}

/* Dia ja coberto por outro segmento (designado) desta mesma solicitacao -
   so informativo, nao clicavel (o servidor tambem rejeitaria, ver
   validarSegmento em cobertura-gestor.php). */
.gestor-seg-dia-coberto {
    background: radial-gradient(circle, #006f73 0%, #00565a 100%);
    color: #fff;
    font-weight: bold;
    cursor: not-allowed;
}

/* Dia ja marcado sem cobertura por outro segmento - mesma logica acima. */
.gestor-seg-dia-sem-cobertura {
    background: #6b6b76;
    color: #fff;
    font-weight: bold;
    cursor: not-allowed;
}

/* Rodape do calendario com o botao "Aplicar" (usado so pelo alvo 'capacitacao') */
.calendario-footer {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

/* ============================================================
   14. SOLICITACAO - TABELA E GAVETA LATERAL
   ============================================================ */
/* Linha destacada por duplicidade de Matricula + Data */
#table-body tr.linha-duplicada,
#table-body tr.linha-duplicada td {
    background-color: #edebd7 !important;
    color: #000 !important;
}
#table-body tr.linha-duplicada:hover,
#table-body tr.linha-duplicada:hover td {
    background-color: #d9d8c5 !important;
}

/* Linhas coloridas por motivo de solicitacao do dia (so papel Preposto -
   ver obterClasseCorLinha em cdv.html). Tons pastel (nao a cor saturada do
   calendario do modal) pra nao brigar com o texto preto padrao da tabela. */
#table-body tr.linha-preposto-falta,
#table-body tr.linha-preposto-falta td {
    background-color: #f8d7da !important;
    color: #000 !important;
}
#table-body tr.linha-preposto-falta:hover,
#table-body tr.linha-preposto-falta:hover td {
    background-color: #f3c1c6 !important;
}

#table-body tr.linha-preposto-atestado,
#table-body tr.linha-preposto-atestado td {
    background-color: #ffe5cc !important;
    color: #000 !important;
}
#table-body tr.linha-preposto-atestado:hover,
#table-body tr.linha-preposto-atestado:hover td {
    background-color: #ffd6ad !important;
}

#table-body tr.linha-preposto-servico_extra,
#table-body tr.linha-preposto-servico_extra td {
    background-color: #cfe8fb !important;
    color: #000 !important;
}
#table-body tr.linha-preposto-servico_extra:hover,
#table-body tr.linha-preposto-servico_extra:hover td {
    background-color: #b8dcf7 !important;
}

#table-body tr.linha-preposto-afastamento,
#table-body tr.linha-preposto-afastamento td {
    background-color: #e6d6f0 !important;
    color: #000 !important;
}
#table-body tr.linha-preposto-afastamento:hover,
#table-body tr.linha-preposto-afastamento:hover td {
    background-color: #d7bfe8 !important;
}

#table-body tr.linha-preposto-desligamento,
#table-body tr.linha-preposto-desligamento td {
    background-color: #e2e3e5 !important;
    color: #000 !important;
}
#table-body tr.linha-preposto-desligamento:hover,
#table-body tr.linha-preposto-desligamento:hover td {
    background-color: #cfd1d4 !important;
}

/* Legenda das cores acima, abaixo da tabela de Colaboradores (so Preposto -
   ver filtro.js) - so orientacao visual, nao filtra nada ao clicar. */
.legenda-preposto-colaboradores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 12px;
    padding: 10px 14px;
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 12px;
    color: #333;
}
.legenda-preposto-colaboradores span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.legenda-preposto-colaboradores i {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Colunas mais largas so nessa pagina (tabela com mais campos) - por isso
   escopado em "body.pagina-solicitacao" em vez de alterar "thead th" pra
   todo mundo. */
body.pagina-solicitacao thead th {
    overflow: visible !important;
    min-width: 160px;
    border-right: 1px solid #00565a;
}

/* --- Modal gigante da ferramenta de Notificacao de Cobertura - agora
   compartilhado entre todas as paginas (injetado por backend/filtro.js),
   aberto pelo item "Notificacao" do menu COBERTURAS da hotbar. --- */
.modal-notificacao-cobertura {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); z-index: 10000; justify-content: center; align-items: center;
}
.modal-notificacao-content {
    background-color: #2c2c2c; width: 1200px; height: 80vh; max-width: 95vw; border-radius: 10px;
    color: white; box-shadow: 0 15px 35px rgba(0,0,0,0.5); display: flex; flex-direction: column; overflow: hidden;
}
.modal-notificacao-header {
    position: relative; background-color: #3d3d3d; padding: 15px 20px;
    display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #444;
}
.modal-notificacao-header .btn-fechar {
    position: absolute;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

/* Interruptor de design duplo (Volante / Contrato) */
.switch-container { display: flex; align-items: center; gap: 15px; color: #006f73; font-weight: bold; font-size: 18px; }
.switch { position: relative; display: inline-block; width: 54px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }

.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #2c2c2c; border: 2px solid #006f73; transition: .4s; border-radius: 34px;
}
.slider:before {
    position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px;
    background-color: #006f73; transition: .4s; border-radius: 50%;
}

input:checked + .slider { background-color: #006f73; }
input:checked + .slider:before { transform: translateX(26px); background-color: #ffffff; }

.modal-notificacao-body { padding: 30px; display: flex; flex-direction: column; gap: 15px; flex: 1; overflow-y: hidden; }

.container-duplo { display: flex; gap: 30px; width: 100%; height: 100%; }
.coluna-form, .coluna-preview {
    flex: 1; display: flex; flex-direction: column; background-color: #353535; border-radius: 8px;
    padding: 20px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); overflow: hidden;
}
.coluna-form h4, .coluna-preview h4 {
    margin-top: 0; color: #006f73; border-bottom: 1px solid #444; padding-bottom: 10px; margin-bottom: 20px; font-size: 16px;
}

.form-group { margin-bottom: 18px; display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-size: 13px; color: #ccc; font-weight: bold; }

.input-padrao {
    background-color: #252525; border: 1px solid #444; color: #fff; padding: 12px; border-radius: 5px;
    font-size: 14px; outline: none; transition: border 0.3s;
}
.input-padrao:focus { border-color: #006f73; }

.caixa-preview {
    background-color: #1e1e1e; border: 1px solid #444; border-radius: 5px; padding: 20px;
    color: #ddd; font-family: 'Courier New', Courier, monospace; font-size: 14px; white-space: pre-wrap;
    flex: 1; overflow-y: auto; margin-bottom: 15px; line-height: 1.6;
}

.btn-copiar {
    background-color: #006f73; color: white; border: none; padding: 15px; border-radius: 5px;
    font-weight: bold; font-size: 14px; cursor: pointer; transition: background-color 0.3s, transform 0.1s; text-align: center;
}
.btn-copiar:hover { background-color: #00565a; transform: translateY(-2px); }

.btn-lista-add, .btn-lista-remove {
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    padding: 15px 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-lista-add { background-color: #006f73; }
.btn-lista-remove { background-color: #453f5a; }

.btn-lista-salvar, .btn-lista-cancelar {
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    padding: 15px;
    flex: 1;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-lista-salvar { background-color: #006f73; }
.btn-lista-cancelar { background-color: #453f5a; }

.btn-lista-add:hover, .btn-lista-remove:hover, .btn-lista-salvar:hover, .btn-lista-cancelar:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.25);
    transform: translateY(-1px);
    filter: brightness(1.08);
}

/* Tabelas auxiliares pra leitura direta de Excel na nuvem pelo HTML */
.tabela-editavel { width: 100%; border-collapse: collapse; font-size: 13px; color: #333; table-layout: fixed; }
.tabela-editavel th { background-color: #006f73; color: white; padding: 10px; border: 1px solid #00565a; position: sticky; top: 0; z-index: 1; text-align: center; }
.tabela-editavel td { padding: 0; border: 1px solid #ccc; height: 35px; text-align: center; }
.tabela-editavel input {
    width: 100%; height: 100%; box-sizing: border-box; border: none; padding: 8px 10px;
    background: transparent; font-family: inherit; font-size: inherit; color: #000; text-align: center;
}
.tabela-editavel input:focus { outline: 2px solid #006f73; background-color: #e6f1f1; }

/* ============================================================
   15. VOLANTES
   ============================================================ */
/* Tabela um pouco mais alta so nessa pagina - escopado em
   "body.pagina-volantes" pra nao alterar a altura minima nas outras. */
body.pagina-volantes .tabela-visualizacao {
    min-height: 400px;
}

#container-dias-uteis-interno {
    display: none;
    position: fixed;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.input-dias-uteis {
    border: none;
    border-radius: 5px;
    padding: 10px 10px;
    height: 37px;
    font-size: 13px;
    font-weight: bold;
    color: white;
    background-color: #006f73;
    outline: none;
    width: 100%;
    max-width: 140px;
    text-align: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.input-dias-uteis:hover,
.input-dias-uteis:focus {
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    background-color: #00565a;
}

.input-dias-uteis::placeholder {
    color: #d1e8e2;
    font-weight: bold;
}

/* ============================================================
   16. INTERMITENTES
   ============================================================ */
.header-planilha {
    text-align: center;
    background-color: white;
    padding: 20px;
    border-radius: 8px 8px 0 0;
    border: 1px solid #ddd;
    border-bottom: none;
    margin-top: 10px;
    display: none;
}

.header-planilha h2.titulo-relatorio {
    margin: 10px 0 !important;
    padding: 0 !important;
    color: #000000 !important;
    font-weight: bold !important;
    font-size: 1.4rem !important;
}

.header-planilha .info-cabecalho {
    margin: 6px 0 !important;
    padding: 0 !important;
    color: #000000 !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
}

.status-celula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 80px;
    color: #000;
    font-weight: 500;
    font-size: 16px;
    text-align: center;
}

.col-nome {
    text-align: left !important;
    padding-left: 15px !important;
    min-width: 200px;
}

.col-total {
    font-weight: bold;
    background-color: #f9f9f9;
}

/* Botoes de acao da tabela (ocultos ate clicar no lapis) */
.btn-lapis,
.btn-add,
.btn-remove {
    color: white !important;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-weight: bold;
    font-size: 13px;
    width: 65px;
    height: 45px;
}

.btn-lapis {
    background-color: #5b5375;
}

.btn-add {
    background-color: #5b5375;
    font-size: 24px;
    display: none;
}

.btn-remove {
    background-color: #453f5a;
    font-size: 24px;
    display: none;
}

.btn-lapis:hover,
.btn-add:hover,
.btn-remove:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.btn-email {
    color: white !important;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-weight: bold;
    font-size: 24px;
    width: 65px;
    height: 45px;
    background-color: #d4ac0d;
}

.btn-email:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.input-obs {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    font-size: 11px;
    outline: none;
}

.input-obs:focus,
.input-obs:hover {
    border: 1px solid #006f73;
    background: #fff;
    border-radius: 3px;
}

/* Gaveta lateral de configuracao dos VTs - medidas proprias desta pagina,
   diferentes da gaveta do SOLICITACAO (mesmos nomes de classe, outro
   proposito), por isso escopados em "body.pagina-intermitentes". */
body.pagina-intermitentes .btn-hamburguer {
    position: fixed;
    top: 105px;
    right: 20px;
    z-index: 2001;
    background: none;
    border: none;
    cursor: pointer;
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
}

body.pagina-intermitentes .btn-hamburguer span {
    display: block;
    width: 30px;
    height: 4px;
    background-color: #000000;
    border-radius: 2px;
    transition: 0.3s;
}

body.pagina-intermitentes .sidebar {
    position: fixed;
    top: 0;
    right: -35vw;
    width: 33.33vw;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
    z-index: 2000;
    transition: right 0.4s ease-in-out;
    padding: 100px 20px 30px 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

body.pagina-intermitentes .sidebar.active { right: 0; }

body.pagina-intermitentes .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.4);
    display: none;
    z-index: 1999;
}

body.pagina-intermitentes .overlay.active { display: block; }

/* Moldura integral arredondada da tabela do menu lateral */
.tabela-menu {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 2px solid #000000 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    font-size: 10px;
    color: #000000;
}

.tabela-menu th,
.tabela-menu td {
    padding: 8px 10px;
    border: none !important;
    border-bottom: 1px solid #000000 !important;
    border-right: 1px solid #000000 !important;
    color: #000000 !important;
    text-align: left;
}

.tabela-menu th {
    background-color: #e2e2e2;
    font-weight: bold;
}

.tabela-menu td {
    font-weight: bold;
}

.tabela-menu th:last-child,
.tabela-menu td:last-child {
    border-right: none !important;
}

.tabela-menu tbody tr:last-child td {
    border-bottom: none !important;
}

.rodape-acoes {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.rodape-acoes-left,
.rodape-acoes-right {
    display: flex;
    gap: 15px;
}

.check-excluir {
    transform: scale(1.3);
    cursor: pointer;
}

/* ============================================================
   17. PFM
   ============================================================ */
.tabela-visualizacao tbody tr:last-child td:first-child,
.tabela-visualizacao tbody tr:last-child td:last-child {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#minha-tabela thead th {
    border-right: 1px solid #00565a !important;
}
#minha-tabela thead th:last-child {
    border-right: none !important;
}

/* Barra de abas simulando o rodape de uma pasta de trabalho Excel */
.barra-abas-excel {
    display: flex;
    background-color: #f1f3f5;
    border-top: 1px solid #ddd;
    padding: 10px 20px 0 20px;
    align-items: flex-end;
    border-bottom-left-radius: 27px;
    border-bottom-right-radius: 27px;
    gap: 5px;
}

.btn-aba-excel {
    background-color: #e9ecef;
    border: 1px solid #ccc;
    border-bottom: none;
    padding: 8px 22px;
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s ease;
    height: 34px;
    display: flex;
    align-items: center;
}

.btn-aba-excel:hover {
    background-color: #dee2e6;
    color: #000000;
}

.btn-aba-excel.ativa {
    background-color: #ffffff;
    color: #006f73;
    border-top: 3px solid #006f73;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    font-weight: bold;
    height: 37px;
    margin-bottom: -1px;
    z-index: 2;
}

/* ============================================================
   18. INDEX - TELA DE LOGIN E PAINEL DE ADMINISTRACAO
   ============================================================ */
/* Paleta oficial do manual de identidade visual do Grupo RCS (pag. "Paleta de
   cores"): #006f73 = primaria "Engenharia | Tradicao", #5b5375 = primaria
   "Inovacao | Modernidade". Todo o resto da tela deriva dessas duas. */
body.pagina-index {
    margin: 0;
    display: block;
    /* "height: auto" anula o "height: 100%" da regra global (body, html) -
       sem isso o body fica travado na altura da tela, a pagina nao rola e o
       botao Entrar fica inalcancavel quando as duas colunas empilham no
       celular. O min-height garante que o fundo cubra a tela inteira. */
    height: auto;
    min-height: 100vh;
    font-family: 'Barlow', 'Segoe UI', Helvetica, sans-serif;
    background: #062120;
    color: #e6f5f3;
}

/* Duas colunas: vitrine da marca a esquerda, formulario a direita */
.login-tela {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    min-height: 100vh;
}

/* ---------------- painel esquerdo (vitrine da marca) ---------------- */
.login-vitrine {
    position: relative;
    overflow: hidden;
    padding: 48px 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        radial-gradient(120% 90% at 15% 0%, #12403d 0%, rgba(18,64,61,0) 60%),
        radial-gradient(90% 80% at 90% 100%, #0d3a39 0%, rgba(13,58,57,0) 65%),
        linear-gradient(160deg, #0a2c2b 0%, #062120 100%);
}

/* Malha discreta ao fundo */
.login-grade {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image:
        linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
    background-size: 72px 72px;
}

/* Formas angulares da identidade (rodape das paginas do manual) */
.login-montanhas {
    position: absolute;
    left: -60px;
    bottom: -40px;
    width: 520px;
    height: 260px;
    opacity: 0.55;
}
.montanha {
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: solid transparent;
    border-right: solid transparent;
    border-bottom-style: solid;
}
.montanha-a { left:  40px; border-left-width: 150px; border-right-width: 150px; border-bottom-width: 190px; border-bottom-color: #2f4f57; }
.montanha-b { left: 180px; border-left-width: 130px; border-right-width: 130px; border-bottom-width: 150px; border-bottom-color: #1d6a68; }
.montanha-c { left: -20px; border-left-width: 100px; border-right-width: 100px; border-bottom-width: 120px; border-bottom-color: #14514f; }

.vitrine-topo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Versao padrao da marca sobre placa clara - aplicacao que o manual
   determina para fundo escuro */
.login-marca {
    display: flex;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.login-marca img { display: block; height: 52px; width: auto; }

.marca-texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-left: 1px solid rgba(255,255,255,0.14);
    padding-left: 18px;
}
.marca-nome {
    font-size: 13px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #4fd1c5;
    font-weight: 600;
}
.marca-desc {
    font-size: 13px;
    letter-spacing: 0.06em;
    color: rgba(230,245,243,0.6);
}

.vitrine-centro {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 26px;
    max-width: 560px;
}

.vitrine-titulo {
    display: flex;
    align-items: flex-end;
    gap: 20px;
}
.sigla {
    font-size: 132px;
    line-height: 0.82;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: #ffffff;
}
.sigla-risco {
    width: 2px;
    height: 92px;
    flex-shrink: 0;
    background: linear-gradient(#12a0a0, rgba(18,160,160,0));
}
.sigla-extenso {
    font-size: 22px;
    line-height: 1.25;
    color: rgba(230,245,243,0.82);
    padding-bottom: 6px;
}

.vitrine-texto {
    margin: 0;
    max-width: 460px;
    font-size: 17px;
    line-height: 1.65;
    font-weight: 300;
    color: rgba(230,245,243,0.66);
}

.vitrine-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.tag {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4fd1c5;
    border: 1px solid rgba(79,209,197,0.35);
    border-radius: 999px;
    padding: 7px 14px;
}

.vitrine-rodape {
    position: relative;
    font-size: 12.5px;
    letter-spacing: 0.1em;
    color: rgba(230,245,243,0.38);
}

/* --- Brilho ao passar o mouse ---
   So cor, sombra e um deslocamento minimo: nada que altere o espaco ocupado
   pelos elementos, pra nao empurrar o layout durante o hover. */
.marca-nome,
.marca-desc,
.sigla,
.sigla-extenso,
.vitrine-texto,
.tag {
    transition: color 0.25s ease, letter-spacing 0.25s ease,
                background 0.25s ease, border-color 0.25s ease,
                transform 0.3s ease, text-shadow 0.3s ease;
}

.marca-texto:hover .marca-nome {
    color: #a8ede5;
    letter-spacing: 0.26em;
}
.marca-texto:hover .marca-desc { color: rgba(230, 245, 243, 0.88); }

/* O inline-block e necessario: em elemento inline o transform nao se aplica */
.sigla { display: inline-block; }
.sigla:hover {
    transform: translateY(-4px);
    text-shadow: 0 0 36px rgba(79, 209, 197, 0.75);
}

.sigla-extenso:hover { color: #ffffff; }

.vitrine-texto:hover { color: rgba(230, 245, 243, 0.92); }

.tag:hover {
    background: rgba(79, 209, 197, 0.16);
    border-color: rgba(79, 209, 197, 0.7);
    color: #e6f5f3;
    transform: translateY(-2px);
}

/* ---------------- painel direito (formulario) ---------------- */
.login-forma {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: #072625;
    border-left: 1px solid rgba(255,255,255,0.06);
}

.forma-caixa {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
}

.forma-cabecalho { margin-bottom: 28px; }
.forma-cabecalho h1 {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #ffffff;
}
.forma-cabecalho p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    font-weight: 300;
    color: rgba(230,245,243,0.6);
}

.campo-rotulo {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(230,245,243,0.5);
}

.campo-login {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    margin-bottom: 14px;
    padding: 0 20px;
    box-sizing: border-box;
    background: #0c3130;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    /* Recorta o preenchimento que o Chrome pinta dentro do <input> no
       autopreenchimento - sem isso ele vaza pelos cantos arredondados,
       porque quem tem o raio e esta caixa, nao o input. */
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.campo-login:focus-within {
    border-color: #12a0a0;
    box-shadow: 0 0 0 3px rgba(18,160,160,0.18);
}

.campo-icone {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: rgba(230,245,243,0.55);
}

.campo-login input {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: transparent;
    border: 0;
    outline: none;
    color: #ffffff;
    font-family: inherit;
    font-size: 16px;
    padding: 0;
}
.campo-login input::placeholder { color: rgba(230,245,243,0.38); }

.campo-login input:-webkit-autofill,
.campo-login input:-webkit-autofill:hover,
.campo-login input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #0c3130 inset;
    caret-color: #ffffff;
    transition: background-color 9999s ease-in-out 0s;
}

.btn-olho {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-right: -12px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(230,245,243,0.6);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-olho:hover { background: rgba(255,255,255,0.07); color: #ffffff; }
.btn-olho svg { width: 19px; height: 19px; }

#erro-msg {
    margin: 18px 0 0 0;
    font-size: 13px;
    text-align: center;
    color: #ff8b7d;
    display: none;
}

/* Empilha as duas colunas em tela estreita */
@media (max-width: 900px) {
    .login-tela { grid-template-columns: 1fr; }
    .login-vitrine { padding: 36px 28px 44px; gap: 30px; }
    .sigla { font-size: 84px; }
    .sigla-risco { height: 62px; }
    .sigla-extenso { font-size: 19px; }
    .login-forma {
        padding: 36px 24px 56px;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,0.06);
    }
}

.btn-salvar {
    color: white; border: none; border-radius: 5px; font-weight: bold; cursor: pointer; transition: all 0.3s ease;
    padding: 12px 25px; background-color: #006f73;
}

.btn-salvar:hover {
    background-color: #5b5375; transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}

/* Botao ENTRAR: pilula no teal primario do manual (#006f73), com um toque do
   roxo secundario (#5b5375) na ponta. De proposito NAO usa o hover vermelho
   dos outros botoes do sistema - numa tela de login o vermelho passa ideia
   de erro/recusa, alem de nao pertencer a paleta da marca. */
.btn-entrar {
    width: 100%;
    height: 56px;
    margin-top: 10px;
    box-sizing: border-box;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #0c6f70 0%, #12a0a0 100%);
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(18, 160, 160, 0.28);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.btn-entrar:hover:not(:disabled) {
    background: linear-gradient(90deg, #0f8384 0%, #16b4b4 100%);
}

.btn-entrar:active:not(:disabled) { box-shadow: 0 6px 14px rgba(18, 160, 160, 0.22); }
.btn-entrar:disabled { opacity: 0.65; cursor: wait; }

/* Painel de usuarios (usuarios.html) - mesma paleta clara "SAAS/Excel" das
   demais tabelas do site (secao 5, .tabela-visualizacao/thead th/td) - nao
   o tema escuro que fazia sentido quando isto vivia dentro do modal de
   login. Busca por nome (filtra ver filtrarLinhasAdmin). */
.admin-busca {
    width: 100%; padding: 10px 12px; background-color: white; border: 1px solid #ccc;
    color: #000; border-radius: 6px; box-sizing: border-box; font-family: inherit; font-size: 13.5px;
}
.admin-busca:focus { outline: none; border-color: #006f73; }
.admin-busca::placeholder { color: #999; }

/* Tabela de usuarios (painel admin) */
.admin-tabela-wrapper {
    overflow-y: auto; max-height: 400px; background-color: white;
    border: 1px solid #b5b5b5; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.admin-tabela { width: 100%; border-collapse: collapse; }

.admin-tabela thead th {
    position: sticky; top: 0; background-color: #006f73;
    color: white; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
    text-align: left; padding: 10px 12px; border-bottom: 1px solid #00565a;
}

.admin-tabela td {
    padding: 8px 10px; border-bottom: 1px solid #dcdcdc; background-color: white;
    color: #000; vertical-align: middle;
}
.admin-tabela tr:last-child td { border-bottom: none; }
.admin-tabela tr:hover td { background-color: #f7f9f9; }

.table-input {
    width: 100%; padding: 9px 10px; background-color: white; border: 1px solid #ccc;
    color: #000; border-radius: 4px; box-sizing: border-box; font-family: inherit; font-size: 13.5px;
}
.table-input:focus { outline: none; border-color: #006f73; }
.table-input::placeholder { color: #999; }

.papel-select {
    width: 100%; padding: 9px 8px; background-color: white; border: 1px solid #ccc;
    color: #000; border-radius: 4px; box-sizing: border-box; font-family: inherit;
    font-size: 13px; cursor: pointer;
}
.papel-select:focus { outline: none; border-color: #006f73; }

/* Seletor de centros de custo de um Gestor - botao que abre uma lista com
   checkbox por centro (ver abrirCentrosCustoPicker em usuarios.html). So
   aparece na linha quando o papel selecionado e "gestor". */
.centros-custo-btn {
    width: 100%; padding: 9px 10px; background-color: white; border: 1px solid #ccc;
    color: #999; border-radius: 4px; box-sizing: border-box; font-family: inherit;
    font-size: 12.5px; cursor: pointer; text-align: left;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.centros-custo-btn.preenchido { color: #000; }
.centros-custo-btn:hover { border-color: #006f73; }

.centros-custo-painel {
    position: fixed; z-index: 4000; background-color: white; border: 1px solid #b5b5b5;
    border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    width: 260px; max-height: 320px; display: flex; flex-direction: column;
}
.centros-custo-painel-busca {
    padding: 10px; border-bottom: 1px solid #dcdcdc; flex-shrink: 0;
}
.centros-custo-painel-busca input {
    width: 100%; padding: 8px 10px; background-color: white; border: 1px solid #ccc;
    color: #000; border-radius: 4px; box-sizing: border-box; font-family: inherit; font-size: 12.5px;
}
.centros-custo-painel-lista { overflow-y: auto; padding: 6px; }
.centros-custo-item {
    display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 5px;
    cursor: pointer; font-size: 12.5px; color: #333;
}
.centros-custo-item:hover { background-color: #e6f1f1; }
.centros-custo-item input { cursor: pointer; }

.btn-remover {
    background: transparent; color: #e74c3c; border: 1px solid #e74c3c; border-radius: 20px;
    padding: 8px 12px; font-size: 12px; font-weight: bold; cursor: pointer; transition: all 0.2s ease;
    white-space: nowrap;
}
.btn-remover:hover { background-color: #e74c3c; color: white; }

/* "+ Adicionar/Novo usuario" - mesmo estilo solido dos botoes de acao do
   resto do site (.btn-importar/.btn-adicionar-novo), nao o contorno
   tracejado que so fazia sentido sobre fundo escuro. */
.btn-adicionar {
    width: 100%; background-color: #006f73; color: white; border: none;
    border-radius: 5px; padding: 12px 14px; font-size: 13px; font-weight: bold;
    cursor: pointer; transition: all 0.3s ease; text-align: left;
}
.btn-adicionar:hover { background-color: #5b5375; box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); }

.admin-tabela-wrapper::-webkit-scrollbar { width: 8px; }
.admin-tabela-wrapper::-webkit-scrollbar-track { background: #f0f0f0; }
.admin-tabela-wrapper::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.admin-tabela-wrapper::-webkit-scrollbar-thumb:hover { background: #006f73; }

.admin-actions {
    display: flex; flex-direction: column; margin-top: 15px; gap: 10px;
}

#admin-status { font-size: 13px; text-align: right; display: none; }
/* ============================================================
   PAGINA USUARIOS (usuarios.html) - painel de admin como pagina normal do
   site, nao mais um modal dentro do login. Reaproveita .admin-tabela,
   .admin-busca, .papel-select, .centros-custo-* (mesmas regras acima) -
   estes modificadores so ajustam o que muda fora do contexto de modal.
   ============================================================ */
.usuarios-cabecalho {
    max-width: 1000px;
    margin: 0 auto 20px auto;
    padding: 0 70px;
}
.usuarios-cabecalho h2 {
    margin: 0 0 4px 0;
    color: #006f73;
    font-size: 26px;
    font-weight: 600;
}
.usuarios-cabecalho p {
    margin: 0;
    color: #8f8f8f;
    font-size: 14px;
}

/* .controles-superiores ja existe (secao 4) com o mesmo padding lateral -
   so precisa que a busca nao estique feito os botoes de Colaboradores. */
.usuarios-cabecalho + .controles-superiores {
    max-width: 1000px;
    margin: 0 auto 15px auto;
}
.usuarios-cabecalho ~ .controles-superiores #usuarios-busca {
    max-width: 320px;
}

.btn-adicionar-usuario {
    width: auto;
    padding: 10px 20px;
}

.admin-tabela-wrapper-pagina {
    max-width: 1000px;
    margin: 0 auto;
    max-height: 60vh;
}

.admin-actions-pagina {
    max-width: 1000px;
    margin: 15px auto 0 auto;
}

/* Botao "Gerenciar Usuarios" (RH), injetado por filtro.js ao lado do sino -
   mesma base visual do .btn-sino (posicao fixa recalculada por
   ajustarHotbarResponsiva), so com um icone SVG no lugar do emoji. */
.btn-usuarios {
    position: fixed;
    top: 50px;
    transform: translateY(-50%);
    right: 545px;
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    z-index: 1002;
    transition: transform 0.2s ease, color 0.2s ease;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
}
.btn-usuarios svg { width: 100%; height: 100%; }
.btn-usuarios:hover {
    transform: translateY(-50%) scale(1.1);
    color: #4fd1c5;
}

/* Calendario do mes atual no modal do Preposto (ver abrirModalSolicitacaoPreposto,
   colaboradores/cdv.html) - so leitura, mostra o mes corrente com os dias
   que ja tem solicitacao aberta pintados por motivo. Nao e o mesmo widget
   do calendario-popup compartilhado (aquele e um seletor de data via
   clique; este e so um resumo visual, sempre visivel). */
.preposto-calendario-mes {
    background: #232323; border: 1px solid #444; border-radius: 8px; padding: 10px;
}
.preposto-calendario-titulo {
    text-align: center; color: #fff; font-size: 13px; font-weight: bold;
    margin-bottom: 8px; text-transform: capitalize;
}
.preposto-calendario-grade {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.preposto-calendario-dia-semana {
    text-align: center; font-size: 9px; color: #888; text-transform: uppercase; padding-bottom: 2px;
}
.preposto-calendario-dia {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #ccc; border-radius: 4px; box-sizing: border-box;
}
.preposto-calendario-dia.fora-do-mes { color: transparent; }
.preposto-calendario-dia.hoje { border: 1px solid #006f73; }
.preposto-calendario-dia.preposto-dia-falta { background: #e74c3c; color: #fff; font-weight: bold; }
.preposto-calendario-dia.preposto-dia-atestado { background: #ff831d; color: #fff; font-weight: bold; }
.preposto-calendario-dia.preposto-dia-servico_extra { background: #3498db; color: #fff; font-weight: bold; }
.preposto-calendario-dia.preposto-dia-afastamento { background: #8e44ad; color: #fff; font-weight: bold; }
.preposto-calendario-dia.preposto-dia-desligamento { background: #bdc3c7; color: #2c3e50; font-weight: bold; }

.preposto-calendario-legenda {
    display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; font-size: 10px; color: #ccc;
}
.preposto-calendario-legenda span { display: flex; align-items: center; gap: 4px; }
.preposto-calendario-legenda i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

/* Calendario do mes atual no modal normal de colaborador (ver
   abrirModalColaborador, colaboradores/cdv.html) - so Gestor, mostra os
   dias em que o colaborador foi designado como volante de alguma
   cobertura. Mesmo padrao visual do calendario do Preposto acima, so que
   com uma unica cor de destaque (aqui e so "designado ou nao", nao tem
   motivos diferentes). */
.gestor-cobertura-calendario-mes {
    background: #232323; border: 1px solid #444; border-radius: 8px; padding: 10px;
}
.gestor-cobertura-calendario-titulo {
    text-align: center; color: #fff; font-size: 13px; font-weight: bold;
    margin-bottom: 8px; text-transform: capitalize;
}
.gestor-cobertura-calendario-grade {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.gestor-cobertura-calendario-dia-semana {
    text-align: center; font-size: 9px; color: #888; text-transform: uppercase; padding-bottom: 2px;
}
.gestor-cobertura-calendario-dia {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #ccc; border-radius: 4px; box-sizing: border-box;
}
.gestor-cobertura-calendario-dia.fora-do-mes { color: transparent; }
.gestor-cobertura-calendario-dia.hoje { border: 1px solid #006f73; }
.gestor-cobertura-calendario-dia.designado { background: #006f73; color: #fff; font-weight: bold; }

/* "X" de cancelar em colaboradores/solicitacoes-preposto.html - so
   aparece dentro da janela de 10 minutos (pode_cancelar, calculado no
   servidor). Tema claro, igual ao resto da tabela dessa pagina. */
.btn-cancelar-solicitacao {
    width: 24px; height: 24px; border-radius: 50%; border: 1px solid #e74c3c;
    background: transparent; color: #e74c3c; font-size: 12px; line-height: 1;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
}
.btn-cancelar-solicitacao:hover { background-color: #e74c3c; color: white; }
.btn-cancelar-solicitacao:disabled { opacity: 0.5; cursor: wait; }