/* ==========================================================================
   Mentorados Denderson · area do aluno
   Direcao visual da referencia 1793437-instalador.denderson.com e da nossa
   propria tela de login: fundo quase preto com textura de losango, TODO bloco
   de conteudo em papel claro, design flat, sombra dura e deslocada, uma
   familia tipografica so (Bricolage Grotesque) e paleta viva.
   Esta folha vale SO no app do aluno. O admin continua em styles.css.
   ========================================================================== */

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}

:root{
  /* papel */
  --paper-light:#fffaf0;
  --paper-cream:#f4e6c7;
  --paper-aged:#e7d1a2;
  --tape:rgba(221,198,147,.86);
  /* cores vivas */
  --coral:#e9584f;
  --coral-2:#d9473f;
  --teal:#07887e;
  --teal-dark:#05645f;
  --teal-soft:#91cbc2;
  --mustard:#d89919;
  --mustard-soft:#edc76a;
  --navy:#183653;
  --gold:#c78b18;
  --green:#3a9f78;
  --kraft-dark:#704522;
  /* tinta */
  --ink:#142d46;
  --ink-2:#30445a;
  --ink-3:#56616a;
  --white-ink:#fffaf0;
  --linha:rgba(87,61,33,.38);
  --linha-soft:rgba(87,61,33,.22);
  /* sistema */
  --font:"Bricolage Grotesque",Arial,system-ui,sans-serif;
  --shadow-card:7px 9px 0 rgba(78,48,23,.20), 1px 2px 2px rgba(78,48,23,.18);
  --shadow-small:4px 5px 0 rgba(78,48,23,.18);
  --shadow-hover:6px 8px 0 rgba(78,48,23,.22);
  --shadow-press:1px 2px 0 rgba(78,48,23,.22);
  --ease:cubic-bezier(.16,1,.3,1);
  --top-bar:0px;
}

html{scroll-behavior:smooth}

body{
  min-height:100%;
  font-family:var(--font);
  font-weight:500;
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* textura de losango da referencia. Unica excecao autorizada de gradient:
     e textura de fundo, nao cor degradê. Tres camadas, opacidade .022 a .055 */
  background-color:#0b0b0e;
  background-image:
    repeating-linear-gradient(60deg, rgba(255,255,255,.055) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.04) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 14px);
  background-attachment:fixed;
}

::selection{background:rgba(233,88,79,.3)}
:focus-visible{outline:3px solid var(--mustard-soft);outline-offset:3px;border-radius:10px}

img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ==========================================================================
   CARREGANDO
   ========================================================================== */
