body {
    background: #f4f4f2;
}

h1.mapa-titulo {
  font-size: 33px;
  font-family: 'Reckless', Georgia, sans-serif;
  text-align: center;
  color: #3a3e38;
  letter-spacing: 2px;
  margin-top: 40px;
  text-transform: uppercase;
  font-weight: 100;
}

p.mapa-descricao {
  font-style: italic;
  letter-spacing: 0;
  text-align: center;
  font-size: 19px;
  display: block;
  color: #a3a3a3;
}

.mapa-container {
   position: relative;
   overflow: hidden;
   background: #ffffff;
   touch-action: none;
   border-radius: 15px;
   margin: 20px;
 }

 .tooltip {
   position: absolute;
   background: rgba(0, 0, 0, 0.8);
   color: white;
   padding: 5px 10px;
   font-size: 14px;
   border-radius: 4px;
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
 }

 .mapa svg {
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   max-width: 100%;
   padding: 23px 10px;
 }

 .mapa svg path {
    fill: #d3c7b6;
    stroke: #f4f4f2;
    stroke-width: 1.5px;
    cursor: pointer;
 }

 .mapa svg path:hover {
   fill: #700;
   transition: 0.6s;

 }


/*************  [ Países restritos ]  *************/
.mapa .afeganistao, .mapa .arabia-saudita, .mapa .argelia, .mapa .azerbaijao, .mapa .bangladesh, .mapa .bahrein, .mapa .brunei, .mapa .burkinafaso, .mapa .butao, .mapa .camaroes, .mapa .cazaquistao, .mapa .china, .mapa .comores, .mapa .coreiadonorte, .mapa .cuba, .mapa .egito, .mapa .emiradosarabesunidos, .mapa .eritreia, .mapa .iemen, .mapa .ira, .mapa .iraque, .mapa .jordania, .mapa .kuwait, .mapa .laos, .mapa .libia, .mapa .malasia, .mapa .maldivas, .mapa .marrocos, .mapa .mauritania, .mapa .myanmar, .mapa .oma, .mapa .paquistao, .mapa .catar, .mapa .quirguistao, .mapa .siria, .mapa .somalia, .mapa .sudao, .mapa .tajiquistao, .mapa .tunisia, .mapa .turquemenistao, .mapa .turquia, .mapa .uzbequistao, .mapa .vietna { 
	fill: #8c382b; 
}


/*************  [ Países hostis ]  *************/
.mapa .colombia, .mapa .etiopia, .mapa .filipinas-mindanau, .mapa .india, .mapa .indonesia, .mapa .israel, .mapa .cisjordania, .mapa .palestina, .mapa .jibuti, .mapa .libano, .mapa .mali, .mapa .nepal, .mapa .nigeria, .mapa .quenia, .mapa .republica-centro-africana, .mapa .sri-lanka, .mapa .sul-do-mexico, .mapa .tanzania, .mapa .uganda { 
	fill: #636f5d; 
}

/*************  [ Países em alerta ]  *************/
 .mapa .ucrania, .mapa .russia, .mapa .israel, .mapa .palestina, .mapa .venezuela {
   fill: #a17853;
 }



/* Legenda SVG */

