/* =========================================
   1. VARIÁVEIS GLOBAIS (PREPARADAS PARA SaaS)
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

/* =========================================
   LOADER DA MARCA: o símbolo do infinito recortado do próprio SVG (LOGOSMARTM),
   com o degradê dourado->roxo "correndo" por dentro do recorte em loop — substitui
   o spinner genérico do Font Awesome nos mesmos lugares (mesmas classes de tamanho:
   fs-4, opacity-50 etc. continuam funcionando pois são utilitárias, não do ícone).
   Leve: é só uma animação de background-position numa máscara CSS, sem SVG animado
   nem JS — custo parecido (ou menor) que o fa-spin que ele substitui.
========================================= */
.loader-infinito {
    display: inline-block;
    width: 1.6em;
    height: 1.6em;
    vertical-align: -0.35em;
    background: linear-gradient(90deg, var(--gold), var(--neon-purple), var(--gold));
    background-size: 200% 100%;
    /* O SVG tem uma margem de respiro grande em volta do símbolo — damos um zoom (120%) pra
       cortar essa borda vazia e o infinito preencher melhor a caixa. */
    -webkit-mask-image: url('../img/LOGOSMARTM.svg');
    -webkit-mask-size: 120%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('../img/LOGOSMARTM.svg');
    mask-size: 120%;
    mask-repeat: no-repeat;
    mask-position: center;
    animation: loaderInfinitoFluxo 1.3s linear infinite;
}
@keyframes loaderInfinitoFluxo {
    to { background-position: -200% 0; }
}

:root {
    /* Tema Escuro (Padrão) */
    --bg-body: #121212;
    --bg-card: #1e1e1e;
    --text-main: #f5f5f5;
    --text-muted: #a0a0a0;
    --text-light: #fff;
    
    /* Cores de Marca (Podem vir do Banco de Dados no futuro) */
    --gold: #D4AF37;
    --neon-purple: #9b5de5;
    --neon-glow: 0 0 10px rgba(155, 93, 229, 0.7), 0 0 20px rgba(155, 93, 229, 0.5);

    /* Ciano informativo (cards "pendente hoje" na agenda, quantidade de insumo) — no claro vira cinza chumbo pra não sumir no card claro */
    --cor-info-texto: #0dcaf0;

    /* Elementos de Formulário */
    --input-bg: transparent;
    --input-border: rgba(255, 255, 255, 0.3);
    --input-disabled: rgba(255, 255, 255, 0.05);
    --border-divider: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] {
    /* Tema Claro */
    --bg-body: #f4f5f7;
    --bg-card: #ffffff;
    --text-main: #212529;
    --text-muted: #6c757d;
    --text-light: #333;
    
    /* Cores de Marca Adaptadas para fundo claro */
    --gold: #b58900;
    --neon-purple: #7b2cbf;
    --neon-glow: 0 0 10px rgba(123, 44, 191, 0.3);

    --cor-info-texto: #495057;

    /* Elementos de Formulário */
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-disabled: #e9ecef;
    --border-divider: rgba(0, 0, 0, 0.1);
}

/* =========================================
   2. SEQUESTRO DE CLASSES DO BOOTSTRAP E BASE
========================================= */
body {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
    overflow-x: hidden;
}

/* Força as classes nativas do HTML a seguirem nosso motor de variáveis */
.text-light { color: var(--text-main) !important; }
.text-muted { color: var(--text-muted) !important; }
.bg-dark { background-color: var(--bg-card) !important; }
.border-secondary { border-color: var(--input-border) !important; }

/* Nossas classes de cor */
.text-gold { color: var(--gold) !important; }
.text-neon { color: var(--neon-purple) !important; }

.fade-in { animation: fadeIn 1s ease-in-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   3. LAYOUT E NAVEGAÇÃO
========================================= */
.main-content { margin-left: 250px; padding: 20px; padding-bottom: 80px; }

.dashboard-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 0; margin-bottom: 20px; border-bottom: 1px solid var(--border-divider);
}