.page-loader{position:fixed;inset:0;display:grid;place-items:center;z-index:60;background-color:#0b0b0e}
.page-loader[hidden]{display:none}
.spinner{
  width:26px;height:26px;border-radius:50%;
  border:3px solid rgba(255,250,240,.22);border-top-color:var(--coral);
  animation:spin .8s linear infinite;
}

/* ==========================================================================
   BARRA DE IMPERSONACAO
   ========================================================================== */
.imp-bar{
  display:none;position:sticky;top:0;z-index:80;width:100%;
  align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 20px;
  background:var(--coral);color:var(--white-ink);
  border-bottom:2px solid rgba(87,61,33,.4);
}
.imp-bar.show{display:flex}
.imp-bar .imp-ic{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:rgba(255,250,240,.2)}
.imp-bar .imp-ic svg{width:15px;height:15px}
.imp-bar .imp-txt{font-weight:700;font-size:13.5px;line-height:1.35;min-width:0}
.imp-bar .imp-txt b{font-weight:800}
.imp-bar .imp-exit{
  margin-left:auto;cursor:pointer;
  background:var(--navy);color:var(--white-ink);
  border:2px solid rgba(255,250,240,.4);border-radius:10px;
  font-weight:700;font-size:12.5px;padding:7px 14px;
  display:inline-flex;align-items:center;gap:7px;
  transition:transform .12s var(--ease);
}
.imp-bar .imp-exit:hover{transform:translate(-1px,-2px)}
.imp-bar .imp-exit:active{transform:translate(2px,2px)}
.imp-bar .imp-exit svg{width:14px;height:14px}

/* ==========================================================================
   ESQUELETO
   ========================================================================== */
.app{
  max-width:1680px;margin:0 auto;
  padding:22px 22px 72px;
}
@media (min-width:1024px){
  .app{
    display:grid;
    grid-template-columns:340px minmax(0,1fr);
    gap:26px;
    align-items:start;
    padding:24px 30px 90px;
  }
}

/* ---------- topbar (celular) ---------- */
.topbar{
  display:flex;align-items:center;gap:14px;
  background:var(--navy);
  border:2px solid rgba(87,61,33,.45);
  border-radius:12px;
  box-shadow:var(--shadow-small);
  padding:10px 14px;
  margin-bottom:18px;
}
.topbar .wordmark{color:var(--white-ink);font-size:17px}
.topbar .wordmark em{color:var(--mustard-soft)}
.hamburger{
  flex:0 0 auto;width:42px;height:42px;cursor:pointer;
  display:grid;place-items:center;
  background:var(--coral);color:var(--white-ink);
  border:2px solid rgba(255,250,240,.35);border-radius:10px;
  transition:transform .12s var(--ease);
}
.hamburger:active{transform:translate(2px,2px)}
.hamburger span,.hamburger span::before,.hamburger span::after{
  content:"";display:block;width:18px;height:2.5px;border-radius:2px;background:currentColor;
}
.hamburger span{position:relative}
.hamburger span::before{position:absolute;top:-6px}
.hamburger span::after{position:absolute;top:6px}
@media (min-width:1024px){ .topbar{display:none} }

.scrim{position:fixed;inset:0;background:rgba(11,11,14,.82);z-index:88;display:none}
.scrim.show{display:block}
@media (min-width:1024px){ .scrim,.scrim.show{display:none} }

.wordmark{
  display:inline-block;text-decoration:none;
  font-weight:800;font-size:20px;line-height:1.1;letter-spacing:-.01em;
  color:var(--navy);
}
.wordmark em{font-style:normal;color:var(--coral-2)}

/* ==========================================================================
   MENU LATERAL
   ========================================================================== */
.sidebar{
  display:flex;flex-direction:column;gap:14px;
}
@media (min-width:1024px){
  .sidebar{position:sticky;top:calc(var(--top-bar) + 24px);max-height:calc(100vh - var(--top-bar) - 48px);overflow-y:auto;padding-right:4px}
}
@media (max-width:1023px){
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:90;
    width:min(340px,88vw);
    padding:18px 16px;
    overflow-y:auto;
    background-color:#0b0b0e;
    border-right:2px solid rgba(255,250,240,.16);
    transform:translateX(-102%);
    transition:transform .3s var(--ease);
  }
  .sidebar.open{transform:none}
}

/* ---------- cabeca do menu ---------- */
.sidebar-top{
  background:var(--paper-light);
  border:2px solid var(--linha);
  border-radius:14px;
  box-shadow:var(--shadow-card);
  padding:18px 18px 16px;
  text-align:left;
}
.kicker{
  display:inline-block;
  background:var(--coral);color:var(--white-ink);
  font-weight:800;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;
  padding:5px 13px;border-radius:999px;
  box-shadow:var(--shadow-small);
  margin-bottom:11px;
}
.sidebar-top .wordmark{font-size:22px;display:block}
.wm-sub{
  display:block;margin-top:7px;
  font-weight:700;font-size:13px;color:var(--ink-3);
}

/* ---------- rotulo de grupo ---------- */
.nav-label{
  display:block;
  margin:6px 0 2px 4px;
  font-weight:800;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--mustard-soft);
}

.nav{display:flex;flex-direction:column;gap:12px}
.nav-group{display:flex;flex-direction:column;gap:12px}

/* ---------- cada item do menu e um cartao proprio ---------- */
.nav-card{
  width:100%;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:12px;
  background:var(--paper-light);
  color:var(--navy);
  border:2px solid var(--linha);
  border-radius:12px;
  padding:15px 16px;
  box-shadow:var(--shadow-small);
  font-weight:800;font-size:16px;line-height:1.2;
  transition:transform .18s var(--ease),background-color .18s var(--ease);
}
.nav-card:hover{transform:translateY(-2px)}
.nav-card:active{transform:translate(2px,2px);box-shadow:var(--shadow-press)}
.nav-card .label{flex:1 1 auto;min-width:0}
.nav-card .count{
  flex:0 0 auto;
  background:var(--navy);color:var(--mustard-soft);
  font-weight:800;font-size:12px;
  padding:3px 10px;border-radius:999px;
}
.nav-card .chev{flex:0 0 auto;display:grid;place-items:center;width:20px;height:20px;color:var(--ink-3);transition:transform .25s var(--ease)}
.nav-card .chev svg{width:18px;height:18px}

