/* --- 1. VARIÁVEIS GLOBAIS (Sincronizadas com Wappler) --- */
:root, [data-bs-theme=light] {
    /* Cores de Estado - Sincronizadas com suas imagens */
    --bs-primary: #9cc068 !important;
    --bs-secondary: #C5CEC0 !important;
    --bs-success: #9cc068 !important;
    --bs-danger: #ce6765 !important;
    --bs-info: #92bdd1 !important;
    --bs-warning: #d7a073 !important;
    --bs-light: #F9F9F9 !important;
    --bs-dark: #37474F !important;

    /* Cores de Texto e Body */
    --bs-body-bg: #F9F9F9 !important;
    --bs-body-color: #37474F !important;
    --brand-green-olive: #4d4d27; /* Seu "Secondary Text" */
    --brand-gray: #8A9683; /* Seu ajuste de visibilidade */

    /* Tipografia */
    --bs-body-font-family: 'Lato', sans-serif !important;
    --bs-heading-font-family: 'Nunito', sans-serif !important;

    /* Versões RGB (Necessárias para opacidade/transparência de alguns componentes) */
    --bs-primary-rgb: 156, 192, 104 !important;
    --bs-danger-rgb: 206, 103, 101 !important;
    --bs-info-rgb: 146, 189, 209 !important;
}

/* --- 2. COMPONENTES E BOTÕES --- */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 4px 10px rgba(156, 192, 104, 0.3) !important;
}

.btn-primary:hover {
    background-color: #84a852 !important;
    border-color: #84a852 !important;   
}

.form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* --- 3. NAVBAR SUPERIOR (SINO E BUSCA) --- */
.layout-navbar.navbar-detached {
    border-radius: 15px !important; 
}

/* Limpeza completa de efeitos de círculo/hover indesejados */
.layout-navbar .nav-link, 
.layout-navbar .btn-icon,
.layout-navbar .nav-item,
.layout-navbar .dropdown-notifications {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.layout-navbar .nav-link:hover {
    background: transparent !important;
    color: var(--bs-primary) !important;
}

/* --- 4. RODAPÉ E BOTÃO FAB --- */
.style4 {
    min-height: 60px;
    background-color: #FFFFFF !important;
    border-radius: 10px;
    z-index: 1030;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05) !important;
}

.fab-container {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important; /* Força a largura mínima */
    min-height: 60px !important; /* Força a altura mínima */
    aspect-ratio: 1 / 1 !important; /* Garante que seja um quadrado perfeito antes do radius */
    flex-shrink: 0 !important; /* Impede que o flexbox da barra o esmague */
    
    background-color: var(--brand-green-olive) !important;
    border-radius: 50% !important; /* Transforma o quadrado em círculo */
    margin-top: -35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #f9f9f9;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 999;
}

/* Ícones com a Sombra que você gostou */
.style5, .style6, .style8, .style9 {
    font-size: 26px !important;
    color: var(--brand-gray) !important;
    -webkit-text-stroke: 0px !important; 
    filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.15));
    transition: all 0.2s ease;
}

.style5:hover, .style6:hover, .style8:hover, .style9:hover {
    color: var(--brand-green-olive) !important;
    filter: drop-shadow(0px 2px 5px rgba(77, 77, 39, 0.3));
}

/* --- ESTADO ATIVO DO RODAPÉ (Correção de Seletor) --- */

