﻿
:root {
  --color-primary: #0e2471;   /* Azul escuro */
  --color-secondary: #72B130; /* Verde */
  --color-accent: #f6aa07;    /* Amarelo */
  --color-info: #1642dd;      /* Azul claro */
  --color-link: #0032a7;      /* Azul médio */
  --color-light-text: #a5c7ff; /* Azul clarinho para texto no dark mode */
  --color-primary-dark: #a5c7ff; /* Azul clarinho para texto no dark mode */
  --border-light: #ddd;
  --bg-footer: #0e2471;
}
/* Tema escuro */
body[data-bs-theme="dark"] {
  --color-primary: #a5c7ff; /* Azul clarinho no dark mode */
  --border-light: #222;
  --bg-footer: #0e2471;
}

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn-primary:hover
, .btn-primary:active {
    background-color: var(--color-link);
    border-color: var(--color-link);
}
.btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.btn-secondary:hover
, .btn-secondary:active{
    background-color: var(--color-link);
    border-color: var(--color-link);
}
.btn-default {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: #fff;
}

.bg-primary {
    background-color: #0e2471;
}
.bg-secondary {
    background-color: #72B130;
}
.bg-default {
    background-color: #1642DD;
}
.bg-orange {
    background-color: #f6aa07;
}
.btn-green-border {
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
    background-color: transparent;
}
.btn-green-border:hover
, .btn-green-border:active {
    border: 1px solid var(--color-secondary);
    color: #fff;
    background-color: var(--color-secondary);
}


.text-green
, body.dark-mode .text-green {
    color: #72B130;
}

body {
    font-family: 'Prometo', sans-serif;
    color: var(--color-primary);
}

.text-primary-custom {
  color: var(--color-primary);
}


body.dark-mode {
  background-color: #121212;        /* preto suave */
  color: var(--color-light-text);   /* azul clarinho para texto */
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.3s ease-in;
}
body.dark-mode a {
    color: var(--color-light-text);
}

body.dark-mode .navbar {
  background-color: var(--color-link); /* azul médio */
}

body.dark-mode .btn-primary {
  background-color: var(--color-secondary); /* verde */
  border-color: var(--color-secondary);
}

body.dark-mode .alert {
  background-color: var(--color-info);
  color: var(--color-light-text);
}

body.dark-mode footer {
  background-color: #1a1a1a;        /* quase preto */
  color: var(--color-light-text);
}

.font-extralight {
    font-weight: 100;
}
.font-light {
    font-weight: 300;
}
.font-base {
    font-weight: normal;
}
.font-medium {
    font-weight: 500;
}
.font-bold {
    font-weight: bold;
}
.font-bolder {
    font-weight: 900;
}

.inline-block {
    display: inline-block;
}
.inline-flex {
    display: inline-flex;
}

.text-xs {
  font-size: 0.75rem;   /* 12px */
}

.text-sm {
  font-size: 0.875rem;  /* 14px */
}

.text-base {
  font-size: 1rem;      /* 16px */
}

.text-md {
  font-size: 1.125rem;  /* 18px */
}

.text-lg {
  font-size: 1.25rem;   /* 20px */
}

.divisor {
  align-self: stretch;          /* ocupa toda a altura do flex container */
  border-right: 1px solid #0e2471;
  margin: 10px 20px;               /* espaçamento lateral */
  padding: 0;                   /* padding não é necessário para altura */
}

body.dark-mode .divisor {
    border-right: 1px solid #0e2471;
}
.no-padding {
    padding: 0 !important;
}
.no-border {
    border: none !important;
}

.form-switch .form-check-input {
    margin-top: 0px;
}

/* Switch padrão (light-mode) segue como está */
.form-check-input {
  cursor: pointer;
}

/* Switch no dark-mode */
body.dark-mode .form-check-input {
  background-color: #222;   /* fundo escuro quando desligado */
  border-color: #444;       /* borda mais discreta */
}

body.dark-mode .form-check-input:checked {
  background-color: var(--color-primary); /* verde quando ligado */
  border-color: var(--border-light);
}

.accessibility-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.accessibility-buttons button {
  background: none;
  border: none;
  color: var(--color-primary);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}
body.dark-mode .accessibility-buttons button {
    color: var(--color-light-text);
}

.accessibility-buttons button:hover {
  background-color: var(--color-primary);
  color: #fff;
}

