/* --- 1. Variáveis e Design System --- */
:root {
    /* Paleta Principal */
    --cor-verde-bc-claro: #7ab43b;
    --cor-verde-bc-escuro: #69962f;
    --cor-verde-escuro: #0f3d28;  
    --cor-verde-muito-claro: #f0fdf4;
    --cor-verde-barra: var(--cor-verde-bc-escuro);   
    --cor-titulo-pagina: #37474f; 
    --cor-bg-app: #f2f4f6; /* Fundo levemente azulado/cinza, muito moderno */
    --cor-card-bg: #ffffff;
    
    /* Feedback e Estados */
    --cor-ripple: rgba(0, 0, 0, 0.05);
    --cor-perigo: #e53935;
    
    
    /* Sombras "Caras" (High-end feel) */
    --sombra-card: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
    --sombra-flutuante: 0 15px 35px -5px rgba(0,0,0,0.1);
}

/* Reset e Fontes Nativas (San Francisco no iOS, Roboto no Android) */
* { 
    margin: 0; padding: 0; box-sizing: border-box; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent; /* Remove flash azul no clique (Android/Chrome) */
}

body {
    background-color: var(--cor-bg-app);
    color: var(--cor-verde-escuro);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; /* Evita scroll lateral acidental */
}

/* --- 2. Header "Clean" --- */
header {
    width: 100%; height: 60px; /* Levemente mais compacto */
    background-color: var(--cor-verde-bc-claro);
    display: flex; justify-content: center; align-items: center;
    position: sticky; top: 0; z-index: 1000;
    /* Sombra ultra suave */
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); 
}

.logo-container { width: 140px; height: 36px; }

.logo-placeholder {
    border: 1.5px solid var(--cor-verde-claro); 
    color: var(--cor-verde-claro);
    border-radius: 6px; /* Cantos levemente arredondados */
    width: 100%; height: 100%; 
    display: flex; justify-content: center; align-items: center;
    font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px;
}

/* Header Atenção - Perigo */

.atencao-header {
    width: 100%; height: 60px; /* Levemente mais compacto */
    background-color: var(--cor-perigo);
    display: flex; justify-content: center; align-items: center;
    position: sticky; top: 0; z-index: 1000;
    /* Sombra ultra suave */
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); 
}

.atencao-container { width: 440px; height: 36px; }

.atencao-placeholder {
    border: 1.5px solid var(--cor-perigo); 
    color: #ffffff;
    border-radius: 6px; /* Cantos levemente arredondados */
    width: 100%; height: 100%; 
    display: flex; justify-content: center; align-items: center;
}

/* Header Info */

.info-header {
    width: 100%; height: 60px; /* Levemente mais compacto */
    background-color: var(--cor-verde-escuro);
    display: flex; justify-content: center; align-items: center;
    position: sticky; top: 0; z-index: 1000;
    /* Sombra ultra suave */
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); 
}

.info-container { width: 440px; height: 36px; }

.info-placeholder {
    border: 1.5px solid var(--cor-verde-escuro); 
    color: #ffffff;
    border-radius: 6px; /* Cantos levemente arredondados */
    width: 100%; height: 100%; 
    display: flex; justify-content: center; align-items: center;
}

.menu-toggle {
    position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
    background: none; border: none; font-size: 1.4rem;
    color: #ffffff; cursor: pointer; padding: 10px;
    transition: opacity 0.2s;
}
.menu-toggle:active { opacity: 0.5; }

/* --- Menu Lateral (Backdrop Blur) --- */
.side-menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.3); z-index: 998; opacity: 0; pointer-events: none;
    transition: opacity 0.3s; backdrop-filter: blur(2px);
}
.side-menu-overlay.open { opacity: 1; pointer-events: all; }

