/**
 * components.css
 * Estilos dos componentes base (Button, Card, Input, Select, Modal, Badge, Avatar),
 * de feedback (Toast, Dialog, Loading, Progress) e de educação (AIBox, QuizCard, ...).
 */

/* Button */
.lds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  font-weight: 600; transition: transform 0.1s ease, background-color 0.15s ease; white-space: nowrap;
}
.lds-btn:active { transform: scale(0.98); }
.lds-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.lds-btn--primary { background: var(--color-primary); color: #fff; }
.lds-btn--primary:hover { background: var(--color-primary-hover); }
.lds-btn--outline { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-primary); }
.lds-btn--ghost { background: transparent; color: var(--color-text-secondary); }
.lds-btn--danger { background: var(--color-danger); color: #fff; }
.lds-btn--ai { background: var(--color-ai); color: #fff; }
.lds-btn--success { background: var(--color-success); color: #fff; }
.lds-btn--error { background: var(--color-danger); color: #fff; }
.lds-btn__spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  animation: lds-spin 0.6s linear infinite;
}

/* Card */
.lds-card { background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border); overflow: hidden; }
.lds-card--hoverable { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.lds-card--hoverable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.lds-card--clickable { cursor: pointer; }

/* Input */
.lds-input { display: flex; flex-direction: column; gap: var(--space-2); }
.lds-input__label { font-size: var(--font-size-sm); font-weight: 600; }
.lds-input__wrap { display: flex; align-items: center; gap: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); background: var(--color-surface); }
.lds-input__wrap:focus-within { border-color: var(--color-primary); }
.lds-input__field { border: none; outline: none; background: transparent; width: 100%; }
.lds-input__icon { color: var(--color-text-secondary); }
.lds-input--error .lds-input__wrap { border-color: var(--color-danger); }
.lds-input__error { color: var(--color-danger); font-size: var(--font-size-sm); }

/* Select */
.lds-select { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.lds-select__label { font-size: var(--font-size-sm); font-weight: 600; }
.lds-select__field { appearance: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-8) var(--space-3) var(--space-4); background: var(--color-surface); }
.lds-select__caret { position: absolute; right: var(--space-4); bottom: 14px; pointer-events: none; color: var(--color-text-secondary); }

/* Badge */
.lds-badge { display: inline-block; padding: 2px var(--space-3); border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.lds-badge--neutral { background: var(--color-surface-alt); color: var(--color-text-secondary); }
.lds-badge--success { background: rgba(16,185,129,0.15); color: var(--color-success); }
.lds-badge--warning { background: rgba(245,158,11,0.15); color: var(--color-warning); }
.lds-badge--danger { background: rgba(239,68,68,0.15); color: var(--color-danger); }
.lds-badge--info { background: rgba(59,130,246,0.15); color: var(--color-info); }

/* Avatar */
.lds-avatar { border-radius: 50%; overflow: hidden; background: var(--color-primary); display: grid; place-items: center; flex-shrink: 0; }
.lds-avatar__image { width: 100%; height: 100%; object-fit: cover; }
.lds-avatar__initials { color: #fff; font-weight: 700; font-size: 0.85rem; }

/* Modal */
.lds-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: grid; place-items: center; z-index: 1000; }
.lds-modal__panel { background: var(--color-surface); border-radius: var(--radius-lg); width: 100%; max-width: 480px; box-shadow: var(--shadow-lg); }
.lds-modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); border-bottom: 1px solid var(--color-border); }
.lds-modal__title { font-size: var(--font-size-lg); font-weight: 700; }
.lds-modal__close { color: var(--color-text-secondary); }
.lds-modal__body { padding: var(--space-5); }
.lds-dialog__message { color: var(--color-text-secondary); margin-bottom: var(--space-5); }
.lds-dialog__actions { display: flex; justify-content: flex-end; gap: var(--space-3); }

/* Toast */
.lds-toast-container { position: fixed; bottom: var(--space-6); right: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); z-index: 1100; }
.lds-toast { display: flex; align-items: center; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); animation: lds-toast-in 0.2s ease; }
.lds-toast--success .lds-toast__icon { color: var(--color-success); }
.lds-toast--error .lds-toast__icon { color: var(--color-danger); }
.lds-toast--warning .lds-toast__icon { color: var(--color-warning); }
.lds-toast--info .lds-toast__icon { color: var(--color-info); }

