/* Optimización del Logo MentalFam */
/* Versión: 1.0.0 - Integración perfecta del logo real */

/* ===== ESTILOS BASE PARA EL LOGO ===== */
.logo, .sidebar-logo {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: drop-shadow(0 2px 8px rgba(123, 67, 151, 0.2));
}

/* ===== LOGO EN PÁGINA DE LOGIN ===== */
.login-container .logo {
    width: 200px !important;
    height: auto !important;
    max-height: 120px !important;
    margin-bottom: 1rem !important;
    filter: drop-shadow(0 4px 15px rgba(123, 67, 151, 0.3)) !important;
    animation: logoGlow 3s ease-in-out infinite alternate !important;
}

@keyframes logoGlow {
    from {
        filter: drop-shadow(0 4px 15px rgba(123, 67, 151, 0.3));
    }
    to {
        filter: drop-shadow(0 6px 20px rgba(30, 154, 138, 0.4));
    }
}

/* ===== LOGO EN SIDEBAR DEL DASHBOARD ===== */
.sidebar-header .sidebar-logo {
    width: 120px !important;
    height: auto !important;
    max-height: 80px !important;
    margin-bottom: 0.75rem !important;
    filter: drop-shadow(0 2px 8px rgba(123, 67, 151, 0.25)) !important;
    transition: all 0.3s ease !important;
}

.sidebar-header .sidebar-logo:hover {
    transform: scale(1.05) !important;
    filter: drop-shadow(0 4px 12px rgba(30, 154, 138, 0.4)) !important;
}

/* ===== LOGO EN HEADERS DE MODALES ===== */
.historia-header-professional::before {
    content: '' !important;
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 60px !important;
    height: 40px !important;
    display: inline-block !important;
    margin-right: 1rem !important;
    vertical-align: middle !important;
    filter: drop-shadow(0 2px 6px rgba(123, 67, 151, 0.2)) !important;
}

/* ===== LOGO EN CERTIFICADOS Y PDFs ===== */
.certificate-header::before,
.pdf-header::before {
    content: '' !important;
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 80px !important;
    height: 50px !important;
    display: block !important;
    margin: 0 auto 1rem auto !important;
    filter: drop-shadow(0 2px 8px rgba(123, 67, 151, 0.3)) !important;
}

/* ===== LOGO EN NOTIFICACIONES ===== */
.custom-alert::before {
    content: '' !important;
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 30px !important;
    height: 20px !important;
    display: inline-block !important;
    margin-right: 0.5rem !important;
    vertical-align: middle !important;
    opacity: 0.8 !important;
}

