/* ============================================================
   ADS — Design System
   Identidade visual extraída da marca Serraf.

   A paleta veio da própria logo: fundo quase preto azulado,
   azul elétrico como cor primária, roxo como acento e
   prata para o texto. O tema escuro é o padrão da marca;
   o claro existe para uso diurno e impressão.
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------ */
:root {
    /* Marca — cores tiradas da logo */
    --marca-azul:          #1E5AF5;
    --marca-azul-claro:    #4A8CFF;
    --marca-azul-escuro:   #0B3DD1;
    --marca-ciano:         #38BDF8;
    --marca-roxo:          #7C4DFF;
    --marca-roxo-claro:    #A78BFA;

    /* Gradiente da marca (o "DIGITAL & IA" da peça) */
    --marca-gradiente: linear-gradient(135deg, var(--marca-azul) 0%, var(--marca-roxo) 100%);
    --marca-gradiente-suave: linear-gradient(135deg, rgba(30,90,245,.14) 0%, rgba(124,77,255,.14) 100%);

    /* Semânticas */
    --sucesso:  #22C55E;
    --alerta:   #F59E0B;
    --erro:     #EF4444;
    --info:     var(--marca-ciano);

    /* Canais */
    --canal-google-ads: #4285F4;
    --canal-facebook:   #1877F2;
    --canal-instagram:  #E1306C;
    --canal-linkedin:   #0A66C2;
    --canal-whatsapp:   #25D366;

    /* Espaçamento — escala de 4px */
    --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
    --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 64px;

    /* Tipografia */
    --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
    --fonte-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --t-xs: 12px;  --t-sm: 14px;  --t-md: 16px;
    --t-lg: 20px;  --t-xl: 24px;  --t-2xl: 32px;  --t-3xl: 40px;

    /* Raio */
    --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;  --r-full: 999px;

    /* Transição */
    --transicao: 160ms cubic-bezier(.4, 0, .2, 1);

    /* Layout */
    --largura-menu: 248px;
    --altura-topo: 64px;
}

/* Tema escuro — padrão da marca */
:root,
:root[data-tema="escuro"] {
    --fundo:            #050814;
    --fundo-elevado:    #0A0F1F;
    --superficie:       #111A33;
    --superficie-alta:  #16203D;
    --borda:            #1E2A4A;
    --borda-forte:      #2A3A63;
    --texto:            #E8EAF2;
    --texto-medio:      #A8B2CC;
    --texto-fraco:      #6B769B;
    --sombra:           0 4px 16px rgba(0, 0, 0, .5);
    --sombra-alta:      0 12px 32px rgba(0, 0, 0, .6);
    --brilho-azul:      0 0 24px rgba(30, 90, 245, .35);
    color-scheme: dark;
}

:root[data-tema="claro"] {
    --fundo:            #F5F7FB;
    --fundo-elevado:    #FFFFFF;
    --superficie:       #FFFFFF;
    --superficie-alta:  #F0F3F9;
    --borda:            #DFE4EE;
    --borda-forte:      #C3CBDA;
    --texto:            #0E1424;
    --texto-medio:      #4A5468;
    --texto-fraco:      #78829A;
    --sombra:           0 2px 8px rgba(14, 20, 36, .08);
    --sombra-alta:      0 12px 28px rgba(14, 20, 36, .14);
    --brilho-azul:      0 0 20px rgba(30, 90, 245, .18);
    color-scheme: light;
}

/* Respeita a preferência do sistema quando o usuário não escolheu */
@media (prefers-color-scheme: light) {
    :root:not([data-tema]) {
        --fundo:            #F5F7FB;
        --fundo-elevado:    #FFFFFF;
        --superficie:       #FFFFFF;
        --superficie-alta:  #F0F3F9;
        --borda:            #DFE4EE;
        --borda-forte:      #C3CBDA;
        --texto:            #0E1424;
        --texto-medio:      #4A5468;
        --texto-fraco:      #78829A;
        --sombra:           0 2px 8px rgba(14, 20, 36, .08);
        --sombra-alta:      0 12px 28px rgba(14, 20, 36, .14);
        color-scheme: light;
    }
}