/* Se a classe active estiver na COLUNA ou no ÍCONE, ele aplica o estilo */
.col.active i, 
i.style5.active, i.style6.active, i.style8.active, i.style9.active {
    color: var(--brand-green-olive) !important;
    
    /* Brilho neon denso para ser bem perceptível */
    filter: drop-shadow(0px 0px 5px rgba(156, 192, 104, 0.9)) !important;
    
    /* Elevação e Zoom */
    transform: scale(1.2) translateY(-5px) !important;
    
    /* Engrossa o ícone para dar peso visual */
    -webkit-text-stroke: 1px var(--brand-green-olive) !important;
    
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Garante que o ícone original não tenha stroke quando inativo */
.style5, .style6, .style8, .style9 {
    transition: all 0.3s ease;
    -webkit-text-stroke: 0px !important;
}

/* --- 5. RESPONSIVIDADE E AJUSTES DE TELA --- */

/* Desktop: Pílula Centralizada */
@media (min-width: 1200px) { 
    footer.fixed-bottom.style4 {
        width: 100% !important;
        max-width: 850px !important; 
        left: calc(50% + 130px) !important; 
        transform: translateX(-50%) !important;
        bottom: 20px !important;
        border-radius: 15px !important;
        padding: 0 20px !important;
    }
}

/* Mobile: Respiro lateral na Navbar */
@media (max-width: 767px) {
    .layout-navbar {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Telas Ultra-Wide */
@media (min-width: 1400px) {
    .style1 { padding-top: 0px; }
    .style4 { margin-top: 0px; }
    .style2 { margin-top: -3px; }
.style3 {
        max-width: 920px;
    }
}

/* --- 6. LOGO E MENU LATERAL --- */
.app-brand-logo img {
    max-width: 40px;
    height: auto;
    transition: all 0.3s ease-in-out;
}

.layout-menu-collapsed .app-brand-logo img {
    width: 30px !important;
}

.layout-menu-collapsed .app-brand-text {
    display: none !important;
}

.app-brand {
    overflow: visible !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.style3 {
    max-width: 5000px;
    text-align: center;
}

/* ============================================================
   AJUSTE UNIFICADO: CONTEÚDO CENTRALIZADO + INPUTS 
   ============================================================ */

/* 1. Campos e Botões (Meio-termo para todas as telas) */
.form-control, .form-select, .btn {
    padding: 0.5rem 1.1rem !important; /* Altura confortável para o polegar, sem exagero */
    font-size: 0.95rem !important;
    border-radius: 8px !important;
}

label {
    font-size: 0.88rem !important;
    font-weight: 500;
    margin-bottom: 0.4rem;
}

/* 2. Regras apenas para Desktop (≥ 1200px) */
@media (min-width: 1200px) { 
    /* Alinha a largura e centralização do conteúdo com o seu rodapé de 850px */
    .Scontainer-xxl {
        max-width: 1500px !important; 
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        display: block !important;
    }

    /* Garante que o layout do Vuexy mantenha o container no centro */
    .layout-page {
        display: flex;
        flex-direction: column;
        align-items: center; 
    }

    /* Espaçamento vertical para o conteúdo não bater no rodapé saltado */
    .container-p-y {
        padding-top: 1.5rem !important;
        padding-bottom: 140px !important; 
    }
}

/* Garante o respiro do rodapé também no mobile */
@media (max-width: 1199px) {
    .container-p-y {
        padding-bottom: 120px !important;
    }
}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.style5 {}
.style6 {}
.style7 {
    max-height: 100px;
    min-height: 100px;
}
.style8 {
    max-width: 100px;
    text-align: center;
}
.style9 {
    max-width: 200px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.style10 {
    min-width: 60px;
}

/* ============================================================
   FORMULÃRIOS RESPONSIVOS - NÃO TRUNCAR LABELS
   ============================================================ */

/* Garante quebra de texto em TODAS as labels */
.form-group label,
.col-form-label {
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.3 !important;
}

/* Mobile: Layout Vertical (melhor UX) */
@media (max-width: 767px) {
    .form-group.row {
        flex-direction: column !important;
    }
    
    .form-group .col-sm-2,
    .form-group .col-sm-10 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
    }
    
    .form-group label {
        margin-bottom: 0.4rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Inputs um pouco mais compactos em mobile */
    .form-control, .form-select {
        padding: 0.45rem 0.9rem !important;
        font-size: 0.9rem !important;
    }
}

/* Tablets: Mais espaço para labels */
@media (min-width: 768px) and (max-width: 991px) {
    .form-group .col-sm-2 {
        flex: 0 0 35% !important;
        max-width: 35% !important;
    }
    
    .form-group .col-sm-10 {
        flex: 0 0 65% !important;
        max-width: 65% !important;
    }
}
.style11 {
    text-align: right;
}
@media (min-width: 768px) {
.style12 {
        min-height: 90px;
    }
.style13 {
        max-width: 120px;
    }
.style14 {
        margin-top: 23px;
        clear: right;
    }
.style15 {
        margin-left: 0px;
        padding-left: 11px;
    }
}
.style16 {
    min-height: 80px;
}
.style17 {
    min-height: 50px;
}
/* --- Correção para Botões Quadrados de Ícone --- */
.btn-icon-center {
    display: flex !important;           /* Ativa o modo flexível */
    align-items: center !important;     /* Centraliza Verticalmente */
    justify-content: center !important; /* Centraliza Horizontalmente */
    padding: 0 !important;              /* Remove o padding global forçado */
    line-height: 1 !important;          /* Remove altura de linha estranha */
}

/* Opcional: Garante que o ícone não herde margens */
.btn-icon-center i {
    margin: 0 !important;
}
/* --- 7. FORÇAR CORES NOS BADGES E FUNDOS (Sobrescreve o padrão do Bootstrap) --- */

/* Força o uso da variável --bs-primary (#9cc068) */
.bg-primary, .badge.bg-primary {
    background-color: var(--bs-primary) !important;
    color: #FFFFFF !important; /* Garante texto branco */
}

/* Força o uso da variável --bs-success (#9cc068 - igual ao primary no seu tema) */
.bg-success, .badge.bg-success {
    background-color: var(--bs-success) !important;
    color: #FFFFFF !important;
}

/* Força o uso da variável --bs-danger (#ce6765) */
.bg-danger, .badge.bg-danger {
    background-color: var(--bs-danger) !important;
    color: #FFFFFF !important;
}

/* Força o uso da variável --bs-warning (#d7a073) */
.bg-warning, .badge.bg-warning {
    background-color: var(--bs-warning) !important;
    color: #FFFFFF !important;
}

/* Secondary (#C5CEC0) - Como é clarinho, talvez o texto precise ser escuro */
.bg-secondary, .badge.bg-secondary {
    background-color: var(--bs-secondary) !important;
    color: var(--brand-green-olive) !important; /* Usando sua cor de texto escura */
}
.style18 {
    max-width: 30px;
    max-height: 30px;
}
.style19 {
    max-width: 30px;
    max-height: 30px;
    clear: both;
}
.:active {
    margin-right: 4px;
    padding-right: 0px;
}
.style20 {
    min-height: 80px;
}
.style21 {
    min-height: 80px;
}
.style22 {
    margin-top: 0px;
    margin-bottom: 5px;
}