.logo {
  max-height: 200px;   /* altura máxima */
  max-width: 200px;    /* largura máxima */
  height: auto;       /* mantém proporção */
  width: auto;        /* mantém proporção */
}

.search-bar {
  width: 100%;
  max-width: 400px; /* limite opcional */
}

.search-bar input {
  flex: 1;
}

.search-bar button {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ajuste geral do campo de busca */
.search-bar .form-control {
  border: 1px solid var(--color-primary);   /* borda na cor primary */
  font-size: 0.875rem;                   /* fonte menor (14px) */
  color: var(--color-primary);              /* texto na cor primary */
}

/* Placeholder mais suave */
.search-bar .form-control::placeholder {
  color: var(--color-primary);
  opacity: 0.6;
}

/* Dark mode */
body.dark-mode .search-bar .form-control {
  background-color: #111;                /* fundo escuro */
  border: 1px solid var(--color-primary);             /* azul escuro */
  color: var(--color-light-text);                           /* texto branco */
}

body.dark-mode .search-bar .form-control::placeholder {
  color: #aaa;                           /* placeholder claro */
}


/*** navbar ***/
.navbar {
  background-color: #fff;
}

.navbar-nav .nav-link {
  padding: 0.5rem 1rem;
  color: var(--color-primary);
}

.navbar-nav .nav-link.active {
  color: var(--color-primary); /* opcional */
  border-bottom: 3px solid #72B130;
}

body.dark-mode .navbar {
  background-color: #111;
}

body.dark-mode .navbar .nav-link {
  color: var(--color-light-text);
}

body.dark-mode .navbar .nav-link.active {
  color: var(--color-light-text); /* opcional */
  border-bottom: 3px solid #72B130;
}

/* Botão hamburguer */
.navbar-toggler {
  padding: 8px 4px;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.toggler-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 2px;
}
body.dark-mode .toggler-bar {
  background-color: var(--color-light-text);
}

.nav-item.dropdown:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}
.dropdown-menu .dropdown-item {
  border-bottom: 1px solid #666; /* cor da borda */
  padding: 8px 16px;             /* espaçamento interno */
}
.dropdown-menu .dropdown-item:last-child {
  border-bottom: none;
}
.dropdown-menu .dropdown-item:hover {
  background-color: #1642DD;
  color: #fff;
}
body.dark-mode .dropdown-menu .dropdown-item:hover {
  background-color: #f8f9fa; /* cor de fundo ao hover */
  color: #000;
}



.main {
    min-height: 420px;
}

footer
, body.dark-mode footer {
    background-color: var(--bg-footer);
    color: #fff;
    line-height: 2;
}
footer h6 {
    font-weight: normal;
}

.hero {
    background-color: #0e2471;
    color: #fff;
    border-radius: 10px;
    min-height: 300px;
    align-items: center;
}
.hero .btn {
    font-size: 0.90rem;
}
.hero .btn .bi {
    font-size: 1.5rem;
}
.hero .avisos {
    background-color: #FDBB2F;
    color: #0e2471;
    width: 100%;
    
    max-width: 400px;
    margin: auto;
    border-radius: 10px;
    margin: 14px auto;
}
.hero .avisos .carousel-item {
    height: 300px;
    overflow: auto;
    padding: 10px;
}
#avisosCarousel .carousel-indicators {
  bottom: -10px; /* ajusta a distância para baixo */
}
#avisosCarousel .carousel-indicators [data-bs-target] {
  background-color: #0032a7; /* cor azul personalizada */
  width: 12px;   /* tamanho da bolinha */
  height: 12px;
  border-radius: 50%; /* deixa redondo */
}
#avisosCarousel .carousel-indicators .active {
  background-color: #001f6b; /* azul mais escuro para destaque */
}

.tag-icon {
    display: inline-flex;
    background-color: #0e2471;
    color: #fff;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.hero-menu {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    padding: 20px 0;
}
.hero-menu a {    
    border: 1px solid var(--border-light);
    border-radius: 6px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    min-width: 170px;
    width: auto;
    position: relative;
    font-size: 0.9rem;
    min-width: 170px;
    width: auto;
}
.hero-menu a .text-link {
    padding: 10px;    
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;    
    position: relative;
}
.hero-menu a .text-link .bi {
    font-size: 4rem;
    display: inline-flex;
    margin-bottom: 8px;
}
.hero-menu a .text-link .bi.bi-sm {
    font-size: 3.6rem !important;
}
.hero-menu a .text-hover {
    opacity: 0;
    transition: all 0.3s;
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    background: #fff;
    color: #fff;
}
.hero-menu a:hover .text-hover {
    opacity: 1;
    visibility: visible;    
    background: rgba(14, 36, 113, 1);
    color: #fff;
}
body.dark-mode .hero-menu a .text-hover {
    background: #121212;
    color: #a5c7ff;
}
body.dark-mode .hero-menu a:hover .text-hover {
    background: #121212;
    color: #a5c7ff;
}

