/* assets/css/components.css */
/* VERSÃO COM AVATAR CORRIGIDO */

.avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #FFF;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    flex-shrink: 0; /* Impede que o avatar encolha */
}
.avatar-initials--small {
    width: 48px;
    height: 48px;
}
.board-slot .avatar-initials { width: 100%; height: 100%; font-size: 1.5rem; }
.board-center .avatar-initials { width: 100%; height: 100%; font-size: 2rem; }


/* Demais componentes... (o restante do arquivo continua o mesmo da resposta anterior) */
.button { padding: 10px 16px; border-radius: var(--border-radius); border: none; font-weight: 600; cursor: pointer; transition: var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-sm); text-decoration: none; }
.button--primary { background: var(--gold-gradient); color: #000; }
.button--secondary { background-color: var(--surface-1); color: var(--text-0); border: 1px solid var(--border-color); }
.card { background-color: var(--bg-1); border: 1px solid var(--surface-0); border-radius: var(--border-radius); display: flex; flex-direction: column; }
.card__header { padding: var(--spacing-md); border-bottom: 1px solid var(--surface-0); }
.card__header--space-between { display: flex; justify-content: space-between; align-items: center; }
.card__title { font-size: 1.1rem; font-weight: 600; }
.card__body { padding: var(--spacing-md); flex-grow: 1; }
.card__body--center-row { display: flex; align-items: center; gap: var(--spacing-md); }
.kpi-card--highlight { border-color: var(--gold-2); }
.kpi-value { font-size: 2.25rem; font-weight: 700; line-height: 1; margin-bottom: var(--spacing-md); }
.kpi-value--gold { background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.kpi-currency { font-size: 1rem; color: var(--text-2); }
.input-group { display: flex; }
.input { background-color: var(--surface-0); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 10px; color: var(--text-0); width: 100%; height: 42px; }
.input-group .input { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; }
.input-group .button { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.nav-item { display: flex; align-items: center; gap: var(--spacing-md); padding: 12px; border-radius: var(--border-radius); color: var(--text-1); font-weight: 500; text-decoration: none; }
.nav-item:hover { background-color: var(--surface-0); color: var(--text-0); }
.nav-item.active { background: var(--gold-gradient); color: #000; }
.nav-item__icon { width: 20px; height: 20px; flex-shrink: 0; }
.dropdown { position: relative; }
.dropdown__toggle { background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-sm); padding: 4px; border-radius: 6px; }
.lang-selector .dropdown__toggle { padding: 8px; }
.dropdown__toggle:hover { background-color: var(--surface-0); }
.dropdown__menu { position: absolute; top: calc(100% + 8px); right: 0; background-color: var(--surface-0); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: var(--spacing-sm); list-style: none; min-width: 180px; z-index: 10; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: var(--transition-fast); }
.dropdown.open .dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown__item { display: flex; align-items: center; gap: var(--spacing-sm); width: 100%; text-align: left; background: none; border: none; padding: 8px 12px; border-radius: 6px; color: var(--text-1); cursor: pointer; text-decoration: none; font-size: 0.9rem; }
.dropdown__item:hover { background-color: var(--surface-1); color: var(--text-0); }
.dropdown__item--danger:hover { background-color: #5d2828; color: var(--danger); }
.dropdown__divider { margin: var(--spacing-sm) 0; border-color: var(--border-color); border-bottom: 1px solid var(--border-color); }
.dropdown__icon { width: 18px; height: 18px; color: var(--text-2); }
.user-profile__info { text-align: left; }
.user-profile__name { display: block; font-weight: 600; color: var(--text-0); line-height: 1.2; }
.user-profile__level { display: block; font-size: 0.8rem; color: var(--gold-0); }
.stepper { display: flex; justify-content: space-between; position: relative; }
.stepper::before { content: ''; position: absolute; top: 18px; left: 10%; right: 10%; height: 2px; background-color: var(--border-color); }
.step { position: relative; text-align: center; width: 20%; }
.step__icon { width: 36px; height: 36px; border-radius: 50%; background-color: var(--surface-1); color: var(--text-2); border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-weight: bold; margin: 0 auto var(--spacing-sm); position: relative; z-index: 1; }
.step.completed .step__icon { background-color: var(--success); border-color: var(--success); color: var(--bg-1); }
.step.current .step__icon { border-color: var(--gold-1); background-color: var(--bg-1); color: var(--gold-1); }
.step__label { font-size: 0.85rem; color: var(--text-2); }
.step.completed .step__label, .step.current .step__label { color: var(--text-1); }
.tabs { display: flex; gap: var(--spacing-sm); background-color: var(--surface-0); padding: 4px; border-radius: var(--border-radius); }
.tabs__btn { background: none; border: none; color: var(--text-1); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-weight: 500; }
.tabs__btn.active { background-color: var(--surface-1); color: var(--text-0); }