/* selo numerado: quadrado de canto arredondado, com cor de verdade */
.selo{
  flex:0 0 auto;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:9px;
  font-weight:800;font-size:15px;
  color:var(--white-ink);
  background:var(--navy);
  box-shadow:var(--shadow-small);
  transform:rotate(-4deg);
}
.selo svg{width:18px;height:18px}
.selo.is-coral{background:var(--coral)}
.selo.is-teal{background:var(--teal)}
.selo.is-mustard{background:var(--mustard)}
.selo.is-navy{background:var(--navy)}
.selo.is-gold{background:var(--gold)}
.selo.is-green{background:var(--green)}
.selo.is-paper{background:var(--paper-aged);color:var(--kraft-dark)}

/* item ativo: pintado solido de coral */
.nav-card.is-active{
  background:var(--coral);
  color:var(--white-ink);
  font-weight:800;
  border-color:rgba(87,61,33,.5);
}
.nav-card.is-active .selo{background:var(--white-ink);color:var(--coral-2)}
.nav-card.is-active .count{background:var(--white-ink);color:var(--coral-2)}
.nav-card.is-active .chev{color:var(--white-ink)}

/* ---------- submenu das gravacoes ---------- */
/* os 8 encontros ficam todos aqui, mas o submenu rola sozinho: os quatro
   itens principais do menu nunca somem abaixo da dobra */
.nav-sub{display:none;flex-direction:column;gap:9px;padding:2px 4px 4px 12px;border-left:3px solid var(--paper-aged);margin-left:12px;max-height:min(38vh,300px);overflow-y:auto;overscroll-behavior:contain}
.nav-group.open .nav-sub{display:flex}
.nav-group.open > .nav-card .chev{transform:rotate(180deg)}

