* {
    margin: 0;
    padding: 0;
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
}

.goog-te-banner-frame {
    display: none !important;
}

body {
    background-position: left bottom;
    background-position: left calc(100% - 80px);
    background-size: contain;
    background-repeat: no-repeat;
    height: 100vh;
    padding-top: 69px;
    top: 0 !important;
}

#serviText {
    background-color: rgb(122, 149, 255);
    border-radius: 15px;
    border: none;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
}

#botoIni {
    margin-top: 5vh
}

.buscaMarco,
.botoCuadro {
    cursor: pointer
}

.buscaText {
    margin-left: 25px;
    font-size: 0.9rem;
}

#buscaIni {
    background-color: white;
}

#searchIcon {
    width: 42px;
    height: 42px;
    background-color: #6EE7B7;
    -webkit-mask: url('/images/buscarI.png') no-repeat center;
    mask: url('/images/buscarI.png') no-repeat center;
    -webkit-mask-size: cover;
    mask-size: cover;
}

@media (max-width: 768px) {
    #searchIcon {
        width: 33px;
        height: 33px;
    }
}

#searchIconHead {
    width: 30px;
    height: 30px;
    background-color: #6EE7B7;
    -webkit-mask: url('/images/buscarI.png') no-repeat center;
    mask: url('/images/buscarI.png') no-repeat center;
    -webkit-mask-size: cover;
    mask-size: cover;
}

#postIconHead {
    width: 35px;
    height: 35px;
    background-color: #F4B400;
    -webkit-mask: url('/images/add+.svg') no-repeat center;
    mask: url('/images/add+.svg') no-repeat center;
    -webkit-mask-size: cover;
    mask-size: cover;
}


#postIcon2 {
    margin-left: 40px;
    width: 46px;
    height: 46px;
    background-color: #F4B400;
    -webkit-mask: url('/images/add+.svg') no-repeat center;
    mask: url('/images/add+.svg') no-repeat center;
    -webkit-mask-size: cover;
    mask-size: cover;
}




/* Estilos para la sección de iconos con scroll horizontal */

/* Contenedor que permite el scroll */
.icon-scroll-container {
    overflow-x: auto;
    /* Habilita el scroll horizontal */
    -webkit-overflow-scrolling: touch;
    /* Scroll suave en iOS */
    padding-bottom: 15px;
    /* Espacio para la barra de scroll */
}

/* Ocultar la barra de scroll visualmente (opcional pero elegante) */
.icon-scroll-container::-webkit-scrollbar {
    display: none;
}

.icon-scroll-container {
    -ms-overflow-style: none;
    /* IE y Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* El div que contiene los iconos. 'd-flex' ya lo tienes en el HTML. */
#iconsInicio {
    gap: 1.5rem;
    /* Espacio entre los iconos */
}

/* Cada uno de los iconos */
.icon-item {
    flex-shrink: 0;
    /* Evita que los iconos se encojan */
    text-align: center;
}

#iconsInicio .icon-link {
    /* ... tus estilos de .icon-link no cambian ... */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #495057;
    transition: transform 0.2s ease-in-out;
}

#iconsInicio .icon-circle {
    /* Hacemos los iconos un poco más pequeños en móvil por defecto */
    width: 65px;
    height: 65px;
    /* ... tus otros estilos de .icon-circle no cambian ... */
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0rem;
}

#iconsInicio .icon-label {
    /* ... tus estilos de .icon-label no cambian ... */
    font-size: 0.8rem;
    font-weight: 500;
}





/* En pantallas más grandes, hacemos los iconos más grandes */
@media (min-width: 768px) {
    #iconsInicio {
        justify-content: center;
        /* Centramos los iconos si caben todos */
    }

    #iconsInicio .icon-circle {
        width: 80px;
        height: 80px;
    }

    #iconsInicio .icon-label {
        font-size: 0.9rem;
    }
}


#guarIconLanding,
#vetIconLanding,
#aliIconLanding,
#adoptIconLanding,
#entrenaIconLanding,
#esteticaIconLanding {
    height: 55px;
    width: 55px;
}


@media (max-width: 768px) {

    #guarIconLanding,
    #vetIconLanding,
    #aliIconLanding,
    #adoptIconLanding,
    #entrenaIconLanding,
    #esteticaIconLanding {
        height: 45px;
        width: 45px;
    }
}


#termsMenuFooter {
    cursor: pointer;
}







.titulo-baloo1,
.titulo-baloo2 {
    font-family: 'Baloo 2', cursive;
    font-size: 24px;
    font-weight: bold;
    margin: 20px 0;
}

.titulo-baloo1 {
    color: #6EE7B7;
}

.titulo-baloo2 {
    color: #F4B400;
}

.newsInfo {
    width: 100%;
    height: 41vh;
    background-color: whitesmoke;
    cursor: pointer;
    margin-top: 30px;
}

.newsIma {
    width: 80%;
    height: 41vh;
    object-fit: cover;
    object-position: center;
}

#userCRender {
    margin-top: 35px;
    display: flex;
    justify-content: center;
}

@media screen and (min-width: 990px) {
    #userSocialCardSpace {
        margin-left: 100px;
        margin-right: 100px;
        padding: 0px 40px;
    }
}


.usermainCard {
    border: none;
    background-color: rgba(255, 255, 255, 1)
}

.seguidoresCount {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 20px;
    margin-top: 0px;
    margin-right: 20px;
}

#siguiendoContadorMain,
#seguidoresContadorMain {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .5rem;
    margin-top: 25px;
    border: none;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#siguiendoContador,
#seguidoresContador {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .5rem;
    margin-top: 0px;
    border: none;
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#socialTopCard {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 5px;
}

#socialTopCardSpace {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#socialProfileImageSpace {
    margin-top: 20px;
    margin-left: 10px;
}

#socialContador {
    margin-left: 40px;
    margin-right: 15px;
}

.counNum {
    font-size: 1.2rem;
    font-weight: bold;
}

.counText {
    font-size: 0.6rem;
}

