/* ============================================================
   CONQUISTEI — painel do responsável
   Mobile-first. O mesmo CSS serve o celular e o desktop.
   ============================================================ */

:root {
    --azul: #4A7DFF;
    --azul-escuro: #2F5BE0;
    --roxo: #7C5CFF;
    --ciano: #35C8F0;
    --verde: #12B76A;
    --verde-claro: #E6F8EF;
    --amarelo: #F79009;
    --amarelo-claro: #FEF3E2;
    --vermelho: #E5484D;
    --vermelho-claro: #FDECEC;

    --tinta: #1B1F3B;
    --tinta-media: #565C82;
    --tinta-clara: #8A90B0;
    --linha: #E6E8F4;
    --fundo: #F4F5FB;
    --papel: #FFFFFF;

    --raio: 16px;
    --raio-g: 22px;
    --sombra: 0 1px 2px rgba(27, 31, 59, .06), 0 8px 24px rgba(27, 31, 59, .06);
    --sombra-alta: 0 12px 40px rgba(27, 31, 59, .14);

    --nav-altura: 68px;
    --sidebar: 248px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--fundo);
    color: var(--tinta);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; display: block; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   Estrutura
   ------------------------------------------------------------ */

.casca {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.conteudo {
    flex: 1;
    padding: 16px 16px calc(var(--nav-altura) + 24px);
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
}

/* Topo mobile */
.topo {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(120deg, var(--azul) 0%, var(--roxo) 100%);
    color: #fff;
}

.topo .marca {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 17px;
    color: #fff;
    text-decoration: none;
    letter-spacing: -.02em;
}

.topo .marca:hover { text-decoration: none; }
.topo .marca .moeda { font-size: 22px; line-height: 1; }
.topo .espaco { flex: 1; }

.topo .perfil {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .92);
}

/* Cada atalho é uma "tecla": fundo próprio para separar visualmente
   um ícone do outro, e 40px de alvo para o polegar acertar. */
.topo .perfil a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: rgba(255, 255, 255, .2);
    font-size: 21px;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    flex: 0 0 auto;
}

.topo .perfil a:hover { background: rgba(255, 255, 255, .32); text-decoration: none; }
.topo .perfil a:active { transform: scale(.92); }

/* Em tela estreita o nome da marca some e fica só a moeda: é melhor
   perder a palavra "Conquistei" do que espremer os cinco atalhos. */
@media (max-width: 430px) {
    .topo { gap: 4px; padding-left: 12px; padding-right: 10px; }
    .topo .marca .rotulo { display: none; }
    .topo .marca .moeda { font-size: 26px; }
    .topo .perfil { gap: 2px; }
    .topo .perfil a { width: 38px; height: 38px; font-size: 20px; }
}

/* Navegação inferior (mobile) */
.nav-baixo {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--papel);
    border-top: 1px solid var(--linha);
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-baixo a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--tinta-clara);
    text-decoration: none;
    position: relative;
}

.nav-baixo a .ic { font-size: 20px; line-height: 1; }
.nav-baixo a.ativo { color: var(--azul); }

.nav-baixo .selo {
    position: absolute;
    top: 4px;
    right: calc(50% - 22px);
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--vermelho);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Barra lateral (desktop) */
.lateral { display: none; }

/* ------------------------------------------------------------
   Cabeçalho de página
   ------------------------------------------------------------ */

.pagina-topo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 18px;
}

.pagina-topo .texto { flex: 1; min-width: 180px; }
.pagina-topo h1 { margin-bottom: 2px; }
.pagina-topo .sub { color: var(--tinta-media); font-size: 13.5px; }

.voltar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tinta-media);
    margin-bottom: 8px;
}

.voltar:hover { color: var(--azul); text-decoration: none; }

/* ------------------------------------------------------------
   Cartões
   ------------------------------------------------------------ */

.cartao {
    background: var(--papel);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
    padding: 18px;
    margin-bottom: 16px;
}

.cartao > h2, .cartao > h3 { margin-top: 0; }
.cartao-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.cartao-titulo h2, .cartao-titulo h3 { margin: 0; }

.grade {
    display: grid;
    gap: 14px;
    margin-bottom: 16px;
}

.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Cartões de número */
.numeros {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.numero {
    background: var(--papel);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 14px 15px;
}

.numero .rotulo {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-clara);
    display: flex;
    align-items: center;
    gap: 5px;
}

