@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* =========================================================
   Tema do sistema: Verde-teal moderno
   Carregado depois do Bootstrap 5.3 e dos <style> das páginas.
   Para ajustar as cores, altere apenas as variáveis abaixo.
   ========================================================= */

:root {
    /* Paleta base */
    --tema-primaria: #0F766E;
    --tema-primaria-hover: #115E59;
    --tema-secundaria: #64748B;
    --tema-secundaria-hover: #475569;
    --tema-sucesso: #15803D;
    --tema-sucesso-hover: #166534;
    --tema-alerta: #D97706;
    --tema-alerta-hover: #F59E0B;
    --tema-perigo: #DC2626;
    --tema-perigo-hover: #B91C1C;
    --tema-texto: #1E293B;
    --tema-fundo: #F8FAFC;
    --tema-borda: #E2E8F0;

    /* Variáveis do Bootstrap */
    --bs-primary: #0F766E;
    --bs-primary-rgb: 15, 118, 110;
    --bs-secondary: #64748B;
    --bs-secondary-rgb: 100, 116, 139;
    --bs-success: #15803D;
    --bs-success-rgb: 21, 128, 61;
    --bs-danger: #DC2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-warning: #D97706;
    --bs-warning-rgb: 217, 119, 6;
    --bs-info: #38BDF8;
    --bs-info-rgb: 56, 189, 248;
    --bs-dark: #0F172A;
    --bs-dark-rgb: 15, 23, 42;
    --bs-light: #F1F5F9;
    --bs-light-rgb: 241, 245, 249;

    --bs-primary-text-emphasis: #134E4A;
    --bs-primary-bg-subtle: #CCFBF1;
    --bs-primary-border-subtle: #99F6E4;
    --bs-secondary-text-emphasis: #334155;
    --bs-secondary-bg-subtle: #F1F5F9;
    --bs-secondary-border-subtle: #CBD5E1;
    --bs-success-text-emphasis: #14532D;
    --bs-success-bg-subtle: #DCFCE7;
    --bs-success-border-subtle: #BBF7D0;
    --bs-danger-text-emphasis: #7F1D1D;
    --bs-danger-bg-subtle: #FEE2E2;
    --bs-danger-border-subtle: #FECACA;
    --bs-warning-text-emphasis: #78350F;
    --bs-warning-bg-subtle: #FEF3C7;
    --bs-warning-border-subtle: #FDE68A;
    --bs-info-text-emphasis: #0C4A6E;
    --bs-info-bg-subtle: #E0F2FE;
    --bs-info-border-subtle: #BAE6FD;

    --bs-body-color: #1E293B;
    --bs-body-color-rgb: 30, 41, 59;
    --bs-border-color: #E2E8F0;
    --bs-link-color: #0F766E;
    --bs-link-color-rgb: 15, 118, 110;
    --bs-link-hover-color: #115E59;
    --bs-link-hover-color-rgb: 17, 94, 89;
    --bs-focus-ring-color: rgba(15, 118, 110, 0.25);
}

body {
    background-color: var(--tema-fundo) !important;
    color: var(--bs-body-color);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}

/* ---------- Botões sólidos ---------- */
.btn-primary {
    --bs-btn-bg: var(--tema-primaria);
    --bs-btn-border-color: var(--tema-primaria);
    --bs-btn-hover-bg: var(--tema-primaria-hover);
    --bs-btn-hover-border-color: var(--tema-primaria-hover);
    --bs-btn-active-bg: var(--tema-primaria-hover);
    --bs-btn-active-border-color: var(--tema-primaria-hover);
    --bs-btn-disabled-bg: var(--tema-primaria);
    --bs-btn-disabled-border-color: var(--tema-primaria);
    --bs-btn-focus-shadow-rgb: 15, 118, 110;
}

.btn-secondary {
    --bs-btn-bg: var(--tema-secundaria);
    --bs-btn-border-color: var(--tema-secundaria);
    --bs-btn-hover-bg: var(--tema-secundaria-hover);
    --bs-btn-hover-border-color: var(--tema-secundaria-hover);
    --bs-btn-active-bg: var(--tema-secundaria-hover);
    --bs-btn-active-border-color: var(--tema-secundaria-hover);
    --bs-btn-disabled-bg: var(--tema-secundaria);
    --bs-btn-disabled-border-color: var(--tema-secundaria);
}

.btn-success {
    --bs-btn-bg: var(--tema-sucesso);
    --bs-btn-border-color: var(--tema-sucesso);
    --bs-btn-hover-bg: var(--tema-sucesso-hover);
    --bs-btn-hover-border-color: var(--tema-sucesso-hover);
    --bs-btn-active-bg: var(--tema-sucesso-hover);
    --bs-btn-active-border-color: var(--tema-sucesso-hover);
    --bs-btn-disabled-bg: var(--tema-sucesso);
    --bs-btn-disabled-border-color: var(--tema-sucesso);
}