.botones-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 5px;
    margin-bottom: 15px;
}

#socialProfileImage {
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    height: 120px;
    width: 120px;
    aspect-ratio: 1/1;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2)
}

#socialPetImage {
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    aspect-ratio: 1/1;
    margin-bottom: 3px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2)
}

#profileImage {
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    aspect-ratio: 1/1;
    margin-right: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

#profileImageEdit {
    position: absolute;
    top: 1vh;
    right: 2vw;
    z-index: 10;
}

#proImaEditDdown {
    width: 248px;
    cursor: pointer;
}

#customUploadButton {
    margin: 5px 0px 0px 0px;
}

#deleteButton {
    margin: 25px 0px 5px 0px;
}

#profileImageInput {
    display: none;
}

#datosCard {
    background-color: #ffffff;
    border-radius: 15px;
    padding-top: 0px;
    padding-bottom: 15px;
    padding-left: 20px;
    padding-right: 25px;

}

#usuarioNa {
    font-size: 1.3rem;
}

#muniDept {
    font-size: 0.6em;
}

.fullName {
    font-size: 0.7em;
}

.datePrim {
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', 'Courier New', monospace;
    font-size: 0.6em;
}

#peludoProfile {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: 15px;
    margin-right: 15px;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#petProfilesContainer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#mascoBoSpace {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#mascoBo {
    border-radius: 50%;
    display: flex;
    align-items: center;
    width: 46px;
    height: 46px;
    background-color: #6EE7B7;
    color: white;
    border: 2px solid #6EE7B7;
    margin-left: 25px;
    margin-bottom: 5px;
}

#mascoBoIma {
    width: 28px;
    height: 28px;
}

#mascoBoText {
    font-size: 0.6rem;
    line-height: 1;
    word-break: break-word;
    margin-left: 25px;
    color: #6EE7B7;
    font-weight: bold;
}

#mascoCir {
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    width: 85px;
    height: 85px;
    aspect-ratio: 1/1;
    margin-bottom: 4px;
}

#savePetFamilyMemberBtn {
    background-color: #6EE7B7;
    border-color: #6EE7B7;
}

#savePetChangesBtn {
    background-color: #6EE7B7;
    border-color: #6EE7B7;
}

#deletePetProfileBtn {
    background-color: #FF5A5F;
    border-color: #FF5A5F;
}

.btn-outline-danger {
    background-color: #FF5A5F;
    border-color: #FF5A5F;
}

#userDescription {
    margin-top: 15px;
    margin-left: 20px;
    font-size: 0.8rem;
}

#editDescriptionButton {
    background-color: white;
    border: 1px solid #6EE7B7;
    color: #6EE7B7;
}

.editIconPencil {
    width: 15px;
    height: 15px;
    background-color: #6EE7B7;
    -webkit-mask: url('/images/pencil.svg') no-repeat center;
    mask: url('/images/pencil.svg') no-repeat center;
    -webkit-mask-size: cover;
    mask-size: cover;
}




#profileDescription,
#saveDescriptionBtn {
    display: none;
}

#serviListActive {
    margin-left: 10px;
}

.cuButton {
    width: 150px;
    background-color: rgb(122, 149, 255);
    border: 2px solid rgb(122, 149, 255);
    color: white;
    margin-bottom: 5px;
}

#userGalerySection {
    margin-bottom: 30px;
}



#petVideosSocialProfile {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

#petVideoInput {
    display: none;
}

#divisorVima {
    color: #6EE7B7;
}

#petImageInput {
    display: none;
}



.card-imaIni1,
.card-imaIni2,
.card-imaIni3,
.card-imaIni4,
.card-imaIni5,
.card-imaIni6 {
    width: 100%;
    height: 12rem;
    object-fit: cover;
    object-position: center;
    cursor: pointer;
}

.letGu {
    font-size: 0.9rem;
    font-weight: bold;
    border-top-right-radius: 210px;
    border-top-left-radius: 205px;
    border-bottom-left-radius: 120px;
    border-bottom-right-radius: 165px;
}

.card-imaIni1,
.card-imaIni3 {
    border-top-right-radius: 105px;
    border-top-left-radius: 70px;
    border-bottom-left-radius: 65px;
    border-bottom-right-radius: 80px;
}

.card-imaIni2,
.card-imaIni5 {
    border-top-right-radius: 50px;
    border-top-left-radius: 70px;
    border-bottom-left-radius: 65px;
    border-bottom-right-radius: 90px;
}

.card-imaIni4,
.card-imaIni6 {
    border-top-right-radius: 80px;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 75px;
}

@media (max-width: 720px) {

    .card-imaIni1,
    .card-imaIni2,
    .card-imaIni3,
    .card-imaIni4,
    .card-imaIni5,
    .card-imaIni6 {
        height: 6rem;
    }

    #mi-div-debajo {
        font-size: 0.65rem !important;
    }
}


#losBotones {
    margin-top: 5vh;
}

#losBotones button {
    text-align: left;
    border-radius: 8px;
}

.btn {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    /* Sombra en el texto */
    transition: all 0.2s ease;
    /* Suaviza la interacción */
    cursor: pointer;
}

/* Efecto hover (al pasar el mouse) */
.btn:hover {
    box-shadow:
        inset 0 4px 6px rgba(0, 0, 0, 0.25),
        0 6px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    /* Eleva ligeramente el botón */
}

/* Efecto activo (al hacer clic) */
.btn:active {
    box-shadow:
        inset 0 6px 8px rgba(0, 0, 0, 0.3),
        0 3px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(2px);
    /* Da sensación de presión */
}




@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}



#modalRegistro .modal-content,
#registro-form input,
#registro-form select,
#modalInicio .modal-content,
#inicio-form input,
#inicio-form select,
#modalCuidador .modal-content,
#cuidador-form input,
#cuidador-form select,
#imageModalGalery .modal-content {
    border-radius: 0;
}

/*
.modal-content {
    background-color: #F0FFFF;
}
*/

#imageModalGalery .modal-content {
    background-color: black;
}


