/* =========================================================
   PROFEON — ELEMENTS (v1)
   1) Card + Section Header
   2) Button + Badge/Pill
   3) Avatar + Media-box
   Depende de: tokens.css + base.css + typography.css + layout.css
========================================================= */
/* =========================================================
   1) CARD
========================================================= */
/* Card base (container visual padrão) */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);

    /* permite header/body com bg diferentes sem vazar */
}

/* Padding padrão do conteúdo */
.card-body {
    padding: var(--s-6);
    overflow: visible;
    min-height: 0;

    /* importante quando card vira flex/grid */
}

/* Variações úteis */
.card-soft {
    background: linear-gradient(180deg, var(--grad-soft-start), var(--grad-soft-end));
    border-color: rgba(0,0,0,.04);
}

.card-outline {
    background: transparent;
    border: 1px solid var(--border);
    box-shadow: none;
}

/* Header padrão do card */
.card-header {
    padding: var(--s-6);
    border-bottom: 1px solid rgba(0,0,0,.04);
}

body.dark .card-header {
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Header com “faixa” mais destacada (como seus blocos) */
.card-header-soft {
    background: var(--surface-2);
}

/* Header com “faixa” mais destacada (como seus blocos) */
.card-header-accent {
    background: var(--accent-light);
}

/* =========================================================
   CARD — VARIAÇÕES DE FUNDO (com texto adaptado)
========================================================= */
/* PRIMARY */
.card--primary {
    background: var(--primary);
    color: var(--on-primary);
}

.card--primary .tx-muted {
    color: color-mix(in srgb, var(--on-primary) 70%, transparent);
}

/* SECONDARY */
.card--secondary {
    background: var(--secondary);
    color: var(--on-secondary);
}

.card--secondary .tx-muted {
    color: color-mix(in srgb, var(--on-secondary) 70%, transparent);
}

/* ACCENT */
.card--accent {
    background: var(--accent);
    color: var(--on-accent);
}

.card--accent .tx-muted {
    color: color-mix(in srgb, var(--on-accent) 70%, transparent);
}

/* =========================================================
   1b) SECTION HEADER (título + ação)
========================================================= */
/* Use dentro do card-header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}

.section-header-title {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.section-header h3,
.section-header h4 {
    margin: 0;
}

.section-subtitle {
    color: var(--muted);
    font-size: var(--fs-sm);
    line-height: 1.3;
}

/* =========================================================
   BREADCRUMB
========================================================= */
.breadcrumb {
    color: var(--muted);
    font-size: var(--fs-sm);
    flex-wrap: wrap;
}
.breadcrumb .breadcrumb-sep { color: var(--muted); }
.breadcrumb a.link {
    color: var(--primary);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: var(--r-sm);
}
.breadcrumb a.link:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

/* =========================================================
   TOAST (global)
   Usado por js/core/toast.js — container + itens
========================================================= */
.toast-container {
    position: fixed;
    top: var(--s-6);
    right: var(--s-6);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    pointer-events: none; /* permite clicar abaixo quando fora do toast */
}

.toast {
    pointer-events: auto;
    min-width: 260px;
    max-width: 420px;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
}

.toast.is-visible { opacity: 1; transform: translateY(0); }

.toast-success {
    background: color-mix(in srgb, var(--success) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--success) 35%, var(--border));
}

.toast-warning {
    background: color-mix(in srgb, var(--warning) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
}

.toast-error {
    background: color-mix(in srgb, var(--danger) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}

.toast-info {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

/* =========================================================
   MEDIA FRAME (reaproveitável)
========================================================= */
.media-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    background: var(--surface-2);
    border: 1px solid var(--border);
    overflow: hidden;
}
.media-frame > iframe,
.media-frame > img,
.media-frame > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.media-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--muted);
}

/* =========================================================
   GRID CARDS — quando cards estão dentro de .grid, ocupar coluna
========================================================= */
.grid .content-card {
    min-width: 0;
    max-width: none;
    width: 100%;
}

