@layer tokens, base, layout, componentes, utilitarios, impressao;
/* TOKENS: única fonte de cores, tipografia, espaços e tamanhos do sistema.
   Regra: nenhum outro arquivo escreve cor, tamanho de fonte ou espaço "solto"; sempre var(--token).
   Guia completo: docs/guia-visual.md  |  Exemplos vivos: /#estilo */
@layer tokens {
  :root {
    /* Cores de marca (definidas pelo Rodrigo) */
    --cor-menu: #140c14;              /* preto arroxeado: menu lateral e toda área escura */
    --cor-menu-texto: #d9d4d9;        /* cinza claro do texto sobre áreas escuras */
    --cor-fundo: #f4f5f7;             /* fundo do site */
    --cor-superficie: #ffffff;        /* cartões, tabelas, janelas */
    --cor-primaria: #1d4ed8;          /* azul de destaque */
    --cor-sobre-escuro: #ffffff;      /* texto/ícone sobre azul, vermelho ou áreas escuras */

    /* Derivadas da marca */
    --cor-primaria-escura: #1e40af;   /* hover do botão primário */
    --cor-primaria-clara: #eaf0fd;    /* fundo suave do destaque */
    --cor-menu-texto-suave: rgb(217 212 217 / 65%);
    --cor-menu-hover: #1f161f;
    --cor-menu-ativo: #2a202a;
    --cor-menu-divisor: #2a202a;
    --cor-menu-guia: #3f343f;          /* linha vertical que agrupa os subitens de um menu aberto */
    --cor-fundo-escuro-translucido: rgb(20 12 20 / 55%); /* véu atrás das janelas */

    /* Texto e bordas */
    --cor-texto: #1c2430;
    --cor-texto-suave: #5b6675;
    --cor-borda: #dfe2e8;
    --cor-borda-forte: #c4c9d2;      /* borda tracejada da área de arquivo */

    /* Estados */
    --cor-sucesso: #067647;
    --cor-sucesso-fundo: #ecfdf3;
    --cor-aviso: #b54708;
    --cor-aviso-fundo: #fffaeb;
    --cor-erro: #b42318;
    --cor-erro-fundo: #fef3f2;
    --cor-roxo: #5925dc;              /* selo roxo (ex.: Na fila nas campanhas) */
    --cor-roxo-fundo: #f4f3ff;
    --cor-pasta-usada: #fee4e2;       /* pasta de A-Z já usada: vermelho claro */
    --cor-pasta-usada-borda: #fda29b;
    --cor-pasta-livre: #d1fadf;       /* pasta de A-Z ainda não usada: verde claro */
    --cor-pasta-livre-borda: #6ce9a6;
    --cor-info-borda: #bfd0f7;        /* borda de avisos e cartões informativos azuis */
    --cor-faixa-qa: #ffcf0f;         /* faixa "AMBIENTE DE TESTES (QA)" */
    --cor-faixa-qa-texto: #1c1100;

    /* ===== FONTES (para trocar uma fonte, edite UMA linha aqui) =====
       Origem: Google Fonts (link no index.html; CSP libera só fonts.googleapis.com e fonts.gstatic.com).
       Corpo = Inter 400/500/600/700 (texto, tabelas, botões, formulários, menus).
       Títulos h1–h3 = Plus Jakarta Sans 600 (carregada também em 500 e 700).
       E-mails não definem fonte (usam a do programa de quem recebe). PDFs: Helvetica e Helvetica Bold. */
    --fonte-base: "Inter", sans-serif;
    --fonte-titulo: "Plus Jakarta Sans", sans-serif;
    --fonte-codigo: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --peso-normal: 400;
    --peso-medio: 500;
    --peso-forte: 600;
    --peso-negrito: 700;
    --peso-titulo: 600;
    --altura-linha: 1.5;

    /* ===== TAMANHOS DE FONTE =====
       Escala fixa e única: 11, 12, 13, 14, 16, 18, 20, 22, 24 e 32 px. Nunca use px solto: sempre um destes tokens.
       Só as fontes encolhem em telas menores (--fator-fonte, definido nas media queries abaixo); espaços e larguras não mudam.
       O 11 px é o piso de leitura: nunca diminui (nenhum tamanho fica abaixo dele). */
    --fator-fonte: 1;
    --tam-11: 11px;
    --tam-12: max(11px, calc(12px * var(--fator-fonte)));
    --tam-13: max(11px, calc(13px * var(--fator-fonte)));
    --tam-14: max(11px, calc(14px * var(--fator-fonte)));
    --tam-16: max(11px, calc(16px * var(--fator-fonte)));
    --tam-18: max(11px, calc(18px * var(--fator-fonte)));
    --tam-20: max(11px, calc(20px * var(--fator-fonte)));
    --tam-22: max(11px, calc(22px * var(--fator-fonte)));
    --tam-24: max(11px, calc(24px * var(--fator-fonte)));
    --tam-32: max(11px, calc(32px * var(--fator-fonte)));

    /* Papéis de texto (escolhem um tamanho da escala) */
    --texto-minimo: var(--tam-11);    /* piso de leitura */
    --texto-xs: var(--tam-12);        /* legendas, e-mail no menu */
    --texto-pequeno: var(--tam-13);   /* ajudas, rótulos de campo, cabeçalho de tabela */
    --texto-base: var(--tam-14);      /* texto corrente (padrão do corpo) */
    --texto-medio: var(--tam-16);     /* destaque dentro de cartão, h3 */
    --texto-grande: var(--tam-18);    /* título de seção (h2) */
    --texto-titulo: var(--tam-24);    /* título de página (h1) */

    /* Espaços (múltiplos de 0,25 rem) */
    --espaco-1: 0.25rem;
    --espaco-2: 0.5rem;
    --espaco-menu: 0.75rem;           /* respiro entre ícone e texto no menu */
    --espaco-3: 1rem;
    --espaco-4: 1.5rem;
    --espaco-5: 2rem;

    /* Formas e sombras */
    --raio: 0.5rem;
    --raio-grande: 0.75rem;
    --raio-total: 999px;
    --sombra: 0 1px 2px rgb(16 24 40 / 8%), 0 1px 3px rgb(16 24 40 / 10%);
    --sombra-forte: 0 12px 32px rgb(16 24 40 / 24%);
    --foco: 0 0 0 3px rgb(29 78 216 / 35%);

    /* Tamanhos */
    --largura-menu: 16.5rem;          /* largura mínima do menu */
    --largura-menu-max: 26rem;        /* o menu cresce para caber e-mails longos, até aqui */
    --menu-recuo: 0.75rem;            /* recuo à esquerda de TODA linha do menu: logotipo, ícones e avatar alinhados */
    --altura-controle: 2.5rem;        /* botões, campos e itens de menu */
    --tamanho-icone: 1.25rem;
    --tamanho-logo: 2.5rem;
    --tamanho-logo-grande: 4rem;      /* logotipo do login */
    --tamanho-avatar: 2.25rem;
    --tamanho-icone-bloco: 3.5rem;    /* bloco quadrado com ícone (cabeçalhos de janela e de domínio) */
    --tamanho-icone-bloco-interno: 1.75rem;
    --tamanho-miniatura: 3rem;       /* miniatura da imagem na lista do Armazenamento de Mídias */
    --tamanho-icone-pequeno: 1rem;
    --tamanho-ponto: 0.5rem;
  }

  /* Escala por tela: só as fontes diminuem (o piso de 11 px nunca diminui). Na impressão o fator volta a 1. */
  @media (max-width: 1440px) { :root { --fator-fonte: 0.96; } }
  @media (max-width: 1280px) { :root { --fator-fonte: 0.93; } }
  @media print { :root { --fator-fonte: 1; } }
}