#departamento,
#ciudad,
.form-label,
.form-floating label {
    font-size: 14px;
}


.navbar {
    padding: 0rem 0rem;
    border-bottom: 0px solid #ccc;
}

.navbar-brand {
    font-size: 28px;
    letter-spacing: -4px;
}


#navBo {
    padding: 0.5rem;
}


#profileHead {
    margin-top: 53px;
    position: fixed;
    top: 0;
    /* Fijo en la parte superior */
    z-index: 100;
    /* Asegúrate de que quede encima del contenido */
    /*background-color: rgba(255, 255, 255, 0.9);*/
    /* Fondo para que no se mezcle con otros elementos */
    /*box-shadow: 0 2px 5px rgba(255, 255, 255, 0.9);*/
    /* Opcional: sombra para destacar */
    border-radius: 5px;
}


#muPzsh {
    margin-top: 55px;
}


#socialButton,
#socialButton2 {
    margin-left: 1vw;
}

/* Estilo para las imágenes en la galería */
#petFotosE img,
#petFotosA img,
#entPetFotos img,
#vetPetFotos img {
    width: 70px;
    height: 70px;
    background-color: black;
    object-fit: cover;
    cursor: pointer;
    /* Mantiene la proporción de la imagen */
    margin: 3px;
    /* Espacio entre las imágenes, opcional */
}

/* Estilo para el div flotante que contiene las opciones */
.floating-options {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1000;
    border-radius: 1px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}


#petFotosSocial img,
#petFotosSocialProfile2 img {
    width: 90px;
    height: 90px;
    background-color: black;
    object-fit: cover;
    cursor: pointer;
    margin: 1px;
    border-radius: 6px;

}

@media (max-width: 500px) {

    #petFotosSocial img,
    #petFotosSocialProfile2 img {
        width: 32.5% !important;
        height: 100px !important;
    }
}



#petVideosSocial video,
#petVideosSocialProfile video,
#petVideosSocialProfile2 video {
    margin-right: 5px;
    background-color: black;
    object-fit: cover;
    cursor: pointer;
}



.media-wrapper {
    width: 100%;
    background-color: #1c1c1c;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;

}

.media-wrapper img,
.media-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
.video-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
}
*/
/*
.media-container {
    width: 100%;
    background-color: #eee;
    position: relative;
    overflow: hidden;
}

.media-container img,
.media-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
*/

.video-container2 {
    width: 100%;
    max-width: 100%;
    position: relative;
    overflow: hidden;

    position: relative;
    background-color: #000;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #000;
}

.video-container2 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Estilos para el botón de Play centrado y bonito */
.video-play-button {
    /* Posicionamiento */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    /* Por encima del video */

    /* Apariencia */
    width: 64px;
    /* Tamaño del botón */
    height: 64px;
    /* Tamaño del botón */
    background-color: rgba(0, 0, 0, 0.6);
    /* Fondo semi-transparente */
    border: none;
    /* Sin borde feo */
    border-radius: 50%;
    /* Círculo perfecto */
    cursor: pointer;
    padding: 0;
    /* Quitar padding por defecto */
    color: white;
    /* Color del icono SVG */

    /* Para centrar el icono SVG dentro */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Transiciones suaves */
    transition: background-color 0.2s ease, transform 0.2s ease;

    /* Inicialmente oculto - JS añadirá la clase 'visible' */
    opacity: 0;
    pointer-events: none;
    /* No interactuable si no es visible */
}

.video-play-button.visible {
    opacity: 1;
    pointer-events: auto;
    /* Interactuable cuando visible */
}

/* Efecto Hover */
.video-play-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
    /* Más oscuro al pasar el ratón */
    transform: translate(-50%, -50%) scale(1.1);
    /* Un poco más grande */
}

/* Estilos para el icono SVG dentro del botón */
.video-play-button svg {
    width: 50%;
    /* Tamaño del icono relativo al botón */
    height: 50%;
    fill: currentColor;
    /* Hereda el color (blanco) del botón */
    /* Pequeño ajuste para que el triángulo 'play' se vea centrado visualmente */
    margin-left: 3px;
}



#imageScrollContainer,
#imageScrollContainerProfile {
    display: flex;
    flex-direction: column;
    /* Cambio a disposición vertical */
    overflow-y: auto;
    /* Habilita el scroll vertical */
    max-height: 85vh;
    /* Limita la altura del contenedor para permitir el scroll */
    width: 100%;
    /* El contenedor ocupa el 100% del ancho */
}

#imageScrollContainer2 {
    display: flex;
    flex-direction: column;
    /* Cambio a disposición vertical */
    overflow-y: auto;
    /* Habilita el scroll vertical */
    max-height: 92vh;
    /* Limita la altura del contenedor para permitir el scroll */
    width: 100%;
    /* El contenedor ocupa el 100% del ancho */
}



#imageScrollContainer .image-post,
#imageScrollContainer2 .image-post,
#imageScrollContainerProfile .image-post,
.post {
    display: block;
    /* Cada post en su propia línea */
    margin-bottom: 4vh;
    /* Espacio entre los posts */
    text-align: center;
}



.image-post {
    position: relative;
}

#imageScrollContainer img {
    max-height: 70vh;
    /* Limitar la altura para que no sea muy grande */
    max-width: 100%;
    /* Asegurar que no se desborde horizontalmente */
    object-fit: contain;
    /* Asegurar que toda la imagen sea visible */
}

#imageScrollContainer2 img,
#imageScrollContainerProfile img {
    width: 100%;
    /* Ocupa el ancho completo del contenedor */
    height: auto;
    /* Mantiene la proporción de la imagen */
    max-height: 70vh;
    /* Limita la altura máxima para evitar desbordes */
    object-fit: contain;
    /* Asegura que toda la imagen sea visible */
}


#imageScrollContainer .caption-delete-container,
#imageScrollContainer2 .caption-delete-container,
#imageScrollContainerProfile .caption-delete-container {
    display: flex;
    justify-content: space-between;
    /* Distribuye el caption y el botón */
    align-items: flex-start;
    background: white;
}

