/* Kid Money — tema base (tokens da marca + protótipo). Header roxo igual nos 3 perfis; só o corpo muda. */
:root {
  --roxo: #6B3FE0; --roxo-esc: #4A25B0; --rosa: #FF8FB4; --rosa-s: #E8658F; --dourado: #FFC233;
  --tinta: #24164F; --lavanda: #F3EFFF; --verde: #22C58B; --branco: #FFFFFF;
  --txt2: #5E5382; --txt3: #4B3F72; --linha: #EEEAF7; --fundo-pagina: #E7E1F6;
  --xp-bg: #EDE7FC; --xp-fg: #4A25B0; --moeda-bg: #FFF1CC; --moeda-fg: #7C4A03;
  --din-bg: #DDF7EC; --din-fg: #0B5E42; --din-txt: #0E7A55;
  --alerta: #B4232C; --alerta-bg: #FDECEE; --alerta-borda: #F3C4CB; --neutro-bg: #F1EEF8;
  --header-fraco: #E9E2FF;
  --fonte: 'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}
.perfil-pais   { --corpo: #F6F4FB; --ativo: #6B3FE0; --av-bg: #FF8FB4; --av-fg: #24164F; }
.perfil-menino { --corpo: #EAF1FF; --ativo: #1D4ED8; --av-bg: #DCE7FF; --av-fg: #1D4ED8; }
.perfil-menina { --corpo: #FFEEF4; --ativo: #B8336A; --av-bg: #FFE0EA; --av-fg: #B8336A; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--fundo-pagina); color: var(--tinta); font-family: var(--fonte); font-size: 15px; -webkit-font-smoothing: antialiased; }
button, input, select { font-family: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
:focus-visible { outline: 3px solid var(--rosa-s); outline-offset: 2px; }
a { color: var(--ativo, var(--roxo)); }

/* Carregamento inicial */
.carregando { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--txt3); font-weight: 800; }
.carregando-bolha { width: 48px; height: 48px; border-radius: 50%; border: 5px solid var(--xp-bg); border-top-color: var(--roxo); animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* Palco: no desktop centraliza um "celular"; no mobile ocupa a tela */
#app { min-height: 100dvh; }
.palco { min-height: 100dvh; display: flex; justify-content: center; align-items: stretch; padding: 0; }
.fone { position: relative; width: 100%; max-width: 440px; min-height: 100dvh; background: var(--corpo, var(--lavanda)); display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 480px) {
  .palco { padding: 20px; align-items: flex-start; }
  .fone { min-height: min(880px, calc(100dvh - 40px)); border-radius: 32px; box-shadow: 0 24px 60px rgba(36,22,79,.22); }
}

/* Desktop: só os perfis de pais e admin ganham largura + navegação lateral.
   A criança continua no formato celular em qualquer tela. */
@media (min-width: 900px) {
  .palco { padding: 28px 28px 72px; }
  .fone.perfil-pais {
    max-width: 1060px;
    min-height: min(860px, calc(100dvh - 100px));
    display: grid;
    grid-template-columns: 236px 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "head head" "nav corpo";
  }
  .perfil-pais .cab { grid-area: head; padding: 20px 30px; border-radius: 0; }
  .perfil-pais .corpo { grid-area: corpo; padding: 24px 30px; }
  /* nav inferior vira trilho lateral */
  .perfil-pais .nav {
    grid-area: nav; height: auto; display: flex; flex-direction: column; gap: 4px;
    border-top: 0; border-right: 1px solid var(--linha); padding: 16px 12px;
  }
  .perfil-pais .nav a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; font-size: 14.5px; }
  .perfil-pais .nav a svg { width: 22px; height: 22px; }
  .perfil-pais .nav a.ativo { background: var(--lavanda); }
  .perfil-pais .nav .contador { position: static; margin-left: auto; top: auto; left: auto; }
  /* o conteúdo aproveita a largura sem esticar demais os cartões */
  .perfil-pais .corpo > * { max-width: 760px; width: 100%; }
}

/* Header (igual nos 3 perfis) */
.cab { background: var(--roxo); color: var(--branco); padding: 16px 18px 20px; border-radius: 0 0 28px 28px; display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; }
.cab-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; }
.cab-topo .logo { height: 22px; }
.cab h1 { margin: 0; font-size: 23px; font-weight: 900; letter-spacing: -.2px; }
.cab p { margin: 2px 0 0; font-size: 14px; color: var(--header-fraco); }
.cab-caixa { background: rgba(255,255,255,.14); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.cab-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.cab-grade > div { background: rgba(255,255,255,.14); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 1px; min-width: 0; align-items: center; text-align: center; }
.cab-grade small { font-size: 12px; font-weight: 700; color: var(--header-fraco); }
.cab-grade strong { font-size: 18px; font-weight: 900; white-space: nowrap; }
.avatar { width: 40px; height: 40px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; flex-shrink: 0; background: var(--av-bg); color: var(--av-fg); }
.cab .avatar { background: rgba(255,255,255,.16); color: #fff; border: 0; }
.avatar svg { width: 20px; height: 20px; }
.barra { height: 10px; border-radius: 5px; background: rgba(255,255,255,.25); overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 5px; background: #fff; }

/* Corpo e cartões */
.corpo { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.corpo h2 { margin: 6px 0 0; font-size: 17px; font-weight: 900; }
.titulo-tela { margin: 0; font-size: 20px; font-weight: 900; }
.cartao { background: var(--branco); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.lista { background: var(--branco); border-radius: 18px; display: flex; flex-direction: column; }
.lista > * + * { border-top: 1px solid var(--linha); }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; min-width: 0; }
.item-txt { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.item-txt b { font-size: 15px; font-weight: 800; }
.item-txt span { font-size: 13px; color: var(--txt2); }
.valor { font-size: 15px; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }
.valor.mais { color: var(--din-txt); } .valor.menos { color: var(--alerta); }
.bolinha { width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bolinha svg { width: 20px; height: 20px; }
.vazio { text-align: center; color: var(--txt2); font-weight: 700; padding: 22px 14px; background: var(--branco); border-radius: 18px; }

/* Pills / selos */
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.pill svg { width: 13px; height: 13px; }
.p-xp { background: var(--xp-bg); color: var(--xp-fg); } .p-moeda { background: var(--moeda-bg); color: var(--moeda-fg); }
.p-din { background: var(--din-bg); color: var(--din-fg); } .p-neutro { background: var(--neutro-bg); color: var(--txt3); }
.p-alerta { background: var(--alerta-bg); color: var(--alerta); }

/* Botões — sempre com ícone (ver componente BotaoAcao) */
.btn { height: 46px; border: 0; border-radius: 14px; font-size: 15px; font-weight: 900; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-prim { background: var(--roxo); color: var(--branco); box-shadow: 0 3px 0 var(--roxo-esc); }
.btn-prim:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--roxo-esc); }
.btn-sec { background: var(--branco); color: var(--roxo); border: 2px solid var(--roxo); }
.btn-ok { background: var(--verde); color: var(--tinta); }
.btn-nao { background: var(--branco); color: var(--alerta); border: 2px solid var(--alerta-borda); }
.btn-grande { height: 56px; font-size: 18px; border-radius: 18px; }
.btn-icone { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--neutro-bg); color: var(--txt3); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-icone svg { width: 20px; height: 20px; }
.duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bloco { display: flex; flex-direction: column; gap: 10px; }

/* Navegação inferior (ícone + legenda; a criança associa o ícone) */
.nav { background: var(--branco); border-top: 1px solid var(--linha); height: 68px; flex-shrink: 0; display: grid; }
.nav a { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--txt2); font-size: 12px; font-weight: 700; text-decoration: none; position: relative; }
.nav a svg { width: 24px; height: 24px; }
.nav a.ativo { color: var(--ativo); font-weight: 900; }
.nav .contador { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--rosa-s); color: var(--branco); font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

/* Entrada / login */
.entrada { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px; text-align: center; background: var(--lavanda); }
.entrada .logo { width: 180px; max-width: 70%; }
.entrada h1 { margin: 0; font-size: 24px; font-weight: 900; }
.entrada p { margin: 0; color: var(--txt3); font-weight: 700; max-width: 320px; }
.entrada .acoes { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; }

/* Título de tela (com ação ao lado) */
.topo-tela { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Botão pequeno + links como botão */
a.btn { text-decoration: none; }
.btn-peq { height: 44px; font-size: 14px; padding: 0 14px; border-radius: 12px; }
.btn-peq svg { width: 16px; height: 16px; }

/* Destaque e resumo numérico (carteira, porquinho) */
.destaque { background: var(--branco); border-radius: 18px; padding: 16px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.destaque small { color: var(--txt2); font-weight: 800; font-size: 13px; }
.destaque .grande { font-size: 30px; font-weight: 900; color: var(--din-txt); }
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stat { background: var(--branco); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.stat small { color: var(--txt2); font-weight: 800; font-size: 12px; }
.stat b { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.stat.ok b { color: var(--din-txt); } .stat.alerta b { color: var(--alerta); } .stat.roxo b { color: var(--roxo); }

/* Barra de progresso (porquinho, medalhas) */
.progresso { height: 10px; border-radius: 5px; background: var(--linha); overflow: hidden; }
.progresso > i { display: block; height: 100%; border-radius: 5px; background: var(--verde); transition: width .3s; }

/* Cofrinho (Meu Porquinho): porquinho rosa que enche de moedas (dourado) por % do alvo. */
.porquinho { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 2px; }
.porquinho svg { width: 132px; height: auto; display: block; }
.porquinho svg .moedas { transition: y .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1); }
.porquinho-pct { font-size: 13px; font-weight: 900; color: var(--moeda-fg); }
/* Card compacto: cofrinho à esquerda, nome + ações à direita. */
.porquinho-linha { display: flex; align-items: center; gap: 14px; }
.porquinho-linha .porquinho { flex: none; padding: 0; }
.porquinho-linha .porquinho svg { width: 104px; }
.porquinho-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.porquinho-acoes { display: flex; flex-direction: column; gap: 8px; }
.porquinho-acoes input { width: 100%; height: 44px; border: 2px solid var(--linha); border-radius: 10px; padding: 0 12px; font-size: 16px; font-weight: 800; }
.porquinho.cheio svg { animation: pig-pop .55s cubic-bezier(.2,.8,.2,1); }
@keyframes pig-pop { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .porquinho svg .moedas { transition: none; }
  .porquinho.cheio svg { animation: none; }
}

/* Formulário */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label { font-weight: 800; font-size: 13px; color: var(--txt3); }
.campo input, .campo select, .campo textarea { height: 44px; border: 2px solid var(--linha); border-radius: 12px; padding: 0 12px; font-size: 15px; background: var(--branco); color: var(--tinta); width: 100%; }
.campo textarea { height: auto; padding: 10px 12px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--roxo); outline: none; }
.dica { font-size: 12px; color: var(--txt2); font-weight: 700; }
.dica svg { width: 14px; height: 14px; vertical-align: -2px; flex-shrink: 0; }

/* Item clicável (botão com cara de item de lista) */
.item-botao { width: 100%; text-align: left; border: 0; background: var(--branco); font: inherit; color: inherit; cursor: pointer; }
.item-botao:active { background: var(--lavanda); }

/* Seletor de ícones */
.icones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.icones button { aspect-ratio: 1; border: 2px solid var(--linha); border-radius: 14px; background: var(--branco); color: var(--txt3); display: flex; align-items: center; justify-content: center; }
.icones button svg { width: 24px; height: 24px; }
.icones button.sel { border-color: var(--roxo); background: var(--lavanda); color: var(--roxo); }

/* Ação inline (guardar/tirar) */
.mini { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mini input { width: 86px; height: 40px; border: 2px solid var(--linha); border-radius: 10px; padding: 0 10px; font-size: 15px; font-weight: 800; }

/* Recado / toast */
.recado { background: var(--din-bg); color: var(--din-fg); border-radius: 12px; padding: 10px 12px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.recado svg { width: 18px; height: 18px; flex-shrink: 0; }
.recado.erro { background: var(--alerta-bg); color: var(--alerta); }

/* Grade de prêmios (loja) */
.premios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.premio { background: var(--branco); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.premio .ico-grande { width: 54px; height: 54px; border-radius: 16px; background: var(--moeda-bg); color: var(--moeda-fg); display: flex; align-items: center; justify-content: center; }
.premio .ico-grande svg { width: 28px; height: 28px; }
.premio b { font-size: 15px; font-weight: 800; }
.premio .btn { width: 100%; }

/* Tela de aviso (404 / página inexistente) */
.aviso-tela { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 28px; text-align: center; background: var(--lavanda); }
.aviso-tela .logo { width: 150px; max-width: 60%; }
.aviso-tela h1 { margin: 0; font-size: 22px; font-weight: 900; }
.aviso-tela p { margin: 0; color: var(--txt3); font-weight: 700; max-width: 300px; }

/* Aviso de privacidade / LGPD */
.lgpd { position: fixed; left: 50%; transform: translateX(-50%); bottom: 12px; width: min(420px, calc(100% - 24px)); background: var(--tinta); color: #fff; border-radius: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(36,22,79,.35); z-index: 2000; }
.lgpd-txt { flex: 1; font-size: 13px; font-weight: 700; line-height: 1.35; }
.lgpd .btn-prim { background: #fff; color: var(--roxo); box-shadow: 0 3px 0 rgba(0,0,0,.18); flex-shrink: 0; }
.lgpd .btn-prim:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }

/* Links legais (Termos / Privacidade) */
.links-legais { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; font-size: 12px; font-weight: 800; }
.links-legais a { color: var(--txt3); text-decoration: underline; }
.links-legais span { color: var(--txt2); }
.lgpd .links-legais { justify-content: flex-start; margin-top: 6px; }
.lgpd .links-legais a { color: #fff; }
.lgpd .links-legais span { color: rgba(255,255,255,.6); }

/* Página de erro (500 / falha inesperada) */
#blazor-error-ui { display: none; position: fixed; inset: 0; background: rgba(36,22,79,.55); z-index: 3000; }
#blazor-error-ui .erro-cartao { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(340px, calc(100% - 40px)); background: #fff; border-radius: 20px; padding: 24px; text-align: center; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
#blazor-error-ui .erro-pig { font-size: 42px; }
#blazor-error-ui strong { font-size: 18px; color: var(--tinta); font-weight: 900; }
#blazor-error-ui p { margin: 0; color: var(--txt2); font-weight: 700; font-size: 14px; }
#blazor-error-ui .reload { display: inline-flex; align-items: center; justify-content: center; height: 46px; border-radius: 14px; background: var(--roxo); color: #fff; font-weight: 900; text-decoration: none; box-shadow: 0 3px 0 var(--roxo-esc); }
#blazor-error-ui .dismiss { cursor: pointer; color: var(--txt2); font-weight: 800; font-size: 13px; }

/* Crédito da Oficina de Software — fora do card, só onde há margem (desktop). */
.credito-oficina { display: none; }
@media (min-width: 900px) {
  .credito-oficina { display: flex; position: fixed; left: 0; right: 0; bottom: 18px; justify-content: center; pointer-events: none; z-index: 5; }
  .credito-oficina a { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--txt2); font-size: 13px; font-weight: 700; text-decoration: none; opacity: .72; transition: opacity .15s; }
  .credito-oficina a:hover { opacity: 1; }
  .credito-oficina b { font-weight: 900; color: var(--roxo); }
  .credito-oficina .credito-logo { height: 22px; width: auto; }
}