/* =========================================================
   2) BUTTON
========================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    font-family: var(--font-family);
    font-weight: var(--fw-semibold);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: transform .06s ease, filter .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

/* Sizes */
.btn-sm {
    height: 34px;
    padding: 0 var(--s-4);
    font-size: var(--fs-sm);
}

.btn-md {
    padding: 0 var(--s-5);
    font-size: var(--fs-sm);
}

.btn-lg {
    height: 48px;
    padding: 0 var(--s-6);
    font-size: var(--fs-md);
}

.btn-full {
    width: 100%;
    line-height: 2.5;
}

/* Variants */
.btn-primary {
    background: var(--primary);
    color: var(--on-primary);
}

.btn-secondary {
    background: var(--accent);
    color: var(--on-accent);
}

.btn-accent {
    background: var(--accent);
    color: var(--on-accent);
}

.btn-muted {
    background: var(--surface-2);
    color: var(--text);
    border-color: rgba(0,0,0,.06);
}

body.dark .btn-muted {
    border-color: rgba(255,255,255,.10);
}

.btn-outline {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}

/* Hover (padrão) */
.btn:hover {
    filter: brightness(0.98);
    box-shadow: var(--shadow-sm);
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Icon-only button (opcional, útil) */
.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
}

/* =========================================================
   2b) BADGE / PILL
========================================================= */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 6px 12px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1;
    white-space: nowrap;
}

/* tamanhos */
.badge-sm {
    padding: 5px 10px;
    font-size: var(--fs-xs);
}

.badge-md {
    padding: 6px 12px;
    font-size: var(--fs-sm);
}

.badge-lg {
    padding: 8px 14px;
    font-size: var(--fs-md);
}

/* variantes */
.badge-primary {
    background: var(--primary);
    color: var(--on-primary);
}

.badge-accent {
    background: var(--accent);
    color: var(--on-accent);
}

.badge-muted {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid rgba(0,0,0,.06);
}

body.dark .badge-muted {
    border: 1px solid rgba(255,255,255,.12);
}

.badge-success {
    background: rgba(34,197,94,.16);
    color: var(--success);
    border: 1px solid rgba(34,197,94,.22);
}

.badge-warning {
    background: rgba(245,158,11,.16);
    color: var(--warning);
    border: 1px solid rgba(245,158,11,.22);
}

.badge-danger {
    background: rgba(239,68,68,.16);
    color: var(--danger);
    border: 1px solid rgba(239,68,68,.22);
}

/* Badge — Levels */
.badge-level-1 {
    background: #3b82f6;
    color: #fff;
}

.badge-level-2 {
    background: #4caf50;
    color: #fff;
}

.badge-level-3 {
    background: #f59e0b;
    color: #111;
}

.badge-level-4 {
    background: #f97316;
    color: #fff;
}

.badge-level-5 {
    background: #7c3aed;
    color: #fff;
}

/* =========================================================
   3) AVATAR
========================================================= */
.avatar {
    display: block;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    background: var(--surface-2);
    flex: 0 0 auto;

    /* não encolhe em flex */
}

/* sizes */
.avatar-sm {
    width: 32px;
    height: 32px;
}

.avatar-md {
    width: 44px;
    height: 44px;
}

.avatar-lg {
    width: 64px;
    height: 64px;
}

.avatar-xl {
    width: 96px;
    height: 96px;
}

.avatar-xxl {
    width: 120px;
    height: 120px;
}

/* variações */
.avatar-bordered {
    box-shadow: 0 0 0 3px rgba(255,255,255,.8);
}

body.dark .avatar-bordered {
    box-shadow: 0 0 0 3px rgba(0,0,0,.35);
}

/* =========================================================
   3b) MEDIA-BOX (imagem + badge/overlay)
========================================================= */
.media-box {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;

    /* não encolhe em flex */
}

.media-box > img {
    display: block;
}