.profile-section { display: flex; align-items: center; gap: 15px; }
.profile-img {
    width: 60px; height: 60px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--gold); box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.sidebar-desktop {
    position: fixed; top: 0; left: 0; height: 100vh; width: 250px;
    background-color: var(--bg-card); border-right: 1px solid var(--border-divider);
    padding-top: 20px; display: flex; flex-direction: column; z-index: 1000;
}
.sidebar-brand { text-align: center; margin-bottom: 30px; }
.sidebar-menu { list-style: none; padding: 0; margin: 0; }
.sidebar-menu li a {
    display: flex; align-items: center; padding: 15px 25px;
    color: var(--text-main); text-decoration: none; transition: all 0.3s ease; border-left: 4px solid transparent;
}
.sidebar-menu li a i { 
    width: 25px; 
    background: linear-gradient(135deg, var(--neon-purple), #7b2cbf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.sidebar-menu li a:hover, .sidebar-menu li a.active {
    background: var(--input-disabled); border-left: 4px solid var(--neon-purple); color: var(--neon-purple);
}

.bottom-nav-wrapper, .fab-center { display: none; }
[data-theme="light"] .bottom-nav-mobile { background: var(--bg-card); border-top: 1px solid var(--border-divider); }

/* =========================================
   4. CARDS E LISTAS
========================================= */
.glass-card {
    background: var(--bg-card);
    border: 1px solid var(--border-divider);
    border-radius: 16px; padding: 20px;
    box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.glass-card:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: 0 25px 50px -18px rgba(0, 0, 0, 0.45); }

/* 🔥 Estilos Globais dos KPIs Premium */
.kpi-card-box {
    text-align: left;
    padding: 20px 15px !important;
    position: relative;
    overflow: hidden;
}
.kpi-title { 
    font-size: 0.75rem; 
    font-weight: 700; 
    color: var(--text-main) !important; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    text-align: left; 
    margin-bottom: 5px; 
    white-space: normal !important; /* Evita cortar com '...' */
    line-height: 1.3; 
    opacity: 0.9;
    position: relative; z-index: 1;
}
.kpi-value { 
    font-size: 1.8rem; 
    font-weight: 700; 
    color: var(--text-main) !important; 
    margin-top: 0; 
    text-align: left; 
    position: relative; z-index: 1;
}
.kpi-icon-bg {
    position: absolute;
    bottom: -10px;
    right: -5px;
    font-size: 4rem;
    opacity: 0.12;
    transform: rotate(-15deg);
    transition: 0.4s ease-out;
    z-index: 0;
}
.glass-card:hover .kpi-icon-bg {
    transform: rotate(0deg) scale(1.1);
    opacity: 0.2;
}
.agenda-list-item {
    background: var(--input-disabled);
    border-left: 4px solid var(--neon-purple); border-radius: 8px;
    padding: 12px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;
}
.agenda-time { color: var(--gold); font-weight: 600; }

/* =========================================
   5. BOTÕES
========================================= */
.btn-neon {
    background: linear-gradient(135deg, var(--neon-purple), #7b2cbf); border: none; color: #fff !important;
    font-weight: 600; letter-spacing: 0.3px; border-radius: 10px; padding: 12px;
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 10px 25px -8px rgba(155, 93, 229, 0.6);
}
.btn-neon:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -8px rgba(155, 93, 229, 0.75); color: #fff !important; }
.btn-neon:active { transform: translateY(0); }
.btn-neon:disabled { opacity: 0.75; }

.btn-cancelar { background: transparent; border: none; color: var(--text-muted); font-weight: 600; transition: color 0.3s; }
.btn-cancelar:hover { color: var(--text-main); }

.btn-avulso { border-color: var(--gold); color: var(--gold); }
.btn-avulso:hover, .btn-avulso:focus { color: #000 !important; background-color: var(--gold); border-color: var(--gold); }

/* Botão de Tema em Configurações: mesmo dourado do .btn-avulso, mas no hover o texto
   fica branco no tema escuro (preto sobre o preenchimento dourado ficava ilegível ali). */
[data-theme="dark"] .btn-tema-pref:hover,
[data-theme="dark"] .btn-tema-pref:focus { color: #fff !important; }

.nav-fab {
    background-color: var(--bg-card); border: 1px solid var(--neon-purple); border-radius: 50%;
    width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
    transform: translateY(-20px); box-shadow: var(--neon-glow);
}
.nav-fab i { color: var(--neon-purple) !important; font-size: 1.5rem !important; }
[data-theme="dark"] .nav-fab i { color: #fff !important; }

/* =========================================
   6. FORMULÁRIOS DINÂMICOS (O SEGREDO DA ARQUITETURA)
========================================= */
.form-label { font-weight: 600; font-size: 0.9rem; color: var(--text-main) !important; margin-bottom: 0.4rem; }

.form-control, .form-select, .input-group-text {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--text-main) !important;
    border-radius: 28px; padding: 12px 15px;
}

.form-control:focus, .form-select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.4) !important;
}

.form-control::placeholder { color: var(--text-muted) !important; }

/* Campos Bloqueados */
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: var(--input-disabled) !important;
    color: var(--text-muted) !important; opacity: 1;
}

select option { background-color: var(--bg-card); color: var(--text-main); }

/* Caixa pontilhada de alterar valores */
#containerValoresCustomizados {
    background-color: var(--input-disabled) !important;
    border: 1px dashed var(--input-border) !important;
}