.numero .valor {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.03em;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.numero .nota { font-size: 12px; color: var(--tinta-media); margin-top: 2px; }
.numero.destaque { background: linear-gradient(135deg, var(--azul) 0%, var(--roxo) 100%); color: #fff; }
.numero.destaque .rotulo, .numero.destaque .nota { color: rgba(255, 255, 255, .82); }
.numero.verde .valor { color: var(--verde); }
.numero.amarelo .valor { color: var(--amarelo); }

/* ------------------------------------------------------------
   Avatar
   ------------------------------------------------------------ */

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    overflow: hidden;
    background: var(--azul);
    letter-spacing: -.02em;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.g { width: 64px; height: 64px; font-size: 22px; }
.avatar.gg { width: 92px; height: 92px; font-size: 32px; }
.avatar.p { width: 34px; height: 34px; font-size: 12px; }

/* Cartão de criança */
.crianca-card {
    background: var(--papel);
    border-radius: var(--raio-g);
    box-shadow: var(--sombra);
    padding: 16px;
    display: block;
    color: inherit;
    border-top: 4px solid var(--cor, var(--azul));
}

.crianca-card:hover { text-decoration: none; box-shadow: var(--sombra-alta); }

.crianca-card .cabeca {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.crianca-card .nome { font-weight: 700; font-size: 16px; }
.crianca-card .meta-info { font-size: 12.5px; color: var(--tinta-clara); }

.crianca-card .linhas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    text-align: center;
    border-top: 1px solid var(--linha);
    padding-top: 12px;
}

.crianca-card .linhas div span {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tinta-clara);
    font-weight: 700;
}

.crianca-card .linhas div strong {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   Listas
   ------------------------------------------------------------ */

.lista { list-style: none; margin: 0; padding: 0; }

.lista li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--linha);
}

.lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista li:first-child { padding-top: 0; }

.lista .icone {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--fundo);
    flex: 0 0 auto;
}

.lista .corpo { flex: 1; min-width: 0; }
.lista .corpo .titulo { font-weight: 600; }
.lista .corpo .detalhe { font-size: 12.5px; color: var(--tinta-clara); }
.lista .direita { text-align: right; flex: 0 0 auto; }
.lista .direita .valor { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Tabela (vira lista no mobile) */
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -18px; padding: 0 18px; }

table.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 560px;
}

table.tabela th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-clara);
    padding: 8px 10px;
    border-bottom: 1px solid var(--linha);
    white-space: nowrap;
}

table.tabela td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--linha);
    vertical-align: middle;
}

table.tabela tr:last-child td { border-bottom: 0; }
table.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------
   Botões
   ------------------------------------------------------------ */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 18px;
    border-radius: 13px;
    border: 0;
    background: var(--azul);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s, transform .06s;
    min-height: 44px;
}

.botao:hover { filter: brightness(1.06); text-decoration: none; color: #fff; }
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: .45; cursor: not-allowed; }

.botao.grad { background: linear-gradient(120deg, var(--azul) 0%, var(--roxo) 100%); }
.botao.verde { background: var(--verde); }
.botao.vermelho { background: var(--vermelho); }
.botao.fantasma { background: transparent; color: var(--tinta-media); border: 1.5px solid var(--linha); }
.botao.fantasma:hover { color: var(--azul); border-color: var(--azul); filter: none; }
.botao.p { padding: 7px 12px; font-size: 13px; min-height: 36px; border-radius: 10px; }
.botao.bloco { width: 100%; }

.acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.acoes.fim { justify-content: flex-end; }

/* Nas telas com botão flutuante, o botão do cabeçalho vira duplicata
   no celular — some com ele e deixa o polegar resolver. */
@media (max-width: 899px) {
    .so-desktop { display: none; }
}

.botao-flutuante {
    position: fixed;
    right: 16px;
    bottom: calc(var(--nav-altura) + 16px + env(safe-area-inset-bottom));
    z-index: 35;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    box-shadow: var(--sombra-alta);
    font-size: 26px;
    padding: 0;
}

/* ------------------------------------------------------------
   Formulários
   ------------------------------------------------------------ */

.campo { margin-bottom: 16px; }

.campo > label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--tinta);
}

.campo .ajuda { font-size: 12.5px; color: var(--tinta-clara); margin-top: 5px; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=tel], select, textarea {
    width: 100%;
    padding: 12px 13px;
    border: 1.5px solid var(--linha);
    border-radius: 12px;
    font-size: 16px; /* 16px evita o zoom automático no iOS */
    font-family: inherit;
    color: var(--tinta);
    background: var(--papel);
    -webkit-appearance: none;
    appearance: none;
}

textarea { min-height: 84px; resize: vertical; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(74, 125, 255, .16);
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A90B0' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.entrada-prefixo { position: relative; }
.entrada-prefixo span {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tinta-clara);
    font-weight: 700;
    pointer-events: none;
}
.entrada-prefixo input { padding-left: 40px; }

/* Interruptor */
.chave {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--linha);
    cursor: pointer;
}

.chave:last-of-type { border-bottom: 0; }
.chave input { position: absolute; opacity: 0; width: 0; height: 0; }