.btn-danger {
    --bs-btn-bg: var(--tema-perigo);
    --bs-btn-border-color: var(--tema-perigo);
    --bs-btn-hover-bg: var(--tema-perigo-hover);
    --bs-btn-hover-border-color: var(--tema-perigo-hover);
    --bs-btn-active-bg: var(--tema-perigo-hover);
    --bs-btn-active-border-color: var(--tema-perigo-hover);
    --bs-btn-disabled-bg: var(--tema-perigo);
    --bs-btn-disabled-border-color: var(--tema-perigo);
}

/* Texto escuro no laranja para manter bom contraste */
.btn-warning {
    --bs-btn-color: var(--tema-texto);
    --bs-btn-bg: var(--tema-alerta);
    --bs-btn-border-color: var(--tema-alerta);
    --bs-btn-hover-color: var(--tema-texto);
    --bs-btn-hover-bg: var(--tema-alerta-hover);
    --bs-btn-hover-border-color: var(--tema-alerta-hover);
    --bs-btn-active-color: var(--tema-texto);
    --bs-btn-active-bg: var(--tema-alerta-hover);
    --bs-btn-active-border-color: var(--tema-alerta-hover);
    --bs-btn-disabled-color: var(--tema-texto);
    --bs-btn-disabled-bg: var(--tema-alerta);
    --bs-btn-disabled-border-color: var(--tema-alerta);
}

/* ---------- Botões outline ---------- */
.btn-outline-primary {
    --bs-btn-color: var(--tema-primaria);
    --bs-btn-border-color: var(--tema-primaria);
    --bs-btn-hover-bg: var(--tema-primaria);
    --bs-btn-hover-border-color: var(--tema-primaria);
    --bs-btn-active-bg: var(--tema-primaria);
    --bs-btn-active-border-color: var(--tema-primaria);
    --bs-btn-disabled-color: var(--tema-primaria);
    --bs-btn-disabled-border-color: var(--tema-primaria);
}

.btn-outline-secondary {
    --bs-btn-color: var(--tema-secundaria);
    --bs-btn-border-color: var(--tema-secundaria);
    --bs-btn-hover-bg: var(--tema-secundaria);
    --bs-btn-hover-border-color: var(--tema-secundaria);
    --bs-btn-active-bg: var(--tema-secundaria);
    --bs-btn-active-border-color: var(--tema-secundaria);
    --bs-btn-disabled-color: var(--tema-secundaria);
    --bs-btn-disabled-border-color: var(--tema-secundaria);
}

.btn-outline-success {
    --bs-btn-color: var(--tema-sucesso);
    --bs-btn-border-color: var(--tema-sucesso);
    --bs-btn-hover-bg: var(--tema-sucesso);
    --bs-btn-hover-border-color: var(--tema-sucesso);
    --bs-btn-active-bg: var(--tema-sucesso);
    --bs-btn-active-border-color: var(--tema-sucesso);
    --bs-btn-disabled-color: var(--tema-sucesso);
    --bs-btn-disabled-border-color: var(--tema-sucesso);
}

.btn-outline-danger {
    --bs-btn-color: var(--tema-perigo);
    --bs-btn-border-color: var(--tema-perigo);
    --bs-btn-hover-bg: var(--tema-perigo);
    --bs-btn-hover-border-color: var(--tema-perigo);
    --bs-btn-active-bg: var(--tema-perigo);
    --bs-btn-active-border-color: var(--tema-perigo);
    --bs-btn-disabled-color: var(--tema-perigo);
    --bs-btn-disabled-border-color: var(--tema-perigo);
}

.btn-outline-warning {
    --bs-btn-color: #B45309;
    --bs-btn-border-color: var(--tema-alerta);
    --bs-btn-hover-color: var(--tema-texto);
    --bs-btn-hover-bg: var(--tema-alerta);
    --bs-btn-hover-border-color: var(--tema-alerta);
    --bs-btn-active-color: var(--tema-texto);
    --bs-btn-active-bg: var(--tema-alerta);
    --bs-btn-active-border-color: var(--tema-alerta);
}

/* ---------- Formulários ---------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #14B8A6;
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
    background-color: var(--tema-primaria);
    border-color: var(--tema-primaria);
}

/* ---------- Componentes ---------- */
.table-dark {
    --bs-table-bg: var(--tema-primaria-hover);
    --bs-table-border-color: var(--tema-primaria);
    --bs-table-striped-bg: #13665F;
    --bs-table-hover-bg: #14706A;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--tema-primaria);
}

.nav-link {
    --bs-nav-link-color: var(--tema-primaria);
    --bs-nav-link-hover-color: var(--tema-primaria-hover);
}

