/* =====================================================================
   IRALU TENNIS — evolution.css
   Camada visual do PROGRAMA DE EVOLUÇÃO (carrega DEPOIS do styles.css,
   sem alterá-lo — mesma estratégia do iralu-extra.css; é removível).
   Ancorada nos tokens da marca: grafite/petróleo, verde-limão (ação),
   teal secundário, ouro premium. Mobile-first.
   ===================================================================== */

/* ---- abas: agora a área do aluno tem 5 e o admin tem 3 ------------- */
.app-tabs { display: flex; gap: 0.3rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.app-tabs::-webkit-scrollbar { display: none; }
.app-tab { flex: 1 0 auto; white-space: nowrap; }
.app-tabs--admin { position: static; top: auto; }
.app-tabs--admin .app-tab { flex: 1; }
.admin-body { margin-top: 1rem; }

/* ---- orbe da bola ------------------------------------------------- */
.ball-orb {
  position: relative; display: inline-block; width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--ball) 70%, #fff) 0%, var(--ball) 55%, color-mix(in srgb, var(--ball) 70%, #000) 100%);
  box-shadow: inset 0 -3px 8px rgba(0,0,0,.35), 0 4px 12px -4px rgba(0,0,0,.6);
  flex: none;
}
.ball-orb::after { /* "linha" da bola de tênis */
  content: ""; position: absolute; inset: 12% 8%;
  border-radius: 50%; border: 2px solid color-mix(in srgb, var(--ballText) 60%, transparent);
  border-left-color: transparent; border-right-color: transparent; transform: rotate(18deg); opacity: .55;
}
.ball-orb__sheen { position: absolute; top: 12%; left: 18%; width: 38%; height: 30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.65), transparent 70%); filter: blur(1px); }
.ball-orb--sm { width: 26px; height: 26px; }
.ball-orb--xl { width: 76px; height: 76px; }

/* ---- chips de status --------------------------------------------- */
.evo-chip {
  display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-ui); font-weight: 700;
  font-size: .68rem; padding: .22rem .6rem; border-radius: var(--radius-pill);
  border: 1px solid transparent; line-height: 1.2; white-space: nowrap;
}
.evo-chip--lg { font-size: .8rem; padding: .34rem .8rem; }
.evo-chip--danger { background: rgba(255,93,93,.14); color: var(--danger); border-color: rgba(255,93,93,.3); }
.evo-chip--gold   { background: rgba(255,180,46,.14); color: var(--gold); border-color: rgba(255,180,46,.3); }
.evo-chip--lime   { background: rgba(180,240,58,.16); color: var(--lime); border-color: rgba(180,240,58,.32); }
.evo-chip--teal   { background: rgba(17,198,166,.16); color: var(--teal); border-color: rgba(17,198,166,.32); }
.evo-chip--elite  { background: var(--grad-brand); color: var(--on-accent); border-color: transparent; }

.evo-minor { display: inline-flex; align-items: center; gap: .25rem; font-family: var(--font-ui);
  font-size: .68rem; color: var(--gold); margin-top: .4rem; }
.evo-minor--inline { margin: 0; font-size: .62rem; }

/* ---- HERO de atleta ---------------------------------------------- */
.atleta {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line-strong);
  background: var(--surface); padding: var(--sp-5); box-shadow: var(--shadow-card);
}
.atleta__bg { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 220px at 90% -20%, color-mix(in srgb, var(--ball) 40%, transparent), transparent 60%); opacity: .55; }
.atleta__bg::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--ball), transparent); }
.atleta__top { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; }
.atleta__stage { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; letter-spacing: .01em; }
.atleta__ball { font-family: var(--font-ui); font-size: .74rem; color: var(--text-3); margin: .15rem 0 .5rem; }
.atleta__media { text-align: right; }
.atleta__media .n { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; color: var(--lime); line-height: 1; }
.atleta__media .k { font-family: var(--font-ui); font-size: .58rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.atleta__next { position: relative; margin-top: 1.3rem; }
.atleta__nexthead { display: flex; justify-content: space-between; gap: .6rem; font-family: var(--font-ui);
  font-size: .76rem; color: var(--text-2); margin-bottom: .45rem; }
.atleta__nexthead strong { color: var(--text); }
.evo-tagball { font-size: .62rem; color: var(--gold); border: 1px solid rgba(255,180,46,.4); padding: 0 .35rem; border-radius: var(--radius-pill); }

/* ---- barra de habilidade (até a meta 7,0) ------------------------- */
.skill__bar { position: relative; height: 12px; border-radius: var(--radius-pill); background: rgba(255,255,255,.08); overflow: visible; }
.skill__bar > i { display: block; height: 100%; border-radius: inherit; background: var(--grad-brand); transition: width var(--t-slow); }
.skill__tick { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--gold); border-radius: 2px; }
.skill__tick::after { content: "7,0"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-ui); font-size: .56rem; color: var(--gold); }
.skill__cap { font-family: var(--font-ui); font-size: .72rem; color: var(--text-3); margin-top: .4rem; }

