/* ===================================================================
   1. DESIGN SYSTEM E VARIÁVEIS GLOBAIS (COM TEMAS)
   =================================================================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    /* --- TEMA CLARO (Light Theme) --- */
    --cor-fundo: #F0F2F5;
    --cor-componente: #FFFFFF;
    --cor-borda: #E2E8F0;
    --cor-texto-titulo: #1A202C;
    --cor-texto-principal: #2D3748;
    --cor-texto-secundario: #718096;
    --cor-primaria: #3182CE;
    --sombra-padrao: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --raio-borda: 8px;
}

[data-bs-theme="dark"] {
    /* --- TEMA ESCURO (Dark Theme) --- */
    --cor-fundo: #1A202C;
    --cor-componente: #2D3748;
    --cor-borda: #4A5568;
    --cor-texto-titulo: #F7FAFC;
    --cor-texto-principal: #E2E8F0;
    --cor-texto-secundario: #A0AEC0;
    --cor-primaria: #63B3ED;
    --sombra-padrao: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
}
/* Corrige o fundo de cabeçalhos de card e filtros */
.card-header.bg-white {
    background-color: var(--cor-componente) !important;
}

/* Corrige a cor do cabeçalho das tabelas (thead) */
.table-light {
    --bs-table-bg: var(--cor-fundo);
    --bs-table-color: var(--cor-texto-principal);
    border-color: var(--cor-borda);
}

/* ... (O resto do seu CSS continua aqui, pois ele já usa as variáveis) ... */

/* ===================================================================
   2. ESTILOS GERAIS E RESETS
   =================================================================*/
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 10px; }

/* ===================================================================
   3. PÁGINA DE LOGIN (ESTILO ANIMADO)
   =================================================================*/
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.auth-wrapper {
    width: 100%;
    max-width: 420px;
}

