/* [BLOCO] RESET UNIVERSAL
============================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* [BLOCO] PALETA DE CORES – SLPIRES.COM
============================================================================== */
/* Define as cores institucionais e variações utilizadas na identidade visual,
   facilitando manutenção e padronização do layout. */
:root {
  --verde-base: #45763f;         /* Verde institucional principal */
  --contraste-suave: #3e7453;    /* Verde para áreas de destaque discreto */
  --verde-escuro: #3d6737;       /* Verde para textos/títulos importantes */
  --verde-medio: #497844;        /* Variação para botões e barras */
  --verde-neutro: #688863;       /* Suavização de painéis e rodapés */
  --verde-suave: #547b4e;        /* Fundo de alertas e hover */
  --branco: #ffffff;             /* Cor de fundo predominante */
  --cinza-claro: #f4f4f4;        /* Fundo secundário de áreas internas */
  --cinza-medio: #cccccc;        /* Bordas, divisores e campos */
  --cinza-escuro: #444444;       /* Texto principal */
  --preto: #000000;              /* Uso restrito a textos específicos */
  --gradiente-home: linear-gradient(120deg, #207544 60%, #9ddeaf 100%); /* Gradiente institucional da landing */
  --translucido-home: rgba(0,50,20,0.12); /* Sobreposição translúcida para containers na home */
}

/* [BLOCO] AJUSTES GLOBAIS
============================================================================== */
html, body {
  width: 100%; max-width: 100vw; overflow-x: hidden;
  margin: 0; padding: 0; min-height: 100vh;
  font-family: 'Segoe UI','Open Sans',Arial,Helvetica,sans-serif;
  font-size: 16px; color: var(--cinza-escuro); background: var(--branco);
}
/* [FIX] Evita animação/scroll suave que atrapalhe o reset manual de rolagem */
html, body { scroll-behavior: auto; }

/* [FIX] Âncora opcional para foco no topo (use se necessário) */
#topo-anchor {
  position: absolute; top: 0; left: 0; width: 1px; height: 1px;
  overflow: hidden; outline: none;
}

/* [BLOCO] MENSAGENS INSTITUCIONAIS
============================================================================== */
/* Ícones visuais para reconhecimento imediato do tipo da mensagem */
.alert-erro::before { content: "⛔ "; margin-right: .4em; }
.alert-sucesso::before { content: "✅ "; margin-right: .4em; }
.alert-alerta::before { content: "⚠️ "; margin-right: .4em; }