.mapa-legenda {
  position: absolute;
  top: 50%; 
  left: 15px; 
  gap: 15px;
  transform: translateY(-50%); 
  background: #f4f4f2;
  border-radius: 8px;
  padding: 15px 20px;
  font-size: 14px;
  color: #333;
  font-family: Rmneue, Arial, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.legenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legenda-item .cor {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid #bbb;
  flex-shrink: 0;
}

/* Cores específicas */
.legenda-item .hostil {
  background-color: #636f5d;
}

.legenda-item .restrito {
  background-color: #8c382b;
}
    
    .legenda-item .em-alerta {
    background-color: #a17853}

/* Responsividade */
@media (max-width: 600px) {
  .mapa-legenda {
    position: static;
    transform: none;
    padding: 6px 10px;
    font-size: 11px;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 8px 0;
  }
}

/* FIm legenda SVG */

   /* Container principal */
    .accordion-container {
      max-width: 100%;
      margin: 40px 20px;
      background: #fff;
      border-radius: 15px;
      padding: 24px;
      font-family: 'Lora', sans-serif;
    }

    /* Tabs */
    .accordion-tabs {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 16px;
      border-bottom: 2px solid #ddd;
    }

    @media (min-width: 600px) {
      .accordion-tabs {
        flex-direction: row;
      }
    }

	  .continent-buttons {
      margin-bottom: 1rem;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      }

	.continent-buttons p {
	font-family: 'Fira Sans', sans-serif;
    font-size: 17px;
	font-weight: 500;
	}
      .continent-btn {
    background-color: transparent;
    color: #000000;
    border: none;
    border-bottom: 1px dotted;
    cursor: pointer;
    font-family: 'Lora', sans-serif;
    font-size: 17px;
      }
      .continent-btn:hover {
      opacity: 0.7;
      }
      .continent-content {
      display: none;
      }

    .accordion-tab-btn {
    padding: 10px 16px;
    font-size: 1.1rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: bold;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
    }

    .accordion-tab-btn.active {
      border-bottom: 3px solid #485240;
      background-color: #b8b8b842;
    }

    .accordion-tab-btn:hover {
      background-color: #f5f5f5;
    }

    /* Busca */
    .accordion-search {
      width: 98%;
      padding: 10px;
      border: 1px solid #ccc;
      margin-bottom: 20px;
      border-radius: 6px;
      font-size: 16px;
    }

    /* Conteúdo */
    .accordion-content {
      display: none;
    }

    .accordion-content.active {
      display: block;
    }

    /* Grid de países */
    .accordion-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    @media (min-width: 600px) {
      .accordion-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 900px) {
      .accordion-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .accordion-link {
    color: #485240;
    font-family: 'Lora', sans-serif;
    font-size: calc(1.19375rem + .25vw);
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.6em;
    text-decoration: none;
    }

    .accordion-link:hover {
      text-decoration: underline;
    }

    /* Subtítulos por continente */
    .accordion-subtitle {
    font-size: 1.1rem;
    margin: 24px 0 8px;
    text-align: center;
    background: #eff1ee;
    color: #485240;
    text-transform: uppercase;
    font-weight: 600;
    font-family: sans-serif;
    letter-spacing: 2px;
    }

  .mapa-desc {
  	font-style: italic; 
    letter-spacing: 0; 
    font-size: 19px; 
    display: block; 
    color: #a3a3a3; 
    margin-top: -10px;
  }
  
/* Estilo moderno e redondo da paginação */
.pagination-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  margin: 0 4px;
  background-color: #f3f4f6; /* cinza claro */
  color: #374151; /* cinza escuro */
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.pagination-btn:hover:not(:disabled) {
  opacity: 0.8; /* cinza mais escuro no hover */
}

.pagination-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.pagination-btn.active {
  background-color: #726b58;
  color: white;
  font-weight: bold;
  transform: scale(1.1);
}


    @media (max-width: 600px) {
      .accordion-subtitle {
        text-align: center;
        font-size: 1rem;
        margin-top: 16px;
      }
    }

 

 @media only screen and (min-width: 360px) {
   .mapa svg {
     max-width: 100%;	
   }
 }

@media only screen and (max-width: 600px) {
  .mapa svg {
    max-width: 100%;
    transform: none;
  }
  .mapa-container {
    border: none;
    overflow: hidden;
  }
}


 @media only screen and (min-width: 768px) {

   .mapa svg {
     max-width: 100%;
   }
 }


 @media only screen and (min-width: 992px) {
   .mapa svg {
     max-width: 95%;
   }
 }

 /* ===== Zoom controls ===== */
.mapa-zoom-controls {
  position: absolute;
  left: 16px;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
}

.mapa-zoom-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 30px;
  background: #f4f4f2;
  color: #3a3e38;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  line-height: 1;
}

.mapa-zoom-btn:hover {
  opacity: 0.8;
}

@media (max-width: 600px) {
  .mapa-zoom-controls {
    right: 10px;
    bottom: 10px;
  }

  .mapa-zoom-btn {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }
}