@layer base {
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    font-family: var(--fonte-base);
    font-size: var(--texto-base);
    font-weight: var(--peso-normal);
    line-height: var(--altura-linha);
    background: var(--cor-fundo);
    color: var(--cor-texto);
  }

  /* Campos e botões herdam a fonte do corpo (o navegador, por padrão, usa outra) */
  button, input, select, textarea { font-family: inherit; }

  /* Hierarquia de títulos (Plus Jakarta Sans, peso 600): h1 = página, h2 = seção/cartão, h3 = subseção */
  h1, h2, h3 { margin: 0 0 var(--espaco-2); font-family: var(--fonte-titulo); font-weight: var(--peso-titulo); line-height: 1.25; color: var(--cor-texto); }
  h1 { font-size: var(--texto-titulo); }
  h2 { font-size: var(--texto-grande); }
  h3 { font-size: var(--texto-medio); }
  p { margin: var(--espaco-1) 0 var(--espaco-2); }
  a { color: var(--cor-primaria); }

  /* Código e identificadores: fonte monoespaçada do sistema operacional */
  code, kbd, samp, pre, .texto-codigo { font-family: var(--fonte-codigo); font-size: var(--texto-pequeno); }
  :focus-visible { outline: none; box-shadow: var(--foco); }
  ul { margin: var(--espaco-1) 0; padding-left: var(--espaco-4); }
}

@layer layout {
  /* A PÁGINA NÃO ROLA: o corpo ocupa exatamente a janela. Só o menu e a área de conteúdo rolam, cada um por dentro. */
  body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  #raiz { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); overflow: auto; }

  .auth { min-height: 100%; display: grid; place-items: center; padding: var(--espaco-3); }
  .auth-caixa { width: 100%; max-width: 26rem; }
  .auth-titulo { text-align: center; }
  /* Login: cabeçalho centralizado (logotipo, nome e boas-vindas), botão na largura toda e link sem sublinhado */
  .auth-cab { display: grid; justify-items: center; gap: var(--espaco-1); text-align: center; }
  .auth-cab p { margin: 0; }
  .auth-logo { width: var(--tamanho-logo-grande); height: var(--tamanho-logo-grande); margin-bottom: var(--espaco-2); border-radius: 50%; object-fit: cover; }
  .auth-cab .auth-titulo { margin: 0; }
  .auth-boas-vindas { margin-top: var(--espaco-2); font-size: var(--texto-medio); font-weight: var(--peso-forte); }
  .auth-caixa .form > .botao[type="submit"] { width: 100%; }
  .link-discreto { text-decoration: none; }
  .link-discreto:hover { text-decoration: underline; }

  .form { display: grid; gap: var(--espaco-3); margin-top: var(--espaco-3); }
  .linha { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; }
  .linha-fim { justify-content: flex-end; } /* botões alinhados à direita (ex.: "Editar PDF") */
  .pagina-grupo { display: grid; gap: var(--espaco-3); }

  /* A coluna do menu se adapta ao conteúdo dele (largura mínima e máxima definidas em .menu-lateral) */
  .app-shell { display: grid; grid-template-columns: auto minmax(0, 1fr); height: 100%; min-height: 0; }
  .app-conteudo { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
  .topo { flex: none; display: flex; align-items: center; gap: var(--espaco-2); padding: var(--espaco-3) var(--espaco-4); background: var(--cor-superficie); border-bottom: 1px solid var(--cor-borda); }
  .topo-titulo { margin: 0; }
  .pagina { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--espaco-4); display: grid; gap: var(--espaco-3); align-content: start; }
  .app-fundo { display: none; }

  @media (max-width: 52rem) {
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .topo { padding: var(--espaco-2) var(--espaco-3); }
    .pagina { padding: var(--espaco-3); }
    .menu-lateral { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform 0.2s; z-index: 20; }
    .menu-aberto .menu-lateral { transform: none; }
    .menu-aberto .app-fundo { display: block; position: fixed; inset: 0; background: var(--cor-fundo-escuro-translucido); z-index: 10; }
  }
}

@layer componentes {
  .alerta { display: flex; gap: var(--espaco-2); align-items: flex-start; padding: var(--espaco-2) var(--espaco-3); border-radius: var(--raio); border: 1px solid; margin: var(--espaco-2) 0; }
  .alerta p { margin: 0; }
  .alerta-sucesso { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso); }
  .alerta-erro { color: var(--cor-erro); background: var(--cor-erro-fundo); border-color: var(--cor-erro); }
  .alerta-aviso { color: var(--cor-aviso); background: var(--cor-aviso-fundo); border-color: var(--cor-aviso); }
}
@layer componentes {
  .alerta-info { color: var(--cor-primaria); background: var(--cor-primaria-clara); border-color: var(--cor-info-borda); }
  .alerta-info p { color: var(--cor-texto); }
}

@layer componentes {
  /* Cards de acesso rápido na tela inicial */
  .atalhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--espaco-3); }
  .atalho {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--espaco-1) var(--espaco-3);
    align-items: center;
    padding: var(--espaco-4);
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-grande);
    box-shadow: var(--sombra);
    color: var(--cor-texto);
    text-decoration: none;
  }
  .atalho:hover { border-color: var(--cor-primaria); }
  .atalho-icone { grid-row: span 2; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--raio-grande); background: var(--cor-primaria-clara); color: var(--cor-primaria); }
  .atalho-titulo { font-size: var(--texto-medio); font-weight: var(--peso-forte); }
  .atalho-descricao { grid-column: 2; font-size: var(--texto-pequeno); color: var(--cor-texto-suave); }
}

@layer componentes {
  .botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espaco-2);
    min-height: var(--altura-controle);
    padding: 0 var(--espaco-3);
    border: 1px solid transparent;
    border-radius: var(--raio);
    font: inherit;
    font-weight: var(--peso-forte);
    cursor: pointer;
    text-decoration: none;
  }
  .botao:disabled { opacity: 0.55; cursor: not-allowed; }
  .botao-primario { background: var(--cor-primaria); color: var(--cor-sobre-escuro); }
  .botao-primario:hover:not(:disabled) { background: var(--cor-primaria-escura); }
  .botao-secundario { background: var(--cor-superficie); color: var(--cor-texto); border-color: var(--cor-borda); }
  .botao-secundario:hover:not(:disabled) { background: var(--cor-fundo); }
  .botao-cinza { background: var(--cor-fundo); color: var(--cor-texto); border-color: var(--cor-borda); }
  .botao-cinza:hover:not(:disabled) { background: var(--cor-borda); }
  .botao-perigo { background: var(--cor-erro); color: var(--cor-sobre-escuro); }
  .botao-perigo:hover:not(:disabled) { filter: brightness(0.9); }
  .botao-fantasma { background: transparent; color: var(--cor-texto-suave); padding: 0 var(--espaco-2); }
  .botao-fantasma:hover:not(:disabled) { background: var(--cor-primaria-clara); color: var(--cor-primaria); }
  .form > .botao { width: 100%; }
}

@layer componentes {
  .caixa { display: grid; grid-template-columns: auto 1fr; column-gap: var(--espaco-2); align-items: start; }
  .caixa-entrada { width: 1.125rem; height: 1.125rem; margin-top: 0.2rem; accent-color: var(--cor-primaria); }
  .caixa label { font-weight: var(--peso-forte); }
  .caixa .campo-ajuda { grid-column: 2; }
  .lista-ferramentas { display: grid; gap: var(--espaco-3); }
}