/* overlay */
.media-badge {
    position: absolute;
    min-width: 24px;
    height: 24px;
    padding: var(--s-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1;
    border-radius: 999px;
    background: var(--primary-2);
    color: #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

/* posições (classes) */
.pos-tl {
    top: 6px;
    left: 6px;
}

.pos-tr {
    top: 3px;
    right: -10px;
}

.pos-bl {
    bottom: 6px;
    left: 6px;
}

.pos-br {
    bottom: 6px;
    right: 6px;
}

.pos-c {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ===============================
   4) LIST ITEM (RANKING)
================================ */
/* Container da lista (opcional) */
.list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

/* Item base */
.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: var(--surface);
    border: 1px solid var(--border);
}

/* bloco esquerdo: mídia + textos */
.list-item-left {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    min-width: 0;
}

/* textos */
.list-item-meta {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    min-width: 0;
}

.list-item-title {
    font-weight: var(--fw-semibold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-item-sub {
    color: var(--muted);
}

/* bloco direito: score / ícone */
.list-item-right {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.list-item-score {
    font-variant-numeric: tabular-nums;
    font-weight: var(--fw-semibold);
    color: var(--muted);
}

/* variações */
.list-item-soft {
    background: var(--surface-2);
    border-color: transparent;
}

.list-item-click {
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.list-item-click:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: color-mix(in srgb, var(--border) 60%, transparent);
}

/* Class schedule (turmas) */
.class-schedule {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.class-schedule-col {
    width: fit-content;
}

/* =========================
   Lesson item (agenda)
========================= */
.lesson-item {
    cursor: default;
    border: 0;
    padding: 0;
}

/* Bloco da data */
.lesson-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--surface-2);
    justify-content: center;
    gap: var(--s-1);
    min-width: 56px;
    padding: var(--s-3);
    border-radius: var(--r-sm);
}

/* Dia da semana */
.lesson-date-day {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--muted);
    text-transform: uppercase;
}

/* Caixa da data */
.lesson-date-box {
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1;
}

/* =========================
   Ranking — destaque por posição
========================= */
.ranking-item {
    padding: var(--s-4);
    border-radius: var(--r-md);
}

.ranking-item.is-top-1 {
    background: linear-gradient(
    90deg,
    rgba(124,58,237,.12),
    transparent
  );
}

.ranking-item.is-top-2 {
    background: linear-gradient(
    90deg,
    rgba(245,158,11,.12),
    transparent
  );
}

.ranking-item.is-top-3 {
    background: linear-gradient(
    90deg,
    rgba(59,130,246,.12),
    transparent
  );
}

.rank-icon {
    flex-shrink: 1;
    width: clamp(20px, 4vw, 42px);
    height: auto;
    transition: width .2s ease, opacity .2s ease;
}

/* ===============================
   4) XP BAR (reutilizável)
================================ */
.xp {
    width: 100%;
    min-width: 300px;

    /* ou 280px, algo seguro */
}

.xp-label {
    display: block;
    margin-bottom: var(--s-2);
    color: var(--muted);
}

.xp-bar {
    position: relative;
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border) 55%, var(--surface-2));
    overflow: visible;
}

.xp-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: 999px;

    /* gradiente “quente” estilo progresso */
    background: linear-gradient(90deg, #FFA801 0%, #FFDB97 100%);
    box-shadow: 0 6px 16px rgba(255, 168, 1, .25);
    z-index: 1;
}

/* marcador: sempre posicionado por left:% */
.xp-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    pointer-events: none;
}

/* knob (pode ser IMG) */
.xp-knob {
    display: block;
    width: clamp(32px, 4vw, 56px);
    height: auto;
    transform: translateY(-2px);
    z-index: 3;
}

/* badge atual (texto “780 pts”) */
.xp-marker-badge {
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    padding: 6px 8px;
    border-radius: 12px;
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.1;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
}

/* meta (linha abaixo) */
.xp-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: var(--s-3);
    font-size: var(--fs-xs);
    line-height: 1.2;
}