.pagination {
    --bs-pagination-color: var(--tema-primaria);
    --bs-pagination-hover-color: var(--tema-primaria-hover);
    --bs-pagination-focus-color: var(--tema-primaria-hover);
    --bs-pagination-active-bg: var(--tema-primaria);
    --bs-pagination-active-border-color: var(--tema-primaria);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--tema-primaria);
}

.progress,
.progress-stacked {
    --bs-progress-bar-bg: var(--tema-primaria);
}

.list-group {
    --bs-list-group-active-bg: var(--tema-primaria);
    --bs-list-group-active-border-color: var(--tema-primaria);
}

.text-muted {
    color: var(--tema-secundaria) !important;
}

/* =========================================================
   Barra superior (app/includes/topo.php)
   Não depende do Bootstrap, para funcionar também no login.
   ========================================================= */
.topo {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--tema-borda);
}
/* Mesmas larguras do .container do Bootstrap, sem usar a classe
   (algumas páginas redefinem .container como uma caixa estreita) */
.topo-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin: 0 auto;
    padding: 0.5rem 12px;
}
@media (min-width: 576px)  { .topo-inner { max-width: 540px; } }
@media (min-width: 768px)  { .topo-inner { max-width: 720px; } }
@media (min-width: 992px)  { .topo-inner { max-width: 960px; } }
@media (min-width: 1200px) { .topo-inner { max-width: 1140px; } }
@media (min-width: 1400px) { .topo-inner { max-width: 1320px; } }
.topo-marca {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}
.marca {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tema-texto);
}
/* Ícone do sistema (public/image/systim.svg) */
.marca-icone {
    width: 36px; height: 36px;
    display: block;
    flex: 0 0 auto;
}
.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis);
    font-weight: 600;
}
.topo-entrar {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--tema-borda);
    border-radius: 999px;
    color: var(--tema-texto);
    font-weight: 500;
    text-decoration: none;
    background: #fff;
}
.topo-entrar:hover { border-color: var(--tema-primaria); color: var(--tema-primaria); }

/* Botões da barra (Início, Trocar Senha, Sair) e usuário logado */
.topo-acoes { display: flex; align-items: center; gap: 0.35rem; }
.topo-botao {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    color: var(--tema-texto);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}
.topo-botao:hover { background: var(--bs-secondary-bg-subtle); color: var(--tema-primaria); }
.topo-botao.ativo { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.topo-botao.sair { color: var(--tema-perigo); }
.topo-botao.sair:hover { background: var(--bs-danger-bg-subtle); color: var(--tema-perigo-hover); }
.topo-usuario {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin-left: 0.4rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--tema-borda);
    color: var(--tema-texto);
    font-weight: 500;
}
/* Telas médias: esconde o nome; celular: botões só com ícone */
@media (max-width: 991.98px) {
    .topo-usuario-nome { display: none; }
}
@media (max-width: 575.98px) {
    .topo-botao span { display: none; }
    .topo-botao { padding: 0.45rem 0.6rem; }
}

/* =========================================================
   Cabeçalho de página (função cabecalho_pagina) e destaque da home
   ========================================================= */
.cabecalho-pagina,
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0F766E 0%, #115E59 55%, #134E4A 100%);
    color: #fff;
}
.cabecalho-pagina::before,
.hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(to left, #000, transparent 70%);
    -webkit-mask-image: linear-gradient(to left, #000, transparent 70%);
    pointer-events: none;
}
.cabecalho-pagina > *,
.hero > * { position: relative; }

.cabecalho-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin: 1.5rem 0;
    padding: 1.5rem 1.75rem;
    border-radius: 20px;
}
.cabecalho-pagina:first-child { margin-top: 0; }
.cabecalho-icone {
    flex: 0 0 auto;
    width: 54px; height: 54px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.14);
    font-size: 1.6rem;
}
.cabecalho-texto { flex: 1 1 260px; min-width: 0; }
.cabecalho-secao {
    margin: 0 0 0.15rem;
    font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #99F6E4;
}
.cabecalho-pagina h1 {
    margin: 0;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #fff;
}
.cabecalho-subtitulo {
    margin: 0.35rem 0 0;
    color: rgba(255, 255, 255, 0.82);
}
.cabecalho-acoes {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-left: auto;
}

.hero { border-radius: 24px; }
.hero .saudacao { color: #99F6E4; font-weight: 500; }
.hero h1 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.hero p.lead { color: rgba(255, 255, 255, 0.82); }

.btn-hero {
    background: #fff; color: var(--tema-primaria-hover); font-weight: 600; border: 1px solid #fff;
}
.btn-hero:hover, .btn-hero:focus { background: #F0FDFA; color: var(--tema-primaria-hover); border-color: #F0FDFA; }
.btn-hero-outline {
    background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; font-weight: 500;
}
.btn-hero-outline:hover, .btn-hero-outline:focus { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }