* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

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

#desplegable {
    gap: 1rem;
    flex-direction: column;
    display: flex;
    position: absolute;
    top: 4rem;
    margin: 1rem;
    width: 40rem;
    height: 82%;
    z-index: 9999;
    font-size: 1rem;
}

#filtros {
    border: var(--border);
    background: rgba(48, 48, 52, .7);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 32px 16px, rgba(0, 0, 0, 0.1) 0px 16px 8px, rgba(0, 0, 0, 0.1) 0px 8px 4px, rgba(0, 0, 0, 0.1) 0px 4px 2px, rgba(0, 0, 0, 0.1) 0px 2px 1px;
    
    padding: 0.5rem;
    gap: 0.5rem;
    
    position: relative;
    border-radius: 16px;
    transition: all 0.3s ease;
    overflow: hidden;
    
    display: none;
    flex-direction: row;
}

#filtros .boton {
    cursor: pointer;
    width: 100%;
    border: var(--border);
    background: transparent;
    padding: 0.5rem;
    border-radius: 16px;
    color: white;
    font-size: 1rem;
}

#filtros .boton:hover {
    background-color: rgba(255, 255, 255, 1);
    color: black;
}

#info {
    border: var(--border);
    background: rgba(48, 48, 52, .7);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 32px 16px, rgba(0, 0, 0, 0.1) 0px 16px 8px, rgba(0, 0, 0, 0.1) 0px 8px 4px, rgba(0, 0, 0, 0.1) 0px 4px 2px, rgba(0, 0, 0, 0.1) 0px 2px 1px;

    z-index: 9999;
    padding: 1rem;
    overflow-y: scroll;
    pointer-events: auto; /* Permite la interacción con el texto */
    height: 100%;
    
    position: relative;
    text-decoration: none;
    border-radius: 16px;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#info::-webkit-scrollbar {
  width: 12px;
}

#info::-webkit-scrollbar-track {
    border-radius: 0 16px 16px 0;
    background: #5a5a5a;
}

#info::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
}


.poligono {
    border-left: solid 6px red;
    padding: 0.5rem;
    border-radius: 10px;
    background: var(--background_div);
    color: var(--color_p);
    
    /* Evita que el texto se desborde */
    overflow-wrap: break-word; 
    word-wrap: break-word; 
    word-break: break-word; 
    white-space: normal; 
}

.poligono:hover {
    color: black !important;
    background: #f2dada;
}

.titulo {
    margin-top: 0.5rem !important;
}

#info font {
    font-weight: bold;
    color: red !important;
}

#info hr {
    border: solid grey 1px;
    margin: 0.5rem 0 1rem 0;
}

#info a {
    color: #0072d0 !important;
}

#map_coordenadas {
    border: var(--border);
    background: rgba(48, 48, 52, .7);
    backdrop-filter: blur(50px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 32px 16px, rgba(0, 0, 0, 0.1) 0px 16px 8px, rgba(0, 0, 0, 0.1) 0px 8px 4px, rgba(0, 0, 0, 0.1) 0px 4px 2px, rgba(0, 0, 0, 0.1) 0px 2px 1px;
    
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 9999;
    padding: 0.5rem;
    font-size: 1rem;
    
    text-decoration: none;
    border-radius: 16px;
    color: white;
    overflow: hidden;
}

/* CIRCULITO DE CARGA */

/* Spinner para el div #info */
#info .spinner {
    margin: 20px auto;
    border: 6px solid #f3f3f3; /* Gris claro */
    border-top: 6px solid orange; /* Azul */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* PUBLICACIONES */
.info_post {
    text-decoration: none;
    overflow: clip;
    border-radius: 10px;
    background: var(--background_div);
    width: 100%;
    position: relative;
}

.info_post::after {
    z-index:  9999;
  content: "";
  position: absolute;
  inset: 0; /* ocupa todo el contenedor */
  border-radius: 10px;
  padding: 3px; /* grosor del borde difuminado */
  
  /* borde difuminado estilo gradiente gris */
  background: grey;
  -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none; /* para no interferir con clicks */
  box-sizing: border-box;
}

.info_post:hover {
    color: black !important;
    background: #f2dada;
}

.texto_post {
    border-top: solid grey 3px;
    position: relative;
    gap: 1rem;
    display: flex;
    flex-direction: row;
    color: var(--color_p);
    padding: 4rem 1rem 1rem 1rem;
}

.imagen_post {
    width: 100%;
    object-fit: cover;
}

.avatar_usuario {
    top: -3rem;
    position: absolute;
    width: 6rem;
    height: 6rem;
    border: solid grey 3px;
    border-radius: 999px;
}

/* RESPONSIVE */
@media (max-width: 800px) {
    
    #desplegable {
        bottom: 0;
        top: unset;
        width: -webkit-fill-available;
        height: 40%;
    }
    
    #map_coordenadas {
        display: none;
    }

}