/* ------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--fonte);
    font-size: var(--t-md);
    line-height: 1.55;
    color: var(--texto);
    background: var(--fundo);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; }

a { color: var(--marca-azul-claro); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; }
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }

/* Foco visível — acessibilidade (RNF-42) */
:focus-visible {
    outline: 2px solid var(--marca-azul-claro);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

::selection { background: rgba(30, 90, 245, .35); }

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

/* ------------------------------------------------------------
   3. Utilitários
   ------------------------------------------------------------ */
.visualmente-oculto {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.texto-gradiente {
    background: var(--marca-gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.texto-fraco  { color: var(--texto-fraco); }
.texto-medio  { color: var(--texto-medio); }
.texto-sucesso{ color: var(--sucesso); }
.texto-erro   { color: var(--erro); }
.texto-alerta { color: var(--alerta); }

.mono { font-family: var(--fonte-mono); font-size: .92em; }

/* ------------------------------------------------------------
   4. Marca
   ------------------------------------------------------------ */
.marca {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    text-decoration: none;
}
.marca:hover { text-decoration: none; }

.marca img {
    height: 34px;
    width: auto;
    /* A logo tem fundo escuro embutido; a máscara evita o retângulo
       aparecer sobre superfícies claras. */
    border-radius: var(--r-sm);
}

.marca-nome {
    font-size: var(--t-lg);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--texto);
}

.marca-sub {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--texto-fraco);
    font-weight: 600;
}

/* ------------------------------------------------------------
   5. Botões
   ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.2;
    transition: var(--transicao);
    white-space: nowrap;
    text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primario {
    background: var(--marca-azul);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.btn-primario:hover:not(:disabled) {
    background: var(--marca-azul-escuro);
    box-shadow: var(--brilho-azul);
}

.btn-secundario {
    background: var(--superficie);
    color: var(--texto);
    border-color: var(--borda-forte);
}
.btn-secundario:hover:not(:disabled) {
    background: var(--superficie-alta);
    border-color: var(--marca-azul);
}

.btn-fantasma {
    background: transparent;
    color: var(--texto-medio);
}
.btn-fantasma:hover:not(:disabled) {
    background: var(--superficie);
    color: var(--texto);
}

.btn-perigo {
    background: var(--erro);
    color: #fff;
}
.btn-perigo:hover:not(:disabled) { filter: brightness(1.1); }

.btn-bloco { width: 100%; }
.btn-grande { padding: 13px 24px; font-size: var(--t-md); }
.btn-pequeno { padding: 6px 12px; font-size: var(--t-xs); }

/* ------------------------------------------------------------
   6. Formulários
   ------------------------------------------------------------ */
.campo { margin-bottom: var(--e-4); }

.campo label {
    display: block;
    margin-bottom: var(--e-2);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--texto-medio);
}

.campo-obrigatorio::after {
    content: " *";
    color: var(--erro);
}

.entrada {
    width: 100%;
    padding: 11px 14px;
    background: var(--fundo-elevado);
    border: 1px solid var(--borda);
    border-radius: var(--r-md);
    color: var(--texto);
    transition: var(--transicao);
}
.entrada::placeholder { color: var(--texto-fraco); }
.entrada:focus {
    outline: none;
    border-color: var(--marca-azul);
    box-shadow: 0 0 0 3px rgba(30, 90, 245, .18);
}
.entrada:disabled { opacity: .6; cursor: not-allowed; }
.entrada.invalida { border-color: var(--erro); }

textarea.entrada { min-height: 110px; resize: vertical; }

.campo-erro {
    display: block;
    margin-top: var(--e-1);
    font-size: var(--t-xs);
    color: var(--erro);
}

.campo-dica {
    display: block;
    margin-top: var(--e-1);
    font-size: var(--t-xs);
    color: var(--texto-fraco);
}

/* Grupo com botão dentro (ex: mostrar senha) */
.campo-com-acao { position: relative; }
.campo-com-acao .entrada { padding-right: 44px; }
.campo-com-acao button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 6px;
    color: var(--texto-fraco);
    border-radius: var(--r-sm);
}
.campo-com-acao button:hover { color: var(--texto); }