.xp-left {
    font-weight: var(--fw-semibold);
    color: color-mix(in srgb, var(--accent) 70%, var(--text));
}

.xp-right {
    font-weight: var(--fw-semibold);
    color: var(--muted);
}

/* meta “goal” (ícone + número) */
.xp-goal {
    top: 100%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.xp-goal-icon {
    width: 56px;

    /* aumente aqui */
    height: auto;
    display: block;
}

.xp-goal-text {
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
}

/* ===============================
   5) FORM CONTROLS
================================ */
.form {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--muted);
}

.hint {
    font-size: var(--fs-xs);
    color: var(--muted);
}

.input,
.textarea,
.select {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-md);
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
    box-sizing: border-box;
}

.textarea {
    min-height: 96px;
    resize: vertical;
}

.input:focus,
.textarea:focus,
.select:focus {
    border-color: color-mix(in srgb, var(--primary) 65%, var(--border));
    box-shadow: var(--ring);
}

.input::placeholder,
.textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 70%, transparent);
}

/* estados */
.is-disabled,
.input:disabled,
.textarea:disabled,
.select:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.is-invalid,
.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] {
    border-color: color-mix(in srgb, var(--danger) 70%, var(--border));
}

.field-error {
    font-size: var(--fs-xs);
    color: var(--danger);
    font-weight: var(--fw-medium);
}

/* checkbox / radio */
.check {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    cursor: pointer;
    user-select: none;
}

.check input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

/* ===============================
   6) ALERTS / EMPTY STATES
================================ */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-4);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.alert-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-title {
    font-weight: var(--fw-semibold);
    margin-bottom: 2px;
}

.alert-text {
    color: var(--muted);
    font-size: var(--fs-sm);
}

/* variantes (sem inventar cores novas — usa tokens semânticos) */
.alert-success {
    border-color: color-mix(in srgb, var(--success) 35%, var(--border));
    background: color-mix(in srgb, var(--success) 10%, var(--surface));
}

.alert-warning {
    border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
    background: color-mix(in srgb, var(--warning) 10%, var(--surface));
}

.alert-danger {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
    background: color-mix(in srgb, var(--danger) 10%, var(--surface));
}

.alert-info {
    border-color: color-mix(in srgb, var(--info) 35%, var(--border));
    background: color-mix(in srgb, var(--info) 10%, var(--surface));
}

/* empty state */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-3);
    padding: var(--s-8);
    border-radius: var(--r-lg);
    background: var(--surface-2);
    border: 1px dashed color-mix(in srgb, var(--border) 75%, transparent);
}

.empty-title {
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
}

.empty-text {
    color: var(--muted);
    font-size: var(--fs-sm);
    max-width: 52ch;
}

/* ===============================
   7) DIVIDER
================================ */
.divider {
    width: 100%;
    height: 1px;
    background: var(--border);
    border: 0;
}

.divider-soft {
    background: color-mix(in srgb, var(--border) 55%, transparent);
}

/* ===============================
   8) MODAL (overlay + box)
================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    padding: var(--s-6);
    background: rgba(0, 0, 0, .42);
    z-index: 999;
}

.modal-overlay.is-open {
    display: grid;
}

.modal {
    width: min(720px, 100%);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.modal-header,
.modal-footer {
    padding: var(--s-5);
    background: var(--surface-2);
}

.modal-body {
    padding: var(--s-5);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

.modal-title {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
}

.modal-close {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}

/* ===============================
   9) SKELETON (loading)
   (opcional, mas salva o layout)
================================ */
.skeleton {
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface-2) 70%, var(--border));
    border-radius: var(--r-md);
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.18) 50%,
    transparent 100%
  );
    animation: skeleton-shimmer 1.2s infinite;
}

@keyframes skeleton-shimmer {
    to {
        transform: translateX(100%);
    }
}

/* tamanhos prontos */
.skeleton-line {
    height: 12px;
}

