/* casca.css — o que as três páginas dividem: cores, fonte, barra do topo e os
   controles básicos. O que é específico de uma página fica na própria página.

   Paleta e fonte oficiais do Clube do Ukulele. Os únicos valores que não vêm do
   manual são tons escuros do próprio roxo, usados como fundo e borda dentro do
   painel escuro. */

:root{
  --bg:#F5F4F7; --ink:#2D2249; --ink-deep:#221A3B; --roxo:#443468;
  --coral:#E87A85; --coral-soft:#FBEAEC; --coral-esc:#4D1A20;
  --teal:#1F8C7A; --teal-esc:#146054; --teal-soft:#E7F3F0; --teal-line:#CFE6E0;
  --surface:#fff; --line:#E3E0EA; --line-dark:#453B63;
  --txt:#2D2249; --txt-soft:#7A7189; --on-ink:#fff; --on-ink-soft:#A79FC0;
  --ui:'Montserrat',system-ui,sans-serif;
  /* Anton só em título. Nome de acorde NUNCA: a fonte não tem ♯ nem ♭, e caixa
     alta trocaria o sentido da cifra (Am7 viraria AM7, que é outro acorde). */
  --titulo:'Anton','Montserrat',sans-serif;
  --z-menu:10; --z-topo:20; --z-fundo-modal:30; --z-modal:40; --z-aviso:50;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--ui);background:var(--bg);color:var(--txt)}
:focus-visible{outline:2px solid var(--coral);outline-offset:2px;border-radius:4px}

/* ---------- barra do topo, igual nas três páginas ---------- */
.topo{display:flex;align-items:center;gap:20px;background:var(--ink);color:#fff;
  padding:12px 26px;position:sticky;top:0;z-index:var(--z-topo)}
.topo .marca{font-family:var(--titulo);font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap}
.topo nav{display:flex;gap:6px}
.topo nav a{padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:600;
  color:var(--on-ink-soft);text-decoration:none;transition:background .15s,color .15s}
.topo nav a:hover{color:#fff;background:var(--ink-deep)}
.topo nav a[aria-current="page"]{background:var(--coral);color:var(--ink);font-weight:700}
.topo .fim{margin-left:auto;display:flex;align-items:center;gap:9px}
.topo .conta{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--on-ink-soft)}
.topo .conta i{width:8px;height:8px;border-radius:50%;background:var(--txt-soft);display:block}
.topo .conta.ligada i{background:var(--teal)}

/* ---------- cabeçalho de seção ---------- */
.cabecalho{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
  flex-wrap:wrap;padding:24px 30px 20px;border-bottom:1px solid var(--line)}
.cabecalho h1{font-family:var(--titulo);font-size:34px;font-weight:400;letter-spacing:.02em;
  text-transform:uppercase;color:var(--roxo);margin:0;line-height:1}
.cabecalho .sub{font-size:12.5px;font-weight:500;color:var(--txt-soft);margin:4px 0 0}

/* ---------- botões ---------- */
.bt{display:inline-flex;align-items:center;gap:7px;padding:11px 16px;border-radius:10px;
  border:1px solid var(--line);background:transparent;font-family:inherit;font-size:12.5px;
  font-weight:700;color:var(--txt-soft);cursor:pointer;text-decoration:none;
  transition:border-color .15s,color .15s,background .15s}
.bt:hover{border-color:var(--coral);color:var(--roxo)}
.bt[disabled]{opacity:.5;cursor:default}
.bt[disabled]:hover{border-color:var(--line);color:var(--txt-soft)}
.bt.roxo{background:var(--roxo);border-color:var(--roxo);color:#fff}
.bt.roxo:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.bt.teal{background:var(--teal);border-color:var(--teal);color:#fff}
.bt.teal:hover{background:var(--teal-esc);border-color:var(--teal-esc);color:#fff}
.bt.on{background:var(--roxo);border-color:var(--roxo);color:#fff}

/* ---------- campos ---------- */
.campo{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--txt)}
.campo:focus{outline:2px solid var(--coral);outline-offset:-1px}

/* ---------- segmentado ---------- */
.seg{display:inline-flex;background:var(--bg);border-radius:9px;padding:3px;gap:3px}
.seg button{padding:6px 11px;border:0;border-radius:7px;background:transparent;
  font-family:inherit;font-size:11.5px;font-weight:700;color:var(--txt-soft);cursor:pointer}
.seg button.on{background:var(--roxo);color:#fff}

/* ---------- rótulo de grupo ---------- */
.rot{font-family:var(--titulo);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt-soft)}

/* ---------- estado vazio: ensina, não só informa ---------- */
.vazio{background:var(--surface);border:1px dashed var(--line);border-radius:14px;
  padding:38px 24px;text-align:center;color:var(--txt-soft);font-size:13.5px;line-height:1.6}
.vazio b{color:var(--roxo)}

/* ---------- aviso flutuante ---------- */
#aviso{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:12px 22px;border-radius:12px;font-size:13px;
  font-weight:600;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
  z-index:var(--z-aviso)}
#aviso.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

@media(max-width:760px){
  .topo{padding:10px 16px;gap:12px;flex-wrap:wrap}
  .topo nav{order:3;width:100%;overflow-x:auto}
  .cabecalho{padding:18px 16px 16px}
  .cabecalho h1{font-size:27px}
}