:root {
  --azul-claro: #56aaff;
  --azul: #244c97;
  --verde: #2fe39d;
  --cinza: #f6f8fa;
  --cinza2: #d8e6f5;
  --fundo-modal: #fff;
  --cinza-dark: #1d1e20;
  --fundo-modal-dark: #20222b;
  --borda-modal-dark: #374472;
  --txt-dark: #d7e2f1;
}
body {
  margin: 0;
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  background: var(--cinza);
  transition: background 0.29s;
}
body.dark {
  background: var(--cinza-dark)!important;
  color: var(--txt-dark)!important;
}

header {
  background: #ffffffcc;
  box-shadow: 0 2px 14px #b7d0f844;
  position: sticky;
  top: 0;
  z-index: 10;
}
body.dark header {
  background: #232637f3;
}

.header-inner {
  max-width: 1280px;
  margin: auto;
  display: flex;
  align-items: center;
  padding: 18px 30px 18px 30px;
  justify-content: space-between;
}

.logo {
  font-size: 2.05rem;
  font-weight: 700;
  color: var(--azul);
  letter-spacing: .5px;
  text-shadow: 0 2px 16px #b2d6fadc;
}
body.dark .logo {
  color: var(--azul-claro);
  text-shadow: 0 0 7px #3058ff44;
}
.menu-header {
  display: flex;
  gap: 14px;
}
.btn-header,
.dark-mode-btn {
  background: var(--azul-claro);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 31px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 12px #b0d0fa73;
  transition: background 0.17s;
}
.btn-header:hover,
.dark-mode-btn:hover{
  background: var(--azul);
}
.dark-mode-btn {
  padding: 8px 13px;
  font-size: 1.23rem;
}

.section-maps {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 25vh;
}
#map {
  width: 97vw;
  max-width: 1200px;
  min-width: 300px;
  height: 340px;
  margin: 25px auto 13px auto;
  border-radius: 16px;
  box-shadow: 0 3px 18px #5f76991a;
}
body.dark #map {
  box-shadow: 0 3px 22px #28385022;
}
.search-section {
  width: 97vw;
  max-width: 530px;
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  margin-top: 7px;
}
.search-section input {
  width: 100%;
  padding: 13px;
  font-size: 1.06rem;
  border-radius: 10px;
  border: 1.5px solid #b5c2dc99;
  background: #fff;
  color: #192a3a;
  box-shadow: 0 2px 7px #60aaff16;
  outline: none;
  transition: border 0.18s;
}
.search-section input:focus {
  border: 2.2px solid var(--azul-claro);
}
body.dark .search-section input {
  background: var(--fundo-modal-dark);
  color: var(--txt-dark);
  border: 1.3px solid #314e7a;
}
.main-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.main-actions button {
  background: var(--verde);
  color: #fff;
  font-size: 1.17rem;
  padding: 13px 42px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 2px 12px #41edce25;
  transition: background 0.13s, transform 0.15s;
}
.main-actions button:hover {
  background: #1ea86d;
  transform: scale(1.04);
}
#resultados {
  margin: 34px auto 20px auto;
  width: 95vw;
  max-width: 980px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 20px #8924c319;
  padding: 24px;
  animation: fadeIn .45s;
}
body.dark #resultados {
  background: var(--fundo-modal-dark);
  color: var(--txt-dark);
}
#listaColaboradoras {
  list-style: none;
  padding-left: 0;
}
#listaColaboradoras li {
  border-bottom: 1.2px solid #e1e4ed66;
  padding: 17px 0;
}
body.dark #listaColaboradoras li {
  border-bottom: 1.2px solid #404e79;
}
#listaColaboradoras strong {
  font-size: 1.11rem;
  margin-bottom: 2px;
}
#listaColaboradoras a {
  color: #18ad87;
  text-decoration: underline;
  font-weight: 600;
}
body.dark #listaColaboradoras a {
  color: var(--verde);
}

/* MODAIS ANIMADOS ---------------------------- */
#modal-overlay {
  display:none;
  position: fixed;
  z-index: 50;
  left:0; top:0; width:100vw; height:100vh;
  background: rgba(18,28,41,0.19);
  transition: opacity 0.28s;
  opacity: 0;
}
#modal-overlay.active {
  display:block;
  opacity: 1;
}
.modal {
  display: none;
  position: fixed;
  z-index: 120;
  left:0;top:0;width:100vw;height:100vh;
  overflow:auto;
  padding-top:90px;
  opacity:0;
  pointer-events:none;
  transition: opacity 0.33s cubic-bezier(.3,.58,.41,1.21);
}
.modal.active { 
  display:block;
  opacity: 1;
  pointer-events: all;
  animation: modalIn .51s cubic-bezier(.23,1.36,.65,.81);
}
@keyframes modalIn {
  from { opacity:0; transform: translateY(34px) scale(.97);}
  to { opacity:1; transform: none; }
}

.modal-content {
  background: var(--fundo-modal);
  margin: auto;
  padding: 30px 32px 21px 32px;
  border: 1.5px solid #eaf2fc;
  width: 97vw; max-width: 430px;
  border-radius: 14px;
  position: relative;
  box-shadow: 0 0.9px 40px #1a50b52b;
  text-align: center;
  min-width: 250px;
  animation: contentPop .43s cubic-bezier(.61,1.51,.39,1);
}
@keyframes contentPop {
  from { opacity:0;transform: translateY(38px) scale(.97);}
  to { opacity: 1; transform: none; }
}
body.dark .modal-content {
  background: var(--fundo-modal-dark);
  color: var(--txt-dark);
  border-color: var(--borda-modal-dark);
}
.modal-content input,
.modal-content button {
  width: 88%;
  margin: 13px 0;
  padding: 12px 9px;
  border-radius: 10px;
  border: 1.3px solid #c3d8f1;
  font-size: 1.05rem;
  box-shadow: 0 1px 3px #97afca17;
  background: #fafdff;
  transition: background 0.2s, color 0.13s;
}
body.dark .modal-content input,
body.dark .modal-content button {
  background: #222846;
  color: var(--txt-dark);
  border: 1.3px solid #445f91;
}
.modal-content button {
  background: var(--azul);
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  margin-top: 12px;
  cursor: pointer;
  transition: background 0.17s, box-shadow 0.12s;
}
.modal-content button:hover {
  background: var(--azul-claro);
  box-shadow: 0 3px 27px #468bc41b;
}
.close {
  color: #4d6371;
  position: absolute;
  right: 13px;
  top: 11px;
  font-size: 2.15rem;
  font-weight: 600;
  opacity: 0.22;
  cursor: pointer;
  display: inline-block;
  transition: opacity 0.13s, color 0.17s;
}
.close:hover { opacity: 1;color: var(--azul-claro);}
.modal-content h2 {
  font-weight: 700;
  color: var(--azul);
  margin-bottom: 8px; margin-top:3px;
}
body.dark .modal-content h2 { color: var(--verde); }
.modal-login {
  background: linear-gradient(125deg, #f3f8fe 78%, #a7cdf9 100%);
  border: 1.5px solid #cbe6fd;
}
body.dark .modal-login {
  background: linear-gradient(156deg, #20222b 73%, #2b364a 100%);
}

/* MOBILE/SMALL */
@media (max-width: 650px) {
  #map { height: 170px; }
  .main-actions button, .modal-content button { font-size: 1rem; padding: 10px 6px;}
  .header-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .logo { font-size: 1.27rem;}
  .modal-content {padding: 13px 2vw; min-width: 0;}
}