/* #####################################################################
# style.css  –  versão completa (atualizada)
######################################################################## */
body,html{height:100%;margin:0;font-family:Arial,sans-serif;display:flex;flex-direction:column;}
h1{width:100%;text-align:center;color:#333;padding:15px 0;font-size:28px;background:transparent;margin:0;position:relative;z-index:10;}
#container{position:relative;display:flex;flex-grow:1;width:100%;height:calc(100vh - 50px);}
.menu-button{position:absolute;top:10px;left:10px;background:#333;color:#fff;border:none;padding:8px 12px;cursor:pointer;font-size:18px;border-radius:5px;z-index:100;}
.menu-button:hover{background:#444;}
#menu-vertical{width:250px;background:#333;color:#fff;padding:20px;box-sizing:border-box;height:100%;transition:transform .3s ease;}
#menu-vertical.collapsed{transform:translateX(-250px);position:absolute;}
.menu-content h3{margin-bottom:10px;font-size:16px;}
#menu-vertical a{text-decoration:none;color:#fff;padding:8px 12px;display:block;margin-bottom:5px;border-radius:4px;font-size:14px;}
#menu-vertical a:hover{background:#575757;}
#map{flex-grow:1;width:100%;height:100%;border:1px solid #ccc;}
#coords{position:absolute;left:10px;bottom:92px;background:rgba(255,255,255,.8);padding:5px 8px;border-radius:4px;font-size:14px;color:#333;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.region-info{position:absolute;background:rgba(255,255,255,.8);padding:4px 8px;border:1px solid #666;border-radius:4px;font-size:13px;color:#000;z-index:1100;pointer-events:none;white-space:nowrap;display:none;}
/* ---- barra de busca ---- */
/* ---- grupo fixo do canto superior direito: busca + alertas ---- */
.top-right-tools{position:absolute;top:10px;right:10px;width:276px;max-width:calc(100% - 20px);display:flex;flex-direction:column;align-items:stretch;gap:8px;z-index:1200;box-sizing:border-box;}
.search-bar{position:relative;display:flex;align-items:center;width:100%;box-sizing:border-box;background:rgba(255,255,255,.95);border:1px solid #ccc;border-radius:4px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.15);}
.search-bar input{flex:1;min-width:0;border:none;outline:none;padding:6px 8px;font-size:14px;width:auto;background:transparent;}
.search-btn{flex:0 0 auto;background:transparent;border:none;cursor:pointer;padding:6px 10px;display:flex;align-items:center;}
.search-btn svg{pointer-events:none;}
#popup{position:absolute;background:#fff;padding:10px;border:1px solid #ccc;border-radius:4px;display:none;z-index:1000;box-shadow:0 2px 8px rgba(0,0,0,.2);}
.close-popup-button{position:absolute;top:5px;right:5px;background:transparent;border:none;font-size:18px;cursor:pointer;color:#666;}
.color-option{padding:8px;cursor:pointer;color:#fff;text-align:center;margin-bottom:5px;font-weight:bold;border-radius:3px;}
#remover_cor{background:#fff;color:#000;border:1px solid #000;}
#legend{position:absolute;left:15%;bottom:20%;width:120px;height:110px;background:#fff;padding:10px;border-radius:4px;z-index:1000;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:move;}
#legend h3{margin:0 0 5px;}
#legend ul{list-style:none;padding:0;margin:0;}
#legend li{display:flex;align-items:center;margin-bottom:5px;}
.legend-color{display:inline-block;width:20px;height:20px;margin-right:8px;border:1px solid #000;}

.alert-box{position:relative;width:100%;height:150px;box-sizing:border-box;background:#fff;border:1px solid #ccc;border-radius:4px;z-index:1000;padding:10px;box-shadow:0 2px 8px rgba(0,0,0,.2);overflow-y:auto;}
.alert-box h3{margin:0 0 10px;font-size:16px;}
@media screen and (max-width:768px){
  #menu-vertical{width:200px;}
  #menu-vertical.collapsed{transform:translateX(-200px);}
  .menu-button{font-size:16px;padding:6px 10px;}
  .top-right-tools{width:206px;}
  .search-bar input{width:auto;}
}
/* ===== Controles responsivos de exportação ===== */
.export-controls{
  position:absolute;
  left:50%;
  bottom:max(10px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:1250;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:8px;
  width:max-content;
  max-width:calc(100% - 20px);
  box-sizing:border-box;
  pointer-events:none;
}
.export-controls > *{pointer-events:auto;}
#export-panel,
#export-zoom-container{
  position:static;
  transform:none;
  box-sizing:border-box;
  background:rgba(255,255,255,.94);
  border:1px solid #ccc;
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.16);
}
#export-panel{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px;
  text-align:center;
}
#export-panel button{
  min-height:34px;
  margin:0;
  white-space:nowrap;
}
#export-zoom-container{
  min-width:340px;
  padding:7px 10px 8px;
}
.export-zoom-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:5px;
}
#export-zoom-container label,
#export-zoom-container output,
#export-zoom-container span{
  font-size:13px;
  color:#333;
}
#export-zoom-container label{font-weight:600;}
#export-zoom-value{
  min-width:46px;
  text-align:right;
  font-weight:700;
}
.export-zoom-slider-row{
  display:grid;
  grid-template-columns:32px auto minmax(130px,1fr) auto 32px auto;
  align-items:center;
  gap:6px;
}
#export-zoom{
  width:100%;
  min-width:130px;
  margin:0;
  touch-action:pan-x;
  accent-color:#333;
}
.export-zoom-step,
#export-zoom-reset{
  min-height:32px;
  border:1px solid #aaa;
  border-radius:4px;
  background:#fff;
  color:#222;
  cursor:pointer;
}
.export-zoom-step{
  width:32px;
  padding:0;
  font-size:20px;
  line-height:1;
}
#export-zoom-reset{
  padding:5px 8px;
  font-size:12px;
}
.export-zoom-step:hover,
#export-zoom-reset:hover{background:#f3f3f3;}
.export-zoom-step:focus-visible,
#export-zoom-reset:focus-visible,
#export-zoom:focus-visible,
#export-panel button:focus-visible{
  outline:2px solid #1f6fb2;
  outline-offset:2px;
}

