/* ============================================================
   CLUB ORO — tema claro/escuro + tipografia legível
   Carregar DEPOIS do <style> da página. Sobrescreve os tokens.
   ============================================================ */

/* ---------- MODO NOITE (padrão, corrigido) ---------- */
:root,
[data-tema="escuro"]{
  --bg:#0a0a0a;
  --card:#141414;
  --card2:#1c1c1c;
  --border:#2f2f2f;      /* antes #1a1a1a — a borda não aparecia */
  --text:#f2f2f2;
  --muted:#a3a3a3;       /* antes #444 — contraste 2.3:1, ilegível */
  --gold:#E8B84B;
  --gold2:#f5cc6a;
  --green:#4ade80;

  --banner:linear-gradient(135deg,#141414 0%,#1e1704 60%,#141414 100%);
  --hero:linear-gradient(135deg,#0d0d0d 0%,#171003 100%);
  --thumb:linear-gradient(135deg,#1a1a1a 0%,#171003 100%);
  --sombra:0 1px 3px rgba(0,0,0,.5);
}

/* ---------- MODO DIA ---------- */
[data-tema="claro"]{
  --bg:#f6f3ec;          /* off-white quente, casa com o ouro */
  --card:#ffffff;
  --card2:#f1ece1;
  --border:#d9d1c0;
  --text:#161616;
  --muted:#565043;       /* 7.4:1 sobre o card branco */
  --gold:#8a6612;        /* ouro escuro — o #E8B84B some no branco */
  --gold2:#6f5210;
  --green:#166534;

  --banner:linear-gradient(135deg,#fffdf7 0%,#f7edd4 60%,#fffdf7 100%);
  --hero:linear-gradient(135deg,#fffdf7 0%,#f6ecd6 100%);
  --thumb:linear-gradient(135deg,#f1ece1 0%,#efe3c9 100%);
  --sombra:0 1px 3px rgba(60,50,20,.10);
}

[data-tema="claro"] body{ background:var(--bg); color:var(--text); }

/* Os 5 fundos que estavam fixos em preto no CSS original.
   SEM !important de propósito: este arquivo carrega depois do <style>
   da página, então a ordem já resolve. Com !important, estas regras
   invadiam o design das aulas, que reusam os mesmos nomes de classe. */
.welcome-banner{ background:var(--banner); }
.hero,
.course-header{ background:var(--hero); }
.course-thumb{ background:var(--thumb); }
/* .mod-video-wrap continua preto de propósito — é moldura de vídeo */

[data-tema="claro"] .card,
[data-tema="claro"] .update-cat,
[data-tema="claro"] .course-card,
[data-tema="claro"] .mod,
[data-tema="claro"] .pilar{ box-shadow:var(--sombra); }

/* No claro o dourado translúcido some; firma as bordas douradas */
[data-tema="claro"] .welcome-banner{ border-color:rgba(138,102,18,.45); }
[data-tema="claro"] .welcome-banner:hover{ border-color:rgba(138,102,18,.85); }

/* Imagens de capa são escuras: no modo dia ganham um respiro */
[data-tema="claro"] .course-thumb img{ filter:brightness(1.04); }

/* --- Cores brancas fixas no CSS original: somem no fundo claro --- */
[data-tema="claro"] .welcome-banner-text h3,
[data-tema="claro"] .update-cat-html-content strong,
[data-tema="claro"] .msg-body strong{ color:var(--text) !important; }

/* --- "Meu Canal" tem color:#E8B84B no style= do HTML; só !important vence --- */
[data-tema="claro"] a.nav-out[style],
[data-tema="claro"] .nav-out[style]{
  color:var(--gold) !important;
  border-color:rgba(138,102,18,.55) !important;
}

/* ------------------------------------------------------------
   ILHAS DE CONTEÚDO AUTORAL
   As aulas e os relatórios são páginas HTML completas, com design
   escuro próprio, coladas dentro da página. Não dá para clarear o
   fundo delas sem apagar o texto — o texto é branco e vem do CSS
   de cada aula, que são dezenas.
   Então elas continuam escuras nos dois modos, como uma peça
   emoldurada. O que muda ao redor é a plataforma.
   ------------------------------------------------------------ */
[data-tema="claro"] .les-content,
[data-tema="claro"] .single-content,
[data-tema="claro"] .update-full{
  /* devolve os tokens escuros só aqui dentro */
  --bg:#0a0a0a; --card:#141414; --card2:#1c1c1c;
  --border:#2f2f2f; --text:#f2f2f2; --muted:#a3a3a3;
  --gold:#E8B84B; --gold2:#f5cc6a; --green:#4ade80;

  background:#0a0a0a;
  color:#f2f2f2;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}

/* As aulas reusam nomes de classe genéricos (.hero, .card, .breadcrumb,
   .mod...) que também existem na plataforma. O <style> de cada aula vem
   no corpo da página, depois deste arquivo, então ele ganha sozinho —
   desde que nada aqui use !important nessas propriedades.
   A exceção são os tamanhos de fonte, que precisam de !important para
   vencer o CSS da plataforma; estes ficam neutralizados aqui dentro. */
.les-content [class],
.single-content [class],
.update-full [class]{
  font-size:revert;
}

/* As respostas do Meu Canal são escritas com o dourado no style= de cada
   elemento. Sobre o fundo claro esse dourado dá 2,5:1. Isto acerta só os
   elementos que carregam aquela cor exata, sem tocar no resto do texto. */
[data-tema="claro"] .msg-body [style*="#e8b84b"],
[data-tema="claro"] .msg-body [style*="#E8B84B"],
[data-tema="claro"] .msg-body [style*="#f5cc6a"],
[data-tema="claro"] .msg-body [style*="#F5CC6A"]{
  color:var(--gold) !important;
}

/* Ouro claro sobre fundo claro não passa em nenhum critério de contraste */
[data-tema="claro"] .progress-text,
[data-tema="claro"] .course-cta,
[data-tema="claro"] .update-cat-cta,
[data-tema="claro"] .welcome-banner-label{ color:var(--gold) !important; }

/* ============================================================
   TIPOGRAFIA — o segundo problema
   O CSS original tinha 22 regras entre 10px e 13px.
   Escala aplicada: 10→13 · 11→14 · 12→15 · 13→16
   ============================================================ */

body{ font-size:17px; line-height:1.55; }

/* 10px → 13px  (rótulos em caixa alta) */
.welcome-banner-label,
.update-cat-latest-label,
.course-badge,
.pilar-num,
.les-free,
.badge,
.msg-meta{ font-size:13px !important; letter-spacing:.10em; }

/* 11px → 14px */
.update-cat-latest-date,
.update-cat-count,
.progress-text,
.pilar-sub,
.mod-num,
.mod-summary-title,
.les-check,
.les-icons,
.hero-label,
.update-date,
.single-date,
.history-date,
.form label,
.form .file-hint,
.form .chosen{ font-size:14px !important; }

/* 12px → 15px */
.nav-out,
.nav-back,
.update-cat-sub,
.update-cat-cta,
.course-instructor,
.course-meta,
.course-cta,
.pilar-list li,
.breadcrumb,
.prog-text,
.mod-meta,
.mod-prog,
.update-cta,
.single-back,
.card-sub,
.att,
.form .file-row label.btn-file{ font-size:15px !important; }

/* 13px → 16px  (texto que a pessoa realmente lê) */
.nav-user,
.welcome-banner-text p,
.welcome-banner-btn,
.update-cat-html-content,
.update-cat-latest-title,
.course-desc,
.pilar-desc,
.mod-summary-text,
.update-desc,
.hero-sub,
.flash,
.msg-body table,
.empty-cta-sub,
.form button[type="submit"]{ font-size:16px !important; line-height:1.6; }

/* Corpo de texto das aulas e atualizações: leitura longa */
.update-cat-html-content,
.mod-summary-text,
.update-desc,
.msg-body,
.lesson-content{ line-height:1.7; }

.update-cat-html-content p,
.msg-body p,
.lesson-content p{ margin-bottom:1em; }

/* Links dentro de texto precisam ser reconhecíveis sem depender de cor */
.update-cat-html-content a,
.msg-body a,
.lesson-content a{ text-decoration:underline; text-underline-offset:2px; }

/* ============================================================
   BANNER "COMECE POR AQUI" DA HOME
   A foto entra encostada na direita, com o degradê já embutido
   no PNG — por isso funciona igual no modo dia e no modo noite,
   sem precisar de máscara por cima.
   ============================================================ */
.welcome-banner{
  position:relative;
  overflow:hidden;
  min-height:172px;
  align-items:center;
}

.welcome-banner-foto{
  position:absolute;
  right:0; top:50%;
  transform:translateY(-50%);
  height:104%;
  width:auto;
  max-width:none;          /* o reset global põe max-width:100% e achataria a foto */
  pointer-events:none;
  user-select:none;
  z-index:1;
}

/* o texto e o botão ficam por cima da foto */
.welcome-banner-left,
.welcome-banner-btn{ position:relative; z-index:2; }

/* o texto não pode correr por baixo da foto */
.welcome-banner-text{ max-width:min(660px, 64%); }
.welcome-banner-text h3{ white-space:nowrap; }
@media (max-width:1100px){ .welcome-banner-text h3{ white-space:normal; } }

/* o botão precisa parar antes do rosto, senão cai em cima dele */
.welcome-banner-btn{ white-space:nowrap; }
@media (min-width:901px){
  .welcome-banner-btn{ margin-right:165px; }
}

/* Telas médias e celular: a foto rouba o espaço do texto, então sai */
@media (max-width:900px){
  .welcome-banner-foto{ display:none; }
  .welcome-banner-text{ max-width:100%; }
  .welcome-banner{ min-height:0; }
}


/* Retrato redondo: a foto larga não cabe no celular, mas o rosto sim.
   É o que mantém o banner pessoal na tela onde a maioria lê. */
.welcome-banner-avatar{ display:none; }
@media (max-width:900px){
  .welcome-banner{ flex-wrap:wrap; }
  .welcome-banner-avatar{
    display:block; order:-1;
    width:70px; height:70px; border-radius:50%;
    object-fit:cover; flex-shrink:0;
    border:2px solid rgba(232,184,75,.55);
    margin:0 0 14px 0;
  }
}

/* ============================================================
   BOTÃO DE TROCA DE TEMA
   ============================================================ */
.tema-btn{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'IBM Plex Mono',monospace;
  font-size:14px; line-height:1;
  color:var(--muted);
  background:transparent;
  border:1px solid var(--border);
  border-radius:6px;
  padding:8px 13px;
  cursor:pointer;
  transition:border-color .2s, color .2s;
}
.tema-btn:hover,
.tema-btn:focus-visible{ border-color:var(--gold); color:var(--gold); }
.tema-btn svg{ width:16px; height:16px; flex-shrink:0; }

/* Foco visível em tudo — quem enxerga pouco costuma navegar por teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:4px;
}

/* Respeita quem pediu menos animação no sistema */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ============================================================
   CELULAR
   A barra do topo pedia 783px: logo 178 + "Ola, <nome>" 107 +
   tema 135 + "Meu Canal" 141 + "Sair" 66, mais recuos e espaços.
   Num aparelho de ~400px isso quebrava em três linhas e empurrava
   o "Sair" para fora da tela.
   Aqui ela cai para ~280px: a saudação sai, os botões com ícone
   ficam só no ícone, e nada quebra linha.
   ============================================================ */
@media (max-width:640px){
  body{ font-size:16px; }

  nav{
    padding:0 12px;
    height:56px;
    gap:10px;
    flex-wrap:nowrap;
  }

  .nav-logo{
    font-size:15px;
    white-space:nowrap;
    flex-shrink:0;
  }

  /* "Ola, Fernanda" é a primeira coisa a sair: ela sabe quem é */
  .nav-user{ display:none; }

  .nav-right{
    gap:8px;
    flex-wrap:nowrap;
    align-items:center;
  }

  .nav-out,
  .nav-back,
  .tema-btn{
    white-space:nowrap;
    flex-shrink:0;
    font-size:14px;
    padding:7px 10px;
  }

  /* Botões que têm ícone ficam só no ícone. O "Sair" não tem
     ícone, então continua escrito — é o que não pode virar
     adivinhação. O rótulo segue no aria-label para leitor de tela. */
  .tema-btn span,
  .nav-out .nav-lbl,
  .nav-back .nav-lbl{ display:none; }

  .tema-btn{ padding:8px 9px; }
  .nav-out .nav-ico,
  .nav-back .nav-ico{ font-size:16px; }

  /* Alvo de toque confortável: 44px é o mínimo recomendado */
  .nav-out,
  .tema-btn,
  .nav-back{ min-height:38px; display:inline-flex; align-items:center; }

  .content{ padding:24px 16px; }
}

/* Aparelhos bem estreitos */
@media (max-width:360px){
  nav{ padding:0 10px; gap:8px; }
  .nav-logo{ font-size:14px; }
  .nav-right{ gap:6px; }
}