/* Sección de iconos de contacto */
.button-container {
    display: flex;
    justify-content: space-between;
}

/* Imagen principal de perfil */
.default-profile-picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
}

.default-profile-picture i {
    font-size: 48px;
    color: #999;
}

.profile-image {
    display: none;
}

.camera-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    padding: 5px;
    color: #fff;
}

.camera-icon i {
    font-size: 24px;
}

/* Style the file input to be hidden */
input[type="file"] {
    display: none;
}


.edit-profile-button,
.add-location-button {
    background-color: rgb(168, 68, 168);
    color: white;
    border: #772377 3px solid;
    border-radius: 30px;
    padding: 10px;
    margin-top: 20px;
    text-align: center;
    cursor: pointer;
    outline: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.edit-profile-button {
    width: 100%;
    height: 50px;
    font-size: 20px;
}

;



.icon {
    margin-right: 5px;
    /* Add a minimum separation between the icon and the tag name */
}

.user-description {
    display: flex;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    margin-top: 7px;
    margin-bottom: 0px;
    font-size: 15px;
    line-height: 1.5;
}

.user-description:not(.editable) {
    cursor: default;
}


.user-icons {
    display: flex;
    /* Use flexbox */
    justify-content: space-evenly;
    /* Distribute items evenly along the main axis */
    align-items: center;
    /* Align items vertically */
    margin-top: 5px;
    /* Add some top margin */
}

.instruction {
    display: flex;
    align-items: center;
    /* Align items vertically */
}

.instruction .material-icons {
    margin-right: 5px;
    /* Adjust spacing between icon and text */
}

.instagram-crop iframe {
    position: absolute !important;
    top: -65px !important; /* Desplaza el header hacia arriba */
    left: -21.25% !important; /* Ajuste finísimo para centrar */
    width: 142.5% !important; /* El toque final solicitado */
    height: 165% !important; 
    transform: none !important;
    pointer-events: auto;
}

.video-container.instagram-crop {
    aspect-ratio: 9 / 16 !important; /* Formato vertical puro */
}

.user-pictures.galeria-scrollable {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 10px;
    height: 300px; /* Un pelín más grande para PC (de 260 a 300) */
    scrollbar-width: thin;
    scrollbar-color: #92419f transparent;
}

.user-pictures.galeria-scrollable::-webkit-scrollbar {
    height: 6px;
}

.user-pictures.galeria-scrollable::-webkit-scrollbar-thumb {
    background-color: #92419f;
    border-radius: 10px;
}

.user-pictures.galeria-scrollable .rounded-frame-16 {
    height: 100%; /* Las cajas llenan la altura de la galería */
    width: auto; /* El ancho se calcula según el aspect-ratio */
    aspect-ratio: 1 / 1.1;
    flex: 0 0 auto;
    scroll-snap-align: start;
}

@media (max-width: 768px) {
    .user-pictures.galeria-scrollable {
        height: 250px; /* Un pelín más grande para móvil (de 220 a 250) */
    }
}

.user-pictures .rounded-frame-16 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    margin: 0;
}


/* Style the close button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #ccc;
    text-decoration: none;
    cursor: pointer;
}


.galeria-wrapper {
    margin-bottom: 20px;
}

.galeria-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: none; /* JS will toggle this */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 24px;
    color: #92419f;
    transition: all 0.2s ease;
}

.galeria-nav:hover {
    background: white;
    transform: translateY(-50%) scale(1.1);
}

.galeria-nav.prev {
    left: -10px;
}

.galeria-nav.next {
    right: -10px;
}

@media (max-width: 1024px) {
    .galeria-nav {
        display: none !important; /* Hide arrows on touch devices where scroll is natural */
    }
}

.confirmation-message {
    padding: 15px;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    margin-top: 15px;
    display: none;
}


#instagram-feed {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* Espacio entre publicaciones */
}

.instagram-post {
    border: 1px solid #eaeaea;
    /* Borde ligero */
    border-radius: 8px;
    /* Bordes redondeados */
    overflow: auto;
    /* Para ocultar cualquier desbordamiento */
    width: 48%;
    /* Ancho relativo para dos publicaciones por fila */
    background-color: #fff;
    /* Fondo blanco */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* Sombra */
    position: relative;
    /* Para posicionar flechas */
    max-height: 500px;
    /* Altura máxima en pantallas grandes */
}