#imageScrollContainer .caption,
#imageScrollContainerProfile .caption {
    width: 250px;
    /* Limita el ancho del caption */
    word-wrap: break-word;
    /* Permite que el texto se divida en varias líneas */
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #555;
    text-align: left;
}

#imageScrollContainer .delete-btn {
    margin: 10px 5px 10px 20px;
    flex-shrink: 0;
    font-size: 14px;
    color: white;
    cursor: pointer;
    background: red;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
}


.caption-megusta-container {
    display: flex;
    align-items: flex-start;
    /* Centra verticalmente */
    justify-content: flex-start;
    /* Los elementos comienzan desde el inicio */
    gap: 5px;
    /* Espacio entre los elementos */
}



.megusta-btn {
    background: none;
    /* Quita el fondo del botón */
    border: none;
    /* Quita el borde del botón */
    cursor: pointer;
    /* Cambia el cursor a una mano al pasar sobre el botón */
    padding: 0;
    /* Quita el padding del botón */
    margin-top: 10px;
}




.vocation-tag {
    position: absolute;
    bottom: -5px;
    right: -15px;
    color: #fff;
    /* Texto blanco por defecto */
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.vocation-veterinario {
    background-color: #28a745;
}


.vocation-profesional {
    background-color: #007bff;
}


.vocation-entrenador {
    background-color: orange;
}


.vocation-chalan {
    background-color: orchid;
}


.vocation-amante {
    background-color: plum;
}


#letra-acu {
    font-size: 0.7rem;
}


#usPz {
    z-index: 1;
    position: relative;
    /* Garantiza que el z-index del modal tenga efecto */
}


#imageModalGalery .modal-dialog {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

#imageModalGalery .modal-content {
    height: 100%;
    width: 100%;
    border-radius: 0;
}

#imageModalGalery .modal-body {
    height: 100%;
    overflow-y: auto;
}

#carouselGallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#imageModalGalery {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1060 !important;
    position: fixed;
    /* Asegura que el modal esté en la capa superior */
}


/* Contenedor del caption y likes */
.caption-likes-container {
    padding: 10px;
    border-top: 1px solid #ddd;
}

/* Media query para pantallas grandes */
/*
@media (min-width: 1024px) {
    .caption-likes-container {
        max-width: 40vw;
        margin-left: 30vw;
    }

    .profile-picture-circle {
        margin-right: 25vw;
    }
}
*/

@media (min-width: 900px) {
    #imageScrollContainer2 {
        max-width: 40%;
        margin: 0 auto;
    }
}

/* Caption (texto a la izquierda) */
.caption {
    font-size: 14px;
    color: #333;
    word-wrap: break-word;
    /* Para textos largos */
    text-align: justify;
    margin: 5px 15px 10px 15px;
}

/* Contenedor de likes (a la derecha) */
.likes-container {
    display: flex;
    justify-content: end;
    align-items: center;
}

/* Botón de like */
.like-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    margin-left: 25px;
    margin-right: 20px;
}

.like-btn:hover img {
    transform: scale(1.2);
}



.profile-picture-circle {
    position: absolute;
    top: 40px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid white;
    background-color: #ccc;
    /* Color de fondo en caso de que no cargue la imagen */
    cursor: pointer;
}

.profile-userName {
    position: absolute;
    max-width: 100px;
    top: 90px;
    right: 10px;
    font-size: 0.55rem;
    font-weight: bold;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 1px 2px;
}

.profile-userMuni {
    position: absolute;
    max-width: 100px;
    top: 110px;
    right: 10px;
    font-family: cursive;
    font-size: 0.55rem;
    font-weight: bold;
    border-radius: 4px;
    padding: 1px 2px;
}

.profile-seguir {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 85px;
    font-size: 0.75rem;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
}

#follow-button-container {
    margin-top: 20px;
    width: 85px;
    font-size: 0.75rem;
}

.btnSiguiendo {
    background-color: #17a2b8;
    color: white;
    border: none;
    padding: 3px 8px;
    border-radius: 3px;
}

.btnSeguir {
    background-color: #f8f9fa;
    color: #212529;
    border: none;
    padding: 3px 8px;
    border-radius: 3px;
}

.vocation-veterinarioSocial,
.vocation-profesionalSocial,
.vocation-entrenadorSocial,
.vocation-chalanSocial,
.vocation-amanteSocial {
    position: absolute;
    top: 10px;
    left: 5px;
    width: 150px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 3px;
    overflow: hidden;
}

.vocation-veterinarioSocial,
.vocation-profesionalSocial,
.vocation-entrenadorSocial,
.vocation-chalanSocial,
.vocation-amanteSocial {
    position: absolute;
    top: 10px;
    left: 1px;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 3px;
    overflow: hidden;
}

.vocation-veterinarioSocial {
    background-color: #28a745;
    color: white;
    width: 90px;
}

.vocation-profesionalSocial {
    background-color: #007bff;
    color: white;
    width: 130px;
}

.vocation-entrenadorSocial {
    background-color: orange;
    color: white;
    width: 170px;
}

.vocation-chalanSocial {
    background-color: orchid;
    color: white;
    width: 80px;
}

.vocation-amanteSocial {
    background-color: plum;
    color: white;
    width: 160px;
}

.servi-social-profile {
    position: absolute;
    left: 5px;
    top: 35px;
    font-size: 0.6rem;
    font-weight: bold;
    border-radius: 3px;
    overflow: hidden;
    font-family: cursive;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 1px 5px;
    width: 80px;
    text-align: left;
}

.social-msg {
    position: absolute;
    left: 30px;
    width: 25px;
}

.read-more-btn {
    background: none;
    border: none;
    font-size: 0.9em;
}

.caption-element {
    margin-left: 5px;
    margin-top: 10px;
    text-align: left;
}

.heart-icon {
    width: 24px;
    /* Ancho fijo */
    height: 24px;
    /* Altura fija */
    object-fit: contain;
    /* Asegura que la imagen no se distorsione */
}