@layer componentes {
  .campo { display: grid; gap: var(--espaco-1); }
  .campo label { font-weight: var(--peso-forte); font-size: var(--texto-pequeno); }
  .campo-ajuda { margin: 0; font-size: var(--texto-pequeno); color: var(--cor-texto-suave); }
  .entrada {
    width: 100%;
    min-height: var(--altura-controle);
    padding: 0 var(--espaco-2);
    font: inherit;
    color: var(--cor-texto);
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
  }
  .entrada:focus { border-color: var(--cor-primaria); }
  /* variante de várias linhas (textarea), usada com campo({ linhas }) */
  .entrada-area { padding: var(--espaco-2); line-height: var(--altura-linha); resize: vertical; }
  .entrada:disabled { background: var(--cor-fundo); color: var(--cor-texto-suave); }
}
@layer componentes {
  /* Campo rico (com ícone): ícone e rótulo na mesma linha, os dois começando no início da caixa; controle e ajuda embaixo, na largura toda */
  .campo-rico { grid-template-columns: var(--tamanho-icone) minmax(0, 1fr); column-gap: var(--espaco-2); row-gap: var(--espaco-1); }
  .campo-rico > :not(.campo-icone, label) { grid-column: 1 / -1; }
  .campo-rico .campo-icone { grid-column: 1; grid-row: 1; display: inline-grid; place-items: center; align-self: center; color: var(--cor-texto-suave); }
  .campo-rico label { grid-column: 2; grid-row: 1; font-size: var(--texto-base); }
  .campo-obrigatorio { color: var(--cor-erro); }
  .campo-rico .entrada:focus { box-shadow: var(--foco); outline: 0; }
  .campo-senha { position: relative; }
  .campo-senha .entrada { padding-right: calc(var(--altura-controle) + var(--espaco-1)); }
  .campo-olho { position: absolute; top: 0; right: 0; height: 100%; min-height: 0; padding: 0 var(--espaco-3); }
  /* Campo de arquivo: o input do navegador fica escondido (mas acessível) e no lugar entram um botão do site e os nomes escolhidos */
  .arquivo { display: flex; align-items: center; gap: var(--espaco-2); min-width: 0; }
  .arquivo .entrada.arquivo-entrada { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .arquivo .botao { flex: none; }
  .arquivo-nomes { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cor-texto-suave); font-size: var(--texto-pequeno); }
  .arquivo:focus-within .botao { box-shadow: var(--foco); }
  /* Caixa com ícone dentro, à esquerda (campo({ iconeDentro })), ex.: Tipo de PDF e os campos do login */
  .entrada-com-icone { position: relative; }
  .entrada-com-icone .entrada { padding-left: calc(var(--espaco-2) * 2 + var(--tamanho-icone-pequeno)); }
  .entrada-icone { position: absolute; top: 50%; left: var(--espaco-2); width: var(--tamanho-icone-pequeno); height: var(--tamanho-icone-pequeno); transform: translateY(-50%); color: var(--cor-texto-suave); pointer-events: none; }
}

@layer componentes {
  .cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: var(--espaco-4); }
  .cartao-cab { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; justify-content: space-between; margin-bottom: var(--espaco-3); }
  .cartao-cab h2 { margin: 0; }
}

@layer componentes {
  /* Calculadora de Comissão: tabela do mês com valores à direita, linha de totais e resumo final */
  .comissao-tabela { min-width: 68rem; }
  .comissao-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .comissao-tabela th.comissao-num { text-align: right; }
  .comissao-par-fim td { border-bottom: 2px solid var(--cor-borda-forte); }
  .comissao-total { font-weight: var(--peso-forte); }
  .comissao-cnpj { display: block; }
  .comissao-doc { display: grid; }
  .comissao-alertas { display: flex; flex-wrap: wrap; gap: var(--espaco-1); }
  .comissao-tabela tfoot td { padding-top: var(--espaco-3); border-top: 2px solid var(--cor-borda-forte); font-weight: var(--peso-forte); }
  .comissao-resumo { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--espaco-5); margin-top: var(--espaco-4); padding-top: var(--espaco-3); border-top: 1px solid var(--cor-borda); }
  .comissao-resumo > div { display: grid; gap: var(--espaco-1); justify-items: end; }
  .comissao-resumo strong { font-size: var(--texto-grande); }
  .comissao-mes { display: grid; gap: var(--espaco-3); align-content: start; }
  .comissao-mes p { margin: 0; }
  .comissao-resultados { display: grid; gap: var(--espaco-2); margin-top: var(--espaco-3); }
  .comissao-cliente-novo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--espaco-3); }
}

@layer componentes {
  /* Ferramenta "Contador de Caracteres" (SMS) */
  .sms-status { display: grid; gap: var(--espaco-3); margin-top: var(--espaco-3); }
  .sms-faixa { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; }
  .sms-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--espaco-3); margin: 0; }
  .sms-metrica { display: grid; gap: var(--espaco-1); padding: var(--espaco-2) var(--espaco-3); background: var(--cor-fundo); border-radius: var(--raio); }
  .sms-metrica dt { font-size: var(--texto-pequeno); color: var(--cor-texto-suave); }
  .sms-metrica dd { margin: 0; font-size: var(--texto-grande); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }

  .sms-previa { display: grid; gap: var(--espaco-2); }
  .sms-previa-seg { display: grid; gap: var(--espaco-1); padding: var(--espaco-2) var(--espaco-3); background: var(--cor-fundo); border-radius: var(--raio); border-left: var(--espaco-1) solid var(--cor-primaria); }
  .sms-previa-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espaco-2); font-size: var(--texto-pequeno); color: var(--cor-texto-suave); }
  .sms-previa-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
  .sms-marca { padding: 0 var(--espaco-1); border-radius: var(--espaco-1); font-weight: var(--peso-forte); }
  .sms-marca-erro { background: var(--cor-erro-fundo); color: var(--cor-erro); }
  .sms-marca-ext { background: var(--cor-aviso-fundo); color: var(--cor-aviso); }

  .sms-diff { display: grid; gap: var(--espaco-1); margin: 0; padding: 0; list-style: none; }
  .sms-diff li { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: baseline; }
  .sms-de { padding: 0 var(--espaco-1); border-radius: var(--espaco-1); background: var(--cor-erro-fundo); color: var(--cor-erro); text-decoration: line-through; }
  .sms-para { padding: 0 var(--espaco-1); border-radius: var(--espaco-1); background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }

  /* Bloco que abre e fecha (details/summary nativos: funciona com teclado e leitor de tela) */
  .colapsavel { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); box-shadow: var(--sombra); }
  .colapsavel > summary { padding: var(--espaco-3) var(--espaco-4); font-weight: var(--peso-forte); cursor: pointer; border-radius: var(--raio-grande); }
  .colapsavel[open] > summary { border-bottom: 1px solid var(--cor-borda); border-radius: var(--raio-grande) var(--raio-grande) 0 0; }
  .colapsavel-corpo { display: grid; gap: var(--espaco-3); padding: var(--espaco-4); }
}