.side-menu {
    position: fixed; top: 0; right: 0; width: 280px; height: 100vh;
    background: white; box-shadow: -5px 0 25px rgba(0,0,0,0.1);
    transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); /* Animação iOS */
    z-index: 999; padding-top: 80px;
}
.side-menu.open { transform: translateX(0); }
.side-menu ul { list-style: none; padding: 0 20px; }
.side-menu li a {
    display: flex; align-items: center; padding: 10px; 
    text-decoration: none; color: var(--cor-verde-escuro);
    font-size: 1rem; border-radius: 12px; margin-bottom: 5px;
    transition: background 0.2s;
}
.side-menu li a:active { background-color: #f0f0f0; transform: scale(0.98); }
.side-menu li a i { width: 24px; margin-right: 12px; color: #888; }
.side-menu li a:hover { 
    background-color: var(--cor-verde-muito-claro); /* Verde muito claro no hover */ 
    color: var(--cor-verde-escuro); 
}

/* --- 3. Conteúdo Principal --- */
main {
    flex: 1; padding: 24px 20px; padding-bottom: 110px;
    max-width: 600px; /* Largura ideal de leitura (app style) */
    width: 100%; margin: 0 auto; 
}

.page-title {
    text-align: center; color: var(--cor-titulo-pagina);
    margin-top: 10px; margin-bottom: 35px;
    font-size: 1.6rem; font-weight: 800; letter-spacing: -0.5px;
}
.page-title span { /* Subtítulo sutil */
    display: block; font-size: 0.9rem; font-weight: 400; 
    color: #8898aa; margin-top: 5px; letter-spacing: 0;
}

/* --- 4. Cards "Premium" --- */
.card {
    background: var(--cor-card-bg);
    border: none; /* Sem borda, apenas sombra */
    border-radius: 20px; /* Arredondamento moderno */
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--sombra-card);
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Micro-interação: Card afunda levemente ao toque */
/* .card:active { transform: scale(0.98); } */

h2 { 
    margin-bottom: 10px; color: var(--cor-verde-escuro); 
    padding-right: 40px; font-size: 1.0rem; font-weight: 500; 
}
p { 
    margin-bottom: 0; color: #546e7a; /* Cinza azulado para texto */
    font-size: 0.95rem; line-height: 1.6; 
}   

a {
    /*display: flex; align-items: center; padding: 10px; */
    text-decoration: none; color: var(--cor-verde-escuro);
    font-size: 1rem; border-radius: 12px; margin-bottom: 5px;
    transition: background 0.2s;
}

/* Botão Trigger Refinado */
.dropdown-btn {
    position: absolute; top: 18px; right: 18px;
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background-color: #f7f9fc; /* Fundo sutil */
    color: var(--cor-verde-escuro);
    font-size: 1rem; cursor: pointer; display: flex;
    align-items: center; justify-content: center; 
    transition: all 0.2s;
}

.dropdown-btn.active { background-color: var(--cor-verde-escuro); color: white; }
.dropdown-btn:hover, .dropdown-btn.active { background-color: var(--cor-verde-escuro); color: white; }


/* Menu Dropdown */
.dropdown-content {
    display: none; position: absolute; top: 60px; right: 18px;
    background-color: #fff; min-width: 180px;
    box-shadow: var(--sombra-flutuante); border-radius: 14px;
    z-index: 10; overflow: hidden; padding: 6px;
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: top right;
}
.dropdown-content.show { display: block; }

.dropdown-content a {
    color: #455a64; padding: 12px 16px; text-decoration: none;
    display: flex; align-items: center; font-size: 0.9rem; 
    border-radius: 8px; margin-bottom: 2px;
}
.dropdown-content a:active { background-color: #f5f5f5; }
.dropdown-content a i { width: 22px; margin-right: 10px; font-size: 0.9rem; }
.dropdown-content a:hover { background-color: var(--cor-verde-muito-claro); }
.dropdown-content a.danger { color: var(--cor-perigo); }
.dropdown-content a.danger i { color: var(--cor-perigo); }
.dropdown-content a.danger:hover { background-color: #fef2f2; }

@keyframes popIn { 
    from { opacity: 0; transform: scale(0.9) translateY(-10px); } 
    to { opacity: 1; transform: scale(1) translateY(0); } 
}

/* --- 5. Barra Inferior "App Nativo" --- */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; width: 100%; 
    height: 70px; /* Altura base */
    
    /* Ajuste para iPhone X e novos (Notch/Swipe bar) */
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(70px + env(safe-area-inset-bottom));
    
    background-color: #ffffff;
    box-shadow: 0 -5px 20px rgba(122, 180, 59, 0.25); /* Sombra verde suave */
    display: flex; justify-content: space-around; align-items: flex-start; 
    z-index: 1000;
    padding-top: 10px; /* Alinhamento vertical dos ícones */
}

@media (min-width: 800px) {
    .bottom-nav {
        max-width: 600px; left: 50%; transform: translateX(-50%);
        border-top-left-radius: 24px; border-top-right-radius: 24px;
        padding-bottom: 10px; height: 80px;
    }
}

.nav-item {
    color: var(--cor-verde-bc-escuro); /* Translúcido */
    text-decoration: none; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    width: 60px; height: 50px; cursor: pointer;
    transition: transform 0.2s, color 0.3s;
    position: relative;
}

.nav-item i { font-size: 1.3rem; margin-bottom: 4px; transition: transform 0.2s; }
.nav-item span { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.3px; }

/* Item Ativo: Brilhante e levemente maior */
.nav-item.active { color: var(--cor-verde-bc-escuro); opacity: 1; }
.nav-item.active i { transform: translateY(-2px) scale(1.1); }

/* Indicador de "Ponto" no ativo (opcional, estilo iOS) */
.nav-item.active::after {
    content: ''; position: absolute; bottom: -5px; width: 8px; height: 8px;
    background: var(--cor-verde-bc-escuro); border-radius: 50%; opacity: 0.8;
}

/* Botões */
/* Estilos Base (Comuns a ambos os botões) */
.btn {
  /* Layout Flexbox para alinhar ícone e texto */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Espaço entre o ícone e o texto */
  
  border: none;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 6px; 
  transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.1s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Configuração do Ícone SVG */
.btn svg {
  width: 20px;  /* Tamanho do ícone */
  height: 20px;
  fill: currentColor; /* O ícone herda a cor da fonte (branco) */
}

/* Efeito Tátil (Clique) */
.btn:active {
  transform: scale(0.98) translateY(2px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* --- Variação: Padrão Verde --- */
.btn-verde {
  background-color: var(--cor-verde-escuro); /* Cor padrão */
  color: white;
}

.btn-verde:hover {
  background-color: var(--cor-verde-bc-escuro); /* Cor ao passar o mouse */
}

/* --- Variação: Padrão Perigo --- */
.btn-perigo {
  background-color: darkred; /* Cor padrão */
  color: white;
}

.btn-perigo:hover {
  background-color: var(--cor-perigo); /* Cor ao passar o mouse */
}

.btn-cinza {
  background-color: gray; /* Cor padrão */
  color: white;
}

.btn-cinza:hover {
  background-color: var(--cor-verde-bc-escuro); /* Cor ao passar o mouse */
}

/* Alertas */

.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border: 0.0625rem solid transparent;
  border-radius: 1rem; }


.alert-success {
  color: #236950;
  background-color: #d8efe7;
  border-color: #c4e7da; }
  .alert-success .alert-link {
    color: #1c5440; }

.alert-info {
  color: #084298;
  background-color: #cfe2ff;
  border-color: #b6d4fe; }
  .alert-info .alert-link {
    color: #06357a; }

.alert-warning {
  color: #997404;
  background-color: #fff3cd;
  border-color: #ffecb5; }
  .alert-warning .alert-link {
    color: #7a5d03; }

.alert-danger {
  color: #842029;
  background-color: #f8d7da;
  border-color: #f5c2c7; }
  .alert-danger .alert-link {
    color: #6a1a21; }

.alert-white {
  color: #777c8c;
  background-color: white;
  border-color: white; }
  .alert-white .alert-link {
    color: #5f6370; }

.alert-gray {
  color: #131921;
  background-color: #d2d4d7;
  border-color: #bcbfc3; }
  .alert-gray .alert-link {
    color: #0f141a; }

.alert-dark {
  color: #111626;
  background-color: #d2d3d9;
  border-color: #bbbec6; }
  .alert-dark .alert-link {
    color: #0e121e; }

.alert-black {
  color: #0e1322;
  background-color: #d1d2d7;
  border-color: #b9bcc3; }
  .alert-black .alert-link {
    color: #0b0f1b; }



.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) / -2);
  margin-left: calc(var(--bs-gutter-x) / -2); }
  .row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
    margin-top: var(--bs-gutter-y); }



/* Modal */
/* Estilo do Link que abre o modal */
.link-gatilho {
    color: var(--cor-verde-bc-escuro);
    text-decoration: underline;
    cursor: pointer;
    font-family: sans-serif;
}

/* --- Estilos do Modal (<dialog>) --- */
/* --- Estilos do Modal (<dialog>) Aprimorados --- */
dialog {
    /* 1. Garante a centralização absoluta H e V */
    position: fixed; 
    inset: 0;      /* Define top, right, bottom, left como 0 */
    margin: auto;  /* O navegador calcula o espaço sobrando e centraliza */
    
    /* 2. Dimensões e Limites */
    width: 90%;          /* Mobile first: 90% da largura da tela */
    max-width: 500px;    /* Trava em 500px em telas grandes */
    max-height: 90vh;    /* Impede que o modal seja maior que a altura da tela */
    overflow-y: auto;    /* Se o conteúdo for muito grande, cria barra de rolagem interna */

    /* 3. Visual */
    border: none;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    
    /* 4. Animação de Entrada */
    animation: surgimentoSuave 0.3s ease-out;
}

/* O fundo escurecido atrás do modal */
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px); /* Efeito de desfoque elegante */
}

/* Conteúdo interno do modal */
.modal-content {
    padding: 25px;
}

.modal-titulo {
    margin-top: 0;
    color: #333;
}

/* Botão de fechar (X) no canto superior */
.btn-fechar-topo {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 5px; /* Aumenta área de toque para mobile */
}


/* Animação ajustada para começar do centro exato */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: scale(0.9); /* Nasce um pouco menor (zoom in) */
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}



/* Extras */
.info-li { 
        padding: 3px 0px; 
        font-size: small; 
        list-style: square url("38specialPlusP.gif");
    }

.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545; }