/* Modais */
.modal-content { border-radius: 15px; border: 1px solid var(--border-divider); }
.modal-header, .modal-footer { border-color: var(--border-divider); }
[data-theme="light"] .btn-close-white { filter: invert(1) grayscale(100%) brightness(0); }

/* =========================================
   7. SELECT2 CUSTOMIZADO (FIXED - RESPIRÁVEL)
========================================= */

/* Correção de Margem: Evita que Etiquetas amarelas invadam a borda */
.form-label.d-flex {
    align-items: center;
    margin-bottom: 8px !important;
}

/* Base unificada para o container externo */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 10px !important;
    min-height: 46px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Anel de brilho ao focar (Efeito Neon) */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--neon-purple) !important;
    box-shadow: 0 0 0 4px rgba(155, 93, 229, 0.15) !important;
}

/* Cores de texto globais */
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-search__field {
    color: var(--text-main) !important; 
    font-family: 'Montserrat', sans-serif;
}

.select2-container--default .select2-selection__placeholder { 
    color: var(--text-muted) !important; 
}

/* Setinhas */
.select2-container--default .select2-selection__arrow b { border-color: var(--text-muted) transparent transparent transparent !important; }
.select2-container--default.select2-container--open .select2-selection__arrow b { border-color: transparent transparent var(--neon-purple) transparent !important; }

/* ---------------------------------------------------- */
/* 🔥 REGRAS EXCLUSIVAS: SELECT SIMPLES (Ex: Cliente, Profissional) */
/* ---------------------------------------------------- */
.select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center;
    height: 46px !important;
    padding-left: 6px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal !important; 
    padding-left: 10px !important; 
    padding-right: 30px !important;
    width: 100%; 
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px !important; top: 0 !important; right: 8px !important;
    display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------- */
/* 🔥 REGRAS EXCLUSIVAS: SELECT MÚLTIPLO (Ex: Serviços, Produtos) */
/* ---------------------------------------------------- */
.select2-container--default .select2-selection--multiple {
    display: block !important; /* Desativa o flex principal para não amassar as pílulas */
    height: auto !important;   /* Permite a caixa crescer para baixo naturalmente */
    padding: 6px 10px !important; /* Espaço para respirar */
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    gap: 8px; /* Espaço perfeito entre as pílulas */
    padding: 0 !important; 
    margin: 0 !important;
    list-style: none;
}

/* O campo invisível onde a pessoa digita (Input interno) */
.select2-container--default .select2-search--inline .select2-search__field {
    background: transparent !important; 
    color: var(--text-main) !important;
    margin: 0 !important; 
    padding: 0 !important;
    line-height: 28px !important; /* Altura exata para centralizar o cursor */
    min-height: 28px;
    box-shadow: none !important;
}

/* As "Pílulas" de serviços/produtos selecionados */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(155, 93, 229, 0.12) !important;
    border: 1px solid rgba(155, 93, 229, 0.35) !important;
    color: var(--text-main) !important;
    border-radius: 999px !important; 
    padding: 5px 12px 5px 14px !important; 
    margin: 0 !important;
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 0.85rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
    background-color: rgba(155, 93, 229, 0.2) !important;
}