.auth-card {
    padding: 2.5rem;
    border-radius: var(--raio-borda);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.auth-icon {
    font-size: 3rem;
    color: var(--cor-primaria);
}

.auth-title {
    color: var(--cor-texto-titulo);
    font-weight: 700;
}

.auth-subtitle {
    color: var(--cor-texto-secundario);
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.auth-body-animated {
    background: linear-gradient(-45deg, #e0eafc, #cfdef3, #a7c5eb, #6a82fb);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.auth-card {
    background-color: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
/* ===================================================================
   4. LAYOUT DA PÁGINA HOME (COM NAVBAR SUPERIOR)
   =================================================================*/
.top-navbar {
    background-color: var(--cor-componente);
    box-shadow: var(--sombra-padrao);
    padding: 0.75rem 2rem;
}

.top-navbar .navbar-brand {
    font-weight: 700;
    color: var(--cor-texto-titulo);
}

.top-navbar .nav-link {
    color: var(--cor-texto-principal);
    font-weight: 500;
    transition: var(--transicao-padrao);
    border-radius: var(--raio-borda);
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
}

.top-navbar .nav-link:hover,
.top-navbar .nav-link.active {
    color: var(--cor-primaria);
    background-color: var(--cor-fundo);
}

.top-navbar .nav-link.logout { color: var(--cor-erro); }
.top-navbar .nav-link.logout:hover { color: #FFF; background-color: var(--cor-erro); }

.page-header {
    padding: 4rem 0;
    text-align: center;
    background-color: var(--cor-componente);
    border-bottom: 1px solid var(--cor-borda);
}

.service-card {
    background-color: var(--cor-componente);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    padding: 2rem;
    text-align: center;
    transition: var(--transicao-padrao);
    box-shadow: var(--sombra-padrao);
    height: 100%;
}
.service-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); border-color: var(--cor-primaria); }
.service-card-icon { font-size: 3rem; margin-bottom: 1rem; color: var(--cor-primaria); }
.service-card-title { font-size: 1.25rem; font-weight: 600; color: var(--cor-texto-titulo); }

/* ===================================================================
   5. LAYOUT DA APLICAÇÃO INTERNA (SIDEBAR E NAVBAR) - VERSÃO FINAL
   =================================================================*/
.main-container { 
    display: flex; 
    min-height: 100vh; 
}

.sidebar { 
    width: 260px; 
    background-color: var(--cor-componente); 
    border-right: 1px solid var(--cor-borda); 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    padding: 1.5rem 1rem; 
    z-index: 1030; /* Garante que a sidebar fique acima de outros elementos se necessário */
}

.page-wrapper {
    margin-left: 260px; /* Empurra o conteúdo para depois da sidebar */
    width: calc(100% - 260px); /* Ocupa o resto da largura */
    display: flex;
    flex-direction: column;
}

.app-header {
    background-color: var(--cor-componente);
    border-bottom: 1px solid var(--cor-borda);
    padding: 0.75rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    flex-shrink: 0; 
}

.main-content {
    padding: 2rem;
    flex-grow: 1; 
}

/* --- Estilos dos componentes da Sidebar --- */
.sidebar-header {
    display: flex;
    justify-content: center; 
    align-items: center;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--cor-borda);
    margin-bottom: 1.5rem;
}

.sidebar-logo {
    height: 50px; 
}

.sidebar .nav-link { 
    color: var(--cor-texto-principal); 
    font-weight: 500; 
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    padding: 0.75rem 1rem; 
    margin-bottom: 0.5rem; 
    border-radius: var(--raio-borda); 
    transition: var(--transicao-padrao); 
}
.sidebar .nav-link:hover { background-color: var(--cor-fundo); color: var(--cor-primaria); }
.sidebar .nav-link.active { background-color: var(--cor-primaria); color: #FFF; box-shadow: 0 4px 14px 0 rgba(49, 130, 206, 0.39); }
.sidebar .logout { color: var(--cor-erro); }
.sidebar .logout:hover { background-color: var(--cor-erro); color: #FFF; }

/* --- Estilos dos componentes da Navbar --- */
.navbar-brand-wrapper {
    display: flex;
    flex-direction: column;
}

.system-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--cor-texto-secundario);
    margin: 0;
    padding: 0;
    line-height: 1;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cor-texto-titulo);
    margin: 0;
    padding: 0;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--cor-texto-principal);
}
/* ===================================================================
   6. COMPONENTES (FILTRO RECOLHÍVEL E BOTÕES)
   =================================================================*/
.collapsible-header {
    cursor: pointer;
    position: relative;
    user-select: none;
}

.collapsible-header::after {
    content: ''; /* Ícone de chevron para baixo do Bootstrap Icons */
    font-family: 'bootstrap-icons';
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease-in-out;
}

.collapsible-header.collapsed::after {
    transform: translateY(-50%) rotate(-90deg); /* Gira o ícone quando recolhido */
}

/* ===================================================================
   7. ESTILIZAÇÃO AVANÇADA DE TABELA (MODAL)
   =================================================================*/

.table-container {
    height: calc(100vh - 200px); /* Ocupa a altura do modal, menos o cabeçalho e rodapé */
    overflow: auto; /* Adiciona barras de rolagem vertical e horizontal conforme necessário */
    position: relative; /* Necessário para o cabeçalho fixo */
}

.table-container thead th {
    position: sticky; /* "Congela" o cabeçalho */
    top: 0;
    z-index: 10; /* Garante que o cabeçalho fique acima do conteúdo da tabela */
    background-color: var(--cor-fundo); /* Cor de fundo para o cabeçalho fixo */
}

/* Melhora a aparência da tabela dentro do modal */
.modal-body .table-bordered {
    border-color: var(--cor-borda);
}

.modal-body .table-bordered th,
.modal-body .table-bordered td {
    white-space: nowrap; /* Impede que o conteúdo das células quebre a linha */
    padding: 0.75rem;
    vertical-align: middle;
}

/* ===================================================================
   8. TELAS DE GERENCIAMENTO E PAINEL DE SENHAS
   =================================================================*/

/* Layout para as telas de gestão (senhas.html e senhas_medico.html) */
.password-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 1.5rem;
    align-items: start;
    height: calc(100vh - 120px);
}