/* ---- mapa da jornada (trilha) ------------------------------------ */
.trilha { display: flex; gap: .4rem; overflow-x: auto; padding: .3rem 0 .2rem; scrollbar-width: none; }
.trilha::-webkit-scrollbar { display: none; }
.trilha__node { flex: 1 0 auto; min-width: 64px; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .6rem .3rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.02); position: relative; }
.trilha__node--now { border-color: var(--lime); box-shadow: var(--glow-lime); background: rgba(180,240,58,.06); }
.trilha__node--done { opacity: .92; }
.trilha__node--next { opacity: .5; }
.trilha__lbl { font-family: var(--font-ui); font-size: .64rem; font-weight: 600; color: var(--text-2); text-align: center; }
.trilha__node--now .trilha__lbl { color: var(--text); }
.trilha__lvls { display: flex; gap: 3px; }
.trilha__lvls i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.18); }
.trilha__lvls i.on { background: var(--lime); }
.evo-focus { font-family: var(--font-body); font-size: .86rem; color: var(--text-2); margin-top: .9rem;
  padding-top: .8rem; border-top: 1px solid var(--line); }
.evo-focus strong { color: var(--text); }

/* ---- as 5 dimensões: radar + lista -------------------------------- */
.evo-dims { display: grid; gap: 1rem; }
.evo-dims__radar { display: grid; place-items: center; }
.evo-radar { width: 100%; max-width: 280px; height: auto; }
.radar-ring { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 1; }
.radar-axis { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.radar-area { fill: rgba(180,240,58,.22); stroke: var(--lime); stroke-width: 2; stroke-linejoin: round; }
.radar-dot { fill: var(--lime); stroke: var(--ink-800); stroke-width: 1.5; }
.radar-lbl { fill: var(--text-2); font-family: var(--font-ui); font-size: 12px; font-weight: 600; }
.evo-dims__list { display: grid; gap: .8rem; }
.dim__top { display: flex; justify-content: space-between; align-items: baseline; }
.dim__name { font-family: var(--font-ui); font-weight: 600; font-size: .86rem; }
.dim__val { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--lime); display: inline-flex; align-items: baseline; gap: .35rem; }
.dim__bar { height: 8px; border-radius: var(--radius-pill); background: rgba(255,255,255,.07); overflow: hidden; margin: .35rem 0 .25rem; }
.dim__bar > i { display: block; height: 100%; border-radius: inherit; transition: width var(--t-slow); background: var(--text-3); }
.dim__fill--muito { background: var(--danger); }
.dim__fill--em { background: var(--gold); }
.dim__fill--próximo, .dim__fill--proximo { background: var(--info); }
.dim__fill--esperado { background: var(--lime); }
.dim__fill--evolução, .dim__fill--evolucao { background: var(--teal); }
.dim__fill--consolidado { background: var(--grad-brand); }
.dim__band { font-family: var(--font-ui); font-size: .68rem; color: var(--text-3); }
.evo-delta { font-family: var(--font-ui); font-size: .66rem; font-weight: 700; padding: 0 .3rem; border-radius: var(--radius-pill); }
.evo-delta.up { color: var(--success); background: rgba(54,211,153,.14); }
.evo-delta.down { color: var(--danger); background: rgba(255,93,93,.14); }