.captionmodal-body textarea {
    resize: none;
    /* Deshabilita el redimensionado del textarea */
}

.text-muted {
    font-size: 0.9rem;
    text-align: right;
    display: block;
}


/* Mensajes no leídos */
.unread {
    font-weight: bold;
    background-color: #f8f9fa;
    /* Color de fondo claro */
}

/* Mensajes leídos */
.read {
    font-weight: normal;
    color: #6c757d;
    /* Texto de color gris */
    background-color: white;
}

.unread-indicator {
    display: inline-block;
    /* Permite darle dimensiones */
    width: 12px;
    /* Ancho del círculo */
    height: 12px;
    /* Alto del círculo */
    background-color: #25D366;
    /* Un verde brillante tipo WhatsApp */
    border-radius: 50%;
    /* Lo hace perfectamente redondo */
    margin-left: 10px;
    /* Espacio para separarlo del texto */

    /* Opcional: una pequeña animación para llamar la atención */
    animation: pulse 2s infinite;
}

/* Animación de pulso (opcional pero muy vistosa) */
@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}


/* =========================================== */
/* === Insignia de Notificación de Mensajes === */
/* =========================================== */

#notificationBadge {
    /* Estilos base de la insignia */
    display: none;
    /* Oculta por defecto, JS la mostrará */
    min-width: 22px;
    /* Ancho mínimo para que se vea bien con 1 dígito */
    height: 22px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.0;
    /* Centra el número verticalmente */

    /* Posicionamiento (tu código original es bueno, lo mantenemos) */
    top: -5px;
    /* Ligeramente más arriba */
    left: 20px;
    /* Ligeramente más a la izquierda */
    transform: translateY(-10%);
    border: 2px solid white;
    /* Borde blanco para que resalte sobre el icono */
}

/* Clase para la animación de pulso */
#notificationBadge.pulsing {
    animation: pulse-red 2s infinite;
}

/* Definimos la animación específica para el color rojo */
@keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
        /* Rojo de Bootstrap (.bg-danger) */
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}


#messagesModal {
    z-index: 1050;
    /* Modal de lista */
}

#messageDetailModal {
    z-index: 1060;
    /* Modal de detalles, encima del de lista */
}

/* Evitar conflictos con el backdrop */
.modal-backdrop.show {
    z-index: 1049;
    /* Fondo del modal de lista */
}

#messageDetailModal+.modal-backdrop.show {
    z-index: 1059;
    /* Fondo del modal de detalles */
}


#videoGallery {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    /* Evita que los videos se envuelvan en varias líneas */
    gap: 8px;
    /* Espacio entre los videos */
    overflow-x: auto;
    padding-bottom: 10px;
    /* Asegura que haya un pequeño margen abajo */
}

#scrollRightButton {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    /* Ocultamos el botón inicialmente */
    z-index: 10;
}



.play-button {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.play-button:hover {
    transform: scale(1.1);
}



#likesModalBody img {
    border: 1px solid #ddd;
}

#likesModalBody span {
    font-weight: 500;
}



#resultadosBusquedaContainer img {
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

#resultadosBusquedaContainer img:hover {
    transform: scale(1.1);
}



#resultadosBusquedaModal {
    top: 55%;
}

#resultadosBusquedaModal .modal-body {
    max-height: 60vh;
    /* Limita la altura del contenedor a un 60% del alto de la ventana */
    overflow-y: auto;
    /* Habilita el desplazamiento vertical */
    margin-bottom: 60vh;
}


#resultadosBusquedaModal .modal-header {
    padding: 0.25rem 0.5rem;
    /* Relleno mínimo */
    font-size: 0.9rem;
    /* Tamaño de texto más pequeño */
    height: auto;
    /* Ajusta automáticamente la altura al contenido */
    line-height: 1.2;
    /* Espaciado más compacto */
}

#resultadosBusquedaModal .modal-header .modal-title {
    font-size: 1rem;
    /* Tamaño del título reducido */
    margin: 0;
    /* Sin márgenes adicionales */
}

#resultadosBusquedaModal .modal-header .btn-close {
    scale: 1;
    /* Botón de cierre más pequeño */
}

.buscarButton,
.buttonFormGen {
    background-color: rgb(122, 149, 255);
    color: white;
}

#volverSearch {
    font-weight: bold;
    max-width: 30px;
}

@media (max-width: 768px) {
    .offcanvas {
        width: 50% !important;
        /* Aplica solo en tablets y celulares */
    }
}


.offcanvas .dropdown-menu {
    position: fixed;
    /* Cambia la posición para que sea independiente del Offcanvas */
    top: auto;
    left: auto;
    z-index: 1055;
    /* Asegúrate de que esté por encima del Offcanvas */
}

.offcanvas {
    overflow: visible;
    /* Permite que el contenido "salga" del Offcanvas */
}



@media (min-width: 1024px) {
    #profileHead {
        max-width: 50vw;
    }
}

.custom-backdrop {
    background-color: rgba(255, 255, 255, 0.9);
    /* Fondo negro con opacidad al 50% */
}

.offcanvas-body>div {
    display: flex;
    flex-direction: column;
    /* Dirección en columna */
    gap: 0.5rem;
    /* Espaciado entre los botones */
    align-items: flex-start;
    /* Alineación horizontal al inicio */
}

#canvasSocialButtonMenu,
#canvasSearchMenu {
    width: 110px;
    background-color: #F4B400;
    color: white;
    text-decoration: none;
    text-align: left;
}

#canvasCloseX {
    background-color: white;
    margin-top: 10px;
    margin-right: 40px;
}

.dropdown-menu {
    border: none;
}

#logout {
    background-color: whitesmoke;
    width: 110px;
    margin-top: 60px;
}

#termsMenuButton {
    background-color: whitesmoke;
    width: 110px;
    margin-top: 30px;
    font-size: 0.8em;
}

#cuCanv {
    width: 110px;
    background-color: #F4B400;
    color: white;
}

#termsCloseXarea {
    position: relative;
    max-height: 400px;
    overflow-y: auto;
}