.password-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.current-password-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.current-password-display {
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cor-primaria);
    margin: 1.5rem 0;
}

.current-password-name {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--cor-texto-principal);
    min-height: 50px;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    height: 100%;
}

/* Layout para o Painel de Senhas (painel_senhas.html) */
.panel-body {
    background-color: #f0f2f5;
    height: 100vh;
    padding: 2rem;
}
.panel-header {
    margin-bottom: 2rem;
    text-align: center;
}
.panel-header .logo-img {
    height: 60px;
}
.panel-header .titulo-home {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--cor-texto-titulo);
}
.panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    height: calc(100% - 120px);
}
.panel-column {
    background-color: var(--cor-componente);
    border-radius: var(--raio-borda);
    box-shadow: var(--sombra-padrao);
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.panel-column h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--cor-texto-secundario);
    border-bottom: 2px solid var(--cor-borda);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}
.panel-column h3 {
    font-size: 1.5rem;
    font-weight: 500;
}
.panel-senha-atual {
    font-size: 5rem;
    font-weight: 800;
    color: var(--cor-primaria);
    line-height: 1.1;
    animation: fadeIn 1s;
}
.panel-senha-nome {
    font-size: 1.75rem;
    font-weight: 500;
    margin-top: 1rem;
    animation: fadeIn 1.2s;
}
.action-buttons-form {
    display: flex;
    gap: 0.5rem; /* Espaçamento entre os botões */
    flex-wrap: wrap; /* Permite que os botões quebrem para a linha de baixo */
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===================================================================
   9. RESPONSIVIDADE PARA DISPOSITIVOS MÓVEIS
   =================================================================*/

/* Estilos para o botão "Menu Hamburguer" que aparece em telas pequenas */
.sidebar-toggler {
    display: none; /* Escondido por padrão em telas grandes */
    font-size: 1.5rem;
    color: var(--cor-texto-principal);
    border: none;
    background: none;
}

/* Regras para telas com largura máxima de 992px (tablets e celulares) */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%); /* Esconde a sidebar fora da tela */
        z-index: 1040; /* Garante que a sidebar fique acima do conteúdo quando aberta */
    }

    .sidebar.show {
        transform: translateX(0); /* Mostra a sidebar quando a classe 'show' é adicionada */
    }

    .page-wrapper {
        margin-left: 0; /* Ocupa a tela inteira */
        width: 100%;
    }
    
    .sidebar-toggler {
        display: block; /* Mostra o botão "Menu Hamburguer" */
    }
}

/* ===================================================================
   10. ESTILOS PARA GRÁFICOS (CHARTS)
   =================================================================*/

/* Container para o gráfico de rosca e sua legenda customizada */
.doughnut-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%; /* Garante que o container ocupe o espaço do card */
    gap: 1rem; /* Adiciona um espaço entre o gráfico e a legenda */
}

/* Wrapper para o canvas do gráfico, para controlar seu tamanho */
.doughnut-chart-wrapper {
    position: relative;
    flex: 1 1 60%; /* Ocupa 60% do espaço, permitindo que cresça/diminua */
    height: 100%;
    min-width: 0; /* Corrige um bug de flexbox que pode impedir o encolhimento */
}

/* Estilo da nossa legenda customizada */
.chart-legend {
    flex: 1 1 40%; /* Ocupa 40% do espaço */
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza os itens verticalmente */
    height: 100%;
    overflow-y: auto; /* Adiciona scroll se houver muitos itens */
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px; /* Aumenta o espaçamento vertical */
    font-size: 14px;
}

.legend-color-box {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    margin-right: 12px; /* Aumenta o espaçamento */
    flex-shrink: 0; /* Impede que o quadrado diminua de tamanho */
}

.legend-label {
    color: var(--cor-texto-principal);
    font-weight: 500;
    flex-grow: 1; /* Ocupa o espaço restante */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Adiciona "..." se o texto for muito longo */
}

