@import './app/sesion/navBar.css';
@import "./app/sesion/landing.css";
@import "./app/inicioSesion/inicioForm.css";
@import "./app/registro/registroForm.css";
@import "./app/profile/servicios/servSearch.css";
@import "./app/search/searchForm.css";
@import "./app/search/searchFormAli.css";
@import "./app/search/searchFormEnt.css";
@import "./app/search/searchFormEstetica.css";
@import "./app/search/searchFormVet.css";
@import "./app/search/searchComps/searchHead.css";
@import "./app/search/searchMuro.css";
@import "./app/search/searchMuroAli.css";
@import "./app/search/searchMuroEnt.css";
@import "./app/search/searchMuroEstetica.css";
@import "./app/search/searchMuroVet.css";
@import "./app/profile/servicios/cuidador/cuidadorForm.css";
@import "./app/profile/servicios/alimentacion/alimForm.css";
@import "./app/profile/servicios/entrenamiento/entrenadorForm.css";
@import "./app/profile/servicios/estetica/esteticaForm.css";
@import "./app/profile/servicios/vet/vetForm.css";
@import "./app//profile/servicios/cuidador/ciudadorSearchCard.css";
@import "./app//profile/servicios/alimentacion/alimSearchCard.css";
@import "./app//profile/servicios/estetica/esteticaSearchCard.css";
@import "./app//profile/servicios/entrenamiento/entrenadorSearchCard.css";
@import "./app//profile/servicios/vet/vetSearchCard.css";
@import "./app/profile/profileHeadToP.css";
@import "./app/profile/userCard.css";
@import "./app/profile/userCardAdds/descriptionSave.css";
@import "./app/profile/userCardAdds/imageGallery.css";
@import "./app/profile/userCardAdds/loadGallery.css";
@import "./app/profile/userCardAdds/videoGallery.css";
@import "./app/profile/userCardAdds/loadVideoGallery.css";
@import "./app/profile/petFamily/petFam.css";
@import "./app/profile/offCanvas/offCanvasSet.css";
@import "./app/social/socialProfile.css";
@import "./app/social/imagesSocial.css";
@import "./app/social/videoSocial.css";
@import "./app/social/socialMuro.css";
@import "./app/social/comments/commentsActions.css";
@import "./app/dating/datingUserCard.css";
@import "./app/dating/datingProfile.css";
@import "./app/dating/datingMatch.css";
@import "./app/profile/profileUpdate/profileUpdates.css";
@import "./app/profile/servicios/cuidador/cuidadorUserCard.css";
@import "./app/profile/servicios/alimentacion/alimUserCard.css";
@import "./app/profile/servicios/estetica/esteticaUserCard.css";
@import "./app/profile/servicios/entrenamiento/entrenadorUserCard.css";
@import "./app/profile/servicios/vet/vetUserCard.css";
@import "./app/profile/userCardAdds/followAction/followAdd.css";
@import "./app/profile/userCardAdds/msg/msg.css";
@import "./app/profile/userCardAdds/msg/datingMsg.css";
@import "./app/sesion/utils/universalGallery.css";
@import "./app/profile/servicios/servDatos.css";
@import "./app/profile/servicios/serv.css";

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

:root {
    /* Colores de Marca */
    --color-primary: #5CE1E6;
    /* Cyan */
    --color-secondary: #FFBD59;
    /* Amarillo */
    --color-accent: #CB6CE6;
    /* Rosa */

    /* Colores UI */
    --bg-body: #f8f9fc;
    --text-main: #333333;
    --text-muted: #6c757d;
    --text-dark: #333;

    /* Espaciado y Formas */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 50px;
    /* Para tarjetas */
    --radius-full: 9999px;

    /* Sombras Profesionales */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);

    /* Tipografías */
    --font-heading: 'Baloo 2', cursive;
    /* Para H1, H2, H3 */
    --font-body: 'Nunito', sans-serif;
    /* Para párrafos, botones, inputs */
}


body {
    color: #333;
    min-height: 100vh;
    padding-top: 69px;
    top: 0 !important;
}

.tLogo {
    color: #5CE1E6;
}

.zLogo {
    color: #FFBD59;
}

/* main.css - Agrega esto al final */

/* Forzar comportamiento de scroll nativo en móviles para los modales */
.modal {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Clave para iPhone */
}

.modal-dialog {
    /* 20px arriba/abajo, AUTO a los lados (Esto hace la magia del centrado) */
    margin: 20px auto !important;

    height: auto !important;
    min-height: calc(100% - 40px);
    /* Ajuste para que el scroll fluya bien */

    /* Asegura que no se pegue a la izquierda en pantallas anchas */
    display: flex;
    justify-content: center;
}

/* El contenido debe retomar el ancho normal */
.modal-content {
    width: 100%;
    height: auto !important;
    overflow: visible !important;
}


/* Corrección de Z-Index para Galería sobre Modal */