/* Media Query para pantallas pequeñas (móviles) */
@media (max-width: 1024px) {
    .instagram-post {
        max-height: 300px;
        /* Altura máxima en móviles */
    }
}

/* Ocultar la barra de desplazamiento en navegadores Webkit (Chrome, Safari) */
.instagram-post::-webkit-scrollbar {
    width: 0;
    /* Ancho de la barra de desplazamiento a 0 */
    background: transparent;
    /* Fondo transparente */
}

/* Ocultar la barra de desplazamiento en Firefox */
.instagram-post {
    scrollbar-width: none;
    /* Para Firefox */
}

/* Para otros navegadores que soportan la propiedad */
.instagram-post {
    -ms-overflow-style: none;
    /* Para Internet Explorer y Edge */
}


.instagram-carousel {
    position: relative;
    /* Para posicionar flechas */
    width: 100%;
    /* Asegurarse de que ocupa todo el ancho */
    overflow: hidden;
    /* Ocultar imágenes que se salen del contenedor */
}

.instagram-image,
.instagram-video,
.instagram-reel {
    width: 100%;
    /* Para que la imagen se ajuste al ancho del contenedor */
    height: auto;
    /* Mantener la relación de aspecto */
    max-height: 600px;
    /* Altura máxima para imágenes y videos */
}

.instagram-caption {
    padding: 10px;
    /* Espaciado interno */
    font-size: 14px;
    /* Tamaño de fuente */
    color: #333;
    /* Color del texto */
    height: 200px;
    /* Altura fija para la descripción */
    overflow: hidden;
    /* Ocultar texto que sobrepase */
    text-overflow: ellipsis;
    /* Agregar puntos suspensivos si hay desbordamiento */
    display: -webkit-box;
    /* Necesario para webkit */
    -webkit-line-clamp: 5;
    line-clamp: 5;
    /* Número máximo de líneas a mostrar */
    -webkit-box-orient: vertical;
    /* Orientación vertical */
}


.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    cursor: pointer;
    font-size: 24px;
    /* Aumentar el tamaño de la flecha */
    padding: 10px;
    /* Añadir algo de espacio alrededor del icono */
    border-radius: 50%;
    height: 50px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    /* Mejorar la sombra */
    z-index: 1;
    /* Asegúrate de que las flechas estén sobre las imágenes */
    transition: background-color 0.3s;
    /* Suavizar la transición del color de fondo */
}

.carousel-arrow:hover {
    background-color: rgba(0, 0, 0, 0.1);
    /* Cambio de color al pasar el ratón */
}

.carousel-arrow.left {
    left: 10px;
    /* Flecha izquierda */
}

.carousel-arrow.right {
    right: 10px;
    /* Flecha derecha */
}

.instagram-image {
    width: 100%;
    /* Para que la imagen se ajuste al ancho del contenedor */
    height: auto;
    /* Mantener la relación de aspecto */
}

.instagram-caption {
    padding: 10px;
    /* Espaciado interno */
    font-size: 14px;
    /* Tamaño de fuente */
    color: #333;
    /* Color del texto */
}

.instagram-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centra horizontalmente */
    text-align: center;
    /* Alinea el texto al centro */
}

#delete-instagram-data {
    margin-bottom: 10px;
    /* Margen entre el botón y el feed */
}

.user-chips {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    white-space: nowrap;
    padding: 5px 0;
    scrollbar-width: none;
    /* Firefox */
}

.user-chips::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.user-chips .chip {
    display: inline-flex;
    /* inline para scroll horizontal */
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background-color: white;
    border: 1px solid #000;
    border-radius: 30px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
    /* evita que se encojan los chips */
}

.user-chips .chip i {
    font-size: 20px !important;
}

.user-chips .chip a,
.user-chips .chip span {
    color: black;
    text-decoration: none;
}

.user-chips .chip:hover {
    background-color: #f0f0f0;
}

.close-button {
    background: #edededff;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #555;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-left: 8px;
    /* para separar de los otros botones */
}

.close-button .material-icons {
    font-size: 20px !important;
    font-weight: 600 !important;
}

/* Fix sidebar overlap on medium desktop screens */
@media (min-width: 1025px) and (max-width: 1300px) {}

/* BADGE "SIN LOCAL COMERCIAL" */
.no-local-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: #fef1f2;
    color: #991b1b;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1.5px solid #fecaca;
    width: fit-content;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.no-local-badge i {
    font-size: 16px !important;
    color: #b91c1c !important;
    margin-top: -1px;
}