.legend-percentage {
    color: var(--cor-texto-secundario);
    font-weight: bold;
    margin-left: 10px;
}
.legend-item.disabled {
    opacity: 0.5; /* Deixa o item da legenda semidesparente */
    text-decoration: line-through; /* Tacha o texto */
    cursor: pointer; /* Mantém o cursor de clique */
}
/* ===================================================================
   11. SIDEBAR DINÂMICA (PÁGINA DE ANÁLISE)
   =================================================================*/

/* Estilo da página com sidebar dinâmica */
.page-with-dynamic-sidebar .sidebar {
    width: 90px; /* Largura da sidebar recolhida */
    transition: width 0.3s ease-in-out;
    overflow-x: hidden; /* Esconde o texto que transborda */
}

.page-with-dynamic-sidebar .page-wrapper {
    margin-left: 90px;
    transition: margin-left 0.3s ease-in-out;
}

/* Estilo da sidebar quando expandida ou fixada */
.page-with-dynamic-sidebar .sidebar.expanded,
.page-with-dynamic-sidebar .sidebar.pinned {
    width: 260px; /* Largura da sidebar expandida */
}

.page-with-dynamic-sidebar .page-wrapper.sidebar-expanded,
.page-with-dynamic-sidebar .page-wrapper.sidebar-pinned {
    margin-left: 260px;
}

/* Esconde o texto e ajusta o header da sidebar quando recolhida */
.page-with-dynamic-sidebar .sidebar:not(.expanded):not(.pinned) .nav-link span,
.page-with-dynamic-sidebar .sidebar:not(.expanded):not(.pinned) .sidebar-title {
    opacity: 0;
    display: none;
}

.page-with-dynamic-sidebar .sidebar:not(.expanded):not(.pinned) .sidebar-header {
    justify-content: center;
}
/* Estilo da página com sidebar dinâmica */
.page-with-dynamic-sidebar .sidebar {
    width: 90px; /* Largura da sidebar recolhida */
    transition: width 0.3s ease-in-out;
    overflow-x: hidden; /* Esconde o texto que transborda */
}

.page-with-dynamic-sidebar .page-wrapper {
    margin-left: 90px;
    width: calc(100% - 90px);
    transition: margin-left 0.3s ease-in-out;
}

/* Estilo da sidebar quando expandida ou fixada */
.page-with-dynamic-sidebar .sidebar.expanded,
.page-with-dynamic-sidebar .sidebar.pinned {
    width: 260px; /* Largura da sidebar expandida */
}

.page-with-dynamic-sidebar .page-wrapper.sidebar-expanded,
.page-with-dynamic-sidebar .page-wrapper.sidebar-pinned {
    margin-left: 260px;
    width: calc(100% - 260px);
}

/* Esconde o texto e ajusta o header da sidebar quando recolhida */
.page-with-dynamic-sidebar .sidebar:not(.expanded):not(.pinned) .nav-link span,
.page-with-dynamic-sidebar .sidebar:not(.expanded):not(.pinned) .sidebar-title {
    opacity: 0;
    visibility: hidden;
    width: 0;
}

.page-with-dynamic-sidebar .sidebar:not(.expanded):not(.pinned) .sidebar-header {
    justify-content: center;
}

.prioridade-ativa {
        color: #dc3545 !important; /* Vermelho Bootstrap */
        font-weight: bold;
        animation: piscar 2s infinite; /* Opcional: faz piscar suavemente */
    }

    @keyframes piscar {
        0% { opacity: 1; }
        50% { opacity: 0.7; }
        100% { opacity: 1; }
    }
.prio-1 { /* Alta - Vermelho */
    border-color: #dc3545 !important;
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545 !important;
    animation: pulsar 1.5s infinite;
}

.prio-2 { /* Média - Laranja */
    border-color: #fd7e14 !important;
    background-color: rgba(253, 126, 20, 0.1);
    color: #fd7e14 !important;
}

.prio-3 { /* Baixa - Verde (Padrão) */
    border-color: #198754 !important;
    color: #198754 !important;
}

@keyframes pulsar {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}