#imageModalGalery {
    /* Bootstrap usa 1055 para modales normales. 
       Usamos 2000 para asegurar que este esté SIEMPRE encima de todo. */
    z-index: 2000 !important;

    /* Aseguramos que el fondo sea negro sólido para tapar el modal de abajo */
    background-color: #000000 !important;
}

/* Opcional: Asegurar que el botón de cerrar de la galería esté accesible */
#imageModalGalery .btn-close {
    z-index: 2010 !important;
    filter: invert(1);
    /* Asegura que la X sea blanca sobre fondo negro */
}

/* --- MEJORAS GLOBALES (Index.html) --- */

/* Scrollbar personalizado (más elegante) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* Selección de texto con color de marca */
::selection {
    background-color: var(--color-primary);
    color: white;
}

/* Evitar el "rebote" elástico en iOS en el body, pero permitirlo en contenedores */
html {
    overscroll-behavior-y: none;
}

/* Asegurar que contenedores de inyección no afecten el layout si están vacíos */
#modalPzg,
#modalPzgv,
#modalMss,
#modalMssD {
    display: contents;
    /* Hace que el contenedor sea transparente al DOM */
}

/* Loader Global Unificado */
.spinner-border {
    width: 2rem;
    height: 2rem;
    border-width: 3px;
    /* Más grueso para visibilidad */
    color: var(--color-primary) !important;
    /* Siempre color de marca */
}


#postModal {
    background: white;
}

#postModalCont {
    border-radius: 15px;
}


/* Contenedor seguro para Cropper.js */
.image-crop-container {
    width: 100%;
    /* Altura máxima segura: 70% de la altura de la pantalla */
    max-height: 70vh;
    /* Fondo gris para ver bordes de imágenes blancas */
    background-color: #f0f0f0;
    /* Centrado */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Cortar cualquier desborde */
}

/* Regla vital para que Cropper funcione bien */
.image-crop-container img {
    display: block;
    max-width: 100%;
    /* La imagen nunca será más ancha que el contenedor */
    max-height: 70vh;
    /* Ni más alta */
}


/* --- MODAL Y HEADER --- */
#personasBusquedaModal .modal-header,
#resultadosBusquedaModal .modal-header {
    background: linear-gradient(to right, #ffffff, #f4fbfb);
    border-bottom: 1px solid #e0e0e0;
    padding: 15px 20px;
}

.modal-title {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-icon-header {
    font-size: 1.2rem;
}

/* Botón cerrar X */
.modal-header .btn-close {
    filter: none !important;
    opacity: 0.5;
}

.modal-header .btn-close:hover {
    opacity: 1;
}


/* --- FORMULARIO (Inputs Flotantes) --- */
.form-floating>.form-control,
.form-floating>.form-select {
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    font-size: 1rem;
    background-color: #fff;
}

.form-floating>.form-control:focus,
.form-floating>.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(92, 225, 230, 0.15);
}

.form-floating>label {
    color: #999;
    font-size: 0.9rem;
    padding-left: 15px;
}

/* Estado Focus Label */
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    color: var(--color-primary);
    font-weight: 600;
}


/* --- BOTÓN DE BÚSQUEDA --- */
.btn-primary-gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, #4AD0D5 100%);
    border: none;
    border-radius: var(--radius-pill);
    padding: 14px 0;
    color: white;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(92, 225, 230, 0.4);
    transition: all 0.3s;
    font-family: 'Nunito', sans-serif;
}

.btn-primary-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(92, 225, 230, 0.5);
    background: linear-gradient(135deg, #4AD0D5 0%, #3bcace 100%);
    color: white;
}


/* --- RESULTADOS DE BÚSQUEDA (Container) --- */
#resultadosBusquedaContainer {
    background-color: #f9f9f9;
    min-height: 200px;
    /* Altura mínima si está vacío */
}

/* Tarjeta de Usuario Encontrado */
.user-result-card {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
    cursor: pointer;
}

.user-result-card:hover {
    background-color: #f0fdfd;
    /* Highlight cyan suave */
}

.user-result-card:last-child {
    border-bottom: none;
}

/* Avatar */
.result-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Info Texto */
.result-info {
    flex-grow: 1;
}

.result-name {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 1rem;
    margin-bottom: 2px;
}