@layer componentes {
  .icone-bloco { display: inline-grid; place-items: center; flex: none; width: var(--tamanho-icone-bloco); height: var(--tamanho-icone-bloco); border-radius: var(--raio-grande); color: var(--cor-primaria); background: var(--cor-primaria-clara); }
  .icone-bloco .icone { width: var(--tamanho-icone-bloco-interno); height: var(--tamanho-icone-bloco-interno); }

  /* Painel: cartão interno com ícone + título no cabeçalho */
  .painel { border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); padding: var(--espaco-3) var(--espaco-4); background: var(--cor-superficie); }
  .painel + .painel { margin-top: var(--espaco-3); }
  .painel-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espaco-2); margin-bottom: var(--espaco-2); }
  .painel-titulo { display: flex; align-items: center; gap: var(--espaco-3); margin: 0; font-size: var(--texto-medio); }
  .painel-titulo .icone { color: var(--cor-texto); }
  .paineis-duplo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: var(--espaco-3); }
  .paineis-duplo > .painel + .painel { margin-top: 0; }

  /* Linhas de informação: ícone | rótulo | valor | copiar */
  .info-linha { display: grid; grid-template-columns: auto 7.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--espaco-3); min-height: var(--altura-controle); padding: var(--espaco-1) 0; }
  .info-lista .info-linha { border-bottom: 1px solid var(--cor-borda); }
  .info-lista .info-linha:last-child { border-bottom: 0; }
  .info-icone { display: inline-grid; color: var(--cor-texto-suave); }
  .info-rotulo { color: var(--cor-texto-suave); }
  .info-valor { font-weight: var(--peso-forte); word-break: break-word; }
  .info-copiar { padding: 0 var(--espaco-1); min-height: 0; }
  .info-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); column-gap: var(--espaco-4); }
  .info-grade > div + div { border-left: 1px solid var(--cor-borda); padding-left: var(--espaco-4); }
  @media (max-width: 40rem) { .info-grade > div + div { border-left: 0; padding-left: 0; } .info-linha { grid-template-columns: auto minmax(0, 1fr) auto; } .info-rotulo { grid-column: 2 / -1; } .info-valor { grid-column: 2 / 3; } }

  /* Cartão de status (sucesso / info) */
  .status-cartao { display: flex; align-items: center; gap: var(--espaco-3); padding: var(--espaco-3) var(--espaco-4); border: 1px solid; border-radius: var(--raio-grande); }
  .status-cartao + .status-cartao, .status-cartao + .painel, .painel + .status-cartao { margin-top: var(--espaco-3); }
  .status-cartao p { margin: 0; }
  .status-cartao-titulo { font-size: var(--texto-medio); font-weight: var(--peso-negrito); }
  .status-cartao-icone { display: inline-grid; place-items: center; flex: none; width: var(--tamanho-icone-bloco); height: var(--tamanho-icone-bloco); border-radius: var(--raio-total); }
  .status-cartao-sucesso { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); border-color: var(--cor-pasta-livre-borda); }
  .status-cartao-sucesso .status-cartao-icone { color: var(--cor-sobre-escuro); background: var(--cor-sucesso); }
  .status-cartao-sucesso .status-cartao-texto { color: var(--cor-texto-suave); }
  .status-cartao-info { color: var(--cor-texto); background: var(--cor-primaria-clara); border-color: var(--cor-info-borda); }
  .status-cartao-info .status-cartao-icone { color: var(--cor-primaria); background: var(--cor-info-borda); }
  .status-cartao-info .status-cartao-texto { color: var(--cor-texto-suave); }

  /* Lista de arquivos da pasta */
  .arquivos-titulo { margin: var(--espaco-3) 0 var(--espaco-1); font-weight: var(--peso-forte); }
  .lista-arquivos { list-style: none; margin: var(--espaco-2) 0 0; padding: 0; border-radius: var(--raio); overflow: hidden; }
  .lista-arquivos li { display: flex; align-items: center; gap: var(--espaco-3); padding: var(--espaco-2) var(--espaco-3); }
  .lista-arquivos li:nth-child(odd) { background: var(--cor-fundo); }

  /* Cabeçalho do domínio */
  .dominio-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espaco-3); margin-bottom: var(--espaco-3); }
  .dominio-cab-id { display: flex; align-items: center; gap: var(--espaco-3); }
  .dominio-cab h2 { margin: 0; }
  .dominio-cab p { margin: 0; }
  .alerta-na-lista { margin-top: var(--espaco-3); }
}
@layer componentes {
  .icone-bloco-perigo { color: var(--cor-erro); background: var(--cor-erro-fundo); }
  .icone-bloco-aviso { color: var(--cor-aviso); background: var(--cor-aviso-fundo); }
  .icone-bloco-sucesso { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); }
  .confirmar-texto { margin: 0 0 var(--espaco-3); }
  .dialogo .painel { margin-top: var(--espaco-3); }
  .dialogo .form { gap: var(--espaco-3); }
}

@layer componentes {
  .dialogo { border: 0; border-radius: var(--raio); padding: 0; width: min(28rem, calc(100vw - 2rem)); box-shadow: var(--sombra-forte); color: var(--cor-texto); background: var(--cor-superficie); }
  .dialogo::backdrop { background: var(--cor-fundo-escuro-translucido); }
  .dialogo-cab { padding: var(--espaco-3) var(--espaco-4) 0; }
  .dialogo-cab h2 { margin: 0; }
  .dialogo-corpo { padding: var(--espaco-2) var(--espaco-4) var(--espaco-3); }
  .dialogo-rodape { display: flex; justify-content: flex-end; gap: var(--espaco-2); padding: var(--espaco-3) var(--espaco-4); border-top: 1px solid var(--cor-borda); }
}
@layer componentes {
  .dialogo-largo { width: min(44rem, calc(100vw - 2rem)); }
  .dialogo-cab-rico { display: flex; align-items: center; gap: var(--espaco-3); padding-bottom: var(--espaco-2); }
  .dialogo-cab-texto { flex: 1; min-width: 0; }
  .dialogo-cab-texto p { margin: 0; }
  .dialogo-x { align-self: flex-start; }
  .dialogo-largo .dialogo-corpo { max-height: 70vh; overflow-y: auto; }
}
@layer componentes {
  .dialogo-corpo { max-height: 65vh; overflow-y: auto; }
}

@layer componentes {
  .faixa-qa { background: var(--cor-faixa-qa); color: var(--cor-faixa-qa-texto); text-align: center; font-weight: var(--peso-negrito); padding: var(--espaco-2); position: sticky; top: 0; z-index: 50; }
  .faixa-qa[hidden] { display: none; }
}

@layer componentes {
  /* Faturamento: tabela do mês (valores à direita, subtotal por cliente, total geral), resumo e o cartão de envio ao financeiro */
  .faturamento-tabela { min-width: 60rem; }
  .faturamento-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .faturamento-tabela th.faturamento-num { text-align: right; }
  .faturamento-canal { display: grid; }
  .faturamento-subtotal td { font-weight: var(--peso-forte); border-bottom: 2px solid var(--cor-borda-forte); }
  .faturamento-tabela tfoot td { padding-top: var(--espaco-3); border-top: 2px solid var(--cor-borda-forte); font-weight: var(--peso-forte); }
  .faturamento-avisos { display: grid; gap: var(--espaco-2); margin-bottom: var(--espaco-3); }
  .faturamento-avisos:empty { display: none; }
  .faturamento-resumo { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--espaco-5); margin-top: var(--espaco-4); padding-top: var(--espaco-3); border-top: 1px solid var(--cor-borda); }
  .faturamento-resumo > div { display: grid; gap: var(--espaco-1); justify-items: end; }
  .faturamento-resumo strong { font-size: var(--texto-grande); }
  .faturamento-envio { display: grid; gap: var(--espaco-4); }
  .faturamento-destino { display: grid; gap: var(--espaco-3); align-content: start; }
  .faturamento-destino p { margin: 0; }
  .faturamento-erro { display: block; }
}

@layer componentes {
  /* Padrão de tela de ferramenta com envio de arquivos (modelo da Edição de PDF, usado também no Armazenamento de Mídias):
     cartão com cabeçalho (ícone + título + descrição), campo curto opcional, separador, painéis com faixa lado a lado,
     separador e o botão principal à direita; abaixo, outro cartão com a tabela do que já foi feito. Veja docs/design-system.md, seção 9. */
  .ferramenta-cab { display: flex; align-items: center; gap: var(--espaco-3); margin-bottom: var(--espaco-3); }
  .ferramenta-cab h2 { margin: 0; }
  .ferramenta-cab-acao { margin-left: auto; }
  .ferramenta-cab p { margin: var(--espaco-1) 0 0; }
  .ferramenta-campo-curto { max-width: 24rem; }
  .separador { margin: var(--espaco-3) 0; border: 0; border-top: 1px solid var(--cor-borda); }

  /* Painéis lado a lado; em telas estreitas, um embaixo do outro. Com três painéis (ferramenta-blocos-tres) os dois
     primeiros ficam mais largos que o terceiro. */
  .ferramenta-blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: var(--espaco-3); align-items: stretch; }
  @media (min-width: 90rem) { .ferramenta-blocos-tres { grid-template-columns: 1.25fr 1.25fr 1.15fr; } }
  .ferramenta-blocos > .painel + .painel { margin-top: 0; }

  /* Painel com faixa de título (o cabeçalho tem fundo próprio e o conteúdo fica em .painel-corpo) */
  .painel-faixa { padding: 0; overflow: hidden; }
  .painel-faixa > .painel-cab { margin: 0; padding: var(--espaco-2) var(--espaco-3); background: var(--cor-fundo); border-bottom: 1px solid var(--cor-borda); }
  .painel-faixa .painel-titulo { font-size: var(--texto-base); }
  .painel-faixa .painel-titulo .icone { color: var(--cor-primaria); }
  .painel-corpo { padding: var(--espaco-3); }
}