.termsCloseX {
    position: absolute;
}

.modal-header,
.modal-footer {
    border: none;
}


#verSocialButton {
    background-color: whitesmoke;
    width: 120px;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 0.8em;
}


/* Contador de likes */
.likes-counter {
    cursor: pointer;
    margin-top: 10px;
    margin-left: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #555;
}


#servicesContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-top: 25px;
    color: white;
}

.social-serv {
    background-color: #F4B400;
    padding: 2px 10px;
    border-radius: 3px;
    cursor: pointer;
}


#editPetImagePreview {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    cursor: pointer;
}

#editPetImageFile {
    display: none;
}

#editPetError {
    display: none;
}


#petDetailImageSocial {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
}

#petDetailDescriptionSocial {
    white-space: pre-wrap;
}


#petDetailNameSocial {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    display: block;
    max-width: 90%;
}

#notifi {
    margin-right: 4vw;
}

#phContainer {
    margin-top: 5px;
}


#volverPerfil {
    margin-right: 10vw;
    padding: 0;
    border: none;
    background: none;
}

#profilePictureSesion {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
}

#phPostBoton {
    margin-right: 20px;
}

#socialScroll {
    width: 30px;
    height: 30px;
}

#wechatIcon {
    width: 33px;
    height: 33px;
}

#notificationBadge {
    top: 0;
    left: 28px;
    transform: translateY(-10%);
}

#chatNoti {
    margin-right: 10px;
}

#chatSpace {
    display: flex;
    align-items: center;
}

#phProfileCircle {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

#petPlus {
    width: 200px;
    margin-top: 20px;
}

#petPlusVideo {
    width: 200px;
}

#imageScrollContainer {
    max-height: 75vh;
}

#vidMoHe {
    background-color: #F0FFFF;
}

#vidMoBo {
    background-color: #F0FFFF;
}

#modalVideo {
    max-height: 75vh;
    object-fit: contain;
}

#deleteVideoButton {
    margin-top: 5px;
    margin-bottom: 10px;
    background-color: #FF5A5F;
    border-color: #FF5A5F;
    color: white;

}

.tLogo {
    color: #6EE7B7;
}

.zLogo {
    color: #F4B400;
}

#loadingEffect {
    display: none;
    text-align: center;
    margin-top: 25px;
}

#spif,
#spic {
    color: #6EE7B7;
}

#spis {
    color: #F4B400;
}

#spit {
    color: #FF6F61;
}

#regiterms {
    margin-left: 10px;
}

#regibutton {
    background-color: #F4B400;
    color: white;
    border-color: #F4B400;
}

#enviarIniSec,
#enviarReset {
    background-color: #6EE7B7;
    color: white;
    border-color: #6EE7B7;
}

.advReg {
    margin-left: 1vw;
}

#cambiarPass {
    font-size: 0.8rem;
}



#botonBuscar2,
#botonBuscar2ALI,
#botonBuscar2Ent,
#botonBuscar2EST,
#botonBuscar2Vet {
    background-color: #F4B400;
    color: white;
    border-color: #F4B400;
}

#regiTermsClose {
    position: relative;
    max-height: 400px;
    overflow-y: auto;
}

#regiTermsCloseX {
    position: absolute;
    top: 5px;
    right: 5px;
}

#phtSearchServ {
    gap: 1vw;
    margin: 2vh 1vw;
}

#searchSerButton {
    border-radius: 6px;
    border: none;
    background-color: #F28B82;
}

#searchServMuni {
    border-radius: 6px;
    border: none;
}

#searchServAnimals {
    border-radius: 6px;
    border: none;
    color: #76C7C0;
}

#searchServEti {
    margin-top: 10px;
    color: grey;
}

#searchServEtiSpace {
    gap: 3px;
    margin-bottom: 1.5vh;
    margin-top: 5px;
}

.searchEti {
    border-radius: 6px;
    font-weight: bold;
}

#searchNumResult {
    margin-top: 10px;
    margin-left: 10px;
    color: grey;
}

#searchEmpty {
    margin-top: 10vh;
    margin-left: 5vw;
}





#mi-div-debajo {
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #eee;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #fff;
    color: #222;
    text-align: center;
    font-size: 0.85rem;
    z-index: 1000;
}



#pawIconFooter {
    margin: 0px 10px 3px 10px;
    height: 12px;
    width: 12px;
}






.search-box {
    color: gray;
    background: #fff;
    border-radius: 30px;
    padding: 10px;
    display: flex;
    align-items: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.search-box .divider {
    border-left: 1px solid #ddd;
    height: 30px;
    margin: 0 10px;
}

.search-box button {
    /*    background: #F28B82;*/
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 576px) {

    /* Aplica en celulares pequeños */
    .search-box label {
        font-size: 14px;
        /* Reduce el tamaño de las etiquetas */
    }

    .search-box button {
        background: white;
        width: 35px;
        /* Reduce el botón */
        height: 35px;
        font-size: 14px;
    }
}


@media (max-width: 1060px) {
    .letGu {
        font-size: 0.8rem;
    }

    #serviText {
        font-size: 14px;
    }
}



.container-right {
    display: flex;
    justify-content: flex-end;
    /* Mueve el contenido a la derecha */
    margin-top: 15px;
}

.card-hover .card-body {
    border-radius: 5px;
    background-color: whitesmoke;
    font-size: 14px;
    font-weight: bold;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: background-color 0.1s ease-in-out;
    cursor: pointer;
    color: grey;
    /* Hace que el texto sea negro */
}

.card-hover:hover .card-body {
    background-color: white;
    /* Cambio a gris al pasar el cursor */
    color: grey;
    /* Asegura que el texto se mantenga negro */
}


.cardAniSpace {
    margin-bottom: 30px;
}

.card-animada {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    max-width: 540px;
    position: relative;
    border: none;
}

.cardAniCircle {
    position: absolute;
    top: -10px;
    right: 15px;
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #fff;
    background-color: #f0f0f0;
}

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