/* ------------------------------------------------------------
   7. Cartões e superfícies
   ------------------------------------------------------------ */
.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    padding: var(--e-5);
}

.cartao-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    margin-bottom: var(--e-4);
    padding-bottom: var(--e-3);
    border-bottom: 1px solid var(--borda);
}

.cartao-titulo {
    font-size: var(--t-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-medio);
}

/* ------------------------------------------------------------
   8. Avisos
   ------------------------------------------------------------ */
.aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-md);
    border: 1px solid;
    font-size: var(--t-sm);
    margin-bottom: var(--e-4);
}
.aviso-sucesso { background: rgba(34,197,94,.10);  border-color: rgba(34,197,94,.35);  color: var(--sucesso); }
.aviso-erro    { background: rgba(239,68,68,.10);  border-color: rgba(239,68,68,.35);  color: var(--erro); }
.aviso-alerta  { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.35); color: var(--alerta); }
.aviso-info    { background: rgba(56,189,248,.10); border-color: rgba(56,189,248,.35); color: var(--info); }

/* ------------------------------------------------------------
   9. Etiquetas
   ------------------------------------------------------------ */
.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: 3px 10px;
    border-radius: var(--r-full);
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.6;
}
.etiqueta-neutra  { background: var(--superficie-alta); color: var(--texto-medio); }
.etiqueta-azul    { background: rgba(30,90,245,.16);  color: var(--marca-azul-claro); }
.etiqueta-roxa    { background: rgba(124,77,255,.16); color: var(--marca-roxo-claro); }
.etiqueta-sucesso { background: rgba(34,197,94,.16);  color: var(--sucesso); }
.etiqueta-erro    { background: rgba(239,68,68,.16);  color: var(--erro); }
.etiqueta-alerta  { background: rgba(245,158,11,.16); color: var(--alerta); }

/* ------------------------------------------------------------
   10. Tabelas
   ------------------------------------------------------------ */
.tabela-rolagem { overflow-x: auto; }

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
}
.tabela th {
    text-align: left;
    padding: var(--e-3) var(--e-4);
    font-size: var(--t-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-fraco);
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}
.tabela td {
    padding: var(--e-3) var(--e-4);
    border-bottom: 1px solid var(--borda);
}
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--superficie-alta); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   11. Estados de tela
   ------------------------------------------------------------ */
.estado-vazio {
    text-align: center;
    padding: var(--e-8) var(--e-4);
    color: var(--texto-fraco);
}
.estado-vazio h3 { color: var(--texto-medio); margin-bottom: var(--e-2); }

.esqueleto {
    background: linear-gradient(90deg,
        var(--superficie) 25%,
        var(--superficie-alta) 50%,
        var(--superficie) 75%);
    background-size: 200% 100%;
    animation: brilho 1.4s infinite;
    border-radius: var(--r-sm);
}
@keyframes brilho {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.girando {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.25);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   12. Layout autenticado
   ------------------------------------------------------------ */
.app { display: flex; min-height: 100vh; }

.menu-lateral {
    width: var(--largura-menu);
    flex-shrink: 0;
    background: var(--fundo-elevado);
    border-right: 1px solid var(--borda);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.menu-topo {
    padding: var(--e-4);
    border-bottom: 1px solid var(--borda);
}

.menu-navegacao {
    flex: 1;
    overflow-y: auto;
    padding: var(--e-3) var(--e-2);
}

.menu-secao {
    padding: var(--e-4) var(--e-3) var(--e-2);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--texto-fraco);
}

.menu-item {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: 10px var(--e-3);
    border-radius: var(--r-md);
    color: var(--texto-medio);
    font-size: var(--t-sm);
    font-weight: 500;
    transition: var(--transicao);
    text-decoration: none;
}
.menu-item:hover {
    background: var(--superficie);
    color: var(--texto);
    text-decoration: none;
}
.menu-item.ativo {
    background: var(--marca-gradiente-suave);
    color: var(--marca-azul-claro);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--marca-azul);
}
.menu-item svg { width: 18px; height: 18px; flex-shrink: 0; }