@layer componentes {
  .filtro-periodo { display: grid; gap: var(--espaco-2); margin: var(--espaco-3) 0; }
  .filtro-periodo-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2) var(--espaco-4); }
  .filtro-periodo-botoes label { display: inline-flex; align-items: center; gap: var(--espaco-2); }
  .filtro-periodo .entrada { width: auto; }
}

@layer componentes {
  .grade-letras { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: var(--espaco-3); margin-top: var(--espaco-3); }
  .letra {
    display: grid;
    justify-items: center;
    gap: var(--espaco-1);
    padding: var(--espaco-2);
    font: inherit;
    color: var(--cor-texto);
    background: var(--cor-pasta-livre);
    border: 1px solid var(--cor-pasta-livre-borda);
    border-radius: var(--raio);
    cursor: pointer;
  }
  .letra:hover { border-color: var(--cor-primaria); }
  .letra-usada { background: var(--cor-pasta-usada); border-color: var(--cor-pasta-usada-borda); }
  .letra-nome { font-size: var(--texto-titulo); font-weight: var(--peso-negrito); text-transform: uppercase; }
  .letra-uso { font-size: var(--texto-pequeno); text-align: center; white-space: nowrap; }
  .letra-status { font-weight: var(--peso-forte); }

  .detalhes { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--espaco-1) var(--espaco-3); margin: 0; }
  .detalhes dt { color: var(--cor-texto-suave); }
  .detalhes dd { margin: 0; word-break: break-word; }
  .pagina-grupo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espaco-3); }
}

@layer componentes {
  /* Página /#estilo (guia de estilo vivo) */
  .estilo { display: grid; gap: var(--espaco-3); width: 100%; max-width: 60rem; margin: 0 auto; padding: var(--espaco-4) var(--espaco-3); align-self: start; }
  .estilo-form { max-width: 24rem; margin-top: 0; }
  .estilo-secao { display: grid; gap: var(--espaco-2); }
  .estilo-cores, .estilo-icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--espaco-2); }
  .estilo-cor, .estilo-icone { display: flex; align-items: center; gap: var(--espaco-2); }
  .estilo-amostra { width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; border: 1px solid var(--cor-borda); flex: none; }
  .estilo-menu { max-width: var(--largura-menu); border-radius: var(--raio-grande); overflow: hidden; }
  .estilo-menu .menu-lateral { height: auto; }
  .amostra-primaria { background: var(--cor-primaria); }
  .amostra-menu { background: var(--cor-menu); }
  .amostra-menu-texto { background: var(--cor-menu-texto); }
  .amostra-fundo { background: var(--cor-fundo); }
  .amostra-superficie { background: var(--cor-superficie); }
  .amostra-texto { background: var(--cor-texto); }
  .amostra-texto-suave { background: var(--cor-texto-suave); }
  .amostra-borda { background: var(--cor-borda); }
  .amostra-sucesso { background: var(--cor-sucesso); }
  .amostra-aviso { background: var(--cor-aviso); }
  .amostra-erro { background: var(--cor-erro); }
}

@layer componentes {
  .icone {
    width: var(--tamanho-icone);
    height: var(--tamanho-icone);
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

@layer componentes {
  /* Marca no topo do menu: logotipo em círculo + MOBSIM (grande) e Skills (menor) */
  .marca { display: flex; align-items: center; gap: var(--espaco-menu); padding: var(--espaco-1) var(--menu-recuo) var(--espaco-2); }
  .marca-logo { width: var(--tamanho-logo); height: var(--tamanho-logo); flex: none; border-radius: 50%; object-fit: cover; }
  .marca-texto { display: grid; line-height: 1.2; }
  .marca-nome { color: var(--cor-sobre-escuro); font-size: var(--texto-medio); font-weight: var(--peso-negrito); letter-spacing: 0.02em; }
  .marca-sub { font-size: var(--texto-pequeno); color: var(--cor-menu-texto-suave); }

  /* Avatar com a inicial do nome */
  .avatar {
    width: var(--tamanho-avatar);
    height: var(--tamanho-avatar);
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cor-primaria);
    color: var(--cor-sobre-escuro);
    font-weight: var(--peso-negrito);
    text-transform: uppercase;
  }
}

@layer componentes {
  /* Menu lateral: altura total da janela (rola por dentro se a tela for baixa) e largura que se adapta ao conteúdo
     (por exemplo, e-mails longos aparecem inteiros): mínimo --largura-menu, máximo --largura-menu-max.
     ALINHAMENTO: toda linha principal do menu (marca, itens, cabeçalhos de grupo, usuário, Segurança, Sair) tem o mesmo
     recuo à esquerda, --menu-recuo, para logotipo, ícones e avatar ficarem na mesma coluna. Os subitens de um grupo
     aberto ficam recuados, sem ícone, numa seção marcada por uma linha vertical (v0.16.1, modelo do Rodrigo). */
  .menu-lateral {
    height: 100%;
    width: max-content;
    min-width: var(--largura-menu);
    max-width: min(var(--largura-menu-max), calc(100vw - 3rem));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--espaco-3);
    padding: var(--espaco-3) var(--espaco-2);
    background: var(--cor-menu);
    color: var(--cor-menu-texto);
  }
  .menu-lateral nav { flex: 1 1 auto; display: grid; gap: var(--espaco-1); align-content: start; }

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--espaco-menu);
    width: 100%;
    min-height: var(--altura-controle);
    padding: 0 var(--menu-recuo);
    border: 0;
    border-radius: var(--raio-grande);
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: var(--peso-medio);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
  }
  .menu-item:hover { background: var(--cor-menu-hover); }
  .menu-item.ativo, .menu-grupo.aberto > .menu-grupo-cab { background: var(--cor-menu-ativo); color: var(--cor-sobre-escuro); }
  .menu-item span { flex: 1 1 auto; text-align: left; }

  /* Menus que abrem: só um aberto por vez (controlado em app.js). Os subitens formam uma seção: a linha vertical sai do
     centro do ícone do grupo e o texto dos subitens começa na mesma coluna do nome do grupo; fonte um pouco menor. */
  .menu-chevron { flex: none; transition: transform 0.15s; }
  .menu-grupo.aberto .menu-chevron { transform: rotate(90deg); }
  .menu-subitens {
    display: none;
    gap: var(--espaco-1);
    margin: var(--espaco-1) 0 var(--espaco-1) calc(var(--menu-recuo) + var(--tamanho-icone) / 2);
    padding-left: calc(var(--espaco-1) / 2);
    border-left: 1px solid var(--cor-menu-guia);
  }
  .menu-grupo.aberto .menu-subitens { display: grid; }
  .menu-subitens .menu-item {
    min-height: 2.25rem;
    padding-left: calc(var(--tamanho-icone) / 2 + var(--espaco-menu) - var(--espaco-1) / 2 - 1px);
    font-size: var(--texto-pequeno);
    font-weight: var(--peso-normal);
  }
  .menu-subitens .menu-item.ativo { font-weight: var(--peso-medio); }
  .menu-vazio { margin: 0; padding: var(--espaco-1) var(--menu-recuo); font-size: var(--texto-pequeno); color: var(--cor-menu-texto-suave); }

  .menu-rodape { flex: none; display: grid; gap: var(--espaco-1); padding-top: var(--espaco-3); border-top: 1px solid var(--cor-menu-divisor); }
  .menu-usuario { display: flex; align-items: center; gap: var(--espaco-menu); padding: var(--espaco-2) var(--menu-recuo); }
  .menu-usuario-texto { display: grid; line-height: 1.3; text-align: left; }
  /* Nome e e-mail aparecem por inteiro (o menu cresce até o máximo; passando disso, quebram a linha em vez de cortar) */
  .menu-usuario-nome { color: var(--cor-sobre-escuro); font-weight: var(--peso-forte); overflow-wrap: anywhere; }
  .menu-usuario-email { font-size: var(--texto-xs); color: var(--cor-menu-texto-suave); overflow-wrap: anywhere; }
}