/* Hover (cuando pasas el mouse) */
.card-animada:hover {
    box-shadow:
        inset 0 4px 6px rgba(0, 0, 0, 0.25),
        0 6px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

/* Active (cuando haces clic) */
.card-animada:active {
    box-shadow:
        inset 0 6px 8px rgba(0, 0, 0, 0.3),
        0 3px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(2px);
}





.message-left {
    justify-content: flex-start;
}

.message-right {
    justify-content: flex-end;
}

.message-left td {
    padding: 10px 5px 10px 15px;
    background-color: #dcf8c6;
    border: none;
    border-radius: 0px 15px 15px 15px;
}

.message-right td {
    padding: 10px 5px 10px 15px;
    background-color: whitesmoke;
    border: none;
    border-radius: 15px 0px 15px 15px;
}

.message-left table {
    max-width: 70%;
}

.message-right table {
    max-width: 70%;
}

#message-footer,
#message-footer-response {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


#confirmSendButton,
#sendResponseBtn {
    color: white;
}


#message-header,
#message-footer,
#message-footer-response {
    border: none;
    background: linear-gradient(90deg, #f1fcf7, #fffffb);
    color: white;
}


#message-header-response {
    border: none;
    background: linear-gradient(90deg, #f1fcf7, #fffffb);
}

#message-header {
    display: flex;
    justify-content: center;
    align-items: center;
}

#msgHeadUserName {
    color: #000;
    font-weight: bold;
}

#msgHeadUserImage {
    object-fit: cover;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    margin-right: 10px;
}


/* Estilos para el esqueleto de post */
.post-skeleton {
    background-color: whitesmoke;
    /* Un color oscuro para el fondo del esqueleto */
    border-radius: 8px;
    overflow: hidden;
    /* Importante para la animación */
}

.post-skeleton .skeleton-media {
    /* ¡AQUÍ ESTÁ LA MAGIA! Usa aspect-ratio para reservar el espacio */
    aspect-ratio: 1 / 1;
    /* Para posts cuadrados. Ajusta a 9/16 para verticales, etc. */
    background-color: white;
}

.post-skeleton .skeleton-header,
.post-skeleton .skeleton-footer {
    padding: 12px;
}

.post-skeleton .skeleton-username,
.post-skeleton .skeleton-line {
    height: 16px;
    background-color: white;
    border-radius: 4px;
    margin-top: 8px;
}

.post-skeleton .skeleton-line.short {
    width: 60%;
}

/* Animación de Shimmer */
.post-skeleton .skeleton-media,
.post-skeleton .skeleton-username,
.post-skeleton .skeleton-line {
    background-image: linear-gradient(90deg, #fcfcfc 0px, #fff6f6 40px, #fcfcfc 80px);
    background-size: 600px;
    animation: shimmer 1.5s infinite linear;
}




/* Para imágenes */
.blurred-image {
    filter: blur(20px);
    transform: scale(1.1);
    /* Ligeiramente más grande para que el blur no deje bordes */
    transition: filter 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* Para el fondo de los videos */
.blurred-image-bg {
    filter: blur(20px);
    transform: scale(1.1);
    transition: filter 0.5s ease-in-out, transform 0.5s ease-in-out;
}

@keyframes shimmer {
    from {
        background-position: -600px;
    }

    to {
        background-position: 600px;
    }
}


/* === ESTILOS PARA EL BOTÓN DE INSTALACIÓN DE LA PWA === */

/* Contenedor del botón flotante */
#install-container {
    margin-bottom: 90px;
    position: fixed;
    /* Lo fija en la pantalla */
    bottom: 20px;
    /* Espacio desde abajo */
    right: 20px;
    /* Espacio desde la derecha */
    z-index: 1050;
    /* Asegura que esté por encima de otros elementos (Bootstrap modals suelen estar en 1050-1060) */
    display: none;
    /* Oculto por defecto, controlado por JS */
}

/* El botón en sí */
#downloadApp {
    background-color: #6C5CE7;
    /* Un color morado/violeta moderno y amigable que contrasta bien */
    color: white;
    font-family: 'Baloo 2', cursive;
    /* Usando la fuente que ya tienes para un look más "juguetón" */
    font-size: 16px;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 50px;
    /* Completamente redondeado */
    border: none;
    display: flex;
    /* Para alinear el ícono y el texto */
    align-items: center;
    gap: 10px;
    /* Espacio entre el ícono y el texto */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    /* Sombra suave para darle profundidad */
    cursor: pointer;
    transition: all 0.3s ease;
    /* Transición suave para hover y transformaciones */

    /* Animación de entrada */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn-up 0.5s ease forwards;
}

/* Efecto al pasar el ratón por encima */
#downloadApp:hover {
    background-color: #5849c5;
    /* Un tono un poco más oscuro */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
    /* Pequeño levantamiento */
}

/* Ícono dentro del botón (usaremos un SVG inline para máxima calidad y control) */
#downloadApp svg {
    width: 22px;
    height: 22px;
}

/* Animación de entrada */
@keyframes fadeIn-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Adaptación para Móviles Pequeños === */
@media (max-width: 576px) {
    #install-container {
        bottom: 15px;
        right: 15px;
    }

    #downloadApp {
        padding: 10px 15px;
        font-size: 14px;
        gap: 8px;
    }

    #downloadApp svg {
        width: 20px;
        height: 20px;
    }
}


#downloadAppLogin-container {
    display: none;
    /* Oculto por defecto, JS lo mostrará */
    width: 100%;
    /* Ocupa todo el ancho del menú */
}

/* El botón en sí */
#downloadAppLogin {
    display: flex;
    /* Para alinear ícono y texto */
    align-items: center;
    gap: 12px;
    /* Espacio entre ícono y texto */
    width: 100%;
    padding: 10px 16px;
    /* Padding similar a otros elementos de menú */
    margin: 8px 0;
    /* Espacio vertical para separarlo de otros elementos */

    background: linear-gradient(90deg, #8E44AD, #6C5CE7);
    /* Un gradiente llamativo */
    color: white;
    font-family: 'Open Sans', sans-serif;
    /* Fuente consistente con otros botones */
    font-weight: 600;
    font-size: 15px;
    text-align: left;
    /* Alinea el texto a la izquierda */
    border: none;
    border-radius: 8px;
    /* Bordes redondeados sutiles */

    transition: all 0.3s ease;
    cursor: pointer;
}