.sub-card{
  width:100%;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:10px;
  background:var(--paper-cream);
  color:var(--navy);
  border:2px solid var(--linha-soft);
  border-radius:11px;
  padding:10px 12px;
  box-shadow:var(--shadow-small);
  transition:transform .18s var(--ease),background-color .18s var(--ease);
}
.sub-card:hover{transform:translateY(-2px)}
.sub-card .selo{width:29px;height:29px;font-size:13px;border-radius:8px}
.sub-card .sub-body{flex:1 1 auto;min-width:0}
.sub-card .sub-title{display:block;font-weight:700;font-size:13.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sub-card .sub-meta{display:block;margin-top:2px;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.sub-card .sub-check{flex:0 0 auto;display:none;width:19px;height:19px;color:var(--teal)}
.sub-card.is-done .sub-check{display:block}
.sub-card.is-active{background:var(--coral);color:var(--white-ink);border-color:rgba(87,61,33,.5)}
.sub-card.is-active .selo{background:var(--white-ink);color:var(--coral-2)}
.sub-card.is-active .sub-meta{color:rgba(255,250,240,.86)}
.sub-card.is-active .sub-check{color:var(--white-ink)}

/* item bloqueado, padrao da referencia */
.sub-card.is-locked{
  opacity:.62;cursor:not-allowed;pointer-events:none;
  background:#e9eef4;border-style:dashed;box-shadow:none;
}
.sub-card.is-locked .selo{background:#b9c2cb;color:#45525f;box-shadow:none}
.sub-card.is-locked .sub-meta{color:#5c6975}

/* ---------- rodape do menu ---------- */
.sidebar-foot{
  background:var(--paper-cream);
  border:2px solid var(--linha);
  border-radius:14px;
  box-shadow:var(--shadow-small);
  padding:14px;
  display:flex;flex-direction:column;gap:12px;
}
.user-row{display:flex;align-items:center;gap:11px;min-width:0}
.avatar{
  flex:0 0 auto;width:40px;height:40px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--teal);color:var(--white-ink);
  font-weight:800;font-size:15px;
  box-shadow:var(--shadow-small);
  transform:rotate(-4deg);
}
.user-meta{min-width:0}
.user-meta .name{font-weight:800;font-size:14.5px;color:var(--navy);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-meta .email{font-weight:600;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foot-actions{display:flex;flex-direction:column;gap:9px}

/* ==========================================================================
   BOTOES (preenchidos solidos, com movimento fisico)
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  cursor:pointer;text-decoration:none;
  font-family:var(--font);font-weight:700;font-size:15.5px;
  border:2px solid rgba(87,61,33,.4);
  border-radius:12px;
  padding:11px 20px;
  box-shadow:var(--shadow-small);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease);
}
.btn:hover{transform:translate(-1px,-2px);box-shadow:var(--shadow-hover)}
.btn:active{transform:translate(2px,2px);box-shadow:var(--shadow-press)}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn-coral{background:var(--coral);color:var(--white-ink)}
.btn-teal{background:var(--teal);color:var(--white-ink)}
.btn-navy{background:var(--navy);color:var(--white-ink)}
.btn-mustard{background:var(--mustard);color:var(--navy)}
.btn-paper{background:var(--paper-cream);color:var(--navy)}
.btn-small{font-size:13.5px;padding:9px 15px;border-radius:10px}
.btn-block{width:100%}
.btn.is-locked{background:#b9c2cb;color:#45525f;cursor:not-allowed;pointer-events:none;box-shadow:none}
.btn.done{background:var(--teal)}

/* ==========================================================================
   CONTEUDO
   ========================================================================== */
.content{min-width:0}
.content-inner{display:flex;flex-direction:column;gap:22px;outline:none}
.content-inner > *{animation:rise .38s var(--ease) both}

/* ---------- cabeca da tela ---------- */
.page-head{
  position:relative;
  background:var(--paper-light);
  border:2px solid var(--linha);
  border-radius:14px;
  box-shadow:var(--shadow-card);
  padding:26px 28px;
}
.page-head h1{
  font-weight:800;font-size:clamp(25px,3vw,36px);line-height:1.1;
  letter-spacing:-.01em;color:var(--navy);
}
.page-head h1 em{font-style:normal;color:var(--coral-2)}
.page-head .lede{margin-top:10px;font-weight:500;font-size:16px;color:var(--ink-2);max-width:74ch}
.head-facts{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}
.fact{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--paper-cream);
  border:2px solid var(--linha-soft);
  border-radius:999px;
  padding:6px 14px;
  font-weight:700;font-size:13px;color:var(--kraft-dark);
}
.fact svg{width:15px;height:15px}
.fact.is-done{background:var(--teal);border-color:rgba(87,61,33,.4);color:var(--white-ink)}
.fact.is-navy{background:var(--navy);border-color:rgba(87,61,33,.4);color:var(--mustard-soft)}

/* ---------- bloco de papel generico ---------- */
.block{
  background:var(--paper-light);
  border:2px solid var(--linha);
  border-radius:14px;
  box-shadow:var(--shadow-card);
  padding:26px 26px 28px;
}
.block-head{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:14px}
.block-head h2{font-weight:800;font-size:clamp(19px,2.4vw,25px);line-height:1.15;color:var(--navy)}
.block-head .selo{width:44px;height:44px;border-radius:12px;font-size:20px}
.block-sub{margin-top:-4px;margin-bottom:16px;font-weight:500;font-size:15px;color:var(--ink-3);max-width:76ch}

.rotulo{
  display:inline-block;
  background:var(--teal);color:var(--white-ink);
  font-weight:800;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;
  padding:5px 14px;border-radius:999px;
  box-shadow:var(--shadow-small);
}
.rotulo.is-coral{background:var(--coral)}
.rotulo.is-mustard{background:var(--mustard);color:var(--navy)}
.rotulo.is-navy{background:var(--navy);color:var(--mustard-soft)}

/* ==========================================================================
   GRAVACOES
   ========================================================================== */
.grav-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}
.grav-card{
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  background:var(--paper-cream);
  border:2px solid var(--linha);
  border-radius:12px;
  padding:18px;
  box-shadow:var(--shadow-small);
  text-align:left;
  transition:transform .18s var(--ease);
}
.grav-card:not(.is-locked):hover{transform:translateY(-2px)}
.grav-card .gc-top{display:flex;align-items:center;gap:11px;width:100%}
.grav-card .selo{width:40px;height:40px;border-radius:11px;font-size:17px}
.grav-card .gc-num{font-weight:800;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--kraft-dark)}
.grav-card .gc-state{margin-left:auto;font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-dark)}
.grav-card h3{font-weight:800;font-size:17px;line-height:1.22;color:var(--navy)}
.grav-card .gc-meta{display:flex;flex-wrap:wrap;gap:7px}
.grav-card .gc-resumo{font-weight:500;font-size:14.5px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.grav-card .gc-acoes{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto;padding-top:4px;width:100%}
.grav-card.is-locked{
  background:#e9eef4;
  border-style:dashed;
  box-shadow:none;
  opacity:.72;
}
.grav-card.is-locked .selo{background:#b9c2cb;color:#45525f;box-shadow:none}
.grav-card.is-locked h3{color:#3d4c5a}
.grav-card.is-locked .gc-state{color:#5c6975}
.grav-card.is-locked .gc-resumo{color:#5c6975}

.trilha{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:var(--navy);
  border:2px solid rgba(87,61,33,.45);
  border-radius:12px;
  padding:14px 18px;
  box-shadow:var(--shadow-small);
  color:var(--white-ink);
}
.trilha .t-big{font-weight:800;font-size:19px;color:var(--mustard-soft)}
.trilha .t-txt{font-weight:600;font-size:14.5px;color:var(--white-ink)}
.trilha .t-bar{flex:1 1 180px;min-width:140px;height:12px;border-radius:999px;background:rgba(255,250,240,.2);overflow:hidden;border:2px solid rgba(255,250,240,.28)}
.trilha .t-fill{height:100%;background:var(--teal-soft)}

/* ==========================================================================
   PLAYER DO ENCONTRO
   ========================================================================== */
.video-card{
  background:var(--paper-light);
  border:2px solid var(--linha);
  border-radius:14px;
  box-shadow:var(--shadow-card);
  padding:14px;
}
.video-frame{
  position:relative;
  border-radius:9px;overflow:hidden;
  border:2px dashed rgba(112,69,34,.4);
  background:#0b0b0e;
  aspect-ratio:16/9;
}
.video-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0b0b0e}
.video-missing{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;padding:24px;background:var(--paper-aged);
}
.video-missing .play{
  width:66px;height:66px;border-radius:50%;
  background:var(--coral);color:var(--white-ink);
  display:grid;place-items:center;box-shadow:var(--shadow-small);
}
.video-missing .play svg{width:26px;height:26px}
.video-missing .txt{font-weight:700;font-size:15px;color:var(--kraft-dark);max-width:44ch}

.progress-row{
  display:flex;align-items:center;gap:12px;
  margin-top:13px;padding:10px 13px;
  background:var(--navy);
  border:2px solid rgba(87,61,33,.4);
  border-radius:10px;
  box-shadow:var(--shadow-small);
}
.progress-track{flex:1 1 auto;height:11px;border-radius:999px;background:rgba(255,250,240,.2);overflow:hidden;border:2px solid rgba(255,250,240,.26)}
.progress-fill{height:100%;background:var(--mustard-soft)}
.progress-pct{flex:0 0 auto;font-weight:800;font-size:13.5px;color:var(--mustard-soft);font-variant-numeric:tabular-nums}

.enc-actions{display:flex;flex-wrap:wrap;gap:12px}

/* material do encontro (transcricao) */
.skill-foot{
  background:var(--paper-cream);
  border:2px solid var(--linha);
  border-radius:14px;
  box-shadow:var(--shadow-card);
  padding:24px 26px;
}
.skill-foot h2{font-weight:800;font-size:21px;color:var(--navy);margin-bottom:9px}
.skill-activate{font-weight:500;font-size:15.5px;color:var(--ink-2);max-width:74ch;margin-bottom:15px}
.skill-activate b{font-weight:800;color:var(--ink)}
.skill-download{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  text-decoration:none;cursor:pointer;
  background:var(--teal);color:var(--white-ink);
  border:2px solid rgba(87,61,33,.4);border-radius:12px;
  padding:12px 20px;font-weight:700;font-size:15px;
  box-shadow:var(--shadow-small);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease);
}
.skill-download:hover{transform:translate(-1px,-2px);box-shadow:var(--shadow-hover)}
.skill-download:active{transform:translate(2px,2px);box-shadow:var(--shadow-press)}
.skill-download svg{width:18px;height:18px}
.skill-download-file{
  background:rgba(255,250,240,.2);
  border-radius:8px;padding:3px 9px;
  font-weight:700;font-size:12.5px;
}
.skill-download.is-locked{background:#b9c2cb;color:#45525f;cursor:not-allowed;pointer-events:none;box-shadow:none}

/* ==========================================================================
   FASES (plano de negocios e estrategia pratica)
   ========================================================================== */
.fase-nav{
  display:flex;flex-wrap:wrap;gap:10px;
  background:var(--paper-cream);
  border:2px solid var(--linha);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:var(--shadow-small);
}
.fase-nav .fn-label{
  width:100%;font-weight:800;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--kraft-dark);
}
.fase-chip{
  display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;cursor:pointer;
  background:var(--paper-light);color:var(--navy);
  border:2px solid var(--linha);border-radius:11px;
  padding:9px 14px;font-weight:800;font-size:14px;
  box-shadow:var(--shadow-small);
  transition:transform .18s var(--ease),background-color .18s var(--ease);
}
.fase-chip:hover{transform:translateY(-2px)}
.fase-chip .selo{width:26px;height:26px;border-radius:8px;font-size:12.5px}
.fase-chip.is-active{background:var(--coral);color:var(--white-ink)}
.fase-chip.is-active .selo{background:var(--white-ink);color:var(--coral-2)}

.fase-block{scroll-margin-top:24px}
.fase-head{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  background:var(--navy);
  border:2px solid rgba(87,61,33,.45);
  border-radius:14px;
  padding:16px 20px;
  box-shadow:var(--shadow-card);
  margin-bottom:16px;
}
.fase-head .selo{width:44px;height:44px;border-radius:12px;font-size:19px}
.fase-head .fh-t{font-weight:800;font-size:clamp(19px,2.3vw,24px);line-height:1.15;color:var(--white-ink)}
.fase-head .fh-d{width:100%;font-weight:600;font-size:14px;color:var(--mustard-soft)}
.fase-secoes{display:flex;flex-direction:column;gap:18px}

.sec-block{
  background:var(--paper-light);
  border:2px solid var(--linha);
  border-radius:14px;
  box-shadow:var(--shadow-card);
  padding:24px 26px 26px;
  scroll-margin-top:24px;
}
.sec-block > .sec-title{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-bottom:13px;margin-bottom:6px;
  border-bottom:2px solid var(--linha-soft);
}
.sec-block > .sec-title h3{font-weight:800;font-size:20px;color:var(--navy);line-height:1.15}
.sec-block > .sec-title .selo{width:34px;height:34px;font-size:14px}

.topo-link{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:var(--paper-cream);color:var(--navy);
  border:2px solid var(--linha);border-radius:11px;
  padding:9px 15px;font-weight:700;font-size:13.5px;text-decoration:none;
  box-shadow:var(--shadow-small);
  transition:transform .12s var(--ease);
}
.topo-link:hover{transform:translate(-1px,-2px)}
.topo-link svg{width:15px;height:15px}

/* ==========================================================================
   RESULTADOS
   ========================================================================== */
.res-destaque{
  background:var(--coral);
  border:2px solid rgba(87,61,33,.45);
  border-radius:14px;
  box-shadow:var(--shadow-card);
  padding:30px 30px 32px;
  color:var(--white-ink);
}
.res-destaque .rd-rotulo{
  display:inline-block;
  background:var(--white-ink);color:var(--coral-2);
  font-weight:800;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 14px;border-radius:999px;margin-bottom:14px;
  box-shadow:var(--shadow-small);
}
.res-destaque .rd-num{
  font-weight:800;font-size:clamp(46px,8vw,86px);line-height:.96;
  letter-spacing:-.02em;color:var(--white-ink);
  font-variant-numeric:tabular-nums;
}
.res-destaque .rd-legenda{margin-top:9px;font-weight:800;font-size:clamp(17px,2.4vw,22px);line-height:1.2}
.res-destaque .rd-txt{margin-top:12px;font-weight:500;font-size:16px;max-width:70ch;color:rgba(255,250,240,.94)}
.res-destaque .rd-fonte{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  background:var(--navy);color:var(--mustard-soft);
  border:2px solid rgba(255,250,240,.32);border-radius:999px;
  padding:7px 15px;font-weight:700;font-size:12.5px;
}
.res-destaque .rd-fonte svg{width:15px;height:15px}

.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.res-num{
  background:var(--paper-light);
  border:2px solid var(--linha);
  border-radius:12px;
  box-shadow:var(--shadow-small);
  padding:20px 20px 22px;
  transition:transform .18s var(--ease);
}
.res-num:hover{transform:translateY(-2px)}
.res-num .rn-num{font-weight:800;font-size:clamp(30px,4vw,42px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.res-num.c-teal .rn-num{color:var(--teal)}
.res-num.c-mustard .rn-num{color:var(--gold)}
.res-num.c-navy .rn-num{color:var(--navy)}
.res-num.c-green .rn-num{color:var(--green)}
.res-num.c-coral .rn-num{color:var(--coral-2)}
.res-num .rn-t{margin-top:8px;font-weight:800;font-size:15.5px;color:var(--navy);line-height:1.22}
.res-num .rn-d{margin-top:5px;font-weight:500;font-size:14px;color:var(--ink-3)}

.win-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.win-card{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--paper-cream);
  border:2px solid var(--linha-soft);
  border-radius:12px;
  padding:15px 16px;
  box-shadow:var(--shadow-small);
  transition:transform .18s var(--ease);
}
.win-card:hover{transform:translateY(-2px)}
.win-card .selo{width:30px;height:30px;border-radius:8px}
.win-card .wc-t{font-weight:800;font-size:15px;color:var(--navy);line-height:1.25}
.win-card .wc-d{margin-top:4px;font-weight:500;font-size:13.5px;color:var(--ink-3);line-height:1.45}

.res-ciclo{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  background:var(--navy);
  border:2px solid rgba(87,61,33,.45);
  border-radius:14px;
  box-shadow:var(--shadow-card);
  padding:20px 24px;
  color:var(--white-ink);
}
.res-ciclo .rc-big{font-weight:800;font-size:clamp(26px,3.4vw,36px);line-height:1;color:var(--mustard-soft)}
.res-ciclo .rc-t{font-weight:800;font-size:17px}
.res-ciclo .rc-d{font-weight:500;font-size:14.5px;color:rgba(255,250,240,.88);max-width:66ch}

/* ==========================================================================
   MATERIAL (HTML vindo do banco)
   ========================================================================== */
.material{font-weight:500;font-size:16px;color:var(--ink-2);line-height:1.62}
.material > *+*{margin-top:14px}
.material p{max-width:78ch}
.material b,.material strong{font-weight:800;color:var(--ink)}
.material em{font-style:italic}
.material a{color:var(--coral-2);text-decoration:underline;text-underline-offset:3px}
.material h2,.material h3,.material h4{color:var(--navy);font-weight:800;line-height:1.2;margin-top:26px}
.material h2{font-size:23px}
.material h3{font-size:19px}
.material h4{font-size:16.5px}
.material ul,.material ol{margin:12px 0 12px 22px}
.material li{margin:6px 0;max-width:78ch}
.material ul li::marker{color:var(--coral)}
.material ol li::marker{color:var(--teal);font-weight:800}
.material hr{border:none;border-top:2px solid var(--linha-soft);margin:22px 0}
.material code{
  font-family:var(--font);font-weight:700;font-size:.92em;
  background:var(--paper-aged);border:1px solid rgba(112,69,34,.3);
  border-radius:6px;padding:2px 7px;color:var(--kraft-dark);
}

/* card interno do conteudo */
.material .card{
  background:var(--paper-cream);
  border:2px solid var(--linha);
  border-radius:12px;
  padding:20px 22px;
  box-shadow:var(--shadow-small);
  margin-top:16px;
}
.material .card > *+*{margin-top:12px}
.material .card h3{margin-top:0;font-size:18px}
.material .card p{max-width:none}

/* nota */
.material .note{
  background:#fbf3dc;
  border:2px solid rgba(216,153,25,.5);
  border-left:7px solid var(--mustard);
  border-radius:10px;
  padding:14px 18px;
  font-size:15px;color:var(--ink-2);
  margin-top:16px;
}
.material .note > *+*{margin-top:10px}
.material .note p{max-width:none}

/* tabela */
.material .rtab,.material table{
  width:100%;border-collapse:separate;border-spacing:0;
  font-size:14.5px;margin-top:16px;
  background:var(--paper-light);
  border:2px solid var(--linha);
  border-radius:12px;
  overflow:hidden;
  box-shadow:var(--shadow-small);
}
.material th{
  text-align:left;background:var(--navy);color:var(--white-ink);
  font-weight:800;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:11px 13px;
}
.material td{padding:11px 13px;border-top:1px solid var(--linha-soft);vertical-align:top;color:var(--ink-2)}
.material tbody tr:nth-child(even) td{background:rgba(244,230,199,.42)}
.material .card table,.material .card .rtab{background:var(--paper-light)}
.tab-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:16px}
.tab-scroll > table,.tab-scroll > .rtab{margin-top:0;min-width:560px}

/* selo de estado dentro do conteudo */
.material .pill{
  display:inline-block;white-space:nowrap;
  font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;
  border:2px solid rgba(87,61,33,.35);
}
.material .pill.done{background:var(--teal);color:var(--white-ink)}
.material .pill.doing{background:var(--mustard);color:var(--navy)}
.material .pill.todo{background:var(--paper-aged);color:var(--kraft-dark)}
.material blockquote{
  background:var(--paper-aged);
  border:2px solid rgba(112,69,34,.35);
  border-radius:12px;padding:16px 19px;
  font-size:15.5px;color:var(--kraft-dark);
}

/* ==========================================================================
   MANUAL DA NAIA
   ========================================================================== */
.manual-embed{
  background:var(--paper-light);
  border:2px solid var(--linha);
  border-radius:14px;
  box-shadow:var(--shadow-card);
  padding:14px;
}
.manual-embed-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--navy);
  border:2px solid rgba(87,61,33,.4);
  border-radius:10px;
  padding:9px 13px;margin-bottom:12px;
}
.manual-embed-host{font-weight:800;font-size:13px;color:var(--mustard-soft);letter-spacing:.04em}
.manual-embed-out{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;background:var(--coral);color:var(--white-ink);
  border:2px solid rgba(255,250,240,.35);border-radius:10px;
  padding:7px 14px;font-weight:700;font-size:13px;
  transition:transform .12s var(--ease);
}
.manual-embed-out:hover{transform:translate(-1px,-2px)}
.manual-embed-out svg{width:15px;height:15px}
.manual-embed-frame{
  position:relative;
  border:2px dashed rgba(112,69,34,.4);
  border-radius:9px;overflow:hidden;
  background:var(--paper-aged);
  height:clamp(520px,72vh,940px);
}
.manual-embed-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--paper-light)}
.manual-embed-load{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  background:var(--paper-aged);
}
.manual-embed-load[hidden]{display:none}
.manual-embed-load-txt{font-weight:800;font-size:14px;color:var(--kraft-dark);letter-spacing:.08em;text-transform:uppercase}
.manual-embed-foot{display:flex;flex-wrap:wrap;gap:11px;margin-top:12px}