/* ===== OPTIMIZACIÓN MÓVIL PARA LOGOS ===== */
@media (max-width: 768px) {
    /* Logo en login móvil */
    .login-container .logo {
        width: 150px !important;
        max-height: 90px !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Logo en sidebar móvil */
    .sidebar-header .sidebar-logo {
        width: 80px !important;
        max-height: 50px !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Logo en headers móviles */
    .historia-header-professional::before {
        width: 40px !important;
        height: 25px !important;
        margin-right: 0.5rem !important;
    }
    
    /* Logo en certificados móviles */
    .certificate-header::before,
    .pdf-header::before {
        width: 60px !important;
        height: 35px !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Logo en notificaciones móviles */
    .custom-alert::before {
        width: 20px !important;
        height: 15px !important;
        margin-right: 0.3rem !important;
    }
}

@media (max-width: 480px) {
    /* Logo ultra-compacto para móviles pequeños */
    .login-container .logo {
        width: 120px !important;
        max-height: 70px !important;
    }
    
    .sidebar-header .sidebar-logo {
        width: 60px !important;
        max-height: 35px !important;
    }
    
    .historia-header-professional::before {
        width: 30px !important;
        height: 20px !important;
    }
}

/* ===== LOGO EN FAVICON Y PWA ===== */
.pwa-logo {
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 192px !important;
    height: 192px !important;
    border-radius: 20px !important;
    background-color: white !important;
    padding: 20px !important;
    box-shadow: 0 8px 25px rgba(123, 67, 151, 0.3) !important;
}

/* ===== LOGO EN SPLASH SCREEN ===== */
.splash-screen-logo {
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 200px !important;
    height: 120px !important;
    margin: 0 auto !important;
    animation: logoFadeIn 1.5s ease-out !important;
    filter: drop-shadow(0 8px 25px rgba(123, 67, 151, 0.4)) !important;
}

@keyframes logoFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== LOGO EN WATERMARK PARA REPORTES ===== */
.watermark-logo {
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 150px !important;
    height: 90px !important;
    opacity: 0.1 !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) rotate(-15deg) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* ===== LOGO EN HEADERS DE SECCIONES ===== */
.section-header.with-logo::before {
    content: '' !important;
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 40px !important;
    height: 25px !important;
    display: inline-block !important;
    margin-right: 0.75rem !important;
    vertical-align: middle !important;
    opacity: 0.8 !important;
    filter: drop-shadow(0 1px 3px rgba(123, 67, 151, 0.2)) !important;
}

/* ===== LOGO EN EMAILS Y EXPORTACIONES ===== */
.email-logo,
.export-logo {
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 120px !important;
    height: 70px !important;
    margin: 0 auto 1rem auto !important;
    display: block !important;
    filter: drop-shadow(0 3px 10px rgba(123, 67, 151, 0.3)) !important;
}

/* ===== LOGO EN MODO OSCURO ===== */
.dark-mode .logo,
.dark-mode .sidebar-logo {
    filter: drop-shadow(0 4px 15px rgba(30, 154, 138, 0.5)) brightness(1.1) !important;
}

.dark-mode .historia-header-professional::before,
.dark-mode .section-header.with-logo::before {
    filter: drop-shadow(0 2px 8px rgba(30, 154, 138, 0.4)) brightness(1.1) !important;
}

/* ===== EFECTOS ESPECIALES PARA EL LOGO ===== */
.logo-hover-effect {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.logo-hover-effect:hover {
    transform: translateY(-3px) scale(1.05) !important;
    filter: drop-shadow(0 8px 25px rgba(123, 67, 151, 0.4)) !important;
}

/* ===== LOGO EN DIFERENTES CONTEXTOS ===== */
.logo-small {
    width: 60px !important;
    height: auto !important;
    max-height: 35px !important;
}

.logo-medium {
    width: 100px !important;
    height: auto !important;
    max-height: 60px !important;
}

.logo-large {
    width: 180px !important;
    height: auto !important;
    max-height: 110px !important;
}

.logo-extra-large {
    width: 250px !important;
    height: auto !important;
    max-height: 150px !important;
}

/* ===== LOGO EN IMPRESIONES ===== */
@media print {
    .logo, .sidebar-logo {
        filter: none !important;
        -webkit-filter: none !important;
    }
    
    .watermark-logo {
        opacity: 0.05 !important;
    }
}

/* ===== LOGO EN ALTA RESOLUCIÓN ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo, .sidebar-logo {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }
}

/* ===== FALLBACK PARA LOGO NO ENCONTRADO ===== */
.logo[src*="data:image/svg+xml"],
.sidebar-logo[src*="data:image/svg+xml"] {
    background: linear-gradient(135deg, #7B4397 0%, #1E9A8A 100%) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.2rem !important;
    text-align: center !important;
    border-radius: 8px !important;
    padding: 0.5rem !important;
}

.logo[src*="data:image/svg+xml"]::after,
.sidebar-logo[src*="data:image/svg+xml"]::after {
    content: 'MentalFam' !important;
}

/* ===== LOGO EN TOOLTIPS Y AYUDA ===== */
.tooltip-with-logo::before {
    content: '' !important;
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 20px !important;
    height: 12px !important;
    display: inline-block !important;
    margin-right: 0.25rem !important;
    vertical-align: middle !important;
    opacity: 0.7 !important;
}

/* ===== LOGO EN ESTADOS DE CARGA ===== */
.loading-with-logo {
    position: relative !important;
}

.loading-with-logo::before {
    content: '' !important;
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 50px !important;
    height: 30px !important;
    display: block !important;
    margin: 0 auto 0.5rem auto !important;
    animation: logoFloat 2s ease-in-out infinite !important;
    filter: drop-shadow(0 3px 10px rgba(123, 67, 151, 0.3)) !important;
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* ===== LOGO EN BREADCRUMBS ===== */
.breadcrumb-logo {
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 25px !important;
    height: 15px !important;
    display: inline-block !important;
    margin-right: 0.5rem !important;
    vertical-align: middle !important;
    opacity: 0.8 !important;
}

/* ===== LOGO EN FOOTER (SI SE AGREGA) ===== */
.footer-logo {
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 100px !important;
    height: 60px !important;
    margin: 0 auto !important;
    opacity: 0.9 !important;
    filter: drop-shadow(0 2px 6px rgba(123, 67, 151, 0.2)) !important;
}

/* ===== LOGO EN SPLASH SCREEN PWA ===== */
.pwa-splash-logo {
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 150px !important;
    height: 90px !important;
    margin: 0 auto 2rem auto !important;
    animation: logoAppear 1s ease-out !important;
    filter: drop-shadow(0 6px 20px rgba(123, 67, 151, 0.4)) !important;
}

@keyframes logoAppear {
    from {
        opacity: 0;
        transform: scale(0.5) rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* ===== LOGO EN ALERTAS DE SISTEMA ===== */
.system-alert-logo {
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 35px !important;
    height: 20px !important;
    display: inline-block !important;
    margin-right: 0.5rem !important;
    vertical-align: middle !important;
    opacity: 0.9 !important;
}

/* ===== LOGO EN MODO INSTALACIÓN PWA ===== */
.install-prompt-logo {
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 80px !important;
    height: 50px !important;
    margin: 0 auto 1rem auto !important;
    animation: logoInstallPulse 1.5s ease-in-out infinite !important;
    filter: drop-shadow(0 4px 15px rgba(123, 67, 151, 0.4)) !important;
}

@keyframes logoInstallPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 4px 15px rgba(123, 67, 151, 0.4));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 6px 20px rgba(30, 154, 138, 0.5));
    }
}

/* ===== LOGO EN DIFERENTES TEMAS ===== */
/* Tema claro (por defecto) */
.theme-light .logo,
.theme-light .sidebar-logo {
    filter: drop-shadow(0 2px 8px rgba(123, 67, 151, 0.2)) !important;
}

/* Tema oscuro */
.theme-dark .logo,
.theme-dark .sidebar-logo {
    filter: drop-shadow(0 4px 15px rgba(30, 154, 138, 0.5)) brightness(1.1) !important;
}

/* ===== LOGO EN ESTADOS DE ERROR ===== */
.error-logo {
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 60px !important;
    height: 35px !important;
    margin: 0 auto 1rem auto !important;
    opacity: 0.6 !important;
    filter: grayscale(50%) drop-shadow(0 2px 6px rgba(220, 53, 69, 0.3)) !important;
}

/* ===== LOGO EN ESTADOS DE ÉXITO ===== */
.success-logo {
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 70px !important;
    height: 40px !important;
    margin: 0 auto 1rem auto !important;
    filter: drop-shadow(0 3px 10px rgba(40, 167, 69, 0.4)) brightness(1.1) !important;
    animation: logoSuccess 0.6s ease-out !important;
}

@keyframes logoSuccess {
    0% {
        transform: scale(0.8);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===== LOGO EN BACKGROUND SUTIL ===== */
.section-with-logo-bg {
    position: relative !important;
}

.section-with-logo-bg::before {
    content: '' !important;
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 200px !important;
    height: 120px !important;
    position: absolute !important;
    top: 50% !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
    opacity: 0.03 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* ===== LOGO EN TARJETAS ESPECIALES ===== */
.card-with-logo {
    position: relative !important;
    overflow: hidden !important;
}

.card-with-logo::after {
    content: '' !important;
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 40px !important;
    height: 25px !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    opacity: 0.2 !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* ===== OPTIMIZACIÓN PARA RETINA Y ALTA RESOLUCIÓN ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo, .sidebar-logo,
    .historia-header-professional::before,
    .certificate-header::before,
    .pdf-header::before {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
        image-rendering: pixelated !important;
    }
}

/* ===== ACCESIBILIDAD PARA EL LOGO ===== */
.logo[alt],
.sidebar-logo[alt] {
    font-size: 0 !important;
}

.logo[alt]::after,
.sidebar-logo[alt]::after {
    content: attr(alt) !important;
    font-size: 0.8rem !important;
    color: #7B4397 !important;
    display: block !important;
    text-align: center !important;
    margin-top: 0.25rem !important;
    font-weight: 600 !important;
}

/* ===== LOGO EN ORIENTACIÓN HORIZONTAL ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .sidebar-header .sidebar-logo {
        width: 60px !important;
        max-height: 35px !important;
    }
    
    .login-container .logo {
        width: 120px !important;
        max-height: 70px !important;
    }
}

/* ===== PRELOAD DEL LOGO ===== */
.logo-preload {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    background: url('logo-mentalfam.png') !important;
}

/* ===== LOGO EN ANIMACIONES DE TRANSICIÓN ===== */
.page-transition-logo {
    background: url('logo-mentalfam.png') no-repeat center !important;
    background-size: contain !important;
    width: 80px !important;
    height: 50px !important;
    margin: 0 auto !important;
    animation: logoTransition 0.8s ease-in-out !important;
    filter: drop-shadow(0 4px 12px rgba(123, 67, 151, 0.3)) !important;
}

@keyframes logoTransition {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-180deg);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1) rotate(-90deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}