/* O botãozinho [x] de remover a pílula */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--neon-purple) !important; 
    border: none !important;
    width: 20px; 
    height: 20px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 50%; 
    margin: 0 !important; 
    padding: 0 !important; 
    order: 2; /* Joga o [x] pro final da tag elegantemente */
    background: transparent !important;
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background-color: var(--neon-purple) !important; 
    color: #fff !important;
}

/* ---------------------------------------------------- */
/* Painel do dropdown (Onde ficam os resultados da busca)*/
/* ---------------------------------------------------- */
.select2-dropdown {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-divider) !important; 
    border-radius: 12px !important;
    box-shadow: 0 20px 45px -12px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden; 
    animation: select2FadeIn 0.15s ease;
}

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

.select2-results__options { padding: 6px; }

.select2-results__option {
    background-color: transparent; 
    color: var(--text-main) !important;
    padding: 10px 14px; 
    border-radius: 8px; 
    margin-bottom: 2px;
    font-size: 0.95rem;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: rgba(155, 93, 229, 0.15) !important; 
    color: var(--neon-purple) !important;
}

.select2-results__option[aria-selected="true"] {
    background-color: var(--input-disabled) !important; 
    color: var(--gold) !important; 
    font-weight: 600;
    
}

.select2-search--dropdown { padding: 10px; }

.select2-search--dropdown .select2-search__field {
    background-color: var(--input-bg) !important; 
    color: var(--text-main) !important;
    border: 1px solid var(--input-border) !important; 
    border-radius: 8px !important; 
    padding: 10px 12px !important;
}

.select2-search--dropdown .select2-search__field:focus { 
    border-color: var(--neon-purple) !important; 
    outline: none; 
}

/* =========================================
   8. FULLCALENDAR E PULL-TO-REFRESH (VISUAL PREMIUM)
========================================= */
.fc-toolbar-title {
    font-size: 1.5rem !important; text-transform: capitalize; color: var(--gold) !important;
    background: transparent; padding: 8px 0px; border-radius: 0; border: none;
}