@media (min-width: 720px) {
  .evo-dims { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* ---- status / ação ------------------------------------------------ */
.evo-status__row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.evo-status__lbl { font-family: var(--font-ui); font-size: .78rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.evo-status__action { font-family: var(--font-body); color: var(--text-2); margin-top: .6rem; font-size: .9rem; }
.evo-status--pronto, .evo-status--seguro, .evo-status--consolidado { border-color: rgba(180,240,58,.25); }
.evo-status--observacao { border-color: rgba(255,180,46,.25); }
.evo-status--reforco { border-color: rgba(255,93,93,.25); }

/* ---- próxima missão ---------------------------------------------- */
.evo-mission { display: flex; gap: .9rem; align-items: center;
  background: radial-gradient(400px 160px at 0% 0%, rgba(255,180,46,.10), transparent 60%), var(--surface); }
.evo-mission__ic { font-size: 1.8rem; }
.evo-mission__lbl { font-family: var(--font-ui); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); }
.evo-mission__txt { font-family: var(--font-body); font-weight: 600; margin-top: .15rem; }

/* ---- medalhas da bola -------------------------------------------- */
.medal-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.medal-tier { text-align: center; padding: .8rem .5rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: rgba(255,255,255,.02); opacity: .5; }
.medal-tier.is-on { opacity: 1; }
.medal-tier--bronze { border-color: rgba(205,127,50,.5); box-shadow: 0 0 18px -8px rgba(205,127,50,.6); }
.medal-tier--prata  { border-color: rgba(198,208,216,.5); box-shadow: 0 0 18px -8px rgba(198,208,216,.5); }
.medal-tier--ouro   { border-color: rgba(245,197,24,.55); box-shadow: 0 0 20px -6px rgba(245,197,24,.6); }
.medal-tier__ic { font-size: 1.5rem; }
.medal-tier__t { display: block; font-family: var(--font-display); font-weight: 800; font-size: .95rem; margin-top: .2rem; }
.medal-tier__d { display: block; font-family: var(--font-ui); font-size: .64rem; color: var(--text-3); margin-top: .25rem; line-height: 1.3; }

/* ---- conquistas da jornada --------------------------------------- */
.evo-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.evo-badge { display: flex; align-items: center; gap: .5rem; padding: .7rem .8rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.evo-badge__ic { font-size: 1.2rem; }
.evo-badge__t { font-family: var(--font-ui); font-weight: 600; font-size: .8rem; }
.evo-badge--on { border-color: rgba(180,240,58,.35); box-shadow: 0 0 18px -10px rgba(180,240,58,.5); }
.evo-badge--off { opacity: .4; }
.evo-badge--off .evo-badge__ic { filter: grayscale(1); }
@media (min-width: 560px) { .evo-badges { grid-template-columns: repeat(4, 1fr); } }

/* ---- histórico (timeline) ---------------------------------------- */
.evo-tl { position: relative; padding-left: 1.2rem; }
.evo-tl::before { content: ""; position: absolute; left: 5px; top: 4px; bottom: 4px; width: 2px; background: var(--line); }
.evo-tl__item { position: relative; padding: 0 0 1.1rem; }
.evo-tl__item:last-child { padding-bottom: 0; }
.evo-tl__dot { position: absolute; left: -1.2rem; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--ball, var(--lime)); border: 2px solid var(--ink-800); box-shadow: 0 0 0 2px var(--line); }
.evo-tl__item.is-latest .evo-tl__dot { box-shadow: 0 0 0 3px rgba(180,240,58,.4); }
.evo-tl__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.evo-tl__head strong { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.evo-tl__media { font-family: var(--font-ui); font-size: .74rem; color: var(--text-2); }
.evo-tl__date { font-family: var(--font-ui); font-size: .7rem; color: var(--text-3); margin: .15rem 0 .3rem; }
.evo-tl__obs { font-family: var(--font-body); font-size: .84rem; color: var(--text-2); font-style: italic; }

/* ---- comentário do professor ------------------------------------- */
.evo-teacher__head { display: flex; align-items: center; gap: .6rem; }
.evo-teacher__av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-3); font-size: 1.1rem; }
.evo-teacher__name { font-family: var(--font-ui); font-weight: 700; }
.evo-teacher__role { font-family: var(--font-ui); font-size: .7rem; color: var(--text-3); }
.evo-teacher__txt { font-family: var(--font-body); color: var(--text); margin-top: .7rem; font-size: .95rem; line-height: 1.55; }

/* ================================================================== */
/* ADMIN — visão geral da evolução                                     */
/* ================================================================== */
.roster { display: grid; gap: .5rem; }
.roster-row, .ready-row {
  display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: .6rem;
  padding: .6rem .7rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.02);
}
.ready-row { grid-template-columns: auto 1fr auto auto; }
.roster-row__id .n, .ready-row__id .n { display: block; font-family: var(--font-ui); font-weight: 600; font-size: .88rem; }
.roster-row__id .s, .ready-row__id .s { display: block; font-family: var(--font-ui); font-size: .68rem; color: var(--text-3); }
.roster-row__media { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--lime); }
.ready-list { display: grid; gap: .5rem; }
.evo-recents { display: grid; gap: .45rem; }
.evo-recent { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .5rem;
  font-family: var(--font-ui); font-size: .78rem; padding: .45rem .2rem; border-bottom: 1px solid var(--line); }
