/* =============================================================
   O SISTEMA
   -------------------------------------------------------------
   Cada tela deste painel foi feita bem, sozinha. O que faltava não
   era gosto — era o sistema que faz todas parecerem a mesma mão.

   Antes disto havia 9 raios de canto, 20 tamanhos de fonte (com meio
   pixel no meio), 5 cinzas de texto e 3 alturas de controle na mesma
   fileira. O olho compara vizinhos o tempo todo: é essa variação, e
   não a falta de capricho, que faz parecer inacabado.

   Este arquivo carrega por último e define as regras que valem para
   tudo. Ele é curto de propósito: sistema grande ninguém segue.
============================================================= */

:root {
    /* ---------- Raio: quatro, com significado ----------
       Quanto maior a superfície, maior o canto. */
    --r-xs: 8px;     /* controle pequeno: botão, campo, pastilha */
    --r-sm: 8px;
    --r: 12px;       /* cartão */
    --r-md: 12px;
    --r-lg: 20px;    /* folha, modal, painel flutuante */
    --r-full: 999px; /* pílula e círculo */

    /* ---------- Tipografia: seis degraus ----------
       Meio pixel borra em tela comum, e nada abaixo de 11px sobrevive
       ao sol no celular. */
    --t-micro: 11px;
    --t-peq:   12.5px;
    --t-base:  14px;
    --t-med:   17px;
    --t-gr:    22px;
    --t-hero:  30px;

    /* ---------- Altura única de controle ----------
       Ter 38 num lugar e 35 no outro é o que faz a fileira parecer
       torta sem ninguém saber dizer por quê. */
    --h-controle: 34px;
    --h-controle-gr: 42px;

    /* ---------- Movimento: uma curva, três tempos ----------
       Só em mudança de estado. Movimento decorativo cansa em dois dias
       e ninguém consegue desligar depois. */
    --mov-toque: 140ms;
    --mov-entra: 240ms;
    --mov-folha: 320ms;
    --curva: cubic-bezier(.2, .9, .3, 1);

    /* ---------- Espaço ---------- */
    --e1: 4px;  --e2: 8px;  --e3: 12px;
    --e4: 16px; --e5: 24px; --e6: 32px;
}

/* Três cinzas, não cinco. Cinco níveis significa que cada tela nova
   escolhe um levemente diferente e nada combina entre telas. Os dois
   sobrando passam a apontar para os que ficaram. */
:root {
    --text-muted: var(--text-dim);
}

/* O cinza mais claro estava no limite do contraste sobre o fundo quase
   preto — e era usado em texto pequeno. No celular, ao sol, sumia. */
:root { --text-faint: #8a8896; }
:root[data-tema="claro"] { --text-faint: #55555f; }

/* =============================================================
   ALTURA ÚNICA
============================================================= */

.btn, .mp-btn, .form-control, input[type="text"], input[type="number"],
input[type="date"], input[type="email"], input[type="password"], select {
    min-height: var(--h-controle);
}
.btn-lg, .btn-block { min-height: var(--h-controle-gr); }

/* =============================================================
   O DOURADO TEM ORÇAMENTO
   -------------------------------------------------------------
   É a cor mais forte da paleta. Quando aparece na pastilha, no botão,
   no ícone e na barra ao mesmo tempo, deixa de significar "olhe aqui"
   e vira o fundo. A regra é: um dourado por região da tela.
============================================================= */

/* Ícone dentro de item de menu não precisa de cor: a posição já diz o
   que ele é, e vinte ícones dourados numa lateral viram parede. */
.nav-item svg, .nav-item i { color: currentColor; }

/* =============================================================
   A ASSINATURA: o fio
   -------------------------------------------------------------
   Uma coisa repetida em tudo é o que faz um print ser reconhecível
   antes de alguém ler o nome. Aqui é um fio dourado curto, sempre na
   borda de início do que está ativo — nunca em outro lugar.
============================================================= */

.nav-item.active,
.fin-aba.ativa,
.eq-canal.ativo,
.tab-content .mp-aba.ativa {
    position: relative;
}
/* O item do menu perdeu o fio próprio: agora quem marca é o farol, que
   viaja. Dois marcadores seria o problema de antes de volta. */
.eq-canal.ativo::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 16px;
    margin-top: -8px;
    border-radius: 999px;
    background: var(--accent);
}

/* =============================================================
   MOVIMENTO
============================================================= */

@media (prefers-reduced-motion: no-preference) {
    /* Lista que entra escalonada é o sinal mais barato de "app caro"
       que existe. 30ms entre itens: o olho percebe a ordem sem
       perceber a espera. */
    .fin-tabela tbody tr,
    .eq-canal,
    .chat-item {
        animation: sisEntra var(--mov-entra) var(--curva) backwards;
    }
    .fin-tabela tbody tr:nth-child(1) { animation-delay: 0ms; }
    .fin-tabela tbody tr:nth-child(2) { animation-delay: 30ms; }
    .fin-tabela tbody tr:nth-child(3) { animation-delay: 60ms; }
    .fin-tabela tbody tr:nth-child(4) { animation-delay: 90ms; }
    .fin-tabela tbody tr:nth-child(5) { animation-delay: 120ms; }
    .fin-tabela tbody tr:nth-child(n+6) { animation-delay: 150ms; }
}

@keyframes sisEntra {
    from { opacity: 0; transform: translateY(4px); }
}

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

/* =============================================================
   TELA VAZIA QUE ENSINA
   -------------------------------------------------------------
   "Nenhum X" constata a ausência e não ajuda ninguém. Num produto
   vendido por assinatura, a tela vazia da primeira semana é onde o
   cliente decide se continua — ela precisa ensinar o primeiro passo.
============================================================= */

.vazio-ensina {
    display: grid; place-items: center; text-align: center;
    gap: var(--e2);
    padding: var(--e6) var(--e4);
    max-width: 380px; margin: 0 auto;
}
.vazio-ensina-icone {
    width: 52px; height: 52px; border-radius: 999px;
    display: grid; place-items: center;
    background: var(--surface-2);
    color: var(--text-faint); font-size: var(--t-med);
    margin-bottom: var(--e1);
}
.vazio-ensina b {
    font-size: var(--t-base); color: var(--text-strong); font-weight: 600;
}
.vazio-ensina p {
    margin: 0; font-size: var(--t-micro); line-height: 1.6; color: var(--text-faint);
}
.vazio-ensina .btn { margin-top: var(--e2); }

/* =============================================================
   O ALTERNADOR DE TEMA
   -------------------------------------------------------------
   Era 48×38 com canto de 10px: o único preenchido da barra, com uma
   proporção que não combinava com nada — nem quadrado, nem pílula.

   Agora é um ícone só, com exatamente a mesma forma dos vizinhos. E
   troca de desenho conforme o tema: sol quando está escuro (é o que
   você vai obter ao clicar), lua quando está claro. O botão mostra o
   destino, não o estado atual — é o que a pessoa quer saber antes de
   apertar.
============================================================= */

.btn-tema {
    width: var(--h-controle);
    height: var(--h-controle);
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .035);
    color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--mov-toque) var(--curva),
                color var(--mov-toque) var(--curva),
                border-color var(--mov-toque) var(--curva);
}
.btn-tema:hover {
    background: rgba(255, 255, 255, .07);
    border-color: var(--border-strong);
    color: var(--text-strong);
}

