* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============================================================
   Paleta compartilhada com a tela de login (assets/login.css)
   ============================================================ */
:root {
  --rb-asphalt:     #12151c;
  --rb-asphalt-2:   #1a1f28;
  --rb-line-dark:   #262c37;
  --rb-steel:       #7b8494;
  --rb-amber:       #f2a740;
  --rb-amber-soft:  #ffd28a;
  --rb-paper:       #f7f5f1;
  --rb-ink:         #1a1c22;
  --rb-ink-soft:    #6c707a;
  --rb-line-light:  #e6e2da;
  --rb-danger:      #c23b2f;
  --rb-danger-bg:   #fbeae8;
}

/* ============================================================
   Tema Claro — ativado via <html data-tema="claro">, escolhido no
   seletor de tema (Configurações → Geral). A barra de navegação
   continua escura (identidade da marca) nos dois temas; o que muda
   é o "chão" das telas: painéis, cards e formulários clareiam.
   O tema padrão (sem o atributo) continua sendo o escuro de sempre.
   ============================================================ */
:root[data-tema="claro"] {
  --rb-asphalt-2:   #fff8ec;
  --rb-line-dark:   #eeddb8;
  --rb-ink-soft:    #6b5d45;
  --rb-line-light:  #f0e2c4;
}

:root[data-tema="claro"] body {
  background: #fbf1de;
  color: var(--rb-ink);
}

/* Painéis/cards/formulários/textos que hoje usam classes fixas do
   Bootstrap (.bg-dark, .bg-secondary, .border-secondary, .text-white...)
   em vez de variável — reescritos de forma abrangente pra clarear
   junto em qualquer tela quando o tema é claro. A barra de navegação
   (nav) não usa essas classes, então fica de fora e continua escura. */
:root[data-tema="claro"] .modal-content.bg-dark,
:root[data-tema="claro"] .card.bg-dark {
  background: #fffaf0 !important;
  color: var(--rb-ink) !important;
}

:root[data-tema="claro"] .text-white {
  color: var(--rb-ink) !important;
}
:root[data-tema="claro"] .text-white-50 {
  color: rgba(26, 28, 34, 0.6) !important;
}

:root[data-tema="claro"] .border-secondary,
:root[data-tema="claro"] hr.border-secondary {
  border-color: var(--rb-line-dark) !important;
}

:root[data-tema="claro"] .bg-secondary,
:root[data-tema="claro"] .form-control,
:root[data-tema="claro"] .form-select,
:root[data-tema="claro"] .input-group-text {
  background-color: #fdf0d9 !important;
  color: var(--rb-ink) !important;
  border-color: #edd9ae !important;
}
:root[data-tema="claro"] .badge.bg-secondary {
  color: var(--rb-ink) !important;
}
:root[data-tema="claro"] .form-control::placeholder {
  color: #8c7a5c8a !important;
}
:root[data-tema="claro"] .form-control:focus,
:root[data-tema="claro"] .form-select:focus {
  background-color: #fffdf7 !important;
}
:root[data-tema="claro"] .card-inativo {
  opacity: 0.6;
}