.skeleton-title {
    height: 18px;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* =========================================================
   CAROUSEL — genérico reutilizável
   Estrutura esperada:
   .carousel
     .carousel-viewport
       .carousel-track
         .carousel-slide
========================================================= */
.carousel {
    position: relative;
    width: 100%;
    margin-bottom: var(--s-6);
}

/* Controles (opcional) — se você colocar dentro do .carousel */
.carousel-controls {
    display: flex;
    gap: var(--s-2);
    justify-content: flex-end;
    margin-bottom: var(--s-3);
}

/* =========================================================
   VIEWPORT (é quem rola)
   - overflow-y: visible evita “corte” vertical
   - sem margin negativo (isso costuma causar corte/clip)
========================================================= */
.carousel-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* respiro para sombras/badges */
    padding: var(--s-2);
    margin: 0;
    cursor: grab;
    outline: none;

    /* esconder scrollbar */
    scrollbar-width: none;

    /* Firefox */
    -ms-overflow-style: none;

    /* IE/Edge antigo */
}

.carousel-viewport::-webkit-scrollbar {
    display: none;

    /* Chrome/Safari */
}

.carousel-viewport:focus-visible {
    box-shadow: var(--ring);
    border-radius: var(--r-md);
}

.carousel-viewport.is-dragging {
    cursor: grabbing;
    user-select: none;
}

/* =========================================================
   TRACK (linha dos itens)
   - flex-start evita “stretch” e problemas de altura
========================================================= */
.carousel-track {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
}

/* Slide genérico */
.carousel-slide {
    flex: 0 0 auto;
    width: var(--carousel-slide-w);
    min-width: 0;
}

/* =========================================================
   Opcional: Snap
========================================================= */
.carousel.is-snap .carousel-viewport {
    scroll-snap-type: x mandatory;
}

.carousel.is-snap .carousel-slide {
    scroll-snap-align: start;
}

/* =========================================================
   Opcional: setas overlay (se usar .carousel-arrow)
   OBS: aqui NÃO usamos margin negativo no viewport.
========================================================= */
.carousel.has-arrows {
    --carousel-arrow-space: 44px;
}

.carousel.has-arrows .carousel-viewport {
    padding-inline: calc(var(--s-2) + var(--carousel-arrow-space));
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    display: grid;
    place-items: center;
}

.carousel-arrow.prev {
    left: 0;
}

.carousel-arrow.next {
    right: 0;
}

.carousel-arrow:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* =========================================================
   AIRBAG (recomendado)
   Se existir em algum lugar do projeto um .card { height:100% }
   isso costuma ser o motivo do “corte” dentro do carrossel.
========================================================= */
.carousel .card {
    height: auto;
}