.menu-rodape {
    padding: var(--e-3);
    border-top: 1px solid var(--borda);
}

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
    height: var(--altura-topo);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    padding: 0 var(--e-5);
    background: var(--fundo-elevado);
    border-bottom: 1px solid var(--borda);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topo-titulo { font-size: var(--t-lg); font-weight: 700; }

.topo-acoes { display: flex; align-items: center; gap: var(--e-2); }

.pagina { flex: 1; padding: var(--e-5); }
.pagina-largura { max-width: 1400px; margin: 0 auto; }

.botao-menu { display: none; }

/* ------------------------------------------------------------
   13. Tela de autenticação
   ------------------------------------------------------------ */
.auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--e-5);
    position: relative;
    overflow: hidden;
}

/* Brilho de fundo que remete à peça da marca */
.auth::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% -10%, rgba(30,90,245,.22), transparent 60%),
        radial-gradient(ellipse 50% 40% at 85% 100%, rgba(124,77,255,.15), transparent 60%);
    pointer-events: none;
}

.auth-caixa {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    padding: var(--e-6);
    box-shadow: var(--sombra-alta);
}

.auth-marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e-3);
    margin-bottom: var(--e-6);
}
.auth-marca img { height: 46px; width: auto; border-radius: var(--r-sm); }

.auth-titulo { text-align: center; font-size: var(--t-xl); margin-bottom: var(--e-1); }
.auth-sub { text-align: center; color: var(--texto-fraco); font-size: var(--t-sm); margin-bottom: var(--e-5); }

.auth-rodape {
    margin-top: var(--e-5);
    padding-top: var(--e-4);
    border-top: 1px solid var(--borda);
    text-align: center;
    font-size: var(--t-sm);
    color: var(--texto-fraco);
}

/* ------------------------------------------------------------
   14. Grade e KPIs
   ------------------------------------------------------------ */
.grade { display: grid; gap: var(--e-4); }
.grade-2 { grid-template-columns: repeat(2, 1fr); }
.grade-3 { grid-template-columns: repeat(3, 1fr); }
.grade-4 { grid-template-columns: repeat(4, 1fr); }
.grade-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.kpi {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    padding: var(--e-4);
    transition: var(--transicao);
}
.kpi:hover { border-color: var(--marca-azul); box-shadow: var(--brilho-azul); }

.kpi-rotulo {
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-fraco);
    font-weight: 600;
    margin-bottom: var(--e-2);
}
.kpi-valor {
    font-size: var(--t-2xl);
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.kpi-variacao { margin-top: var(--e-2); font-size: var(--t-xs); font-weight: 600; }
.kpi-variacao.sobe { color: var(--sucesso); }
.kpi-variacao.desce { color: var(--erro); }

/* ------------------------------------------------------------
   15. Inbox de atendimento
   ------------------------------------------------------------ */
.inbox {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--e-4);
    /* Altura fixa: a lista e a conversa rolam por dentro, não a
       página inteira — o campo de resposta fica sempre visível. */
    height: calc(100vh - var(--altura-topo) - var(--e-7));
    min-height: 460px;
}

.inbox-coluna {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.inbox-filtros {
    display: flex;
    gap: var(--e-1);
    padding: var(--e-3);
    border-bottom: 1px solid var(--borda);
    flex-wrap: wrap;
}
.inbox-filtro {
    padding: 4px 10px;
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--texto-medio);
    background: transparent;
    border: 1px solid var(--borda);
    border-radius: var(--r-full);
    cursor: pointer;
    text-decoration: none;
    transition: var(--transicao);
}
.inbox-filtro:hover { border-color: var(--borda-forte); color: var(--texto); }
.inbox-filtro.ativo {
    color: #fff;
    background: var(--marca-azul);
    border-color: var(--marca-azul);
}

.inbox-lista { overflow-y: auto; flex: 1; min-height: 0; }