html {
  background: var(--rb-asphalt);
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  /* Fundo escuro na mesma paleta do asfalto dos cards, com um brilho
     âmbar sutil no canto (tipo luz de farol) — fica uniforme com os
     cards escuros, em vez do degradê dourado claro de antes. */
  background:
    radial-gradient(ellipse 900px 600px at 8% 0%, rgba(242, 167, 64, 0.16) 0%, rgba(242, 167, 64, 0) 60%),
    linear-gradient(160deg, var(--rb-asphalt-2) 0%, var(--rb-asphalt) 55%, #0a0c11 100%);
  background-attachment: fixed;
  color: var(--rb-paper);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

/* Retinta os botões/badges "primary" do Bootstrap para a cor da marca,
   usando as variáveis locais do próprio componente (API do Bootstrap 5.3) —
   assim toda tela que já usa .btn-primary/.btn-outline-primary/.badge
   herda a mesma cor automaticamente, sem precisar editar página por página. */
.btn-primary {
  --bs-btn-bg: var(--rb-amber);
  --bs-btn-border-color: var(--rb-amber);
  --bs-btn-color: var(--rb-ink);
  --bs-btn-hover-bg: var(--rb-amber-soft);
  --bs-btn-hover-border-color: var(--rb-amber-soft);
  --bs-btn-hover-color: var(--rb-ink);
  --bs-btn-active-bg: var(--rb-amber-soft);
  --bs-btn-active-border-color: var(--rb-amber-soft);
  --bs-btn-active-color: var(--rb-ink);
  --bs-btn-disabled-bg: var(--rb-amber);
  --bs-btn-disabled-border-color: var(--rb-amber);
}

.btn-outline-primary {
  --bs-btn-color: var(--rb-amber);
  --bs-btn-border-color: var(--rb-amber);
  --bs-btn-hover-bg: var(--rb-amber);
  --bs-btn-hover-border-color: var(--rb-amber);
  --bs-btn-hover-color: var(--rb-ink);
  --bs-btn-active-bg: var(--rb-amber);
  --bs-btn-active-border-color: var(--rb-amber);
}

.badge.bg-secondary {
  background-color: var(--rb-line-dark) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--rb-amber);
  box-shadow: 0 0 0 0.2rem rgba(242, 167, 64, 0.22);
}

 .tela-login-wallpaper {
    background-image: url("images/wallpaper/wallpaper-backgroud-.jpg");
    background-size: cover;       /* cobre a tela toda */
    background-position: center;  /* centraliza a imagem */
    background-repeat: no-repeat; /* não repete */
    
    flex: 1;               /* ocupa toda a altura da janela */
    width: 100vw;                 /* ocupa toda a largura */
    
    display: flex;                /* centraliza os elementos */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
 .tela-login-backsquare {

    background-image: linear-gradient(45deg, rgba(157, 240, 255, 0.4), rgba(255, 255, 255, 0.4)); /* fundo preto com transparência */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    
 }

  .button-login {
    background-color: #FFD740; /* cor de fundo azul */
    color: rgb(0, 0, 0);              /* cor do texto branca */
    padding: 10px 20px;       /* espaçamento interno */
    border: none;             /* sem borda */
    border-radius: 5px;       /* cantos arredondados */
    cursor: pointer;          /* cursor de mãozinha ao passar por cima */
    font-size: 16px;          /* tamanho da fonte */
    transition: background-color 0.3s ease; /* transição suave ao passar o mouse */
  }

   .button-login:hover {
    background-color: #fbff0e; /* cor de fundo ao passar o mouse */
   }

   .input-login {
      padding: 10px;            /* espaçamento interno */
      margin: 10px 0;           /* margem superior e inferior */
      border: 1px solid #ffffff00;   /* borda cinza clara */
      border-radius: 5px;       /* cantos arredondados */
      font-size: 16px;          /* tamanho da fonte */
      width: 100%;              /* ocupa toda a largura do container pai */
      box-sizing: border-box;   /* inclui o padding e a borda na largura total */   
      background-color: #ffffff;
   }

a {
  color: var(--rb-amber-soft);
  text-decoration: none;
  transition: 0.3s;
}

:root[data-tema="claro"] a {
  color: var(--rb-ink);
}

a:hover {
  opacity: 0.7;
}

body {
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

.logo {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  display: block;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--rb-asphalt);
  min-height: 8vh; /* altura da nav bar */
  padding-top: 4px;
  z-index: 10;
}

nav a, footer a {
  color: var(--rb-paper);
}

.nav-list li a:hover {
  color: var(--rb-amber);
  opacity: 1;
}

main {
    flex: 1 0 auto; /* Faz o main crescer sem forçar os botões */
    display: block; /* IMPORTANTE: Voltar para block impede que os botões estiquem sozinhos */
    padding-bottom: 50px; /* Garante um espaço antes do footer */

    min-height: 120vh;
}

.nav-list {

  list-style: none;
  display: flex;
  margin-top: 8px;
  z-index: 10; /* abaixo dos modais (Bootstrap usa 1050+) pra não ficar por cima deles */
}


.nav-list li {

  letter-spacing: 1px;
  margin-left: 32px;
}

.mobile-menu {
  cursor: pointer;
  display: none;
}

.mobile-menu div {
  width: 32px;
  min-height: 2px;
  background: white;
  margin: 8px;
  transition: 0.3s;
}

@media (max-width: 999px) {

  .nav-list {
    position: fixed;
    top: 8vh;
    right: 0;
    width: 50vw;
    height: calc(100vh - 8vh);
    margin-top: 0;
    background: var(--rb-asphalt);

    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    transform: translateX(100%);
    transition: transform 0.3s ease-in;
    padding-top: 8vh;
    justify-content: space-around;

    z-index: 1040; /* abaixo dos modais (Bootstrap usa 1050+) */
  }

  .nav-list li {
    margin-left: 0;
    opacity: 0;
  }

  .nav-list.active {
    transform: translateX(0);
  }

  .mobile-menu {
    display: block;
  }
}

/* Em alguns navegadores de celular (principalmente Android), um <select>
   dentro de um modal que ainda está com a transição de abertura (transform)
   "grudada" no elemento pai faz as opções do dropdown ficarem cortadas —
   sumindo as últimas da lista. Tirando essa transição só no celular resolve,
   sem mudar nada no visual do modal no computador. */
@media (max-width: 999px) {
  .modal.fade .modal-dialog {
    transition: none;
  }
  .modal.show .modal-dialog {
    transform: none;
  }
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.mobile-menu.active .line1 {
  transform: rotate(-45deg) translate(-8px, 8px);
}

.mobile-menu.active .line2 {
  opacity: 0;
}

.mobile-menu.active .line3 {
  transform: rotate(45deg) translate(-5px, -7px);
}

iframe {
  border: none;
  width: 100%;
  min-height: 100%;
}

/* Tela do Mapa */

.button {
  background: var(--rb-amber);
  color: var(--rb-ink);
  border: none;
  padding: 10px 20px;
  margin: 5px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
 }

.mapa-tela {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
    padding: 0;
    margin: 0;
}

.map-wrapper {
    width: 100%;
    flex: 1 1 auto;
    min-height: 480px;
    position: relative;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}

.mapa-lancar-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2147483647 !important;
    font-size: 1rem;
    font-weight: 600;
    padding: 10px 18px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

/* Pills de "Tipo de Sinistro" no modal de Lançar Processo — substitui o
   <select> nativo, que em alguns celulares (principalmente Android) trava
   e corta as últimas opções da lista, sem rolar. */
.tipo-sinistro-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tipo-sinistro-pill {
    background: var(--rb-asphalt-2);
    color: var(--rb-steel);
    border: 1px solid var(--rb-line-dark);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.85rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tipo-sinistro-pill:hover {
    border-color: var(--rb-amber);
    color: var(--rb-paper);
}
.tipo-sinistro-pill.active {
    background: var(--rb-amber);
    border-color: var(--rb-amber);
    color: var(--rb-ink);
    font-weight: 600;
}

.mapa-filtros-btn {
    position: absolute;
    top: 56px;
    right: 10px;
    z-index: 20;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.94);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: background 0.15s;
}

.mapa-filtros-btn:hover,
.mapa-filtros-btn.ativo {
    background: #fff;
    color: var(--rb-amber, #f2a740);
}

.mapa-filtros {
    position: absolute;
    top: 56px;
    right: 10px;
    z-index: 15;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 10px;
    max-height: calc(100% - 70px);
    overflow-y: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mapa-filtro-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #222;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
}

.mapa-filtro-item img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.mapa-filtro-item input[type="checkbox"] {
    cursor: pointer;
}

#map {
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Bolinha de carregamento entre uma tela e outra */
.overlay-carregando {
    position: fixed;
    inset: 0;
    background: rgba(18, 21, 28, 0.78);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2147483647;
}
.overlay-carregando.ativo {
    display: flex;
}
.spinner-carregando {
    width: 46px;
    height: 46px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--rb-amber);
    border-radius: 50%;
    animation: girarSpinnerCarregando 0.7s linear infinite;
}
@keyframes girarSpinnerCarregando {
    to { transform: rotate(360deg); }
}

footer {
    flex-shrink: 0; /* Impede o footer de ser esmagado */
    margin-top: auto; /* O segredo final para empurrar para o fundo */
    background: var(--rb-asphalt);
    color: var(--rb-paper);
    text-align: center;
    padding: 20px 0;
    width: 100%;
}