/* ==========================================================================
   Área do Cliente — Coop na Mão
   CSS próprio, sem framework: o deploy é FTP manual e não roda build de assets.
   ========================================================================== */

:root {
    --verde: #54bd8c;
    --verde-escuro: #3d9a70;
    --verde-claro: #eaf7f1;

    --tinta: #1f2933;
    --tinta-media: #52606d;
    --tinta-fraca: #7b8794;

    --borda: #e4e7eb;
    --fundo: #f5f7fa;
    --papel: #ffffff;

    --ok: #2f9e63;
    --ok-fundo: #e6f6ed;
    --alerta: #b7791f;
    --alerta-fundo: #fdf5e4;
    --erro: #c53030;
    --erro-fundo: #fdecec;
    --info: #2b6cb0;
    --info-fundo: #e8f1fb;
    --neutro: #667080;
    --neutro-fundo: #eef0f3;

    --raio: 10px;
    --sombra: 0 1px 2px rgba(31, 41, 51, .06), 0 4px 12px rgba(31, 41, 51, .04);
}

* { box-sizing: border-box; }

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

a { color: var(--verde-escuro); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

/* ---------- Layout ---------- */

.topo {
    background: var(--papel);
    border-bottom: 1px solid var(--borda);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topo-interno {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 60px;
    flex-wrap: wrap;
}

.marca {
    font-weight: 700;
    font-size: 16px;
    color: var(--tinta);
    display: flex;
    align-items: center;
    gap: 9px;
}
.marca:hover { text-decoration: none; }

.marca-icone {
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--verde);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 15px;
    font-weight: 700;
}

.menu {
    display: flex;
    gap: 2px;
    margin-left: auto;
    flex-wrap: wrap;
}

.menu a {
    padding: 8px 13px;
    border-radius: 8px;
    color: var(--tinta-media);
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
}
.menu a:hover { background: var(--fundo); text-decoration: none; color: var(--tinta); }
.menu a.is-ativo { background: var(--verde-claro); color: var(--verde-escuro); font-weight: 600; }

.conta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 14px;
    border-left: 1px solid var(--borda);
}

.conta-nome { font-size: 13px; color: var(--tinta-media); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.principal {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px 20px 56px;
}

.cabecalho-pagina {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.cabecalho-pagina p { margin: 4px 0 0; color: var(--tinta-fraca); font-size: 14px; }

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

.cartao {
    background: var(--papel);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    margin-bottom: 20px;
    overflow: hidden;
}

.cartao-topo {
    padding: 14px 18px;
    border-bottom: 1px solid var(--borda);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cartao-corpo { padding: 18px; }

/* ---------- Indicadores ---------- */

.indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.indicador {
    background: var(--papel);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 16px;
    box-shadow: var(--sombra);
}

.indicador-rotulo {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-fraca);
    font-weight: 600;
    margin-bottom: 6px;
}

.indicador-valor { font-size: 25px; font-weight: 700; line-height: 1.1; }
.indicador-nota { font-size: 12px; color: var(--tinta-fraca); margin-top: 4px; }

.indicador.destaque-ok .indicador-valor { color: var(--ok); }
.indicador.destaque-alerta .indicador-valor { color: var(--alerta); }
.indicador.destaque-erro .indicador-valor { color: var(--erro); }

/* ---------- Tabelas ---------- */

.tabela-rolagem { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

thead th {
    text-align: left;
    padding: 10px 14px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-fraca);
    background: var(--fundo);
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
    font-weight: 600;
}

tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--borda);
    vertical-align: middle;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfc; }

td.numero, th.numero { text-align: right; white-space: nowrap; }

.forte { font-weight: 600; }
.fraco { color: var(--tinta-fraca); font-size: 13px; }

/* ---------- Selos ---------- */