@media screen and (max-width:980px){
  .export-controls{
    width:min(560px, calc(100% - 16px));
    flex-direction:column;
    gap:6px;
  }
  #export-panel,
  #export-zoom-container{width:100%;}
  #export-zoom-container{min-width:0;}
  #coords{bottom:150px;}
}

@media screen and (max-width:520px){
  .export-controls{
    left:8px;
    right:8px;
    width:auto;
    max-width:none;
    transform:none;
    bottom:max(6px, env(safe-area-inset-bottom));
  }
  #export-panel{padding:7px;gap:6px;}
  #export-panel button{
    flex:1 1 calc(50% - 6px);
    min-width:0;
    min-height:40px;
    white-space:normal;
  }
  #export-zoom-container{padding:7px 8px 8px;}
  .export-zoom-slider-row{
    grid-template-columns:38px auto minmax(88px,1fr) auto 38px;
  }
  #export-zoom-reset{
    grid-column:1 / -1;
    width:100%;
    min-height:34px;
  }
  .export-zoom-step{width:38px;min-height:38px;}
  #export-zoom{min-width:88px;}
  #coords{bottom:196px;max-width:calc(100% - 20px);font-size:12px;}
}

/* ===== Cabeçalho com logo (index) ===== */
/* Agora o cabeçalho é um grid: [esquerda(menu+logo)] [centro(título)] [direita(vazio)] */
.app-header{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  position:relative;
  z-index:10;
}

/* Bloco da esquerda: botão de menu + logo lado a lado */
.app-header .left{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Título principal e data válida ficam agrupados e centralizados. */
.app-header-title-block{
  grid-column:2;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  justify-self:center;
  text-align:center;
  font-family:Arial,sans-serif;
}

.app-header h1{
  margin:0;
  padding:0;
  font-size:28px;
  color:#333;
  background:transparent;
  width:auto;
  text-align:center;
}

.forecast-date-screen-title{
  min-height:20px;
  margin:0;
  color:#333;
  font-family:inherit;
  font-size:17px;
  font-weight:600;
  line-height:1.2;
  text-align:center;
}

/* tamanho do logo no cabeçalho */
.app-logo{
  width:60px;
  height:60px;
  display:block;
}

/* O botão no cabeçalho entra no fluxo (não absoluto) */
.app-header .menu-button{
  position:static;
  z-index:auto;
}

/* Em telas pequenas, ajusta tamanhos */
@media screen and (max-width:768px){
  .app-logo{ width:52px; height:52px; }
  .app-header h1{ font-size:24px; }
  .forecast-date-screen-title{ font-size:15px; }
}

/* Login: tamanho do logo e espaço com o título */
.brand img{
  width: 72px;       /* ou o tamanho que preferir */
  height: 72px;
  display: block;    /* evita espaçamento/baseline estranho */
}
.brand{ gap: 14px; } /* opcional: espaço entre logo e título */

/* ===== Seletor da Data da Previsão ===== */
.forecast-date-panel[hidden]{display:none!important;}
.forecast-date-panel{
  position:fixed;
  width:286px;
  max-width:calc(100vw - 24px);
  box-sizing:border-box;
  padding:12px;
  background:#fff;
  color:#222;
  border:1px solid #b8b8b8;
  border-radius:6px;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  z-index:1800;
}
.forecast-date-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:-2px 0 12px;
  font-size:16px;
}
.forecast-date-close{
  appearance:none;
  border:0;
  background:transparent;
  color:#555;
  cursor:pointer;
  font-size:24px;
  line-height:1;
  padding:0 2px;
}
.forecast-date-panel label{
  display:block;
  margin-bottom:6px;
  font-size:13px;
  font-weight:bold;
}
.forecast-date-panel input[type="date"]{
  width:100%;
  box-sizing:border-box;
  padding:8px 9px;
  border:1px solid #aaa;
  border-radius:4px;
  background:#fff;
  color:#222;
  font:14px Arial,sans-serif;
}
.forecast-date-current{
  min-height:32px;
  margin-top:8px;
  color:#555;
  font-size:12px;
  line-height:1.35;
}
.forecast-date-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:10px;
}
.forecast-date-actions button{
  border:1px solid #999;
  border-radius:4px;
  padding:7px 10px;
  cursor:pointer;
  background:#f4f4f4;
  color:#222;
  font-size:13px;
}
#forecast-date-apply{
  border-color:#1f6fb2;
  background:#1f6fb2;
  color:#fff;
}
.forecast-date-actions button:hover,
.forecast-date-close:hover{filter:brightness(.95);}
#definir-data.date-defined::after{
  content:" •";
  color:#7ed957;
  font-weight:bold;
}