.hero-cards {
    color: var(--color-primary);
    padding: 12px 0;
}
.hero-cards .card {
    background-color: transparent;
    border-color: var(--border-light) !important;
    height: 100%;
}
.hero-cards .card .card-header {
    background-color: transparent;
    color: var(--color-primary);
    font-weight: 400;
    border-color: var(--border-light) !important;
}
.hero-cards .card .card-body {
    color: var(--color-primary);
    border-color: var(--border-light) !important;
}
.hero-cards .card .card-header .bi {
    margin-right: 12px;
    font-size: 1.2rem;
}
.hero-cards .card .card-footer {
    background-color: transparent;
    text-align: center;
    font-size: 0.85rem;
    border-color: var(--border-light) !important;
}

.hero-cards .item {
    padding: 8px 0;
}
.hero-cards .item .fw-light {
    font-size: 0.85rem;
    padding-top:4px;
}
.hero-cards .item .text-big {
    font-size: 2.75rem;
}

.hero-menu-bottom {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    padding: 0px 0px 20px 0px;
}

.hero-menu-bottom a {
    padding: 10px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: left;
    text-decoration: none;
    font-size: 0.9rem;
    min-width: 170px;
    width: auto;
}
.hero-menu-bottom a .bi {
    font-size: 3rem;
    display: inline-flex;
    margin-right: 16px;
}
.hero-menu-bottom a .bi.bi-sm {
    font-size: 3.6rem !important;
}

.btn-green, .btn-green:active {
    color: var(--color-secondary);
}
.btn-green:hover{
    color: var(--color-info);
}

/* Breakpoints responsivos para bordas */
@media (min-width: 576px) {
  .border-sm-start { border-left: 1px solid #0032a7 !important; }
  .border-sm-end   { border-right: 1px solid #0032a7 !important; }
  .border-sm-top   { border-top: 1px solid #0032a7 !important; }
  .border-sm-bottom{ border-bottom: 1px solid #0032a7 !important; }
}

@media (min-width: 768px) {
  .border-md-start { border-left: 1px solid #0032a7 !important; }
  .border-md-end   { border-right: 1px solid #0032a7 !important; }
  .border-md-top   { border-top: 1px solid #0032a7 !important; }
  .border-md-bottom{ border-bottom: 1px solid #0032a7 !important; }
}

@media (min-width: 992px) {
  .border-lg-start { border-left: 1px solid #0032a7 !important; }
  .border-lg-end   { border-right: 1px solid #0032a7 !important; }
  .border-lg-top   { border-top: 1px solid #0032a7 !important; }
  .border-lg-bottom{ border-bottom: 1px solid #0032a7 !important; }
}

@media (min-width: 1200px) {
  .border-xl-start { border-left: 1px solid #0032a7 !important; }
  .border-xl-end   { border-right: 1px solid #0032a7 !important; }
  .border-xl-top   { border-top: 1px solid #0032a7 !important; }
  .border-xl-bottom{ border-bottom: 1px solid #0032a7 !important; }
}

@media (min-width: 1400px) {
  .border-xxl-start { border-left: 1px solid #0032a7 !important; }
  .border-xxl-end   { border-right: 1px solid #0032a7 !important; }
  .border-xxl-top   { border-top: 1px solid #0032a7 !important; }
  .border-xxl-bottom{ border-bottom: 1px solid #0032a7 !important; }
}

/* Breakpoints responsivos para padding-start */
@media (min-width: 576px) {
  .ps-sm-4 { padding-left: 1.5rem !important; }
}
@media (min-width: 768px) {
  .ps-md-4 { padding-left: 1.5rem !important; }
}
@media (min-width: 992px) {
  .ps-lg-4 { padding-left: 1.5rem !important; }
}
@media (min-width: 1200px) {
  .ps-xl-4 { padding-left: 1.5rem !important; }
}
@media (min-width: 1400px) {
  .ps-xxl-4 { padding-left: 1.5rem !important; }
}