.selo {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.selo.is-ok { background: var(--ok-fundo); color: var(--ok); }
.selo.is-alerta { background: var(--alerta-fundo); color: var(--alerta); }
.selo.is-erro { background: var(--erro-fundo); color: var(--erro); }
.selo.is-info { background: var(--info-fundo); color: var(--info); }
.selo.is-neutro { background: var(--neutro-fundo); color: var(--neutro); }

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

.filtros {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}

/* Bloco de filtros recolhível. No desktop fica sempre aberto e o resumo some;
   no celular ele começa fechado (o JS do layout tira o `open`), para a lista
   aparecer sem precisar rolar meia tela. */
.bloco-filtros { width: 100%; }
.bloco-filtros > summary { display: none; }

.campo { display: flex; flex-direction: column; gap: 5px; }
.campo label { font-size: 12.5px; font-weight: 600; color: var(--tinta-media); }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=search], select {
    font: inherit;
    font-size: 14px;
    padding: 9px 11px;
    border: 1px solid var(--borda);
    border-radius: 8px;
    background: var(--papel);
    color: var(--tinta);
    min-width: 0;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(84, 189, 140, .18);
}

.botao {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--verde);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}
.botao:hover { background: var(--verde-escuro); text-decoration: none; color: #fff; }

.botao-secundario {
    background: var(--papel);
    color: var(--tinta-media);
    border-color: var(--borda);
}
.botao-secundario:hover { background: var(--fundo); color: var(--tinta); }

.botao-link {
    background: none;
    border: none;
    color: var(--tinta-media);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
}
.botao-link:hover { background: var(--fundo); color: var(--erro); }

/* ---------- Avisos ---------- */

.aviso {
    padding: 12px 15px;
    border-radius: var(--raio);
    margin-bottom: 18px;
    font-size: 14px;
    border: 1px solid transparent;
}

.aviso.is-ok { background: var(--ok-fundo); color: #1e6b45; border-color: #bfe6cf; }
.aviso.is-erro { background: var(--erro-fundo); color: #8f2222; border-color: #f5c6c6; }
.aviso.is-info { background: var(--info-fundo); color: #1f4f80; border-color: #c5dcf3; }

.aviso ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- Estado vazio ---------- */

.vazio {
    text-align: center;
    padding: 44px 20px;
    color: var(--tinta-fraca);
}
.vazio-icone { font-size: 30px; margin-bottom: 10px; opacity: .55; }
.vazio p { margin: 0; font-size: 14px; }
.vazio strong { display: block; color: var(--tinta-media); margin-bottom: 4px; font-size: 15px; }

/* ---------- Login (split-screen futurista, no padrão do painel de gestão) ---------- */

.auth { display: flex; min-height: 100vh; }

/* Painel de marca */
.auth-marca-painel {
    flex: 1 1 53%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 64px;
    color: #eafff6;
    background:
        radial-gradient(900px 620px at 8% 8%, rgba(84, 189, 140, .42), transparent 62%),
        radial-gradient(760px 560px at 96% 92%, rgba(76, 201, 240, .26), transparent 60%),
        linear-gradient(155deg, #04120d 0%, #06201a 48%, #041a15 100%);
}

/* Camadas decorativas: malha, auroras e varredura */
.malha {
    position: absolute;
    inset: -2px;
    pointer-events: none;
    opacity: .5;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(700px 700px at 25% 40%, #000 20%, transparent 78%);
            mask-image: radial-gradient(700px 700px at 25% 40%, #000 20%, transparent 78%);
}

.aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    will-change: transform;
}
.aurora.a1 {
    width: 460px; height: 460px; left: -140px; top: -120px;
    background: rgba(84, 189, 140, .62);
    animation: aurora-1 16s ease-in-out infinite;
}
.aurora.a2 {
    width: 380px; height: 380px; right: 4%; bottom: -120px;
    background: rgba(76, 201, 240, .40);
    animation: aurora-2 20s ease-in-out infinite;
}
@keyframes aurora-1 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(60px, 50px, 0) scale(1.12); }
}
@keyframes aurora-2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
    50%      { transform: translate3d(-70px, -40px, 0) scale(.92); }
}

.varredura {
    position: absolute;
    left: 0; right: 0;
    height: 220px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(22, 242, 179, .10), transparent);
    animation: varredura 9s linear infinite;
}
@keyframes varredura {
    0%   { transform: translateY(-260px); }
    100% { transform: translateY(105vh); }
}

.marca-conteudo { position: relative; z-index: 2; max-width: 500px; }

.marca-selo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(34, 211, 168, .45);
    box-shadow: 0 8px 28px rgba(84, 189, 140, .22);
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
    color: #d7fff0;
    margin-bottom: 26px;
}

.ponto {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22d3a8;
    animation: pulsa 2.2s ease-out infinite;
}
@keyframes pulsa {
    0%   { box-shadow: 0 0 0 0 rgba(34, 211, 168, .55); }
    70%  { box-shadow: 0 0 0 10px rgba(34, 211, 168, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 211, 168, 0); }
}

.auth-marca-painel h1 {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 14px;
    letter-spacing: -.03em;
    color: #fff;
}
.auth-marca-painel h1 .brilho {
    background: linear-gradient(100deg, #22d3a8, #4cc9f0 70%, #fff);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}

.auth-marca-painel .chamada {
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 30px;
    color: rgba(226, 255, 244, .78);
    font-weight: 400;
    max-width: 440px;
}

/* Destaques em cartões de vidro */
.destaques { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.destaques li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 13px 15px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .10);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.destaques li:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 211, 168, .5);
    background: rgba(255, 255, 255, .08);
}

.destaque-icone {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .10);
    display: grid;
    place-items: center;
}
.destaque-icone svg { width: 19px; height: 19px; stroke: #22d3a8; fill: none; stroke-width: 2; }

.destaque-texto strong { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 3px; color: #fff; }
.destaque-texto span { font-size: 13.5px; color: rgba(226, 255, 244, .72); font-weight: 400; line-height: 1.45; }

/* Cartão flutuante: prévia do acompanhamento */
.previa {
    position: absolute;
    z-index: 1;
    right: -66px;
    top: 50%;
    width: 292px;
    margin-top: -166px;
    border-radius: 20px;
    padding: 18px;
    color: #eafff6;
    background: linear-gradient(165deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 34px 70px rgba(0, 0, 0, .5);
    backdrop-filter: blur(8px);
    transform: rotate(-4deg);
    animation: flutua 7s ease-in-out infinite;
}
@keyframes flutua {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50%      { transform: rotate(-4deg) translateY(-14px); }
}
.previa-rotulo {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(226, 255, 244, .6);
}
.previa-titulo { font-size: 16px; font-weight: 800; color: #fff; margin: 4px 0 12px; letter-spacing: -.02em; }
.previa-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 12.5px;
}
.previa-bolinha {
    width: 8px; height: 8px; border-radius: 50%;
    background: #22d3a8;
    flex: 0 0 auto;
}
.previa-bolinha.espera { background: rgba(255, 255, 255, .28); }
.previa-linha span { color: rgba(226, 255, 244, .8); }
.previa-linha b { color: #fff; font-weight: 700; margin-left: auto; font-size: 12px; }
.previa-ia {
    margin-top: 12px;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 11.5px;
    line-height: 1.45;
    background: rgba(255, 255, 255, .05);
    border: 1px dashed rgba(34, 211, 168, .45);
    color: rgba(226, 255, 244, .85);
}
.previa-ia b { color: #22d3a8; }

.marca-rodape {
    position: relative;
    z-index: 2;
    margin-top: 34px;
    font-size: 12px;
    color: rgba(226, 255, 244, .5);
}

/* Painel do formulário */
.auth-form {
    flex: 1 1 47%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 32px;
    background: var(--fundo);
    position: relative;
}
.auth-form::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(620px 380px at 78% -8%, rgba(84, 189, 140, .12), transparent 70%);
}

.caixa-auth {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    background: var(--papel);
    border: 1px solid var(--borda);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(31, 41, 51, .10);
    padding: 34px 30px;
}

.caixa-auth h1 { font-size: 21px; margin-bottom: 5px; text-align: center; }
.caixa-auth .sub { color: var(--tinta-fraca); font-size: 14px; margin: 0 auto 22px; text-align: center; max-width: 320px; }

.auth-logo {
    display: block;
    width: 84px;
    height: auto;
    margin: 0 auto 14px;
    border-radius: 12px;
}

.auth-conexao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--verde-escuro);
    margin-bottom: 16px;
}
.auth-conexao .ponto { background: var(--verde); }

.campo-bloco { margin-bottom: 15px; }
.campo-bloco label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--tinta-media); }
.campo-bloco input { width: 100%; }

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