/* ==========================================================================
   ESTADOS VAZIOS DESENHADOS (ocupam a tela com dignidade)
   ========================================================================== */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;
  background:var(--paper-light);
  border:2px dashed rgba(112,69,34,.45);
  border-radius:14px;
  box-shadow:var(--shadow-card);
  padding:52px 30px 56px;
  min-height:340px;
}
.empty-ic{
  width:70px;height:70px;border-radius:16px;
  display:grid;place-items:center;
  background:var(--paper-aged);color:var(--kraft-dark);
  box-shadow:var(--shadow-small);
  transform:rotate(-4deg);
}
.empty-ic svg{width:32px;height:32px}
.empty-state .kicker{margin-bottom:0}
.empty-state h2{font-weight:800;font-size:clamp(21px,3vw,27px);color:var(--navy);line-height:1.15}
.empty-state p{font-weight:500;font-size:15.5px;color:var(--ink-3);max-width:58ch}
.empty-state .btn{margin-top:6px}
.inline-msg{
  font-weight:700;font-size:13.5px;
  background:var(--paper-cream);border:2px solid var(--linha);
  border-radius:10px;padding:8px 14px;color:var(--kraft-dark);
}

/* esqueleto de carregamento */
.sk{background:var(--paper-aged);border-radius:10px;border:2px solid var(--linha-soft)}
.sk-title{height:44px;width:60%}
.sk-line{height:15px}
.sk-line.short{width:52%}
.sk-video{height:min(46vw,420px)}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width:640px){
  .app{padding:16px 14px 60px}
  .page-head{padding:20px 18px}
  .block,.sec-block,.skill-foot{padding:20px 17px 22px}
  .res-destaque{padding:22px 19px 24px}
  .grav-grid{grid-template-columns:1fr}
  .win-grid,.res-grid{grid-template-columns:1fr}
  .material .rtab,.material table{font-size:13.5px}
  .empty-state{padding:38px 20px 42px;min-height:280px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .content-inner > *{animation:none}
  .nav-card:hover,.sub-card:hover,.grav-card:hover,.res-num:hover,.win-card:hover,.fase-chip:hover,.btn:hover,.skill-download:hover,.topo-link:hover,.manual-embed-out:hover{transform:none}
  .sidebar{transition:none}
}

@media print{
  body{background:#fff;background-image:none}
  .sidebar,.topbar,.imp-bar,.scrim{display:none!important}
}