*,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

#fancybox__backdrop {
  background-color: #ffffff00 !important;
}

a:has(img) {
  width: 100% !important;
  border: 0;
}

a > img {
  margin-top: 30px;
  margin-bottom: 30px;
}

#tab-contenido {
  height: 100%;
  background: #ffffff00 !important;
  margin-top: 40px;
  margin-bottom: 40px;
}

#tab-contenido div {
  height: 100%;
  background: #ffffff00 !important;
  border: 0;
}

p {
  font-family: "century gothic" !important;
  line-height: 1.4 !important;
  text-align: justify !important;
}

#cesiumContainer {
  height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
#cesiumContainer canvas {
  pointer-events: auto !important;
}

#cesium-tooltip {
  position: absolute;
  display: none;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none; /* Esto es correcto para el tooltip */
  z-index: 9999;
}
#cesium-tooltip {
  position: absolute;
  display: none;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 13px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 9999;
}

.cesium-buttom {
  background: #ffffff00 !important;
  border: 0;
  border-radius: 4px;
}
.cesium-geocoder-input {
  background-color: #ffffff00 !important;
  border: 0 !important;
  border-radius: 6px !important;
}

.cesium-geocoder-input:focus {
  border: 1px solid #ffffff50 !important;
}

/* Fondo claro para los botones */
.cesium-toolbar-button {
  background-color: #ffffff00 !important;
  border-color: transparent !important;
}

.cesium-geocoder-searchButton,
.cesium-geocoder .cesium-geocoder-searchButton,
.cesium-geocoder .cesium-geocoder-search-button {
  background-color: #ffffff00 !important;
  border-color: transparent !important;
}
.cesium-geocoder-searchButton:hover,
.cesium-geocoder .cesium-geocoder-searchButton:hover,
.cesium-geocoder .cesium-geocoder-search-button:hover {
  /*background-color: #11a6a6 !important;*/
  border-color: transparent !important;
}

/* Ocultar botón Columbus por título (EN/ES) */
.cesium-sceneModePicker-wrapper button[title="Columbus View"],
.cesium-sceneModePicker-wrapper button[title="Vista de Columbus"] {
  display: none !important;
}

.cesium-credit-logoContainer img {
  margin: 0 !important;
}

/* Contenedor de buscador */
#buscador-local-container {
  position: fixed;
  top: 10px;
  right: 160px;
  width: 20vw;
  height: 30px;
  z-index: 1000;
  font-family: sans-serif;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Input */
#buscador-local {
  padding: 8px 12px;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  border: none;
  font-size: 14px;
  outline: none;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
}

/* Input */
#buscador-local::placeholder {
  color: white;
  opacity: 50%;
}

/* Dropdown resultados */
.search-results {
  color: black;
  padding: 0;
  margin-top: 2px;
  list-style: none;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 4px 30px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

.search-results::-webkit-scrollbar {
  width: 8px;
}

.search-results::-webkit-scrollbar-track {
  background: transparent;
}

.search-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  transition: background 0.3s ease;
}

.search-results::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Cada resultado */
.search-results li {
  cursor: pointer;
  color: white;
  padding: 5px 10px 5px 10px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Hover */
.search-results li:hover {
  background-color: rgba(255, 255, 255, 0.5);
  color: #4b4b4b;
}

/* Panel lateral */
.side-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 325px;
  background: transparent;
  box-sizing: border-box;

  transition: transform 0.3s ease;
  z-index: 100;
  transform: translateX(-325px); /* Solo el botón se ve */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Mostrar el panel completamente */
.side-panel.visible {
  transform: translateX(0);
}
.side-panel-content {
  background: transparent;
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.side-panel h3 {
  text-transform: uppercase;
  color: white;
  background-color: transparent;
  padding: 0.5rem 1rem;
  border-top-right-radius: 6px;
  text-align: center;
}

/* Contenido del panel (scroll si necesario) */
.layer-group {
  margin-bottom: 12px;
  position: relative;
}
.layer-group-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: #0f172a;
}

.layer-group .dropdown-checkbox {
  opacity: 0;
}

.layer-group-title::after {
  content: "";
  width: 30px;
  height: 30px;
  background-image: url(../img/dropdown.svg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  position: absolute;
  display: block;
  right: 10px;
  top: -5px;
  transform-origin: center;
  transform: rotate(180deg);
}

.layer-group .dropdown-checkbox:checked ~ .layer-group-title::after {
  right: 26px;
  transform: rotate(0deg);
}

.layer-group .dropdown-checkbox:checked ~ ul {
  max-height: fit-content;
  opacity: 1;
  transform: translateY(0);
}

.layer-group ul {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  margin-top: 5px;
  padding-left: 18px;
  transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateY(-10px);
}
.layer-group li {
  margin-bottom: 5px;
}

.layers-flat {
  position: relative;
}

.layers-flat li {
  padding-left: 10px;
}

.panel-content {
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  color: white;
}

#layersContainer {
  padding: 1.25rem 1rem;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 0px 0px 8px 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);

  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
}

