/* ═══════════════════════════════════════════════════════════════
   Avatar Premium (Global)
   Escopo: componentes Tabler .avatar
   Objetivo: visual premium mantendo tamanhos e responsividade nativos
   ═══════════════════════════════════════════════════════════════ */

:root {
    --ap-avatar-border-light: rgba(11, 31, 51, 0.14);
    --ap-avatar-shadow-light: 0 8px 20px rgba(11, 31, 51, 0.16);
    --ap-avatar-fallback-bg-light: linear-gradient(135deg, #0B1F33 0%, #1A3A5C 100%);
    --ap-avatar-fallback-text-light: #D6B15E;
    --ap-avatar-border-dark: rgba(214, 177, 94, 0.34);
    --ap-avatar-shadow-dark: 0 10px 24px rgba(0, 0, 0, 0.42);
    --ap-avatar-fallback-bg-dark: linear-gradient(135deg, #0A1B2D 0%, #123252 100%);
    --ap-avatar-fallback-text-dark: #E8CD90;
}

.avatar {
    border-radius: 100rem;
    overflow: hidden;
    border: 1px solid var(--ap-avatar-border-light);
    box-shadow: var(--ap-avatar-shadow-light);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--ap-avatar-fallback-text-light);
}

a.avatar {
    text-decoration: none;
}

.avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.avatar:not([style*="background-image"]) {
    background: var(--ap-avatar-fallback-bg-light);
    color: var(--ap-avatar-fallback-text-light);
}

[data-bs-theme=dark] .avatar {
    border-color: var(--ap-avatar-border-dark);
    box-shadow: var(--ap-avatar-shadow-dark);
    color: var(--ap-avatar-fallback-text-dark);
}

[data-bs-theme=dark] .avatar:not([style*="background-image"]) {
    background: var(--ap-avatar-fallback-bg-dark);
    color: var(--ap-avatar-fallback-text-dark);
}