.result-location {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Botón Ver Perfil (Flecha) */
.result-arrow {
    color: #ccc;
    font-size: 1.2rem;
    transition: color 0.2s;
}

.user-result-card:hover .result-arrow {
    color: var(--color-primary);
    transform: translateX(3px);
}

/* Mensaje "No encontrado" */
.no-results-msg {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.no-results-icon {
    font-size: 3rem;
    margin-bottom: 10px;
    display: block;
    opacity: 0.5;
}


/* =========================================
   MODAL DE LIKES (Diseño Uniforme)
   ========================================= */

/* --- Contenedor y Bordes --- */
#likesModal .modal-content {
    border: none;
    border-radius: 16px;
    /* Radio consistente con otros modales */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    /* Para que el header no rompa el borde */
}

/* --- Header con Degradado Suave --- */
#likesModal .modal-header {
    background: linear-gradient(to right, #ffffff, #fff4f6);
    /* Toque rojo muy sutil (color corazón) */
    border-bottom: 1px solid #f0f0f0;
    padding: 15px 20px;
}

#likesModal .modal-title {
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    color: #333;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Añadir icono corazón vía CSS si no está en HTML (opcional pero bonito) */
#likesModal .modal-title::before {
    content: '❤️';
    font-size: 1rem;
}

/* --- Botón Cerrar (X) --- */
#likesModal .btn-close {
    filter: none;
    opacity: 0.5;
    background-size: 10px;
    /* X un poco más fina */
    transition: all 0.2s ease;
}

#likesModal .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
    /* Efecto interactivo */
}

/* --- Cuerpo (Lista de Usuarios) --- */
#likesModal .modal-body {
    padding: 0;
    /* Quitamos padding para que la lista toque los bordes */
    max-height: 60vh;
    /* Altura máxima para scroll */
    overflow-y: auto;
    background-color: #fff;
    /* Scrollbar bonito */
    scrollbar-width: thin;
    scrollbar-color: #e0e0e0 transparent;
}

#likesModal .modal-body::-webkit-scrollbar {
    width: 6px;
}

#likesModal .modal-body::-webkit-scrollbar-thumb {
    background-color: #e0e0e0;
    border-radius: 4px;
}

/* --- Items de la Lista (Generados dinámicamente) --- */
/* Estas clases aplicarán a los divs que inyecta tu JS */

#likesModalBody>div {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f9f9f9;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#likesModalBody>div:hover {
    background-color: #fff0f3;
    /* Rojo pastel muy claro al pasar el mouse */
}

#likesModalBody>div:last-child {
    border-bottom: none;
}

/* Avatar del usuario (dentro del div dinámico) */
#likesModalBody img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Nombre del usuario */
#likesModalBody span {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    color: #444;
    font-size: 0.95rem;
}

/* Mensaje "Sin likes" */
#likesModalBody p.text-muted {
    padding: 30px;
    text-align: center;
    font-style: italic;
    color: #999 !important;
}

/* --- AJUSTE DE ESPACIO PARA BARRA INFERIOR (MÓVIL) --- */

@media (max-width: 576px) {
    body {
        /* 60px de la barra + 20px de aire + safe area */
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }

    /* Aseguramos que el contenedor social no tenga doble padding */
    .pz-social-container,
    .dating-profile {
        padding-bottom: 0 !important;
    }

    /* Ajuste para el botón sticky de WhatsApp en perfiles */
    /* Para que quede ENCIMA de la barra de navegación */
    .pz-sticky-footer,
    .pz-ali-footer,
    .pz-est-footer,
    .pz-vet-footer,
    .pz-ent-footer {
        bottom: calc(60px + env(safe-area-inset-bottom)) !important;
        /* Subir altura de la barra */
        z-index: 1045;
        /* Encima de la barra de navegación */
    }

    #personasBusquedaModal .modal-body {
        padding: 20px;
    }
}

/* Solo afecta al popover de términos */
.terms-popover-landing {
    max-width: 600px;
    width: 90vw;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: none;
}

.terms-popover-landing .popover-body {
    padding: 25px;
    font-size: 0.95rem;
    color: #444;
}

/* Estilos internos del texto */
.terms-popover-landing strong {
    color: #5CE1E6;
}


/* Prompt de instalación iOS estilo "Toast" */
.ios-prompt-toast {
    position: fixed;
    bottom: 30px;
    /* Ajustar para que no tape el botón compartir */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 360px;
    background: rgba(30, 30, 30, 0.95);
    /* Fondo oscuro elegante */
    backdrop-filter: blur(10px);
    color: white;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    /* Encima de todo */
    font-family: 'Nunito', sans-serif;
    animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
    from {
        transform: translate(-50%, 100%);
        opacity: 0;
    }

    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

.ios-prompt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: 700;
    color: #5CE1E6;
    /* Cyan de marca */
}

.btn-close-white {
    background: none;
    border: none;
    color: #aaa;
    font-size: 1.5rem;
    line-height: 0.5;
    cursor: pointer;
    padding: 0 5px;
}

.ios-prompt-content p {
    font-size: 0.9rem;
    margin-bottom: 12px;
    color: #eee;
}

.ios-instruction {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    margin-bottom: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.ios-share-icon {
    width: 20px;
    height: 20px;
    filter: invert(1);
    /* Hacemos el icono blanco si es negro */
}

/* Triángulo apuntando abajo */
.ios-prompt-arrow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(30, 30, 30, 0.95);
}