/* =========================================================
   ACHIEVEMENT
========================================================= */
.achievement {
    flex: 0 0 auto;
    width: 200px;

    /* controla o “slide” no carrossel */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    border-radius: var(--r-lg);
    background: var(--surface);
    text-align: center;
    transition: transform 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

/* hover / foco */
.achievement:hover {
    transform: translateY(-2px);
}

.achievement:focus-within {
    box-shadow: var(--shadow-md), var(--ring);
}

/* =========================================================
   MÍDIA
========================================================= */
.achievement-media {
    position: relative;
    width: 88px;
    height: 88px;
}

.achievement-icon {
    width: 100%;
    height: auto;
}

/* selo */
.achievement-badge {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    padding: 2px 6px;
    background-color: var(--accent);
}

/* =========================================================
   TEXTO
========================================================= */
.achievement-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

/* =========================================================
   VARIAÇÕES DE TIPO (temporárias)
   depois isso vira token / config
========================================================= */
.achievement--first-plan {
    background: linear-gradient(
    180deg,
    rgba(59,130,246,.12),
    var(--surface)
  );
}

.achievement--magic {
    background: linear-gradient(
    180deg,
    rgba(34,197,94,.12),
    var(--surface)
  );
}

.achievement--progress {
    background: linear-gradient(
    180deg,
    rgba(245,158,11,.12),
    var(--surface)
  );
}

/* estado bloqueado */
.achievement.is-locked {
    opacity: .62;
    filter: grayscale(.25);
}

.achievement.is-locked .achievement-icon {
    filter: grayscale(1);
    opacity: .75;
}

.achievement.is-locked .achievement-badge {
    background: var(--border);
    color: var(--muted);
}

.achievement--plan {
    background: linear-gradient(180deg, rgba(59,130,246,.12), var(--surface));
}

/* .achievement--plan .achievement-badge{ background: rgba(59,130,246,.18); color: var(--text); }
.achievement--magic .achievement-badge{ background: rgba(34,197,94,.18); color: var(--text); }
.achievement--progress .achievement-badge{ background: rgba(245,158,11,.18); color: var(--text); } */
/* Dashboard – resumo de conquistas */
.achievement-summary {
    margin: var(--s-4) 0px;
    padding: var(--s-5) 0px;
    border-top: 1px solid var(--border);
}

.achievement-summary-item {
    text-align: center;
    min-width: 80px;
}

/* ===============================
   NOTES (componente)
   elements.css
================================ */
.notes {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

/* Editor */
.notes-editor {
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--border);
}

/* Textarea */
.notes-input {
    width: 100%;
    min-height: 110px;
    resize: vertical;
}

/* Lista com scroll */
.notes-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    max-height: 260px;

    /* ajuste livre */
    overflow: auto;
    padding-right: var(--s-2);

    /* respiro pra scrollbar */
}

.surface-1 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}

/* O JS usa .text-muted no empty state */
.text-muted {
    color: var(--muted);
}

/* Botão (x) — o JS usa .icon-btn */
.icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--muted);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.icon-btn:hover {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.icon-btn:active {
    transform: translateY(0);
}

/* Scrollbar discreta (opcional) */
.notes-list {
    scrollbar-width: thin;

    /* firefox */
}

.notes-list::-webkit-scrollbar {
    width: 10px;
}

.notes-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.15);
    border-radius: 999px;
}

body.dark .notes-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
}

/* =========================================================
   APP HEADER — ProfeON
   Desktop: logo + nav à esquerda | user à direita
   Mobile: mostra toggle + nav colapsável
========================================================= */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.app-header__inner {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    width: 100%;
    margin-inline: auto;
    padding: var(--s-3) var(--s-6);
}

/* ESQUERDA */
.app-header__left {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    min-width: 0;

    /* permite nav encolher sem estourar */
}

/* BRAND */
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    text-decoration: none;
    min-width: fit-content;
}

.brand__logo {
    height: 38px;
    width: auto;
    display: block;
}

/* NAV DESKTOP */
.app-nav {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
}

.app-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1;
    white-space: nowrap;
    color: var(--muted);
    background: transparent;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.app-nav__link:hover {
    background: var(--surface-2);
    color: var(--text);
}

.app-nav__link:active {
    transform: translateY(1px);
}

.app-nav__link.is-active,
.app-nav__link[aria-current="page"] {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

/* DIREITA (USER) */
.app-user {
    margin-left: auto;

    /* empurra pro canto direito */
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-width: fit-content;
}

.app-user__avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.app-user__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.1;
}

.app-user__name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.app-user__actions {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.app-user__link {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
}

.app-user__link:hover {
    text-decoration: underline;
}

/* TOGGLE (só aparece no mobile) */
.app-header__toggle {
    display: none;
    margin-left: var(--s-2);
    width: 42px;
    height: 42px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    font-size: 18px;
    line-height: 1;
    color: var(--text);
}

.app-header__toggle:focus-visible {
    box-shadow: var(--ring);
}

/* NAV MOBILE (colapsável) */
.app-header__mobile {
    display: none;

    /* default fechado */
    border-top: 1px solid var(--border);
    background: var(--surface);
}

/* quando estiver “aberto” via JS: .is-open */
.app-header__mobile.is-open {
    display: block;
}

.app-nav--mobile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2);
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding: var(--s-3) var(--s-6);
}