/* Animação de entrada suave para mensagens */
@keyframes fadeInMensagem { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* Visual, contraste e microinteração padronizados nas mensagens */
.alert-erro, .alert-sucesso, .alert-alerta{
  font-size:1.07em; line-height:1.4; letter-spacing:.04em;
  padding:1.1rem; border-radius:4px; margin-bottom:1rem; font-weight:600;
  text-align:center; animation:fadeInMensagem .4s ease; position:relative;
}
.alert-erro{ background:#ffdddd; color:#b03535; border:1.5px solid #b03535; box-shadow:0 0 8px #b0353540; }
.alert-sucesso{ background:#d4edda; color:#217a39; border:1.5px solid #217a39; box-shadow:0 0 8px #217a3940; }
.alert-alerta{ background:#fff3cd; color:#856404; border:1.5px solid #856404; box-shadow:0 0 8px #85640440; }

/* Botão de fechar com foco em acessibilidade (mantém cor herdada) */
.alert-erro .close-msg, .alert-sucesso .close-msg, .alert-alerta .close-msg{
  position:absolute; right:10px; top:8px; font-size:1.23em; font-weight:700;
  color:inherit; cursor:pointer; background:none; border:none; outline:none; opacity:.6; transition:opacity .16s;
}
.alert-erro .close-msg:hover, .alert-sucesso .close-msg:hover, .alert-alerta .close-msg:hover{ opacity:1; }

/* Espaçamento inteligente quando múltiplas mensagens aparecem em sequência */
.alert-erro + .alert-sucesso, .alert-sucesso + .alert-alerta,
.alert-erro + .alert-alerta, .alert-alerta + .alert-erro{ margin-top:.6rem; }
.alert-erro, .alert-sucesso, .alert-alerta{ user-select:text; }

@media (max-width:520px){
  /* Ajusta fonte, padding e hit-area do botão fechar no mobile */
  .alert-erro, .alert-sucesso, .alert-alerta{
    font-size:.99em; padding:.7rem .45rem; border-radius:4px; margin-bottom:.75rem;
    max-width:98vw; word-break:break-word;
  }
  .alert-erro .close-msg, .alert-sucesso .close-msg, .alert-alerta .close-msg{
    right:4px; top:3px; font-size:1em;
  }
}

/* [BLOCO] HOME PAGE/LANDING PAGE
============================================================================== */
/* Estilos exclusivos da landing, com gradiente/overlay institucionais */
.home-bg{
  background:var(--gradiente-home)!important; color:#fff; min-height:100vh; width:100vw;
  display:flex; align-items:center; justify-content:center; overflow-x:hidden;
}
.home-container{
  background:var(--translucido-home); border-radius:18px; box-shadow:0 4px 32px rgba(0,60,30,.19);
  width:100%; max-width:900px; padding:38px 30px; text-align:center; margin:32px auto; box-sizing:border-box; overflow-x:hidden;
}
.tcc-title{ text-align:center; margin:28px 0 26px; }
.tcc-title>div{ font-weight:bold; font-size:1.18rem; color:#fff; line-height:1.18; letter-spacing:.2px; word-break:normal; white-space:normal; margin:0; }
.tcc-title>div:nth-child(3){ height:.8em; }
@media (max-width:700px){ .tcc-title>div{ font-size:1.03rem; } }

/* [BLOCO] BLOCOS DE APRESENTAÇÃO */
.apresentacao-blocos{ display:flex; flex-direction:column; align-items:center; justify-content:center; margin-bottom:1.2rem; }
.apresentacao-credenciais, .apresentacao-boasvindas{ text-align:center; line-height:1.4; }
.apresentacao-boasvindas{ font-size:1.14rem; font-weight:500; }

/* [BLOCO] BOTÕES E GRUPOS DE BOTÕES */
/* Layout e microinterações padronizados para garantir contraste e usabilidade */
.github-group, .app-btn-group{
  display:flex; flex-wrap:wrap; flex-direction:row; justify-content:center; gap:1rem;
  margin-top:1.5rem; margin-bottom:0; width:100%; box-sizing:border-box; padding-left:0; padding-right:0;
}
.github, .btn-mvp, .app-btn, .btn{
  color:#fff; background:#207544; border-radius:8px; padding:12px 18px; text-decoration:none; font-weight:600; margin-top:16px; display:block;
  border:2px solid #88e7ae; min-width:0; width:100%; max-width:100%; text-align:center; font-size:1.03em; box-sizing:border-box; margin-left:0; margin-right:0; overflow-x:hidden;
}
.github:hover, .github:focus-visible, .btn-mvp:hover, .btn-mvp:focus-visible,
.app-btn:hover, .app-btn:focus-visible, .btn:hover, .btn:focus-visible{
  background:#9ddeaf; color:#207544; border-color:#207544; transform:scale(1.03); box-shadow:0 0 8px rgba(32,117,68,.25);
}
/* Botão de destaque para o MVP (efeito gradiente e glow no hover) */
.btn-mvp{
  font-size:1.13em!important; background:#3e7453!important; border-color:#f6ffde!important; color:#fff!important;
  margin-top:8px; box-shadow:0 3px 20px rgba(44,60,30,.15); transition:background .18s,color .18s,box-shadow .18s;
}
.btn-mvp:hover, .btn-mvp:focus-visible{
  background:linear-gradient(90deg,#3bd166 10%,#278a3d 80%)!important; color:#fff!important; border-color:#e6ff72!important;
  box-shadow:0 0 18px 3px #b7ff9a,0 0 0 4px #20754422; transform:scale(1.06);
  transition:background .22s,color .18s,box-shadow .22s,transform .16s; z-index:2;
}

@media (max-width:520px){
  .home-container, .sistema-container.app{
    max-width:100vw; width:100vw; padding-left:2vw; padding-right:2vw; margin-left:0; margin-right:0;
  }
  .github-group, .app-btn-group{ flex-direction:column; align-items:stretch; gap:.6rem; width:100%; padding-left:0; padding-right:0; }
  .github, .btn-mvp, .app-btn, .btn{ max-width:100vw; font-size:.95rem; padding-left:.8rem; padding-right:.8rem; min-width:0; margin-left:0; margin-right:0; }
}

/* [BLOCO] ÁREA INTERNA
============================================================================== */
/* Páginas internas: sobriedade, contraste e organização modular */
.sistema-bg{
  min-height:100vh; width:100vw; background:var(--cinza-claro);
  display:flex; align-items:center; justify-content:center; overflow-x:hidden;
}
.sistema-container.app{
  max-width:430px; width:100%; background:var(--branco); border-bottom:2px solid var(--verde-neutro);
  border-radius:10px; box-shadow:none; padding:32px 20px 18px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
}
.app-logo{ font-size:1.65em; font-weight:700; color:var(--verde-base); margin-bottom:14px; letter-spacing:2.2px; text-align:center; }

/* [AJUSTE] Cabeçalho do módulo (padrão da 2ª imagem) */
.app-title{
  font-size:1.25em; font-weight:600; color:var(--verde-base); text-align:center;
  margin-bottom:.8em; letter-spacing:.5px; border-bottom:2px solid var(--verde-neutro); padding-bottom:.5em;
}

/* [INCLUSÃO] Próxima competência */
.competencia-info{ text-align:center; margin:.8em 0 1em; font-size:1.05em; color:var(--verde-escuro); }
.competencia-info strong{ background:#f3fff3; border:1px solid #b7e2b7; padding:.3em .7em; border-radius:6px; display:inline-block; }

/* Descrição / instrução */
.app-desc{ color:var(--cinza-escuro); font-size:1.01em; margin-bottom:0; font-weight:400; line-height:1.5; text-align:center; }
.app-info{ color:var(--verde-neutro); font-size:.97em; margin-top:0; display:block; }

/* Grupo de botões internos */
.app-btn-group{ display:flex; flex-direction:column; width:100%; gap:11px; margin-top:1.5em; margin-bottom:0; }
.app-btn{
  background:var(--cinza-medio); color:var(--cinza-escuro); border-radius:6px; padding:13px 0; font-size:1em; border:none;
  cursor:not-allowed; opacity:.68; transition:background .14s,color .14s; font-weight:600; letter-spacing:.5px;
}
.app-btn:enabled{ background:var(--verde-suave); color:var(--branco); cursor:pointer; opacity:1; }
.app-btn:enabled:hover, .app-btn:enabled:focus-visible{ background:var(--verde-neutro); color:var(--branco); }

/* Rodapé interno */
.app-footer{ margin-top:10px; font-size:.93em; color:var(--cinza-escuro); text-align:center; font-weight:400; border:none; padding:0; background:none; }

@media (max-width:520px){
  .sistema-container.app{ padding:16px 4vw 12px; max-width:98vw; }
  .app-logo, .app-title, .app-desc{ font-size:.98em; }
  .app-btn{ font-size:.99em; padding:11px 0; }
  .app-footer{ font-size:.89em; }
}

/* [BLOCO] MÓDULO SIMULAÇÃO (DRY-RUN)
============================================================================== */
.simulacao-vcenter{
  min-height:60vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:1.5em 1em;
}
.competencia-atual{ font-size:1.2em; font-weight:500; margin-bottom:1.2em; color:var(--verde-escuro); }

.btn-simular{ margin-top:.8em; padding:.6em 1.8em; font-size:1rem; border-radius:8px; cursor:pointer; transition:all .2s ease-in-out; }
.btn-simular:hover, .btn-simular:focus-visible{ transform:scale(1.03); box-shadow:0 0 8px rgba(0,0,0,.15); outline:none; }
.btn-simular:disabled{ background-color:var(--verde-neutro); color:#eee; cursor:not-allowed; opacity:.85; }

.status-simulacao{ margin-top:1.5em; font-style:italic; color:var(--cinza-escuro); font-size:.95em; }

@media (min-height:900px){ .simulacao-vcenter{ min-height:70vh; } }
@media (min-height:1080px){ .simulacao-vcenter{ min-height:80vh; } }
@media (max-width:600px){ .competencia-atual{ font-size:1em; } .btn-simular{ width:100%; font-size:.95em; } }

/* Cards / hierarquia */
.card{ margin-top:1.5em; margin-bottom:1.25em; }
.card-title{ text-align:center; margin-bottom:.9em; font-weight:600; font-size:1.05em; color:var(--verde-escuro); padding:0 .5em; }
.card-body{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }

/* Observações (nota técnica) */
.muted{ margin-top:1.4em; margin-bottom:1em; font-size:.9em; line-height:1.45; color:var(--cinza-escuro); text-align:justify; }

/* [BLOCO] FORMULÁRIOS/TABELAS (mantidos para outras telas)
============================================================================== */
/* Padronização de campos e tabelas visando acessibilidade e contraste */
input, select, textarea{
  border:1px solid var(--cinza-medio); padding:.5rem; width:100%; box-sizing:border-box; border-radius:4px; background:var(--branco);
}
input:focus, select:focus, textarea:focus{ border-color:var(--verde-base); outline:none; }

table{ width:100%; border-collapse:collapse; margin-top:1rem; background:var(--branco); }
table th{ background:var(--verde-base); color:var(--branco); padding:.7rem .9rem; text-align:center; font-size:.95em; letter-spacing:.03em; }
table td{ padding:.8rem; border-bottom:1px solid var(--cinza-claro); text-align:center; font-size:.94em; }

/* [INCLUSÃO] Lista institucional de regras (nota técnica)
============================================================================== */
.regras{ text-align:left; margin:1.6em 0 1.2em; font-size:.9em; line-height:1.45; }
.regras ul{ list-style-type:disc; margin:.6em 0 0 2em; padding:0; }
.regras li{ margin-bottom:.35em; color:var(--cinza-escuro); }

/* [AJUSTE] Resumo de KPIs (alinhado à esquerda e centrado no card) */
.resumo-kpis{
  list-style: disc inside;
  text-align: left;
  max-width: 420px;
  margin: .4em auto .2em;
  padding-left: .5em;
}
.resumo-kpis li{ margin: .45em 0; line-height: 1.35; }
.kpi-label{ display: inline-block; margin-right: .35em; }
.kpi-num{ font-weight: 700; color: var(--verde-escuro); }

/* [BLOCO] RODAPÉ/LOGOS
============================================================================== */
/* Rodapé de agradecimentos e logos institucionais com microinterações */
.footer-agradecimentos{ text-align:center; margin:36px 0 14px; font-weight:bold; color:#eaffea; font-size:1.22rem; letter-spacing:.4px; }
.footer-institucional{ display:flex; align-items:center; justify-content:center; gap:38px; flex-wrap:wrap; margin-bottom:38px; }
.logo-inst{
  height:44px; width:auto; vertical-align:middle; background:#fff; border-radius:10px; padding:8px 16px;
  filter:drop-shadow(0 2px 8px #164); transition:filter .2s,background .2s;
}
.logo-inst:hover, .logo-inst:focus-visible{ background:rgba(244,244,244,.90); filter:drop-shadow(0 4px 14px #207544) brightness(1.13); }
@media (max-width:600px){ .footer-institucional{ gap:16px; } .logo-inst{ height:32px; padding:4px 8px; } }
.footer-version a{
  color:#b5ffb5; text-decoration:none; font-weight:600; transition:color .16s,filter .16s; filter:brightness(1.04);
}
.footer-version a:hover, .footer-version a:focus-visible{ color:#e6ff72; filter:brightness(1.15); text-decoration:none; outline:none; }

/* [BLOCO] LINKS E TEXTO AUXILIAR
============================================================================== */
/* Link auxiliar (ex.: Lattes) com microanimação sutil */
.lattes-link{
  display:inline-block; vertical-align:middle; margin-left:6px; font-size:1.04em; color:#218d41; background:none; text-decoration:none;
  transition:color .18s,transform .18s;
}
.lattes-link:hover, .lattes-link:focus-visible{ color:#3d6737; transform:scale(1.12) rotate(-5deg); }

/* [BLOCO] CONTROLE DE ROLAGEM — padroniza scroll no window
============================================================================== */
/* Anula o scroll interno e devolve ao documento (ajuste pós-refatoração) */
.sistema-bg{
  /* Anula o scroll interno e devolve ao documento */
  min-height: 100vh;
  height: auto;            /* <-- antes: 100vh (causava scroll interno) */
  overflow-x: hidden;
  overflow-y: visible;     /* <-- antes: auto */
  margin: 0;
  padding: 0;
}
@media (max-width:520px){
  .sistema-bg{
    min-height: 100svh;
    height: auto;          /* mantém sem scroll interno também no mobile */
  }
}

/* [BLOCO] LINKS-BOTÃO EM MÓDULOS
============================================================================== */
/* Garante que <a class="app-btn"> mantenha aparência institucional */
a.app-btn{
  background:var(--verde-suave)!important; color:var(--branco)!important; cursor:pointer; opacity:1!important; font-weight:700; font-size:1.1em;
  border-radius:8px; transition:background .14s,color .14s,box-shadow .16s; border:none; margin-bottom:10px; display:block; box-shadow:0 2px 10px #45763f1c;
}
a.app-btn:hover, a.app-btn:focus-visible{
  background:var(--verde-neutro)!important; color:var(--branco)!important; box-shadow:0 2px 14px #3e745322; transform:scale(1.03); text-decoration:none; outline:none;
}

/* [INCLUSÃO] PADRONIZAÇÃO BOTÕES <a>/<button>
============================================================================== */
/* Visual idêntico para botões de seleção de perfil e painel de módulos */
a.app-btn, button.app-btn{
  background:var(--verde-suave)!important; color:var(--branco)!important; cursor:pointer; opacity:1!important; font-weight:700; font-size:1.13em;
  border-radius:8px; border:none; transition:background .14s,color .14s,box-shadow .16s; margin-bottom:0; margin-top:0; display:block; box-shadow:0 2px 10px #45763f1c;
  text-align:center; padding:12px 18px; min-width:0; max-width:100%; line-height:1.25;
}
a.app-btn:hover, a.app-btn:focus-visible,
button.app-btn:hover, button.app-btn:focus-visible{
  background:var(--verde-neutro)!important; color:var(--branco)!important; box-shadow:0 2px 14px #3e745322; transform:scale(1.03); text-decoration:none; outline:none;
}

/* Espaçamento entre botões nos grupos */
.app-btn-group{ display:flex; flex-direction:column; width:100%; gap:11px; margin-top:1.5em; margin-bottom:0; padding:0; }

/* [INCLUSÃO] BOTÃO DE LOGOUT DISCRETO
============================================================================== */
/* Botão reduzido e diferenciado para saída do sistema */
.btn-logout{
  background:#c0392b!important; color:#fff!important; width:auto!important; min-width:120px; max-width:210px; font-size:1em; padding:8px 18px;
  border-radius:7px; font-weight:600; margin:16px auto 0; display:inline-block; box-shadow:0 1px 7px #b0353535; text-align:center; border:none; opacity:.95;
  transition:background .14s,color .14s,box-shadow .14s;
}
.btn-logout:hover, .btn-logout:focus-visible{
  background:#e74c3c!important; color:#fff!important; box-shadow:0 3px 18px #b0353555; opacity:1; text-decoration:none; outline:none; transform:scale(1.06);
}

/* [OBSERVAÇÃO]
============================================================================== */
/* Comentários institucionais mantidos para rastreabilidade e governança do CSS */