/* Identidade visual v2 · camada sobre app.css · derivada do deck "O Improvável" (Altrum + amarelo + foto tratada)
   Regras: amarelo só em marcadores (©, numeração, setas, segmento ativo, links de minuto); nunca em bloco de texto.
   Fotografia entra só com direito de uso; até lá, o tratamento é gradiente "raios" em CSS. */
:root{
  --amarelo:#E6C84A;--amarelo-2:#F2D96A;--amarelo-escuro:#B99F2D;
  --fg-sec:#929292;
  --raios:radial-gradient(120% 90% at 85% 0%,rgba(255,255,255,.10),transparent 55%),radial-gradient(80% 60% at 10% 100%,rgba(230,200,74,.08),transparent 60%);
}

/* tipografia display: títulos grandes, tracking apertado, segunda linha em cinza */
h2{font-size:clamp(34px,6vw,56px);font-weight:700;letter-spacing:-.045em;line-height:.98}
h2 .sec{color:var(--fg-sec);display:block}
.missao{font-size:clamp(24px,4.2vw,34px);font-weight:700;letter-spacing:-.04em;line-height:1.05}

/* © e numeração em amarelo */
.eyebrow>span:first-child{color:var(--amarelo)}
.eyebrow .n{color:var(--fg-meta)}
.eyebrow .num{color:var(--amarelo);font-weight:600}

/* barra de progresso (trilha 7 dias ou semana) */
.prog{display:flex;gap:6px;align-items:center}
.prog i{display:block;width:18px;height:2px;background:rgba(255,255,255,.22);border-radius:1px}
.prog i.on{background:var(--amarelo)}
.prog i.ok{background:rgba(255,255,255,.7)}

/* setas como marcador de ação e de tópico */
.seta::before{content:"→";color:var(--amarelo);margin-right:8px;font-weight:700}
.msg.verificador h3::before{content:"→ ";color:var(--amarelo)}

/* card da aula: tratamento "raios" + marcadores + nos cantos */
.msg.aula{background:var(--surface);background-image:var(--raios);position:relative;overflow:hidden;padding:24px 22px}
.msg.aula::before,.msg.aula::after{content:"+";position:absolute;color:rgba(255,255,255,.55);font-size:13px;line-height:1}
.msg.aula::before{top:10px;left:12px}.msg.aula::after{bottom:8px;right:12px}
.msg.aula .cit{background:rgba(7,7,7,.7)}

/* citação: link de minuto em amarelo, abre-aspas amarelo */
.cit .q{color:var(--amarelo)}
.cit .src a{color:var(--amarelo-2);text-decoration-color:rgba(230,200,74,.5)}

/* placar: pílula com borda amarela quando há placar */
.placar{border-color:rgba(230,200,74,.55);color:var(--amarelo-2)}
.placar.zero{border-color:var(--hair);color:var(--fg)}
.placar.marco{box-shadow:0 0 0 3px rgba(230,200,74,.5)}
.feito{background:var(--amarelo);color:#1a1405}

/* status selecionado: amarelo em vez de branco */
.status button.sel{background:var(--amarelo);border-color:var(--amarelo);color:#1a1405}

/* grade do placar: dia feito em amarelo */
.d.cumpriu{background:var(--amarelo);color:#1a1405;border-color:var(--amarelo)}
.d.parcial{background:rgba(230,200,74,.35);color:var(--fg)}

/* login: hero com raios e título display */
#login main{background-image:var(--raios)}
#login h2{margin-top:6px}
#login .lead{font-size:17px;color:var(--fg-body);max-width:640px}

/* chips de sugestão e feedback: borda amarela no hover */
.sugestoes .btn.ghost:hover,.fb button:hover{border-color:rgba(230,200,74,.6);background:rgba(230,200,74,.08)}

/* etiquetas de estado continuam neutras (crise, vetado, apoio) por desenho */
.msg.crise{border-color:rgba(255,255,255,.45)}

/* celular: cabeçalho e linha da aula em uma linha cada */
@media (max-width:600px){
  header h1 span{display:none}
  header #nome,header .small{display:none}
  header .right .btn{padding:6px 10px;font-size:12px}
  .msg.aula .eyebrow-flat{flex-wrap:wrap;row-gap:8px}
  .msg.aula .eyebrow-flat .n{display:flex;align-items:center;gap:10px}
  .msg.aula .eyebrow-flat .prog{width:100%;order:3}
  .msg.aula .eyebrow-flat .num{white-space:nowrap}
  #chat>.eyebrow .n{flex-wrap:wrap;justify-content:flex-end;gap:4px 8px}
}