.inbox-conversa {
    display: block;
    padding: var(--e-3) var(--e-4);
    border-bottom: 1px solid var(--borda);
    text-decoration: none;
    color: inherit;
    border-left: 3px solid transparent;
    transition: var(--transicao);
}
.inbox-conversa:hover { background: var(--superficie-alta); }
.inbox-conversa.ativa {
    background: var(--superficie-alta);
    border-left-color: var(--marca-azul);
}

.inbox-conversa-topo {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin-bottom: 2px;
}
.inbox-conversa-nome {
    font-weight: 600;
    font-size: var(--t-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.inbox-conversa-previa {
    font-size: var(--t-xs);
    color: var(--texto-fraco);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inbox-ponto {
    width: 8px; height: 8px;
    border-radius: var(--r-full);
    flex-shrink: 0;
}
.inbox-nao-lidas {
    min-width: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: var(--marca-azul);
    border-radius: var(--r-full);
}

.inbox-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border-bottom: 1px solid var(--borda);
    flex-wrap: wrap;
}

.inbox-thread {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--e-4);
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    background: var(--fundo-elevado);
}

.balao { max-width: 78%; }
.balao-corpo {
    padding: var(--e-3);
    border-radius: var(--r-md);
    font-size: var(--t-sm);
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.balao-meta {
    margin-top: 3px;
    font-size: 11px;
    color: var(--texto-fraco);
}

.balao-entrada { align-self: flex-start; }
.balao-entrada .balao-corpo {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-bottom-left-radius: var(--r-sm);
}

.balao-saida { align-self: flex-end; }
.balao-saida .balao-corpo {
    background: var(--marca-azul);
    color: #fff;
    border-bottom-right-radius: var(--r-sm);
}
.balao-saida .balao-meta { text-align: right; }

.balao-bot .balao-corpo {
    background: linear-gradient(135deg, var(--marca-roxo) 0%, var(--marca-azul) 100%);
}

.inbox-responder {
    padding: var(--e-3);
    border-top: 1px solid var(--borda);
    display: flex;
    gap: var(--e-2);
    align-items: flex-end;
}
.inbox-responder textarea {
    flex: 1;
    resize: none;
    min-height: 44px;
    max-height: 160px;
}

/* ------------------------------------------------------------
   16. Responsivo
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .grade-4 { grid-template-columns: repeat(2, 1fr); }
    .grade-3 { grid-template-columns: repeat(2, 1fr); }

    /* Duas colunas não cabem: a lista vira uma faixa rolável no topo
       e a conversa ocupa o resto. */
    .inbox { grid-template-columns: 1fr; height: auto; }
    .inbox-lista { max-height: 260px; }
    .inbox-thread { max-height: 55vh; }
    .balao { max-width: 92%; }

    .botao-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px; height: 38px;
        background: transparent;
        border: 1px solid var(--borda);
        border-radius: var(--r-md);
        color: var(--texto);
    }

    .menu-lateral {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform var(--transicao);
        box-shadow: var(--sombra-alta);
    }
    .menu-lateral.aberto { transform: translateX(0); }

    .menu-fundo {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.6);
        z-index: 50;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transicao);
    }
    .menu-fundo.visivel { opacity: 1; pointer-events: auto; }
}

@media (max-width: 768px) {
    .pagina { padding: var(--e-4); }
    .topo { padding: 0 var(--e-4); }
    .grade-4, .grade-3, .grade-2 { grid-template-columns: 1fr; }
    .kpi-valor { font-size: var(--t-xl); }
    h1 { font-size: var(--t-xl); }
}

@media (max-width: 480px) {
    .auth-caixa { padding: var(--e-5) var(--e-4); }
    .topo-titulo { font-size: var(--t-md); }
}

/* ------------------------------------------------------------
   17. Impressão
   ------------------------------------------------------------ */
@media print {
    .menu-lateral, .topo, .btn, .menu-fundo { display: none !important; }
    body { background: #fff; color: #000; }
    .cartao { border: 1px solid #ccc; break-inside: avoid; }
}