/* personalizar el diseño del scrollbar */

#layersContainer::-webkit-scrollbar {
  width: 8px;
}

#layersContainer::-webkit-scrollbar-track {
  background: transparent;
}

#layersContainer::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  transition: background 0.3s ease;
}

#layersContainer::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

#layersContainer li {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  color: #444;
  font-size: 0.9rem;
  width: 96%;
}
#layersContainer label {
  flex-grow: 1;
}

#layersContainer .magnificador {
  position: relative;
  top: 8px;
  right: 2px;
  cursor: pointer;
}

#layersContainer ul li input[type="checkbox"] {
  accent-color: #0f7ae4;
  transform: scale(1.4);
  margin-right: 5px;
  opacity: 0;
}

#layersContainer ul li label::before {
  content: "";
  width: 30px;
  height: 15px;
  left: 7px;
  background-color: rgba(255, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: absolute;
  border-radius: 50px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: ease 0.3s;
  cursor: pointer;
}

#layersContainer ul li label::after {
  content: "";
  width: 13px;
  height: 13px;
  left: 7px;
  transform: translate(1px, 1px);
  background-color: #ffffff;
  border: 1px solid gray;
  position: absolute;
  border-radius: 50px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: ease-in-out 0.3s;
  cursor: pointer;
}

#layersContainer input[type="checkbox"]:checked + label::before {
  background-color: rgba(0, 255, 0, 0.4); /* track color when checked */
}

#layersContainer input[type="checkbox"]:checked + label::after {
  transform: translate(16px, 1px); /* move the circle to the right */
}

/* ============================
   SWITCH ALINEADO Y ESTABLE
============================ */

/* 1) El <li> define la estructura */
#layersContainer ul li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 2) El input NO debe ocupar espacio */
#layersContainer ul li input[type="checkbox"] {
  position: absolute; /* saca el input del flujo */
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* 3) El label ocupa el espacio del texto */
#layersContainer ul li label {
  position: relative;
  flex: 1;
  padding-left: 40px; /* espacio donde irá el interruptor */
  line-height: 1.3em;
}

/* 4) Interruptor: fondo */
#layersContainer ul li label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 16px;
  transform: translateY(-50%);
  background-color: rgba(255, 0, 0, 0.4);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease;
}

/* 5) Interruptor: bola */
#layersContainer ul li label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid gray;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

/* 6) Estado activo */
#layersContainer ul li input[type="checkbox"]:checked + label::before {
  background-color: rgba(0, 255, 0, 0.4);
}

#layersContainer ul li input[type="checkbox"]:checked + label::after {
  transform: translate(16px, -50%);
}

/* 7) Alineación de icono lupa */
#layersContainer ul li .magnificador {
  position: relative;
  top: 0;
}

/* Alinear LI con los títulos .layer-group-title 
#layersContainer ul {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

#layersContainer ul li {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.layers-flat li {
    padding-left: 0 !important;
}
*/

/* Sección de capas u otros elementos */
#layerCheckboxes label {
  display: block;
  margin-bottom: 8px;
}

/* Botón vertical pegado al borde derecho del panel */
.toggle-button {
  position: absolute;
  top: 50%;
  left: 324px; /* igual al ancho del panel */
  transform: translateY(-50%);
  background-color: rgb(255, 255, 255);
  color: #b8e0ff;
  padding: 8px;
  font-size: 14px;
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  border-radius: 0 10px 10px 0;
  z-index: 101;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-left: none;
}

.toggle-button-icon {
  height: 20px;
  transition: all 0.3s;
}
.toggle-button.visible .toggle-button-icon {
  transform: rotate(180deg);
  transition: all 0.3s;
}

.toggle-button-icon path {
  fill: black;
}
.pdf-embed {
  flex: 1 1 30%; /* Que tome un 30% del ancho y sea flexible */
  min-width: 300px;
  max-width: 400px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pdf-embed embed {
  flex-grow: 1;
  width: 100% !important;
  height: 600px !important;
}
#trackingControlls {
  width: 200px;
  height: 50px;
  color: black;
  padding: 5px 10px 5px 10px;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 50px;
  position: fixed;
  bottom: 50px;
  right: 50px;
}
#trackingControlls div{
filter: 
  drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.09))
  drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.09))
  drop-shadow(0px 8px 4px rgba(0, 0, 0, 0.09))
  drop-shadow(0px 16px 8px rgba(0, 0, 0, 0.09))
  drop-shadow(0px 32px 16px rgba(0, 0, 0, 0.09));
}

#trackingControlls:first-child,
#trackingControlls:last-child {
  width: 20px;
  height: 20px;
  background-color: black;
}
.stopbtn, .closebtn{
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  
}

.playbtn,.pausebtn{
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.tracker {
  cursor: pointer;
}

/* Responsive: ocultar texto en tabs en móvil */
@media (max-width: 768px) {
  .tab-text {
    display: none !important;
    background: red !important; /* Refuerzo visual */
  }
}