/* herda estilo do .app-nav__link, só ajusta o layout */
.app-nav--mobile .app-nav__link {
    justify-content: center;
    text-align: center;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px){
    .app-header__inner {
        padding: var(--s-3) var(--s-4);
        gap: var(--s-4);
    }

    /* esconde nav desktop */
    .app-header__left .app-nav {
        display: none;
    }

    /* esconde parte do user se quiser compactar */
    .app-user__name {
        display: none;
    }

    /* mostra toggle */
    .app-header__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* mobile nav ocupa 2 colunas */
    .app-nav--mobile {
        grid-template-columns: repeat(2, 1fr);
        padding: var(--s-3) var(--s-4);
    }
    


}

/* =========================================================
   CONTENT CARD (Biblioteca / Aula / Sequência / Projeto)
   -> Coloque em: elements.css
========================================================= */
.content-card {
    position: relative;
    overflow: hidden;

    /* para thumb/watermark */
    min-width: 270px;
    max-width: 300px;
}

/* Variante da biblioteca: ocupa toda a célula do grid */
.content-card--library {
    display: block;
    width: 100%;
    max-width: none;
}

/* botão “favorito” (canto superior direito) */
.content-card__fav {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    font-size: var(--fs-sm);
    line-height: 1;
}

.content-card__fav:hover {
    background: var(--surface-2);
}

/* estado favoritado (se quiser via JS: .is-fav no card) */
.content-card.is-fav .content-card__fav {
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
    color: var(--primary);
}

/* =========================================================
   Thumb (modelo “completo” da biblioteca)
========================================================= */
.content-card.has-thumb .content-card__thumb {
    position: relative;
    height: 140px;
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* imagem via variável: --card-thumb */
.content-card__thumb {
    background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.0)),
    var(--card-thumb) center/cover no-repeat;
}

/* título grande na capa (ex: “Game”) */
.content-card__thumb-title {
    position: absolute;
    left: var(--s-5);
    bottom: var(--s-5);
    font-size: 34px;

    /* intencional: “hero” */
    font-weight: var(--fw-bold);
    color: var(--primary);
    letter-spacing: -0.02em;
    text-shadow: 0 6px 22px rgba(0,0,0,.10);
}

/* quando tem thumb, o fav precisa ficar “sobre” o thumb */
.content-card.has-thumb .content-card__fav {
    top: var(--s-3);
    right: var(--s-3);
}

/* corpo do card (apenas nomes para consistência) */
.content-card__body {
}

/* títulos/descrição com clamp (para ficar elegante em carrossel) */
.content-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.content-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================================
   Watermark (thumb como fundo suave)
========================================================= */
.content-card.has-watermark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--card-watermark) center/cover no-repeat;
    opacity: .10;
    transform: scale(1.05);
}

.content-card.has-watermark::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    /* “lavagem” para manter legibilidade */
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98));
}

body.dark .content-card.has-watermark::after {
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
}

/* garante que o conteúdo fique acima do watermark */
.content-card.has-watermark .content-card__body {
    position: relative;
    z-index: 1;
}

/* variação: fundo visível com overlay suave + blur para leitura */
.content-card.has-watermark.has-watermark-overlay::before {
    opacity: .50;
    transform: scale(1.08);
}

.content-card.has-watermark.has-watermark-overlay::after {
    background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.72));
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
}

body.dark .content-card.has-watermark.has-watermark-overlay::after {
    background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.48));
}

/* =========================================================
   Variantes por tipo (bem leve)
   -> só muda “um detalhe” (borda/realce), sem reinventar card
========================================================= */
.content-card--lesson {
    border-left: 4px solid color-mix(in srgb, var(--primary) 45%, transparent);
}

