/* Estilos personalizados para Clínica Veterinària Godella */

/* Iconos de Material Icons */
.material-icons {
    vertical-align: middle;
}

/* Animaciones suaves para el modal */
#mapModal {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Efectos hover mejorados */
.hover-lift:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Configuración de Tailwind personalizada */
:root {
    --color-primary: #6B9080;
    --color-background-light: #F8F9FA;
    --color-background-dark: #1A202C;
    --color-text-light: #212529;
    --color-text-dark: #E2E8F0;
    --color-card-light: #FFFFFF;
    --color-card-dark: #2D3748;
}

/* Mejoras adicionales para la experiencia de usuario */
.transition-smooth {
    transition: all 0.3s ease-in-out;
}

/* Mejoras para accesibilidad */
.focus-visible:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Optimizaciones para imágenes */
img {
    max-width: 100%;
    height: auto;
}

/* Mejoras para el modal */
.modal-backdrop {
    backdrop-filter: blur(2px);
}

/* Estilos para imagen principal de la clínica */
/* Escritorio - configuración por defecto */
.clinic-image {
    object-position: center -110px;
}

.clinic-image-container {
    height: 340px;
}

/* Estilos para dispositivos móviles */
@media (max-width: 767px) {

    /* Header logo - ocultar en móvil para dar más espacio */
    .header-logo {
        display: none;
    }

    /* Header título - reducir tamaño en móvil para que quepa en una línea */
    .header-title {
        font-size: 1.25rem !important;
        /* Necesario para sobrescribir text-3xl de Tailwind */
        line-height: 1.75rem !important;
    }

    /* Imagen principal en móvil - sin zoom, mostrar imagen completa */
    .clinic-image {
        object-fit: contain;
        object-position: center;
        height: 200px;
        background-color: #f8f9fa;
        width: 100%;
    }

    /* Contenedor de imagen en móvil - altura automática */
    .clinic-image-container {
        height: auto;
    }
}