.chave .pino {
    width: 46px;
    height: 27px;
    border-radius: 14px;
    background: #D3D7EA;
    position: relative;
    flex: 0 0 auto;
    transition: background .18s;
    margin-top: 1px;
}

.chave .pino::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #fff;
    transition: transform .18s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.chave input:checked + .pino { background: var(--verde); }
.chave input:checked + .pino::after { transform: translateX(19px); }
.chave .rotulo { flex: 1; }
.chave .rotulo strong { display: block; font-size: 14px; }
.chave .rotulo small { color: var(--tinta-clara); font-size: 12.5px; }

/* Seletor de cor */
.cores { display: flex; flex-wrap: wrap; gap: 10px; }
.cores label { cursor: pointer; }
.cores input { position: absolute; opacity: 0; }

.cores .bolha {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
    border: 3px solid transparent;
    box-shadow: 0 0 0 2px transparent;
    transition: box-shadow .15s;
}

.cores input:checked + .bolha { box-shadow: 0 0 0 3px var(--tinta); }

/* Seletor de ícone */
.icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.icones label { cursor: pointer; }
.icones input { position: absolute; opacity: 0; }

.icones .quadro {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    border-radius: 12px;
    background: var(--fundo);
    font-size: 22px;
    border: 2px solid transparent;
}