@layer componentes {
  /* Armazenamento de Mídias: miniatura na lista e URL pública com botão de copiar */
  .midia-miniatura { display: block; width: var(--tamanho-miniatura); height: var(--tamanho-miniatura); object-fit: cover; border-radius: var(--raio); background: var(--cor-fundo); border: 1px solid var(--cor-borda); }
  /* Áudio não tem miniatura: o mesmo quadrado, com o ícone de som no centro */
  .midia-miniatura-icone { display: flex; align-items: center; justify-content: center; color: var(--cor-texto-suave); }
  .midia-url { display: flex; align-items: center; gap: var(--espaco-2); min-width: 0; }
  .midia-url-texto { min-width: 0; max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--texto-pequeno); }
  .midia-resultados { display: grid; gap: var(--espaco-2); margin-top: var(--espaco-3); }
  /* Campo do nome do cliente novo e botão Criar pasta na mesma linha, com a mesma altura; a ajuda fica embaixo */
  .pasta-nova { display: grid; gap: var(--espaco-1); }
  .pasta-nova[hidden] { display: none; }
  .pasta-nova-linha { display: flex; align-items: stretch; gap: var(--espaco-3); }
  .pasta-nova-linha .entrada { flex: 1; min-width: 0; }
  .pasta-nova-linha .botao { flex: none; }
  /* Escolha do cliente: dois botões lado a lado (o ativo fica em destaque) */
  .midia-cliente { display: grid; gap: var(--espaco-3); align-content: start; }
  .midia-cliente > * { margin: 0; min-width: 0; }
  .seg-cliente { display: flex; gap: var(--espaco-2); }
  .seg-cliente .botao { flex: 1; justify-content: center; }
  .botao-seg-ativo { background: var(--cor-primaria-clara); color: var(--cor-primaria); border-color: var(--cor-primaria); font-weight: var(--peso-medio); }
  .pasta-definida { display: flex; align-items: center; gap: var(--espaco-2); margin: var(--espaco-2) 0 0; color: var(--cor-sucesso); font-size: var(--texto-pequeno); }
  .pasta-definida[hidden] { display: none; }
}

@layer componentes {
  .paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espaco-3); margin-top: var(--espaco-3); }
  .paginacao-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); }
  .paginacao-rotulo { color: var(--cor-texto-suave); font-size: var(--texto-pequeno); }
  .paginacao-grupo label { display: inline-flex; align-items: center; gap: var(--espaco-2); }
  .paginacao .entrada { width: auto; }
  /* Regra de alinhamento (v0.40.1): rótulo curto + controle ("Mês: [select]") ficam SEMPRE na mesma linha, com o controle na altura
     padrão (--altura-controle), para alinhar com os botões vizinhos em qualquer lugar (cabeçalho de cartão, barra de filtros). */
  label.paginacao-rotulo { display: inline-flex; align-items: center; gap: var(--espaco-2); }
  label.paginacao-rotulo .entrada { width: auto; }
  .botao-marcado { background: var(--cor-primaria-clara); color: var(--cor-primaria); border-color: var(--cor-primaria); }
}

@layer componentes {
  /* Específico da Edição de PDF (o restante do bloco "Editar PDF" está em ferramenta.css) */
  .documento-pdf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); gap: var(--espaco-3); align-items: start; }
  .informacoes-fatura { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); gap: var(--espaco-3); align-items: start; }
  .informacoes-fatura > *, .informacoes-fatura .entrada, .documento-pdf > * { min-width: 0; }
}

@layer componentes {
  /* Preços dos canais (janela em Clientes): um bloco por canal; no Áudio, um cartão para Celular e outro para Fixo */
  .precos-bloco { display: grid; gap: var(--espaco-3); padding-bottom: var(--espaco-4); border-bottom: 1px solid var(--cor-borda); }
  .precos-bloco:last-of-type { border-bottom: 0; padding-bottom: 0; }
  .precos-bloco h3 { margin: 0; }
  .precos-bloco p { margin: 0; }
  .precos-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: var(--espaco-3); }
  .precos-cartao { display: grid; gap: var(--espaco-3); padding: var(--espaco-4); background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); }
  .precos-cartao h4 { margin: 0; }
  .precos-adicional { padding-top: var(--espaco-3); border-top: 1px solid var(--cor-borda); }
  .precos-acoes { display: flex; flex-wrap: wrap; gap: var(--espaco-2); align-items: center; }
}

