/**
 * Guardião Renal - Estilos para Logo da Marca
 * Centraliza todos os estilos relacionados à logo
 */

/* ========================================
   LOGO SIDEBAR
   ======================================== */

.sidebar .brand-logo {
    display: block;
    max-width: 180px;
    width: 100%;
    height: auto;
    margin: 0 auto 0.75rem;
    filter: brightness(0) invert(1); /* Torna a logo branca na sidebar escura */
    transition: all 0.3s ease;
}

.sidebar .brand:hover .brand-logo {
    transform: scale(1.05);
    filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(255,255,255,0.3));
}

/* ========================================
   LOGO LOGIN
   ======================================== */

.login-logo img {
    display: block;
    margin: 0 auto 1.5rem;
    max-width: 300px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
    transition: all 0.3s ease;
}

.login-box:hover .login-logo img {
    transform: translateY(-3px);
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.2));
}

/* ========================================
   LOGO HEADER (futuro)
   ======================================== */

.page-header .header-logo {
    max-height: 50px;
    width: auto;
    margin-right: 1rem;
}

/* ========================================
   RESPONSIVIDADE
   ======================================== */

@media (max-width: 768px) {
    .sidebar .brand-logo {
        max-width: 140px;
    }
    
    .login-logo img {
        max-width: 200px;
    }
}

/* ========================================
   ANIMAÇÕES
   ======================================== */

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

.login-logo img {
    animation: logoFloat 3s ease-in-out infinite;
}

/* Desabilitar animação se preferir performance */
@media (prefers-reduced-motion: reduce) {
    .login-logo img {
        animation: none;
    }
    
    .sidebar .brand:hover .brand-logo {
        transform: none;
    }
}

/* ========================================
   MODOS DE COR
   ======================================== */

/* Logo clara (para fundos escuros) */
.brand-logo-light {
    filter: brightness(0) invert(1);
}

/* Logo escura (para fundos claros) */
.brand-logo-dark {
    filter: none;
}

/* Logo com cores originais */
.brand-logo-color {
    filter: none;
}

/* ========================================
   ESTADOS HOVER
   ======================================== */

.brand-logo {
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-logo:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
}