/* Deixa os botões (Hoje, Mês, Semana) mais elegantes */
.fc .fc-button-primary {
    background-color: transparent !important; border: 1px solid var(--border-divider) !important; color: var(--text-muted) !important;
    text-transform: capitalize; border-radius: 8px; transition: 0.3s;
}
.fc .fc-button-primary:hover, .fc .fc-button-primary.fc-button-active {
    background: linear-gradient(135deg, var(--gold), var(--neon-purple)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 5px 15px rgba(155, 93, 229, 0.4) !important;
}

/* 🔥 MÁGICA VISUAL: Remove o visual de "Planilha" do fundo do calendário */
.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid { 
    border-color: rgba(255, 255, 255, 0.05) !important; /* Linha super invisível no Dark */
}
[data-theme="light"] .fc-theme-standard td, [data-theme="light"] .fc-theme-standard th, [data-theme="light"] .fc-theme-standard .fc-scrollgrid {
    border-color: rgba(0, 0, 0, 0.05) !important; /* Linha super invisível no Light */
}

/* Retira as linhas internas da grade (slots de hora) */
.fc-timegrid-slot-lane { border-bottom: none !important; }
.fc-timegrid-slot-minor { border-top: 1px dashed rgba(255,255,255,0.02) !important; }
[data-theme="light"] .fc-timegrid-slot-minor { border-top-color: rgba(0,0,0,0.02) !important; }

/* Remove a linha vermelha feia do "Now Indicator" (marcador de hora atual) e troca por uma dourada sutil */
.fc-timegrid-now-indicator-line { border-color: var(--gold) !important; opacity: 0.5; }
.fc-timegrid-now-indicator-arrow { border-color: var(--gold) !important; background-color: var(--gold) !important; }

/* Estiliza a coluna das horas (07:00, 08:00) */
.fc-timegrid-axis-cushion, .fc-timegrid-slot-label-cushion { color: var(--text-muted) !important; font-size: 0.8rem; }

/* Dias da Semana (Cabeçalho) */
.fc-col-header-cell-cushion { color: var(--text-main) !important; text-decoration: none !important; font-weight: 700; padding: 12px 8px !important; text-transform: uppercase; font-size: 0.8rem !important; letter-spacing: 0.5px;}

/* O dia "Hoje" com destaque super suave */
.fc .fc-day-today { background-color: rgba(212, 175, 55, 0.03) !important; }

/* BLOCOS DE AGENDAMENTO (CARDS) */
.fc-event { border-radius: 8px !important; border: none !important; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: 0.2s ease-in-out; }
.fc-event:hover { transform: scale(1.02); z-index: 99 !important; box-shadow: 0 8px 20px rgba(0,0,0,0.4); cursor: pointer; }
.fc-v-event, .fc-h-event { border: none !important; }

/* Concluídos usam o degradê dourado->roxo da marca (em vez do verde sólido) */
.fc-event.evento-concluido { background: linear-gradient(135deg, var(--gold), var(--neon-purple)) !important; }
/* Pendentes ficam em roxo x roxo mais escuro (mesma família de cor, sem vermelho/laranja/amarelo — mais fácil de diferenciar do degradê dourado dos concluídos para daltonismo; tons mais fortes que o roxo claro anterior, pra manter contraste bom com o texto branco) */
.fc-event.evento-pendente { background: linear-gradient(135deg, var(--neon-purple), #5b21b6) !important; }

/* Ajustes da visualização "Lista" (Agenda Diária) */
.fc-list-day-text, .fc-list-day-side-text { color: var(--gold) !important; font-weight: bold; }
/* O <th> do cabeçalho de cada dia vem com fundo branco sólido embutido no FullCalendar — sobrescreve aqui pra acompanhar o tema */
.fc-list-table th { background-color: var(--bg-card) !important; }
.fc-list-day-cushion { background-color: rgba(255,255,255,0.02) !important; }
[data-theme="light"] .fc-list-day-cushion { background-color: rgba(0,0,0,0.02) !important; }
.fc-list-event:hover td { background-color: rgba(155, 93, 229, 0.05) !important; }
/* Linhas de horário/título ficam sobre o degradê dourado/roxo dos cards — texto sempre branco, independente do tema */
.fc-list-event-time, .fc-list-event-title { color: #fff !important; border: none !important; }

/* =========================================
   9. RESPONSIVIDADE E NAV MOBILE (GLASSMORPHISM)
========================================= */
@media (max-width: 991px) {
    .sidebar-desktop { display: none; }
    .main-content { margin-left: 0; }
    
    /* Espaço para a barra não cobrir os últimos itens da tela */
    body { padding-bottom: 100px !important; }

    /* A PÍLULA DE VIDRO (Estilo WhatsApp / iOS) */
    .bottom-nav-wrapper {
        display: flex; position: fixed; 
        bottom: 15px; left: 15px; width: calc(100% - 30px);
        background: rgba(30, 30, 30, 0.15);
        backdrop-filter: blur(5px); 
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.1); 
        z-index: 1030; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.8);
        border-radius: 50px; /* Formato perfeito de "comprimido" */
        transition: transform 0.3s ease-in-out;
        overflow: hidden; /* Garante que os botões não passem da borda redonda */
    }
    
    /* Pílula no Modo Claro */
    [data-theme="light"] .bottom-nav-wrapper { 
        background: rgba(255, 255, 255, 0.4); 
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    /* Animação para esconder apenas a barra */
    .bottom-nav-wrapper.hidden-scroll { transform: translateY(150%); }

    /* Pista de Rolagem Contínua */
    .scrollable-nav {
        display: flex; width: 100%; overflow-x: auto;
        scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; align-items: center; padding: 0 5px;
    }
    .scrollable-nav::-webkit-scrollbar { display: none; }

    /* Botões perfeitamente alinhados na fita */
    .bottom-nav-item { 
        flex: 0 0 22%; /* Deixa o 5º item "espiando" para mostrar que dá pra rolar */
        display: flex; flex-direction: column; align-items: center; justify-content: center; 
        color: var(--text-muted); text-decoration: none; font-size: 0.70rem; transition: 0.3s; 
        padding: 12px 0;
    }

    .bottom-nav-item i { font-size: 1.3rem; margin-bottom: 4px; color: var(--text-muted); transition: 0.3s; }
    .bottom-nav-item.active, .bottom-nav-item:hover { color: var(--text-main); }
    .bottom-nav-item.active i, .bottom-nav-item:hover i { 
        background: linear-gradient(135deg, var(--neon-purple), #7b2cbf);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        display: inline-block;
    } 
    .bottom-nav-item.text-danger i { color: #EF4444 !important; }

    /* Botão secundário flutuante (Atendimento Avulso) — do lado esquerdo, livre (nada mais fica
       nesse canto), acompanhando o mesmo comportamento de esmaecer na rolagem que o botão "+" tem. */
    .fab-secondary {
        position: fixed; bottom: 85px; left: 20px; right: auto;
        width: 48px; height: 48px; background: linear-gradient(135deg, var(--gold), var(--neon-purple));
        border: none; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 1.3rem; z-index: 1040;
        box-shadow: 0 5px 15px rgba(212, 175, 55, 0.5); cursor: pointer;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
    .fab-secondary:active { transform: scale(0.9); }
    .fab-secondary.scrolling-down { opacity: 0.75; box-shadow: none; transform: translateY(65px); }

    /* O BOTÃO '+' FLUTUANTE (LATERAL DIREITA E LIVRE) */
    .fab-center {
        position: fixed; bottom: 85px; right: 20px; left: auto;
        width: 60px; height: 60px; background: var(--neon-purple); 
        border: none; border-radius: 50%; 
        display: flex; align-items: center; justify-content: center;
        color: #fff; font-size: 1.8rem; z-index: 1040; 
        box-shadow: 0 5px 15px rgba(155, 93, 229, 0.5); cursor: pointer;
        /* Deixamos a transição do botão tão suave quanto a da barra! */
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
    
    /* Efeito ao clicar (apenas no PC/toque ativo) */
    .fab-center:active { transform: scale(0.9); }
    
    /* 🔥 A MÁGICA DA ROLAGEM CORRIGIDA */
    .fab-center.scrolling-down { 
        opacity: 0.75; /* Aumentamos para 50% para ficar bem visível */
        box-shadow: none; /* Mantém sem o brilho forte para não distrair */
        transform: translateY(65px); /* Mantém ele recolhido no canto inferior */
        /* A propriedade 'pointer-events: none' foi removida para ele voltar a funcionar! */
    }
}

@media (max-width: 768px) {
    .kpi-title { font-size: 0.65rem; }
    .kpi-value { font-size: 1.5rem; }
    .kpi-icon-bg { font-size: 3.2rem; bottom: -5px; right: -5px; }
    .fc-col-header-cell-cushion { font-size: 0.7rem !important; padding: 4px 2px !important; }
    .fc .fc-toolbar.fc-header-toolbar { flex-direction: column; gap: 12px; }
    .fc .fc-toolbar-title { font-size: 1.1rem !important; text-align: center; }
    .fc .fc-toolbar-chunk { display: flex; justify-content: center; flex-wrap: wrap; }
    .fc .fc-button { padding: 0.3rem 0.6rem !important; font-size: 0.85rem !important; }
    .fc-list-event-time { width: 60px !important; }
}


/* =========================================
   10. ABAS ESTILO BOTÕES (PILLS GLOBAIS)
========================================= */
.custom-pills {
    gap: 10px;
    padding-bottom: 5px; /* Espaço para não cortar a sombra */
}
.custom-pills .nav-link {
    background-color: var(--input-disabled);
    color: var(--text-muted);
    border: 1px solid var(--border-divider);
    border-radius: 50px; /* Deixa redondinho igual botão */
    padding: 8px 20px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}
.custom-pills .nav-link:hover {
    border-color: var(--gold);
    color: var(--text-main);
}
/* No desktop tem largura de sobra, então as abas quebram linha em vez de exigir rolagem horizontal.
   No mobile (abaixo de 992px) mantém o comportamento original: uma linha só com scroll lateral. */
@media (min-width: 992px) {
    .custom-pills.flex-nowrap { flex-wrap: wrap !important; overflow: visible !important; }
}

.custom-pills .nav-link.active {

    background: linear-gradient(135deg, var(--neon-purple), #7b2cbf) !important;
    color: #fff !important;
    /* Deixa a borda transparente para o degradê brilhar sem marcações */
    border-color: transparent !important;
    /* Aumenta levemente a sombra para dar aquele destaque "neon" */
    box-shadow: 0 4px 12px rgba(155, 93, 229, 0.4) !important;
}


/* =========================================
   11. SWEETALERT2 (MODAIS E ALERTAS)
========================================= */
/* Fundo do pop-up e texto principal */
div.swal2-popup {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-divider) !important;
    border-radius: 15px !important;
}

/* Título */
.swal2-title {
    color: var(--gold) !important;
}

/* Textos internos e HTML customizado */
.swal2-html-container {
    color: var(--text-main) !important;
}

/* Inputs de texto, número e selects */
.swal2-input, .swal2-textarea, .swal2-select {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--input-border) !important;
}

/* Foco nos inputs */
.swal2-input:focus, .swal2-textarea:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.4) !important;
}

/* Mensagens de erro de validação (Ex: "O nome é obrigatório") */
.swal2-validation-message {
    background: var(--input-disabled) !important;
    color: var(--text-main) !important;
}



.table-custom { --bs-table-bg: transparent; --bs-table-color: var(--text-light); vertical-align: middle; border-collapse: separate; border-spacing: 0; }
        .table-custom th { border-bottom: 1px solid var(--border-divider); color: var(--gold); font-weight: 600; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; padding: 12px 10px; }
        .table-custom td { border-bottom: 1px solid var(--border-divider); padding: 12px 10px; }
        .table-custom tr:last-child td { border-bottom: none; }
        [data-theme="light"] .table-custom { --bs-table-color: #212529; }



        /* 🔥 ÍNDICE ALFABÉTICO (A-Z) E BOTÃO VOLTAR AO TOPO 🔥 */
        #alphabetIndex { 
            position: fixed; 
            right: 2px; 
            top: 50%; 
            transform: translateY(-50%); 
            z-index: 1000; 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: space-between; 
            height: 65vh; 
            font-size: 0.65rem; 
            font-weight: 700; 
            color: var(--text-light); 
            background: rgba(0,0,0,0.0); 
            backdrop-filter: blur(4px);
            border-radius: 10px; 
            padding: 8px 4px; 
            
            /* 🔥 Trava a tela para o nosso script poder ler o dedo deslizando */
            touch-action: none; 
            user-select: none;
            -webkit-user-select: none;
        }
        #alphabetIndex span { cursor: pointer; transition: 0.2s; width: 100%; text-align: center; }
        #alphabetIndex span:active { transform: scale(1.5); color: var(--neon-purple); }
        
        #btnBackToTop { 
            position: fixed; 
            bottom: 90px; 
            left: 20px;
            width: 45px; 
            height: 45px; 
            border-radius: 50%; 
            background: linear-gradient(135deg, var(--neon-purple) 0%, #7e22ce 100%); 
            color: #fff; 
            z-index: 1040; 
            border: none; 
            opacity: 0; 
            transform: translateY(20px); 
            pointer-events: none; 
            transition: all 0.3s ease; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #btnBackToTop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* =========================================
   CALENDÁRIO DE PERÍODO PERSONALIZADO (flatpickr) COM A CARA DO SISTEMA
   Usado em qualquer tela que precise de um seletor de intervalo de datas (Financeiro, Relatórios, etc.)
========================================= */
.flatpickr-calendar {
    background: var(--bg-card);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--bg-card); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays,
.flatpickr-weekday { background: transparent; color: var(--text-light); fill: var(--text-light); }
.flatpickr-current-month input.cur-year { color: var(--text-light); }
.flatpickr-day { color: var(--text-light); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-muted); opacity: 0.4; }
.flatpickr-day:hover { background: rgba(155, 93, 229, 0.15); border-color: transparent; }
.flatpickr-day.today { border-color: var(--gold); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
    background: var(--neon-purple);
    border-color: var(--neon-purple);
    color: #fff;
}
.flatpickr-day.inRange {
    background: rgba(155, 93, 229, 0.2);
    box-shadow: -5px 0 0 rgba(155, 93, 229, 0.2), 5px 0 0 rgba(155, 93, 229, 0.2);
    border-color: transparent;
}
.flatpickr-prev-month, .flatpickr-next-month { color: var(--text-light) !important; fill: var(--text-light) !important; }
.flatpickr-prev-month:hover, .flatpickr-next-month:hover { fill: var(--neon-purple) !important; }

/* Ícone com o mesmo degradê dourado -> roxo da marca (usado no logo da index) */
.icone-degrade-marca {
    background: linear-gradient(135deg, var(--gold), var(--neon-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}