@layer componentes {
  /* Assistente de campanha de RCS: passos à esquerda, formulário no centro e pré-visualização do celular à direita */
  .rcs-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-3); margin-bottom: var(--espaco-3); }
  .rcs-assistente { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 22rem; gap: var(--espaco-4); align-items: start; }
  @media (max-width: 84rem) { .rcs-assistente { grid-template-columns: 12rem minmax(0, 1fr); } .rcs-previa { grid-column: 2; } }
  @media (max-width: 52rem) { .rcs-assistente { grid-template-columns: minmax(0, 1fr); } .rcs-previa { grid-column: 1; } }
  /* Assistente sem pré-visualização (Áudio): só os passos e o formulário */
  .rcs-assistente.rcs-assistente-sem-previa { grid-template-columns: 13rem minmax(0, 1fr); }
  @media (max-width: 52rem) { .rcs-assistente.rcs-assistente-sem-previa { grid-template-columns: minmax(0, 1fr); } }

  /* Passos (barra vertical com a linha ligando os números) */
  .rcs-passos { display: grid; align-content: start; }
  .rcs-passo { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--espaco-2); align-items: start; padding: 0 0 var(--espaco-4); text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
  .rcs-passo:disabled { cursor: default; }
  .rcs-passo:not(:last-child)::before { content: ''; position: absolute; left: 1rem; top: 2.25rem; bottom: 0.25rem; width: 1px; background: var(--cor-borda-forte); }
  .rcs-passo-num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--raio-total); background: var(--cor-fundo); border: 1px solid var(--cor-borda); color: var(--cor-texto-suave); font-weight: var(--peso-forte); }
  .rcs-passo-num .icone { width: 1rem; height: 1rem; }
  .rcs-passo > span:last-child { display: grid; padding-top: 0.15rem; }
  .rcs-passo-titulo { font-weight: var(--peso-forte); color: var(--cor-texto-suave); }
  .rcs-passo-sub { font-size: var(--texto-pequeno); color: var(--cor-texto-suave); }
  .rcs-passo-feito .rcs-passo-num { background: var(--cor-primaria-clara); border-color: var(--cor-info-borda); color: var(--cor-primaria); }
  .rcs-passo-ativo .rcs-passo-num { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-sobre-escuro); }
  .rcs-passo-ativo .rcs-passo-titulo, .rcs-passo-feito .rcs-passo-titulo { color: var(--cor-texto); }
  .rcs-passo-ativo .rcs-passo-titulo { color: var(--cor-primaria); }

  /* Cartão do passo */
  .rcs-passo-cartao { display: grid; gap: var(--espaco-3); align-content: start; min-height: 30rem; }
  .rcs-passo-contagem { margin: 0; font-size: var(--texto-xs); letter-spacing: 0.04em; color: var(--cor-texto-suave); }
  .rcs-passo-cab h2 { margin: var(--espaco-1) 0; font-size: var(--texto-titulo); }
  .rcs-passo-cab p { margin: 0; }
  .rcs-passo-corpo { display: grid; gap: var(--espaco-3); align-content: start; }
  .rcs-passo-rodape { display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-3); margin-top: auto; padding-top: var(--espaco-3); border-top: 1px solid var(--cor-borda); }
  .rcs-contador-campo { position: relative; }
  .rcs-contador { position: absolute; right: var(--espaco-2); top: 0; font-size: var(--texto-xs); color: var(--cor-texto-suave); }
  .rcs-duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: var(--espaco-3); align-items: start; }
  .rcs-config-cartoes { display: grid; gap: var(--espaco-4); }
  .rcs-ajuda { margin: 0; }
  /* Relatório geral da campanha (também é o que sai na impressão / PDF) */
  .relatorio { display: grid; gap: var(--espaco-4); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .relatorio h2, .relatorio h3, .relatorio p { margin: 0; }
  .rel-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espaco-3); }
  .rel-cab-direita { display: grid; gap: var(--espaco-1); justify-items: end; }
  .rel-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--espaco-3); }
  .rel-metrica { display: grid; gap: var(--espaco-1); padding: var(--espaco-2) var(--espaco-3); background: var(--cor-fundo); border-radius: var(--raio); }
  .rel-metrica strong { font-size: var(--texto-titulo); font-variant-numeric: tabular-nums; }
  .rel-funil { display: grid; gap: var(--espaco-2); }
  .rel-funil-linha { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 9rem; align-items: center; gap: var(--espaco-2); font-size: var(--texto-pequeno); }
  .rel-funil-valor { text-align: right; font-variant-numeric: tabular-nums; }
  .rel-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--espaco-4); align-items: start; }
  .rel-duas > div { display: grid; gap: var(--espaco-2); }
  .rel-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-1); font-size: var(--texto-pequeno); }
  .rel-lista li { display: flex; justify-content: space-between; gap: var(--espaco-3); border-bottom: 1px solid var(--cor-borda); padding-bottom: var(--espaco-1); }
  .rel-rodape { border-top: 1px solid var(--cor-borda); padding-top: var(--espaco-2); }
  .rcs-seg { display: flex; gap: var(--espaco-2); }
  .rcs-seg .botao { flex: 1; justify-content: center; }
  .rcs-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2); }
  .rcs-chip { min-height: 0; padding: var(--espaco-1) var(--espaco-2); font-family: var(--fonte-codigo); font-size: var(--texto-xs); }
  .rcs-chip-codigo { padding: var(--espaco-1) var(--espaco-2); background: var(--cor-fundo); border-radius: var(--raio); font-size: var(--texto-xs); }
  .rcs-botoes { display: grid; gap: var(--espaco-2); }
  .rcs-botao-linha { display: grid; grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--espaco-2); align-items: center; }
  .rcs-botao-linha > .entrada { width: auto; }
  /* contagens da campanha em três cards (envio, entrega e engajamento); o percentual vai ao lado do número, menor */
  .rcs-blocos { display: grid; gap: var(--espaco-3); }
  .rcs-bloco { display: grid; gap: var(--espaco-3); padding: var(--espaco-3) var(--espaco-4); background: var(--cor-fundo); border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); }
  .rcs-bloco-titulo { margin: 0; font-size: var(--texto-xs); font-weight: var(--peso-medio); color: var(--cor-texto-suave); }
  .rcs-contadores { display: flex; flex-wrap: wrap; gap: var(--espaco-4) var(--espaco-5); }
  .rcs-contagem { display: grid; gap: var(--espaco-1); justify-items: start; }
  .rcs-contagem-num { font-size: var(--texto-grande); font-weight: var(--peso-forte); }
  .rcs-contagem-pct { font-size: var(--texto-xs); font-weight: var(--peso-normal); color: var(--cor-texto-suave); }
  .rcs-resumo-base { display: grid; gap: var(--espaco-2); }
  .rcs-opcoes { display: grid; gap: var(--espaco-2); }
  .rcs-opcao { display: flex; gap: var(--espaco-2); align-items: flex-start; padding: var(--espaco-3); border: 1px solid var(--cor-borda); border-radius: var(--raio); cursor: pointer; }
  .rcs-opcao > span { display: grid; }
  .rcs-opcao-ativa { border-color: var(--cor-primaria); background: var(--cor-primaria-clara); }
  .rcs-opcao-desativada { cursor: not-allowed; background: var(--cor-fundo); color: var(--cor-texto-suave); }
  .rcs-resumo { display: grid; gap: var(--espaco-2); padding: var(--espaco-3); background: var(--cor-fundo); border-radius: var(--raio); }
  .rcs-resumo-linha { display: flex; justify-content: space-between; gap: var(--espaco-3); }
  .rcs-teste { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--espaco-2); align-items: end; }
  .rcs-acoes-direita { margin-top: var(--espaco-3); display: flex; justify-content: flex-end; gap: var(--espaco-2); }

  /* Pré-visualização: celular com a conversa */
  .rcs-previa h3 { margin: 0 0 var(--espaco-1); font-size: var(--texto-medio); }
  .rcs-previa p { margin: 0 0 var(--espaco-3); }
  .rcs-celular { width: 100%; max-width: 17rem; margin: 0 auto; border: 0.5rem solid var(--cor-menu); border-radius: 2rem; background: var(--cor-superficie); overflow: hidden; }
  .rcs-celular-tela { display: flex; flex-direction: column; min-height: 27rem; }
  .rcs-celular-cab { display: flex; align-items: center; gap: var(--espaco-2); padding: var(--espaco-3) var(--espaco-3) var(--espaco-2); border-bottom: 1px solid var(--cor-borda); }
  .rcs-celular-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--raio-total); background: var(--cor-primaria); color: var(--cor-sobre-escuro); }
  .rcs-celular-avatar .icone { width: 1rem; height: 1rem; }
  .rcs-celular-nome { display: inline-flex; align-items: center; gap: var(--espaco-1); font-weight: var(--peso-forte); font-size: var(--texto-pequeno); }
  .rcs-celular-nome .icone { width: 1rem; height: 1rem; color: var(--cor-primaria); }
  .rcs-celular-conversa { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espaco-1); flex: 1; padding: var(--espaco-3); }
  .rcs-balao { max-width: 100%; padding: var(--espaco-2) var(--espaco-3); background: var(--cor-fundo); border-radius: var(--raio-grande); font-size: var(--texto-pequeno); white-space: pre-wrap; overflow-wrap: anywhere; }
  .rcs-balao-vazio { color: var(--cor-texto-suave); }
  .rcs-cartao { width: 100%; border: 1px solid var(--cor-borda); border-radius: var(--raio-grande); overflow: hidden; background: var(--cor-superficie); font-size: var(--texto-pequeno); }
  .rcs-cartao-img { display: block; width: 100%; max-height: 9rem; object-fit: cover; }
  .rcs-cartao-img-vazia { display: grid; justify-items: center; gap: var(--espaco-1); padding: var(--espaco-3); background: var(--cor-fundo); color: var(--cor-texto-suave); text-align: center; font-size: var(--texto-xs); }
  .rcs-cartao-titulo { padding: var(--espaco-2) var(--espaco-3) 0; font-weight: var(--peso-forte); overflow-wrap: anywhere; }
  .rcs-cartao-texto { padding: var(--espaco-1) var(--espaco-3) var(--espaco-2); white-space: pre-wrap; overflow-wrap: anywhere; }
  .rcs-cartao-botoes { display: grid; border-top: 1px solid var(--cor-borda); }
  .rcs-cartao-botao { padding: var(--espaco-2) var(--espaco-3); text-align: center; color: var(--cor-primaria); font-weight: var(--peso-medio); }
  .rcs-cartao-botao + .rcs-cartao-botao { border-top: 1px solid var(--cor-borda); }
  .rcs-celular-hora { font-size: var(--texto-minimo); color: var(--cor-texto-suave); }
  .rcs-celular-entrada { display: flex; justify-content: space-between; align-items: center; margin: var(--espaco-2) var(--espaco-3) var(--espaco-3); padding: var(--espaco-2) var(--espaco-3); background: var(--cor-fundo); border-radius: var(--raio-total); color: var(--cor-texto-suave); font-size: var(--texto-xs); }
  .rcs-celular-entrada .icone { width: 1rem; height: 1rem; }

  /* Acompanhamento da campanha */
  .rcs-progresso-linha { display: flex; align-items: center; gap: var(--espaco-3); margin: var(--espaco-3) 0; }
  .rcs-progresso { flex: 1; height: 0.75rem; appearance: none; border: 0; border-radius: var(--raio-total); overflow: hidden; background: var(--cor-fundo); }
  .rcs-progresso::-webkit-progress-bar { background: var(--cor-fundo); }
  .rcs-progresso::-webkit-progress-value { background: var(--cor-primaria); border-radius: var(--raio-total); }
  .rcs-progresso::-moz-progress-bar { background: var(--cor-primaria); border-radius: var(--raio-total); }
  .rcs-progresso-texto { min-width: 3rem; text-align: right; font-weight: var(--peso-forte); }
}

