/* Telas da Consultoria para Famílias e Empresas, frente D (10/11/2026 noite): importação (importar.js), relatórios em
   PDF (relatorios.js) e mensagens prontas (mensagens.js). Paleta do produto pelos tokens do app.css (--navy #082b24,
   --navy2 #123d31, --copper-light #d8bc7e, --paper #f5f2e9). Ligada por estas telas na primeira abertura. De 320 a
   1920 sem rolagem lateral; alvo de toque de 44 px; tabela vira cartão abaixo de 980 px (regra do app.css). */

/* ---------- comum ---------- */
.tela-relatorios, .tela-mensagens { display: grid; gap: 18px; min-width: 0; }
.tela-relatorios .panel, .tela-mensagens .panel { min-width: 0; }
.rel-tipo, .msg-modelo, .rel-pessoa {
  display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .15s, background-color .15s;
}
.rel-tipo input, .msg-modelo input, .rel-pessoa input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--navy2); }
.rel-tipo span, .msg-modelo span, .rel-pessoa span { display: grid; gap: 3px; min-width: 0; }
.rel-tipo strong, .msg-modelo strong, .rel-pessoa strong { color: var(--ink); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.rel-tipo small, .msg-modelo small, .rel-pessoa small { color: var(--muted); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }
.rel-tipo:hover, .msg-modelo:hover, .rel-pessoa:hover { border-color: var(--copper-light); }
.rel-tipo.is-ativo, .msg-modelo.is-ativo { border-color: var(--navy2); background: color-mix(in srgb, var(--copper-light) 12%, white); box-shadow: inset 3px 0 0 var(--copper-light); }
.rel-tipo:focus-within, .msg-modelo:focus-within, .rel-pessoa:focus-within { outline: 2px solid var(--copper-light); outline-offset: 2px; }
.rel-pessoa.is-off { cursor: not-allowed; opacity: .6; }
.rel-pessoas { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.rel-pessoas legend { margin-bottom: 8px; color: var(--ink); font-size: 12px; font-weight: 600; }
.rel-anexo, .imp-ignorar label { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink); font-size: 13px; cursor: pointer; }
.rel-anexo input, .imp-ignorar input { width: 18px; height: 18px; accent-color: var(--navy2); }

/* ---------- relatórios ---------- */
.rel-tipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.rel-linha { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 18px; }
.rel-mes { margin: 0; min-width: min(100%, 220px); }
.rel-mes select { min-height: 44px; }
.rel-acoes { display: flex; flex-wrap: wrap; gap: 10px; }
.rel-acoes .btn, .rel-lista .panel-head .btn, .rel-gerar .panel-head .btn { min-height: 44px; }
.rel-envios td small { color: var(--muted); }
.rel-situacao small { margin-top: 5px; }
.rel-acao { text-align: right; white-space: nowrap; }
.rel-acao .btn { min-height: 40px; }
.rel-envios tr.is-destaque td { background: color-mix(in srgb, var(--copper-light) 18%, white); }
@media (max-width: 980px) {
  .rel-envios tr { grid-template-columns: 1fr; }
  .rel-envios tr.is-destaque { background: color-mix(in srgb, var(--copper-light) 18%, white); }
  .rel-acao { text-align: left; }
  .rel-acao:empty, .rel-acao:empty::before { display: none; }
}

/* ---------- mensagens ---------- */
.msg-grade { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 18px; align-items: start; min-width: 0; }
.msg-lista fieldset { display: grid; gap: 8px; margin: 0; border: 0; min-width: 0; }
.msg-coluna { display: grid; gap: 18px; min-width: 0; }
.msg-barra { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.msg-barra .btn, .msg-previa .panel-head .btn { min-height: 44px; }
.msg-duas { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
.msg-email { padding: 16px 18px; border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: 10px; background: #fff; color: var(--ink); font-size: 13px; line-height: 1.55; min-width: 0; overflow-wrap: anywhere; }
.msg-email h3 { margin: 0 0 10px; color: var(--navy2); font-size: 16px; }
.msg-email p { margin: 0 0 10px; }
.msg-assunto { padding-bottom: 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.msg-assunto span { color: var(--ink); font-weight: 600; }
.msg-itens { list-style: none; margin: 4px 0 12px; padding: 0; }
.msg-itens li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.msg-itens li span { display: grid; gap: 2px; min-width: 0; }
.msg-itens small { color: var(--muted); font-size: 11.5px; }
.msg-itens em { flex: 0 0 auto; font-style: normal; font-weight: 600; white-space: nowrap; }
.msg-botao { display: inline-block; margin-top: 4px; padding: 10px 16px; border-radius: 8px; background: var(--navy2); color: #fff; font-weight: 600; }
.msg-zap { display: grid; gap: 8px; align-content: start; min-width: 0; }
.msg-zap label { color: var(--ink); font-size: 12px; font-weight: 600; }
.msg-zap textarea { width: 100%; min-height: 220px; resize: vertical; font: inherit; font-size: 13px; line-height: 1.5; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px; color: var(--ink); }
@media (max-width: 1180px) { .msg-duas { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .msg-grade { grid-template-columns: 1fr; } }

/* ---------- importação (janela larga do consultoria.js) ---------- */
.imp .dialog-body { display: grid; gap: 14px; min-width: 0; }
.imp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.imp-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 12px; color: var(--muted); }
.imp-chip strong { color: var(--ink); font-size: 13px; }
.imp-chip.is-erro { border-color: color-mix(in srgb, var(--red) 35%, white); background: color-mix(in srgb, var(--red) 8%, white); }
.imp-chip.is-erro strong { color: var(--red); }
.imp-avisos { padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--amber) 35%, white); border-left: 4px solid var(--amber); border-radius: 8px; background: color-mix(in srgb, var(--copper-light) 16%, white); font-size: 12px; color: var(--ink); }
.imp-avisos summary { min-height: 32px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.imp-avisos ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.imp-abas h3, .imp-grupo h3 { margin: 0; color: var(--navy2); font-size: 13px; }
.imp-abas ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.imp-abas li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.imp-abas .btn, .imp-grupo-acoes .btn { min-height: 40px; }
.imp-grupo { display: grid; gap: 8px; min-width: 0; }
.imp-grupo-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.imp-grupo-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.imp-tabela td, .imp-amostra td { overflow-wrap: anywhere; }
.imp-marca { width: 44px; }
.imp-marca input { width: 20px; height: 20px; accent-color: var(--navy2); }
.imp-tabela label { cursor: pointer; }
.imp-erro { color: var(--red); font-weight: 600; }
.imp-aviso { color: var(--amber); }
.imp-amostra { max-height: 260px; overflow: auto; }
.imp-amostra td, .imp-amostra th { font-size: 11px; padding: 6px 9px; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 980px) {
  .imp-tabela tr { grid-template-columns: 44px minmax(0, 1fr); }
  .imp-tabela td { grid-column: 2; }
  .imp-tabela td.imp-marca { grid-column: 1; grid-row: 1 / span 5; }
  .imp-tabela td.imp-marca::before { display: none; }
  .imp-amostra .data-table thead { display: table-header-group; }
  .imp-amostra .data-table, .imp-amostra .data-table tbody { display: table; width: 100%; }
  .imp-amostra .data-table tr { display: table-row; padding: 0; }
  .imp-amostra .data-table td { display: table-cell; }
  .imp-amostra .data-table td::before { display: none; }
}
@media (max-width: 560px) {
  .rel-linha { align-items: stretch; }
  .rel-acoes, .rel-acoes .btn { width: 100%; }
  .rel-acoes .btn { justify-content: center; }
  .msg-barra .btn { width: 100%; justify-content: center; }
}