.icones input:checked + .quadro { border-color: var(--azul); background: #EEF3FF; }

/* Seleção múltipla em bloco (crianças no lançamento) */
.blocos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.blocos label { cursor: pointer; }
.blocos input { position: absolute; opacity: 0; }

.blocos .quadro {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border-radius: 14px;
    background: var(--papel);
    border: 2px solid var(--linha);
    transition: border-color .15s, background .15s;
}

.blocos input:checked + .quadro { border-color: var(--azul); background: #F3F7FF; }
.blocos .quadro span { font-weight: 600; font-size: 14px; }

/* ------------------------------------------------------------
   Selos e avisos
   ------------------------------------------------------------ */

.selo-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}

.selo-pendente { background: var(--amarelo-claro); color: #B54708; }
.selo-aprovada { background: var(--verde-claro); color: #027A48; }
.selo-recusada { background: var(--vermelho-claro); color: #B42318; }
.selo-pago { background: #EEF2FF; color: #3538CD; }
.selo-neutro { background: var(--fundo); color: var(--tinta-media); }

.avisos { margin-bottom: 14px; }

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 13px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    animation: entrar .25s ease-out;
}

.aviso-sucesso { background: var(--verde-claro); color: #027A48; }
.aviso-erro { background: var(--vermelho-claro); color: #B42318; }
.aviso-aviso { background: var(--amarelo-claro); color: #B54708; }

@keyframes entrar {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.caixa-info {
    background: #EEF3FF;
    border-radius: var(--raio);
    padding: 13px 15px;
    font-size: 13.5px;
    color: #2F4B9E;
    margin-bottom: 14px;
}

.caixa-info strong { display: block; margin-bottom: 2px; }

/* ------------------------------------------------------------
   Progresso (metas)
   ------------------------------------------------------------ */

.barra {
    height: 12px;
    border-radius: 8px;
    background: var(--linha);
    overflow: hidden;
}

.barra .preenche {
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--azul), var(--roxo));
    transition: width .5s ease-out;
    min-width: 4px;
}

.meta-card { border-top: 4px solid var(--cor, var(--azul)); }
.meta-card .alvo { display: flex; justify-content: space-between; font-size: 13px; margin: 8px 0 6px; }
.meta-card .alvo strong { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   Vazio
   ------------------------------------------------------------ */

.vazio {
    text-align: center;
    padding: 34px 18px;
    color: var(--tinta-media);
}

.vazio .emoji { font-size: 44px; margin-bottom: 10px; }
.vazio h3 { color: var(--tinta); }
.vazio p { font-size: 14px; max-width: 380px; margin: 0 auto 16px; }

/* ------------------------------------------------------------
   Autenticação
   ------------------------------------------------------------ */

.tela-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(150deg, #35C8F0 0%, #4A7DFF 48%, #7C5CFF 100%);
}

.caixa-auth {
    width: 100%;
    max-width: 420px;
}

.caixa-auth .marca {
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}

.caixa-auth .marca .moeda { font-size: 52px; line-height: 1; }
.caixa-auth .marca h1 { color: #fff; font-size: 30px; margin: 6px 0 2px; letter-spacing: -.03em; }
.caixa-auth .marca p { color: rgba(255, 255, 255, .88); font-size: 14px; margin: 0; }

.caixa-auth .painel {
    background: var(--papel);
    border-radius: 24px;
    padding: 24px 22px;
    box-shadow: 0 20px 60px rgba(20, 24, 60, .25);
}

.caixa-auth .rodape {
    text-align: center;
    margin-top: 18px;
    font-size: 14px;
    color: rgba(255, 255, 255, .9);
}

.caixa-auth .rodape a { color: #fff; font-weight: 700; text-decoration: underline; }

.selo-captcha {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    font-size: 11.5px;
    color: var(--tinta-clara);
    margin-top: 14px;
}

/* ------------------------------------------------------------
   Recibo
   ------------------------------------------------------------ */

.recibo { max-width: 560px; margin: 0 auto; }
.recibo .cabeca { text-align: center; padding-bottom: 16px; border-bottom: 2px dashed var(--linha); }
.recibo .total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 2px dashed var(--linha);
    font-size: 17px;
    font-weight: 800;
}
.recibo .total strong { font-size: 26px; color: var(--verde); letter-spacing: -.03em; }

/* ------------------------------------------------------------
   Desktop
   ------------------------------------------------------------ */

@media (min-width: 900px) {
    body { font-size: 15px; }

    .casca { flex-direction: row; }

    .topo { display: none; }
    .nav-baixo { display: none; }
    .botao-flutuante { display: none; }

    .lateral {
        display: flex;
        flex-direction: column;
        width: var(--sidebar);
        flex: 0 0 var(--sidebar);
        min-height: 100vh;
        position: sticky;
        top: 0;
        background: linear-gradient(170deg, var(--azul) 0%, var(--roxo) 100%);
        color: #fff;
        padding: 22px 14px;
    }

    .lateral .marca {
        display: flex;
        align-items: center;
        gap: 9px;
        color: #fff;
        font-weight: 800;
        font-size: 20px;
        letter-spacing: -.02em;
        padding: 0 10px 22px;
        text-decoration: none;
    }

    .lateral .marca .moeda { font-size: 27px; }

    .lateral nav { display: flex; flex-direction: column; gap: 3px; }

    .lateral nav a {
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 11px 12px;
        border-radius: 12px;
        color: rgba(255, 255, 255, .84);
        font-weight: 600;
        font-size: 14.5px;
        text-decoration: none;
        transition: background .15s, color .15s;
    }

    .lateral nav a .ic { font-size: 18px; width: 22px; text-align: center; }
    .lateral nav a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
    .lateral nav a.ativo { background: #fff; color: var(--azul-escuro); }

    .lateral nav a .selo {
        margin-left: auto;
        background: var(--vermelho);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        min-width: 20px;
        height: 20px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
    }

    /* Sair: último item do menu, com a mesma aparência dos links —
       precisa ser <button> porque o logout é POST com token CSRF. */
    .lateral nav .sair {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, .18);
    }

    .lateral nav .sair button {
        display: flex;
        align-items: center;
        gap: 11px;
        width: 100%;
        padding: 11px 12px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: rgba(255, 255, 255, .84);
        font-family: inherit;
        font-weight: 600;
        font-size: 14.5px;
        text-align: left;
        cursor: pointer;
        transition: background .15s, color .15s;
    }

    .lateral nav .sair button .ic { font-size: 18px; width: 22px; text-align: center; }
    .lateral nav .sair button:hover { background: rgba(255, 255, 255, .14); color: #fff; }

    /* Conta: logo abaixo do menu e clicável, leva ao perfil. */
    .lateral .conta {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .12);
        color: #fff;
        text-decoration: none;
        transition: background .15s;
    }

    .lateral .conta:hover { background: rgba(255, 255, 255, .22); text-decoration: none; }
    .lateral .conta.ativo { background: #fff; color: var(--azul-escuro); }

    .lateral .conta .inicial {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .24);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12.5px;
        font-weight: 800;
        flex: 0 0 auto;
    }

    .lateral .conta.ativo .inicial {
        background: var(--azul);
        color: #fff;
    }

    .lateral .conta .quem { flex: 1; min-width: 0; line-height: 1.25; }

    .lateral .conta .quem strong {
        display: block;
        font-size: 13.5px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lateral .conta .quem small {
        display: block;
        font-size: 11.5px;
        opacity: .78;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lateral .conta .seta { font-size: 14px; opacity: .6; flex: 0 0 auto; }

    .conteudo { padding: 28px 30px 40px; }

    .numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cartao { padding: 22px; }
    .tabela-rolagem { margin: 0; padding: 0; }
    h1 { font-size: 26px; }
}

@media (min-width: 1180px) {
    .grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------
   Impressão (recibo)
   ------------------------------------------------------------ */

@media print {
    .topo, .lateral, .nav-baixo, .acoes, .botao, .avisos { display: none !important; }
    body { background: #fff; }
    .conteudo { padding: 0; }
    .cartao { box-shadow: none; border: 1px solid var(--linha); }
}