.botao-largo {
    position: relative;
    overflow: hidden;
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: 15px;
    border: 0;
    background: linear-gradient(100deg, #3d9a70 0%, var(--verde) 52%, #4cc9f0 190%);
    box-shadow: 0 10px 24px rgba(84, 189, 140, .38);
}
.botao-largo::after {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
    transform: skewX(-18deg);
    animation: brilho-botao 4.5s ease-in-out infinite;
}
@keyframes brilho-botao {
    0%, 62%   { left: -120%; }
    88%, 100% { left: 140%; }
}

.auth-rodape { margin-top: 18px; text-align: center; font-size: 13.5px; }

.lembrar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--tinta-media);
    margin-bottom: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .aurora, .varredura, .previa, .ponto, .botao-largo::after { animation: none !important; }
}

/* ---------- Ficha ---------- */

.dados {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

.dado-rotulo {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tinta-fraca);
    font-weight: 600;
    margin-bottom: 3px;
}
.dado-valor { font-size: 14.5px; }

.sinais {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.sinal {
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: 8px;
    padding: 7px 11px;
    font-size: 13px;
}
.sinal b { display: block; font-size: 11px; color: var(--tinta-fraca); font-weight: 600; text-transform: uppercase; }

.texto-clinico {
    white-space: pre-wrap;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--tinta);
    margin: 0;
}

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