.content-card--sequence {
    border-left: 4px solid color-mix(in srgb, var(--accent) 45%, transparent);
}

.content-card--project {
    border-left: 4px solid color-mix(in srgb, var(--secondary) 45%, transparent);
}

/* compacto (plano de aula da imagem 2) */
.content-card.is-compact .content-card__desc {
    -webkit-line-clamp: 2;
}

/* deixa um respiro para o botão fav não “bater” no título */
.content-card:not(.has-thumb) .content-card__body {
    padding-top: calc(var(--s-4) + 6px);
}

/* =========================================================
   FILTERS (Sidebar)
   coloque em: elements.css
========================================================= */
.filters {
    display: flex;
    flex-direction: column;
}



/* =========================================================
   SEARCH (lupa dentro)
========================================================= */
.search {
    position: relative;
    width: 100%;
}

.search-input {
    width: 100%;
    padding-right: 42px;

    /* espaço pro ícone */
}

/* remove o X padrão do type=search (webkit) */
.search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-icon {
    position: absolute;
    right: var(--s-3);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: 14px;
}

/* =========================================================
   FILTER CHIP (muted / active / hover)
========================================================= */
.filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1;
    white-space: nowrap;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.filter-chip:hover {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface-2));
    border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
}

.filter-chip:active {
    transform: translateY(1px);
}

.filter-chip:focus-visible {
    box-shadow: var(--ring);
}

/* estado ativo */
.filter-chip.is-active {
    background: var(--primary-light);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    color: var(--on-primary);
}

/* estado “muted” (se você quiser forçar um chip bem neutro) */
.filter-chip.is-muted {
    background: var(--surface-2);
    color: var(--muted);
}

/* ===============================
   RESPONSIVE HELPERS
   ===============================
   Comportamento padrão mobile-first */
@media (max-width: 768px) {
  .filters {
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
}
}

/* =========================================================
   TREINAMENTOS (layout + card thumb)
========================================================= */
.training-page {
    background: var(--surface-2);
}

.training-hero {
    background: #f2a61a;
    padding: var(--s-8) 0;
}

.training-hero__title {
    margin: 0 0 var(--s-5);
    color: #fff;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.training-section {
    padding: var(--s-8) 0 var(--s-10);
}

.training-section__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
}

.training-controls {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.training-controls .search {
    min-width: 260px;
}

.training-thumb-card {
    position: relative;
    width: 320px;
    min-height: 190px;
    border-radius: var(--r-lg);
    border: 1px solid rgba(255,255,255,.55);
    overflow: hidden;
    background: var(--surface);
    flex: 0 0 auto;
}

.training-thumb-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--training-thumb) center/cover no-repeat;
    transform: scale(1.04);
}

.training-thumb-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,75,166,.28), rgba(8,75,166,.88));
}

.training-thumb-card .content-card__fav {
    z-index: 3;
    background: #fff;
}

.training-thumb-card__content {
    position: relative;
    z-index: 2;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--s-3);
    padding: var(--s-4);
    color: #fff;
}

.training-thumb-card__title {
    margin: 0;
    color: #fff;
    font-size: clamp(24px, 2.8vw, 38px);
    line-height: 1.04;
    letter-spacing: -0.01em;
}

.training-thumb-card__meta {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.training-thumb-card__badge {
    border: 0;
    background: #f2a61a;
    color: #fff;
    font-weight: var(--fw-bold);
}

.training-thumb-card__bncc {
    color: color-mix(in srgb, #fff 92%, transparent);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

@media (max-width: 768px) {
    .training-hero {
        padding: var(--s-7) 0;
    }

    .training-section {
        padding: var(--s-7) 0 var(--s-8);
    }

    .training-section__top {
        align-items: flex-start;
        flex-direction: column;
    }

    .training-controls {
        width: 100%;
        flex-wrap: wrap;
    }

    .training-controls .search {
        min-width: 0;
        width: 100%;
    }

    .training-thumb-card {
        width: min(82vw, 340px);
    }
}