@layer componentes {
  .selo { display: inline-block; padding: 0 var(--espaco-2); border-radius: 999px; font-size: var(--texto-pequeno); font-weight: var(--peso-forte); white-space: nowrap; }
  .selo-sucesso { color: var(--cor-sucesso); background: var(--cor-sucesso-fundo); }
  .selo-aviso { color: var(--cor-aviso); background: var(--cor-aviso-fundo); }
  .selo-erro { color: var(--cor-erro); background: var(--cor-erro-fundo); }
  .selo-neutro { color: var(--cor-texto-suave); background: var(--cor-fundo); border: 1px solid var(--cor-borda); }
}
@layer componentes {
  .selo-info { color: var(--cor-primaria); background: var(--cor-primaria-clara); }
  .selo-roxo { color: var(--cor-roxo); background: var(--cor-roxo-fundo); }
  .selo-com-marca { display: inline-flex; align-items: center; gap: var(--espaco-2); padding: var(--espaco-1) var(--espaco-3); }
  .selo-com-marca .icone { width: var(--tamanho-icone-pequeno); height: var(--tamanho-icone-pequeno); }
  .selo-ponto { width: var(--tamanho-ponto); height: var(--tamanho-ponto); border-radius: var(--raio-total); background: currentcolor; }
}

@layer componentes {
  .tabela-rolagem { overflow-x: auto; }
  .tabela { width: 100%; border-collapse: collapse; }
  .tabela th, .tabela td { padding: var(--espaco-2) var(--espaco-3); font-variant-numeric: tabular-nums; text-align: left; border-bottom: 1px solid var(--cor-borda); vertical-align: middle; }
  .tabela th { font-size: var(--texto-pequeno); color: var(--cor-texto-suave); text-transform: uppercase; letter-spacing: 0.03em; }
  .tabela-acoes { white-space: nowrap; text-align: right; }

  @media (max-width: 40rem) {
    .tabela thead { display: none; }
    .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
    .tabela tr { border-bottom: 1px solid var(--cor-borda); padding: var(--espaco-2) 0; }
    .tabela td { border: 0; padding: var(--espaco-1) 0; }
    .tabela td[data-rotulo]::before { content: attr(data-rotulo) ": "; font-weight: var(--peso-forte); color: var(--cor-texto-suave); }
    .tabela-acoes { text-align: left; }
  }
}

@layer componentes {
  .toasts { position: fixed; right: var(--espaco-3); bottom: var(--espaco-3); display: grid; gap: var(--espaco-2); z-index: 100; max-width: calc(100vw - 2rem); }
  .toast { display: flex; gap: var(--espaco-2); align-items: center; padding: var(--espaco-2) var(--espaco-3); border-radius: var(--raio); box-shadow: var(--sombra-forte); color: var(--cor-sobre-escuro); }
  .toast-sucesso { background: var(--cor-sucesso); }
  .toast-erro { background: var(--cor-erro); }
}

@layer componentes {
  /* Botão que abre o menu: só aparece no celular (no desktop o menu já está visível) */
  .topo-menu { display: none; }
  @media (max-width: 52rem) { .topo-menu { display: inline-flex; } }
}

@layer componentes {
  /* Área de arquivo (zonaArquivo): borda tracejada, clique ou arraste; o input do navegador fica escondido mas acessível */
  .zona-arquivo-campo { display: grid; gap: var(--espaco-1); min-width: 0; }
  .zona-arquivo {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 7.5rem;
    padding: var(--espaco-3);
    border: 1px dashed var(--cor-borda-forte);
    border-radius: var(--raio-grande);
    background: var(--cor-fundo);
    text-align: center;
    cursor: pointer;
  }
  .zona-arquivo:hover, .zona-arquivo-sobre { border-color: var(--cor-primaria); background: var(--cor-primaria-clara); }
  .zona-arquivo:focus-within { box-shadow: var(--foco); }
  .zona-arquivo-cheia { border-style: solid; border-color: var(--cor-primaria); background: var(--cor-primaria-clara); }
  .zona-arquivo-entrada { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .zona-arquivo-conteudo { display: grid; justify-items: center; gap: var(--espaco-1); min-width: 0; max-width: 100%; }
  .zona-arquivo-icone { width: var(--tamanho-icone-bloco-interno); height: var(--tamanho-icone-bloco-interno); color: var(--cor-texto-suave); }
  .zona-arquivo-cheia .zona-arquivo-icone { color: var(--cor-primaria); }
  .zona-arquivo-texto { font-weight: var(--peso-medio); }
  .zona-arquivo-nome { max-width: 100%; overflow-wrap: anywhere; font-weight: var(--peso-medio); }
  .zona-arquivo-dica { font-size: var(--texto-pequeno); color: var(--cor-texto-suave); }
  .zona-arquivo-remover { min-height: 0; padding: var(--espaco-1) var(--espaco-2); font-size: var(--texto-pequeno); }
  .zona-arquivo-erro { margin: 0; font-size: var(--texto-pequeno); color: var(--cor-erro); }
  .zona-arquivo-erro:empty { display: none; }
  /* Bloqueada (ex.: falta definir o cliente): cinza, sem clique nem arraste */
  .zona-arquivo-bloqueada, .zona-arquivo-bloqueada:hover { border-color: var(--cor-borda-forte); background: var(--cor-fundo); cursor: not-allowed; opacity: 0.6; }
}

@layer utilitarios {
  .texto-suave { color: var(--cor-texto-suave); }
  .texto-pequeno { font-size: var(--texto-pequeno); }
  .texto-centro { text-align: center; }
  [hidden] { display: none !important; }

  /* Escala de tamanhos de fonte (usadas na página /#estilo e quando um tamanho específico for necessário) */
  .tam-11 { font-size: var(--tam-11); }
  .tam-12 { font-size: var(--tam-12); }
  .tam-13 { font-size: var(--tam-13); }
  .tam-14 { font-size: var(--tam-14); }
  .tam-16 { font-size: var(--tam-16); }
  .tam-18 { font-size: var(--tam-18); }
  .tam-20 { font-size: var(--tam-20); }
  .tam-22 { font-size: var(--tam-22); }
  .tam-24 { font-size: var(--tam-24); }
  .tam-32 { font-size: var(--tam-32); }
}

@layer impressao {
  @media print {
    .faixa-qa, .menu-lateral, .topo-menu, .toasts, .app-fundo { display: none; }
    body { display: block; height: auto; overflow: visible; background: var(--cor-superficie); }
    #raiz { display: block; overflow: visible; }
    .app-shell { display: block; height: auto; }
    .pagina { overflow: visible; }
  }
}