.linha-tempo li {
    padding: 12px 0 12px 20px;
    border-left: 2px solid var(--borda);
    position: relative;
}
.linha-tempo li::before {
    content: "";
    position: absolute;
    left: -6px; top: 17px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--verde);
    border: 2px solid var(--papel);
}
.linha-tempo li:last-child { border-left-color: transparent; }

/* ---------- Paginação ---------- */

.paginacao {
    display: flex;
    justify-content: center;
    padding: 16px;
    gap: 4px;
    flex-wrap: wrap;
}
.paginacao a, .paginacao span {
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    border: 1px solid var(--borda);
    background: var(--papel);
    color: var(--tinta-media);
}
.paginacao a:hover { background: var(--fundo); text-decoration: none; }
.paginacao .is-atual { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }
.paginacao .is-inativo { opacity: .45; }

.rodape {
    text-align: center;
    padding: 22px;
    color: var(--tinta-fraca);
    font-size: 12.5px;
}

/* ---------- Responsivo ---------- */

@media (max-width: 1560px) {
    .auth-marca-painel { padding: 56px 52px; }
    .auth-marca-painel h1 { font-size: 36px; }
    .auth-marca-painel .chamada { font-size: 15px; }
    .marca-conteudo { max-width: 424px; }
    .previa { right: -96px; width: 280px; margin-top: -160px; }
}

@media (max-width: 1240px) {
    .auth-marca-painel { padding: 52px 42px; }
    .auth-marca-painel h1 { font-size: 32px; }
    .marca-conteudo { max-width: 372px; }
    .previa { right: -126px; width: 266px; opacity: .9; }
}

@media (max-width: 1080px) {
    .previa { display: none; }
}