/* Loading */
.lds-loading { display: flex; align-items: center; gap: var(--space-2); }
.lds-loading__spinner { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--color-border); border-top-color: var(--color-primary); animation: lds-spin 0.6s linear infinite; }
.lds-loading--fullscreen { position: fixed; inset: 0; justify-content: center; background: var(--color-bg); z-index: 2000; }

/* Progress */
.lds-progress__label { font-size: var(--font-size-sm); font-weight: 600; margin-bottom: var(--space-1); display: block; }
.lds-progress__track { height: 8px; border-radius: 999px; background: var(--color-surface-alt); overflow: hidden; }
.lds-progress__fill { height: 100%; background: var(--color-primary); transition: width 0.3s ease; }

/* AIBox */
.lds-aibox { background: var(--color-ai); border-radius: var(--radius-lg); padding: var(--space-6); color: #fff; }
.lds-aibox__header { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; margin-bottom: var(--space-4); }
.lds-aibox__input { width: 100%; border-radius: var(--radius-md); border: none; padding: var(--space-4); resize: vertical; font-family: inherit; }
.lds-aibox__footer { margin-top: var(--space-4); display: flex; justify-content: flex-end; }
.lds-aibox .lds-btn--ai { background: #fff; color: var(--color-primary); }

/* QuizCard */
.lds-quizcard__cover { height: 120px; background: var(--color-surface-alt) center/cover; }
.lds-quizcard__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.lds-quizcard__title { font-size: var(--font-size-md); font-weight: 700; }
.lds-quizcard__description { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* DashboardCard */
.lds-dashboard-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); text-align: left; transition: box-shadow 0.15s ease; }
.lds-dashboard-card:hover { box-shadow: var(--shadow-md); }
.lds-dashboard-card__icon { font-size: 1.4rem; color: var(--color-primary); }
.lds-dashboard-card__title { font-weight: 700; }
.lds-dashboard-card__description { color: var(--color-text-secondary); font-size: var(--font-size-sm); }

/* ContinueCard */
.lds-continue-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); cursor: pointer; }
.lds-continue-card__info { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.lds-continue-card__label { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.lds-continue-card__arrow { color: var(--color-primary); }

/* ThemeCard */
.lds-theme-card { position: relative; height: 140px; border-radius: var(--radius-lg); background: var(--color-surface-alt) center/cover; border: 2px solid transparent; display: flex; align-items: flex-end; padding: var(--space-3); }
.lds-theme-card.is-selected { border-color: var(--color-primary); }
.lds-theme-card__name { color: #fff; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.lds-theme-card__check { position: absolute; top: var(--space-2); right: var(--space-2); color: var(--color-primary); background: #fff; border-radius: 50%; }

/* AchievementCard */
.lds-achievement-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-alt); }
.lds-achievement-card.is-locked { opacity: 0.4; }
.lds-achievement-card__icon { font-size: 1.5rem; color: var(--color-primary); }

/* XPBar */
.lds-xpbar { display: flex; flex-direction: column; gap: var(--space-1); }
.lds-xpbar__count { font-size: 0.75rem; color: var(--color-text-secondary); align-self: flex-end; }

/* JourneyCard */
.lds-journey-card { border-radius: var(--radius-lg); background: var(--color-surface-alt) center/cover; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); min-height: 140px; justify-content: flex-end; }
.lds-journey-card__title { color: #fff; font-weight: 700; }