/* Efecto al pasar el cursor */
#downloadAppLogin:hover {
    color: white;
    /* Asegura que el color no cambie por las reglas de .btn-link */
    transform: scale(1.02);
    /* Un ligero zoom para feedback */
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
}

/* Ícono dentro del botón */
#downloadAppLogin svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    /* Un poco más grueso para que destaque */
}


/* === ESTILOS PARA EL BOTÓN DE INSTALACIÓN EN EL NAVBAR === */

/* Contenedor para controlar la visibilidad */
#downloadMenu-container {
    display: none;
    /* Oculto por defecto, JS lo controla */
    margin-left: auto;
    /* Empuja el botón hacia la derecha, antes del menú de usuario */
    margin-right: 15px;
    /* Espacio para separarlo del menú de la derecha */
}

/* El botón en sí */
#downloadMenu {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Espacio entre ícono y texto */

    background-color: #f1f3f5;
    /* Un gris muy claro y neutro */
    color: #343a40;
    /* Texto oscuro para buen contraste */
    border: 1px solid #dee2e6;
    /* Borde sutil */

    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;

    padding: 6px 12px;
    border-radius: 50px;
    /* Forma de píldora */

    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/* Efecto hover: sutil y elegante */
#downloadMenu:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Ícono dentro del botón */
#downloadMenu svg {
    width: 18px;
    height: 18px;
    stroke: #495057;
    /* Color del ícono */
    stroke-width: 2;
}

/* Adaptación para móviles: ocultamos el texto y dejamos solo el ícono */
@media (max-width: 765px) {
    #downloadMenu-container {
        margin-right: 10px;
    }

    #downloadMenu span {
        display: none;
        /* Oculta el texto en pantallas pequeñas */
    }

    #downloadMenu {
        padding: 8px;
        /* Hacemos el botón un círculo perfecto */
    }
}


#followersModalBody {
    max-height: 60vh;
    /* o 400px, 500px, etc. */
    overflow-y: auto;
}


#guarPerfilTitle,
#aliPerfilTitle,
#entrenadorPerfilTitle {
    margin-left: 25px;
    margin-top: 20px;
}

#estePerfilTitle {
    margin-top: 5px;
}

#guarVista,
#esteVista,
#aliVista,
#entrenadorVista,
#vetVista {
    background-color: #6EE7B7;
    color: white;
    border-color: #6EE7B7;
    width: 150px;
    height: 20px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}


#guarVista,
#entrenadorVista {
    align-self: end;
    margin-top: 10px;
    margin-right: 25px;
}

#esteVistaSpace,
#aliVistaSpace,
#vetVistaSpace {
    display: flex;
    flex-direction: column;
}

#esteVista,
#vetVista {
    align-self: end;
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 30px;
}

#aliVista {
    align-self: end;
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 15px;
}


#guarPerfilSpace,
#entPerfilSpace {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 15px 5px 5px 5px;
}

#placeImageSpace,
#entImageSpace {
    position: relative;
    height: 140px;
    width: 140px;
    margin-right: 5px;
}

#placeImage,
#entPlaceImage {
    object-fit: cover;
    object-position: center;
    border-radius: 2px;
    height: 140px;
    width: 140px;
}

#placeImadropdown,
#entrenadorImadropdown {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
}

#petFotos {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

#petFotos img {
    width: 70px;
    height: 70px;
    background-color: black;
    object-fit: cover;
    cursor: pointer;
    border-radius: 2px;
}

/* --- ESTILOS PARA EL MODAL DE RECORTE (CROPMODAL) --- */

/* 1. Hacemos que el contenido del modal ocupe una altura máxima y sea un contenedor flexible */
#cropModal .modal-content {
    /* Fija la altura máxima al 90% de la altura de la ventana. 
     Puedes ajustarlo a 85vh, 95vh, etc., según prefieras. */
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* 2. Hacemos que el cuerpo del modal sea el área que se expanda y tenga scroll */
#cropModal .modal-body {
    /* Esta es la propiedad clave: permite que el cuerpo del modal tenga un scroll vertical 
     SÓLO si el contenido (la imagen) es más alto que el espacio disponible. */
    overflow-y: auto;
}

/* 3. (Buena práctica) Aseguramos que la imagen dentro del body se comporte bien */
#cropModal .modal-body img {
    width: 100%;
    /* Cropper.js ya lo maneja, pero no está de más asegurarlo */
    display: block;
    /* Evita espacios extra debajo de la imagen */
}

/* --- ESTILOS MEJORADOS PARA EL MODAL DE RECORTE (CROPMODAL) --- */

/* 1. Definimos la altura máxima del modal completo */
#cropModal .modal-content {
    max-height: 90vh;
    /* El modal nunca será más alto que el 90% de la pantalla */
    height: 90vh;
    /* Forzamos a que USE esa altura para que el body pueda expandirse */
    display: flex;
    flex-direction: column;
}

/* 2. Hacemos que el cuerpo del modal sea el área flexible que crece */
#cropModal .modal-body {
    flex-grow: 1;
    /* ¡CLAVE! Hace que el body ocupe todo el espacio vertical disponible */

    /* Un truco de flexbox para evitar problemas de desbordamiento en algunos navegadores */
    min-height: 0;
}

/* 3. El contenedor de la imagen debe ocupar todo el espacio del modal-body */
#cropModal .image-crop-container {
    width: 100%;
    height: 100%;
}

/* 4. La imagen (antes de que Cropper la tome) debe ajustarse dentro de su contenedor */
#imageToCrop {
    display: block;
    max-width: 100%;
    max-height: 100%;
    /* ¡CLAVE! Asegura que la imagen nunca sea más alta que su contenedor */
}