/* Central Influencer: identidade propria (DESIGN.md). Tema novo = conjunto novo de variaveis, nunca cor reescrita. */
:root, [data-tema="claro"] {
  --fundo: #FAF8F5; --superficie: #FFFFFF; --superficie-2: #F3EFEA; --linha: #E6E0D8;
  --tinta: #17151C; --tinta-2: #6B6672; --casa: #5B2A86; --casa-suave: #EFE7F7; --casa-tinta: #FFFFFF;
  --sobe: #E8553A; --bom: #1E8E63; --atencao: #B87900; --erro: #C3362B;
  --sombra: 0 1px 2px rgba(23, 21, 28, .06);
  color-scheme: light;
}
[data-tema="escuro"] {
  --fundo: #121016; --superficie: #1B1820; --superficie-2: #241F2B; --linha: #2E2836;
  --tinta: #F2EFF5; --tinta-2: #A39DAD; --casa: #B58CFF; --casa-suave: #2D2140; --casa-tinta: #121016;
  --sobe: #FF8A6E; --bom: #4CC994; --atencao: #E8B04A; --erro: #FF7468;
  --sombra: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fundo); color: var(--tinta);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--casa); }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: 24px; } h2 { font-size: 18px; } h3 { font-size: 15px; }
.num { font-variant-numeric: tabular-nums; }
.mudo { color: var(--tinta-2); }
.pequeno { font-size: 12px; }

/* campos e botoes: 32 px (Regra 6) */
input, select, textarea, button { font: inherit; color: inherit; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo label { font-size: 12px; color: var(--tinta-2); }
input[type=text], input[type=password], input[type=search], select, textarea {
  height: 32px; padding: 0 10px; border: 1px solid var(--linha); border-radius: 8px;
  background: var(--superficie); outline: none; min-width: 0; width: 100%;
}
textarea { height: auto; min-height: 84px; padding: 8px 10px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--casa); box-shadow: 0 0 0 3px var(--casa-suave); }
input[aria-invalid=true] { border-color: var(--erro); }
.botao {
  height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--linha); background: var(--superficie);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none;
  color: var(--tinta);
}
.botao:hover { background: var(--superficie-2); }
.botao.casa { background: var(--casa); border-color: var(--casa); color: var(--casa-tinta); }
.botao.casa:hover { filter: brightness(1.08); }
.botao.perigo { color: var(--erro); }
.botao:disabled { opacity: .55; cursor: default; }

/* ---------- casca: trilho de contas + secoes + conteudo ---------- */
.casca { display: grid; grid-template-columns: 64px 196px minmax(0, 1fr); min-height: 100vh; }
.trilho {
  background: var(--superficie-2); border-right: 1px solid var(--linha);
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0;
}
.marca { width: 34px; height: 34px; margin-bottom: 6px; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; position: relative;
  background: var(--casa-suave) center/cover no-repeat; color: var(--casa); font-weight: 600; flex: none;
  outline: 2px solid transparent; outline-offset: 2px;
}
.avatar[aria-current=true] { outline-color: var(--casa); }
.avatar.falta { background: transparent; border: 1.5px dashed var(--tinta-2); color: var(--tinta-2); }
.avatar .ponto { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--atencao); border: 2px solid var(--superficie-2); }
.secoes { border-right: 1px solid var(--linha); padding: 16px 10px; display: flex; flex-direction: column; gap: 2px; }
.secoes .conta-atual { padding: 4px 8px 14px; min-width: 0; }
.secoes .conta-atual strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secao {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 8px; border: 0;
  background: none; cursor: pointer; text-align: left; color: var(--tinta-2);
}
.secao svg { width: 17px; height: 17px; flex: none; }
.secao:hover { background: var(--superficie-2); color: var(--tinta); }
.secao[aria-current=page] { background: var(--casa-suave); color: var(--casa); font-weight: 600; }
.secao .curto { display: none; }
.secoes .rodape { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.conteudo { min-width: 0; padding: 22px 28px 40px; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }

/* ---------- blocos ---------- */
.grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grade > * { min-width: 0; }
.cartao {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 14px 16px;
  box-shadow: var(--sombra); min-width: 0;
}
.cartao h3 { margin-bottom: 8px; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--linha); }
.lista li:first-child { border-top: 0; }
.etiqueta {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px;
  font-weight: 600; background: var(--superficie-2); color: var(--tinta-2); flex: none;
}
.etiqueta.voce { background: var(--casa-suave); color: var(--casa); }
.etiqueta.sobe { background: color-mix(in srgb, var(--sobe) 16%, transparent); color: var(--sobe); }
.etiqueta.bom { background: color-mix(in srgb, var(--bom) 16%, transparent); color: var(--bom); }
.vazio { padding: 26px 10px; text-align: center; color: var(--tinta-2); }
.aviso { padding: 10px 12px; border-radius: 8px; background: var(--casa-suave); color: var(--tinta); margin-bottom: 14px; }
.aviso.erro { background: color-mix(in srgb, var(--erro) 14%, transparent); }
.linha-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.linha-form .campo { flex: 1 1 180px; }
.segmentado { display: inline-flex; border: 1px solid var(--linha); border-radius: 8px; overflow: hidden; }
.segmentado button { height: 32px; padding: 0 12px; border: 0; background: var(--superficie); cursor: pointer; }
.segmentado button + button { border-left: 1px solid var(--linha); }
.segmentado button[aria-pressed=true] { background: var(--casa); color: var(--casa-tinta); }

/* ---------- confirmacao (Regra 8) ---------- */
dialog.pedir { border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); color: var(--tinta);
  padding: 18px; width: min(420px, calc(100vw - 32px)); }
dialog.pedir::backdrop { background: rgba(10, 8, 14, .45); }
dialog.pedir .acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- paginas avulsas (entrar, convite, textos legais) ---------- */
.avulsa { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.avulsa .caixa { width: min(380px, 100%); display: flex; flex-direction: column; gap: 12px; }
.avulsa .cabeca { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.texto-legal { max-width: 760px; margin: 0 auto; padding: 32px 16px 60px; }
.texto-legal h1 { margin-bottom: 6px; } .texto-legal h2 { margin: 22px 0 6px; }
.texto-legal p, .texto-legal li { color: var(--tinta); }

/* ---------- celular ---------- */
@media (max-width: 720px) {
  .casca { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
  .trilho { flex-direction: row; justify-content: flex-start; overflow-x: auto; padding: 10px 16px; border-right: 0;
    border-bottom: 1px solid var(--linha); scrollbar-width: none; }
  .marca { margin: 0 4px 0 0; }
  .secoes { position: sticky; bottom: 0; order: 3; flex-direction: row; justify-content: space-around; padding: 4px 6px;
    border-right: 0; border-top: 1px solid var(--linha); background: var(--superficie); z-index: 5; }
  .secoes .conta-atual, .secoes .rodape { display: none; }
  .secao { flex-direction: column; gap: 2px; height: 48px; padding: 4px 6px; font-size: 11px; flex: 1 1 0; min-width: 0;
    justify-content: center; }
  .secao span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .secao .longo { display: none; }
  .secao .curto { display: inline; }
  .conteudo { padding: 16px 16px 24px; order: 2; }
  .topo { flex-wrap: wrap; }
}