.evo-recent:last-child { border-bottom: 0; }
.evo-recent__d { color: var(--text-3); font-size: .7rem; min-width: 58px; }
.evo-recent__n { font-weight: 700; }
.evo-recent__s { color: var(--text-2); }

/* ================================================================== */
/* FICHA DE AVALIAÇÃO (modal)                                          */
/* ================================================================== */
.assess-stage { display: flex; flex-direction: column; gap: .2rem; padding: .7rem .9rem; border-radius: var(--radius);
  background: rgba(180,240,58,.06); border: 1px solid rgba(180,240,58,.2); }
.assess-stage__now { font-family: var(--font-ui); font-size: .82rem; }
.assess-stage__focus { font-family: var(--font-body); font-size: .76rem; color: var(--text-2); }
.assess-grid { display: grid; gap: .9rem; }
.assess-dim__top { display: flex; justify-content: space-between; align-items: baseline; }
.assess-dim__name { font-family: var(--font-ui); font-weight: 600; font-size: .86rem; }
.assess-dim__val { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--lime); }
.assess-range { width: 100%; margin: .35rem 0 .2rem; accent-color: var(--lime); height: 22px; }
.assess-dim__band { font-family: var(--font-ui); font-size: .68rem; font-weight: 600; }
.assess-dim__band.tone-danger { color: var(--danger); }
.assess-dim__band.tone-gold { color: var(--gold); }
.assess-dim__band.tone-lime, .assess-dim__band.tone-teal, .assess-dim__band.tone-elite { color: var(--lime); }
.assess-dim__hint { font-family: var(--font-body); font-size: .68rem; color: var(--text-3); line-height: 1.35; margin-top: .15rem; }
.assess-result { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .9rem;
  border-radius: var(--radius); background: var(--ink-800); border: 1px solid var(--line-strong); }
.assess-media { text-align: center; }
.assess-media .n { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--lime); line-height: 1; }
.assess-media .k { font-family: var(--font-ui); font-size: .56rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.assess-action { flex: 1 0 100%; font-family: var(--font-body); font-size: .82rem; color: var(--text-2); margin: 0; }
.assess-badges { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.assess-badge { display: flex; align-items: center; gap: .35rem; font-family: var(--font-ui); font-size: .76rem;
  padding: .45rem .55rem; border-radius: var(--radius-sm); border: 1px solid var(--line); cursor: pointer; }
.assess-badge.is-on { border-color: rgba(180,240,58,.4); background: rgba(180,240,58,.06); }
.assess-advance { padding: .8rem .9rem; border-radius: var(--radius); border: 1px dashed var(--line-strong); }
.assess-adv-check { display: flex; align-items: center; gap: .5rem; font-family: var(--font-ui); font-weight: 600; font-size: .86rem; cursor: pointer; }
.assess-adv-check.is-disabled { opacity: .45; cursor: not-allowed; }
.assess-adv-target { margin-top: .6rem; }
.assess-adv-note { font-family: var(--font-body); font-size: .84rem; margin: 0 0 .3rem; }
@media (min-width: 560px) { .assess-badges { grid-template-columns: repeat(4, 1fr); } }

/* ================================================================== */
/* TRILHA PÚBLICA (home / metodologia) — vitrine do método             */
/* ================================================================== */
.trilha-pub { margin-top: 1.8rem; }
.trilha-pub__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.trilha-pub__card { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
  padding: 1.1rem .7rem; border-radius: var(--radius-lg); border: 1px solid var(--line);
  background: var(--grad-surface), var(--surface); transition: transform var(--t), border-color var(--t); }
.trilha-pub__card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.trilha-pub__name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.trilha-pub__role { font-family: var(--font-body); font-size: .76rem; color: var(--text-2); line-height: 1.4; }
.trilha-pub__lvl { font-family: var(--font-ui); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.trilha-pub__legend { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.4rem;
  font-family: var(--font-ui); font-size: .8rem; color: var(--text-2); }
.trilha-pub__legend b { color: var(--lime); font-family: var(--font-display); font-size: 1.05rem; }
@media (min-width: 620px) { .trilha-pub__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 920px) { .trilha-pub__grid { grid-template-columns: repeat(6, 1fr); } }

/* respeita redução de movimento */
@media (prefers-reduced-motion: reduce) {
  .skill__bar > i, .dim__bar > i, .trilha-pub__card { transition: none; }
}