/* =============================================================
   BARRA DO TOPO: uma fileira, uma altura
   -------------------------------------------------------------
   Tinha 36, 35, 38 e 38 de altura, e 10px, 999px, 10px de canto.
   É a mesma doença da faixa do chat, uma fileira acima.
============================================================= */

.topbar-actions > *,
.topbar-actions .btn,
.topbar-actions .sino-avisos {
    height: var(--h-controle);
    min-height: var(--h-controle);
    border-radius: 999px;
}
.topbar-actions { gap: var(--e2); align-items: center; }

/* =============================================================
   O CARTÃO DO MÊS
   -------------------------------------------------------------
   Feito para virar print. Por isso é o oposto do resto do painel:
   um número enorme e quase nada em volta — print com muita coisa
   ninguém manda.
============================================================= */

.cm-card { width: min(380px, 100%); padding: 18px; }

.cm-topo {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--e3);
}
.cm-topo b { font-size: var(--t-base); color: var(--text-strong); }

.cm-arte {
    position: relative;
    padding: 30px 24px 22px;
    border-radius: var(--r-lg);
    text-align: center;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(233, 192, 122, .16), transparent 65%),
        linear-gradient(180deg, #12121a, #0a0a10);
    border: 1px solid rgba(233, 192, 122, .2);
    overflow: hidden;
}

.cm-mes {
    font-size: var(--t-micro); letter-spacing: .12em;
    text-transform: uppercase; color: var(--accent);
}
.cm-valor {
    margin-top: 6px;
    font-size: var(--t-hero); font-weight: 700; color: #fff;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.cm-rotulo { font-size: var(--t-micro); color: rgba(255, 255, 255, .5); }

.cm-linha {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--e2); margin-top: var(--e5);
    padding-top: var(--e3);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.cm-linha b {
    display: block; font-size: var(--t-med); color: #fff;
    font-variant-numeric: tabular-nums;
}
.cm-linha span { font-size: var(--t-micro); color: rgba(255, 255, 255, .45); }

.cm-marca {
    margin-top: var(--e4);
    font-size: var(--t-micro); letter-spacing: .18em;
    text-transform: uppercase; color: rgba(233, 192, 122, .55);
}

.cm-dica {
    margin: var(--e3) 0 0; text-align: center;
    font-size: var(--t-micro); color: var(--text-faint);
}

/* Elemento de formulário sem regra nenhuma herda 13,33px do navegador —
   um tamanho que não é de ninguém e não está em escala alguma. Regra de
   elemento tem a menor força possível, então qualquer classe continua
   mandando. */
button, input, select, textarea, optgroup {
    font-size: var(--t-peq);
    font-family: inherit;
}