@media (max-width: 980px) {
    /* No celular a prioridade é logar: o formulário vem primeiro e a marca
       fecha a página, centralizada. */
    .auth { flex-direction: column-reverse; }

    .auth-form {
        flex: none;
        padding: 30px 18px 26px;
        margin-top: 0;
        background: var(--fundo);
    }
    .caixa-auth { max-width: 460px; margin: 0 auto; }

    .auth-marca-painel {
        flex: 1 0 auto;
        min-height: auto;
        padding: 42px 22px 34px;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .marca-conteudo { max-width: 620px; width: 100%; margin: 0 auto; }
    .auth-marca-painel h1 { font-size: 27px; }
    .auth-marca-painel .chamada { font-size: 14.5px; margin: 0 auto 24px; max-width: 460px; }

    .destaques {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 12px;
        max-width: 720px;
        margin: 0 auto;
    }
    .destaques li { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 16px 14px; }

    .marca-rodape { margin-top: 26px; text-align: center; }
}

@media (max-width: 620px) {
    .auth-marca-painel { padding: 34px 18px 30px; }
    .marca-selo { margin-bottom: 18px; padding: 7px 13px; font-size: 10.5px; }
    .auth-marca-painel h1 { font-size: 24px; line-height: 1.2; }
    .auth-marca-painel .chamada { font-size: 14px; margin-bottom: 20px; }
    .destaques { grid-template-columns: 1fr; gap: 10px; max-width: 400px; }
    .destaques li { flex-direction: row; align-items: center; text-align: left; gap: 12px; padding: 12px 13px; }
    .destaque-icone { width: 34px; height: 34px; border-radius: 10px; }
    .destaque-icone svg { width: 17px; height: 17px; }
    .destaque-texto strong { font-size: 13.5px; }
    .destaque-texto span { font-size: 12.5px; }
    .marca-rodape { margin-top: 22px; font-size: 11.5px; }
    .auth-logo { width: 72px; margin-bottom: 12px; }
    .caixa-auth { padding: 26px 20px; }
}

@media (max-width: 820px) {
    /* Cabeçalho compacto: marca e "sair" na 1ª linha, menu rolável na 2ª. */
    .topo-interno { min-height: auto; padding: 10px 14px; gap: 10px 12px; }
    .marca { font-size: 15px; }
    .conta { margin-left: auto; padding-left: 0; border-left: 0; gap: 6px; }
    .conta-nome { max-width: 120px; font-size: 12.5px; }

    .menu {
        width: 100%;
        margin-left: 0;
        order: 3;
        flex-wrap: nowrap;          /* uma linha só */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .menu::-webkit-scrollbar { display: none; }
    .menu a { padding: 7px 11px; font-size: 13.5px; }

    .principal { padding: 18px 14px 44px; }
    .indicadores { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 11px; }
    .indicador { padding: 13px; }
    .indicador-valor { font-size: 21px; }

    .filtros { flex-direction: column; align-items: stretch; }
    .filtros .campo, .filtros select, .filtros input, .filtros .botao { width: 100%; }
    .filtros .botao { text-align: center; }

    .cabecalho-pagina { margin-bottom: 16px; }
    h1 { font-size: 19px; }

    .bloco-filtros > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        list-style: none;
        font-size: 14px;
        font-weight: 600;
        color: var(--tinta-media);
        padding: 2px 0;
    }
    .bloco-filtros > summary::-webkit-details-marker { display: none; }
    .bloco-filtros > summary::after {
        content: "▾";
        font-size: 12px;
        color: var(--tinta-fraca);
        transition: transform .15s ease;
    }
    .bloco-filtros[open] > summary::after { transform: rotate(180deg); }
    .bloco-filtros[open] > summary { margin-bottom: 14px; }
}

/* --------------------------------------------------------------------------
   Tabelas viram cartões no celular.
   Ler tabela de plantão rolando o dedo para o lado não funciona; cada linha
   passa a ser um bloco, e o rótulo da coluna vem do atributo data-rotulo.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
    table.cartoes-no-mobile,
    table.cartoes-no-mobile tbody,
    table.cartoes-no-mobile tr,
    table.cartoes-no-mobile td { display: block; width: 100%; }

    table.cartoes-no-mobile thead { display: none; }

    table.cartoes-no-mobile tr {
        border-bottom: 1px solid var(--borda);
        padding: 12px 14px;
    }
    table.cartoes-no-mobile tr:last-child { border-bottom: 0; }

    table.cartoes-no-mobile td {
        border: 0;
        padding: 3px 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        text-align: right;
    }

    table.cartoes-no-mobile td::before {
        content: attr(data-rotulo);
        flex: 0 0 auto;
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--tinta-fraca);
        font-weight: 600;
        text-align: left;
    }

    /* Primeira célula é o título do cartão: sem rótulo, ocupa a linha toda. */
    table.cartoes-no-mobile td.titulo-cartao {
        display: block;
        text-align: left;
        font-size: 15px;
        margin-bottom: 5px;
    }
    table.cartoes-no-mobile td.titulo-cartao::before { content: none; }

    table.cartoes-no-mobile td.numero { text-align: right; }

    /* Célula vazia não vira linha órfã só com o rótulo. */
    table.cartoes-no-mobile td:empty { display: none; }

    .tabela-rolagem { overflow-x: visible; }
}

@media print {
    .topo, .filtros, .paginacao, .rodape, .botao, .nao-imprime { display: none !important; }
    body { background: #fff; }
    .cartao { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}