/* Semperion · padrão visual
   Azul escuro #1e3148 texto e menu, #123a57 botões principais,
   teal #0097b2 com destaque #c0f0f7, Montserrat, cards arredondados. */

:root {
  --tinta: #1e3148;
  --tinta-2: #4a5b70;
  --tinta-3: #8795a6;
  --botao: #123a57;
  --botao-escuro: #0d2c43;
  --teal: #0097b2;
  --teal-claro: #c0f0f7;
  --vermelho: #8f1d1d;
  --ambar: #a8661a;
  --verde: #1b6e4f;

  --fundo: #f4f6f9;
  --papel: #ffffff;
  --papel-2: #fafbfc;
  --borda: #e2e7ee;
  --borda-forte: #cdd5e0;
  --sombra: 0 1px 2px rgba(30, 49, 72, .06), 0 4px 16px rgba(30, 49, 72, .06);
  --sombra-alta: 0 8px 40px rgba(30, 49, 72, .16);

  --r: 14px;
  --r-p: 9px;
  --menu: 236px;

  color-scheme: light;
}

:root[data-tema="escuro"] {
  --tinta: #e8edf4;
  --tinta-2: #a9b6c7;
  --tinta-3: #76859a;
  --botao: #1d5680;
  --botao-escuro: #16415f;
  --teal: #2bb8d2;
  --teal-claro: #0d3f4a;
  --vermelho: #b33636;
  --ambar: #d08a2e;
  --verde: #2e9b72;

  --fundo: #0e1620;
  --papel: #16202c;
  --papel-2: #1b2735;
  --borda: #26323f;
  --borda-forte: #33424f;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --sombra-alta: 0 8px 40px rgba(0, 0, 0, .5);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.01em; }

a { color: var(--teal); }

/* ---------- utilitários ---------- */

.oculto { display: none !important; }

.numero {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.girando { animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- carregando ---------- */

#carregando {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--fundo);
  z-index: 100;
}

.pulso {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 3px solid var(--borda);
  border-top-color: var(--teal);
  animation: girar .8s linear infinite;
}

/* ---------- entrada ---------- */

#entrada {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(0, 151, 178, .14), transparent 60%),
    radial-gradient(900px 480px at 100% 110%, rgba(18, 58, 87, .12), transparent 60%),
    var(--fundo);
}

.cartao-entrada {
  width: 100%;
  max-width: 408px;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 20px;
  box-shadow: var(--sombra-alta);
  padding: 34px 32px 30px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 26px;
}

.marca-selo {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--botao), var(--teal));
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 17px;
  flex: 0 0 auto;
}

.marca-nome {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.marca-sub {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--tinta-3);
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-top: 1px;
}

.passo-titulo { font-size: 17px; font-weight: 800; }
.passo-texto {
  font-size: 12.5px;
  color: var(--tinta-2);
  line-height: 1.55;
  margin: 7px 0 20px;
}

label.rotulo {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
  color: var(--tinta-2);
  margin-bottom: 6px;
}

.campo {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-p);
  background: var(--papel);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}

.campo:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-claro);
}

.campo:disabled { background: var(--papel-2); color: var(--tinta-3); }

textarea.campo { height: auto; padding: 9px 11px; resize: vertical; }

.campo-codigo {
  height: 52px;
  font-size: 23px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .34em;
  font-variant-numeric: tabular-nums;
}

.botao {
  height: 40px;
  padding: 0 17px;
  border: 0;
  border-radius: var(--r-p);
  background: var(--botao);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .12s, transform .06s, opacity .12s;
  white-space: nowrap;
}

.botao:hover:not(:disabled) { background: var(--botao-escuro); }
.botao:active:not(:disabled) { transform: translateY(1px); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao:focus-visible { outline: 3px solid var(--teal-claro); outline-offset: 1px; }

.botao-largo { width: 100%; }

.botao-cancelar { background: var(--vermelho); }
.botao-cancelar:hover:not(:disabled) { background: #751717; }

.botao-claro {
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--borda-forte);
}
.botao-claro:hover:not(:disabled) { background: var(--papel-2); border-color: var(--tinta-3); }

.botao-texto {
  background: none;
  border: 0;
  color: var(--teal);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  padding: 7px 2px;
}
.botao-texto:hover { text-decoration: underline; }

.aviso {
  margin-top: 15px;
  padding: 11px 13px;
  border-radius: var(--r-p);
  font-size: 12.5px;
  line-height: 1.5;
  border: 1px solid;
}

.aviso-erro { background: rgba(143, 29, 29, .08); border-color: rgba(143, 29, 29, .3); color: var(--vermelho); }
.aviso-ok { background: rgba(27, 110, 79, .08); border-color: rgba(27, 110, 79, .3); color: var(--verde); }
.aviso-atencao { background: rgba(168, 102, 26, .09); border-color: rgba(168, 102, 26, .3); color: var(--ambar); }
.aviso-info { background: var(--teal-claro); border-color: var(--teal); color: var(--tinta); }

.qr-caixa {
  display: grid;
  place-items: center;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: var(--r-p);
  margin-bottom: 15px;
}
/* O desenho do QR vem do serviço de entrada. Forçamos preto no branco e um
   tamanho generoso, porque câmera de celular erra com código pequeno ou de
   pouco contraste. */
.qr-caixa svg { width: 230px; height: 230px; display: block; color: #000; shape-rendering: crispEdges; }
.qr-caixa svg path, .qr-caixa svg rect:not(:first-child) { fill: #000; }
.qr-caixa img { width: 230px; height: 230px; display: block; image-rendering: pixelated; }

.segredo {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  background: var(--papel-2);
  border: 1px solid var(--borda);
  border-radius: 7px;
  padding: 9px 11px;
  word-break: break-all;
  text-align: center;
  letter-spacing: .04em;
}

/* ---------- moldura ---------- */

#moldura { display: flex; min-height: 100vh; }

#menu {
  width: var(--menu);
  flex: 0 0 var(--menu);
  background: var(--papel);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.menu-topo { padding: 20px 18px 16px; }

.menu-itens { flex: 1; padding: 6px 10px; overflow-y: auto; }

.menu-grupo {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinta-3);
  padding: 14px 10px 7px;
}

.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--tinta-2);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  margin-bottom: 2px;
  transition: background .12s, color .12s;
}

.menu-item:hover { background: var(--papel-2); color: var(--tinta); }

.menu-item.ativo {
  background: var(--teal-claro);
  color: var(--tinta);
  font-weight: 700;
}

.menu-item.ativo svg { color: var(--teal); }

.menu-item svg { width: 17px; height: 17px; flex: 0 0 auto; }

.menu-item.futuro { opacity: .42; cursor: default; }
.menu-item.futuro:hover { background: none; color: var(--tinta-2); }

.selo-breve {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-3);
  border: 1px solid var(--borda-forte);
  border-radius: 20px;
  padding: 2px 6px;
}

.menu-pe {
  border-top: 1px solid var(--borda);
  padding: 12px 14px 14px;
}

.menu-usuario {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}

.avatar {
  width: 29px; height: 29px;
  border-radius: 50%;
  background: var(--botao);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 800;
  flex: 0 0 auto;
}

.menu-usuario-nome {
  font-size: 12.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-usuario-papel { font-size: 10.5px; color: var(--tinta-3); }

.menu-acoes { display: flex; gap: 6px; }

.botao-icone {
  height: 31px;
  padding: 0 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: none;
  color: var(--tinta-2);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .12s, color .12s;
}
.botao-icone:hover { background: var(--papel-2); color: var(--tinta); }
.botao-icone svg { width: 14px; height: 14px; }

/* ---------- conteúdo ---------- */

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

.barra-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 18px;
  flex-wrap: wrap;
}

.barra-topo h1 { font-size: 23px; }
.barra-topo .subtitulo { font-size: 12.5px; color: var(--tinta-3); margin-top: 4px; }
.barra-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.area { padding: 0 28px 36px; }

/* ---------- indicadores ---------- */

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

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

.indicador-rotulo {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-3);
  display: flex;
  align-items: center;
  gap: 6px;
}

.indicador-valor {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-top: 7px;
  font-variant-numeric: tabular-nums;
}

.indicador-nota { font-size: 11.5px; color: var(--tinta-3); margin-top: 3px; }

.indicador.destaque { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), var(--sombra); }
.indicador.destaque .indicador-valor { color: var(--teal); }
.indicador.alerta .indicador-valor { color: var(--ambar); }

.barra-progresso {
  height: 5px;
  border-radius: 20px;
  background: var(--borda);
  overflow: hidden;
  margin-top: 10px;
}
.barra-progresso span { display: block; height: 100%; background: var(--teal); border-radius: 20px; }

/* ---------- ferramentas ---------- */

.ferramentas {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.busca { position: relative; flex: 1 1 230px; max-width: 330px; }
.busca svg {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--tinta-3);
  pointer-events: none;
}
.busca .campo { padding-left: 33px; }

.abas { display: inline-flex; background: var(--papel-2); border: 1px solid var(--borda); border-radius: 10px; padding: 3px; }

.remessa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 9px 3px 11px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--papel-2);
}

.remessa.ativa { border-color: var(--teal); background: var(--teal-claro); }

.remessa-rotulo {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-3);
}

.remessa.ativa .remessa-rotulo { color: var(--teal); }
.remessa-ate { font-size: 11.5px; color: var(--tinta-3); }

.campo-data {
  height: 32px;
  width: 134px;
  padding: 0 8px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.tabela-codigos td { padding: 7px 12px; }

.campo-codigo-asaas {
  height: 32px;
  font-size: 12.5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.campo-certo { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(27, 110, 79, .16); }
.campo-errado { border-color: var(--vermelho); box-shadow: 0 0 0 2px rgba(143, 29, 29, .16); }

.aba {
  border: 0;
  background: none;
  padding: 6px 13px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tinta-2);
  cursor: pointer;
}
.aba.ativa { background: var(--papel); color: var(--tinta); box-shadow: var(--sombra); }

/* ---------- filtros de forma e vencimento ---------- */

.filtros-vista {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 11px;
}

.filtros-vista .separador { width: 1px; height: 20px; background: var(--borda); margin: 0 6px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: var(--papel);
  color: var(--tinta-3);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.chip .numero { font-weight: 600; opacity: .8; }
.chip:hover { border-color: var(--tinta-3); }
.chip.ligado { background: var(--teal-claro); border-color: var(--teal); color: var(--tinta); }
.chip:focus-visible { outline: 3px solid var(--teal-claro); outline-offset: 1px; }

/* ---------- lista ---------- */

.lista { display: flex; flex-direction: column; gap: 8px; }

.linha-titulos {
  display: grid;
  grid-template-columns: 34px minmax(170px, 2.1fr) 120px 118px 104px 130px;
  gap: 12px;
  padding: 0 16px 7px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-3);
}

.linha-titulos .dir { text-align: right; }

.cobranca {
  display: grid;
  grid-template-columns: 34px minmax(170px, 2.1fr) 120px 118px 104px 130px;
  gap: 12px;
  align-items: center;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 12px 16px;
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}

.cobranca:hover { border-color: var(--borda-forte); }
.cobranca.marcada { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), var(--sombra); }
.cobranca.bloqueada { opacity: .62; }

.cobranca-nome { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cobranca-nota { font-size: 11px; color: var(--tinta-3); margin-top: 2px; }
.cobranca-valor { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.cobranca-data { font-size: 12.5px; font-variant-numeric: tabular-nums; }

input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--teal);
  cursor: pointer;
  margin: 0;
}

.pilula {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 23px;
  padding: 0 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.pilula-pix { background: rgba(0, 151, 178, .13); color: var(--teal); }
.pilula-boleto { background: rgba(30, 49, 72, .09); color: var(--tinta-2); }
.pilula-cartao { background: rgba(168, 102, 26, .13); color: var(--ambar); }
.pilula-atraso { background: rgba(143, 29, 29, .1); color: var(--vermelho); }
.pilula-hoje { background: rgba(168, 102, 26, .13); color: var(--ambar); }
.pilula-ok { background: rgba(27, 110, 79, .12); color: var(--verde); }
.pilula-neutra { background: var(--papel-2); color: var(--tinta-3); border: 1px solid var(--borda); }
.pilula-falhou { background: rgba(143, 29, 29, .1); color: var(--vermelho); }

:root[data-tema="escuro"] .pilula-pix { background: rgba(43, 184, 210, .16); }
:root[data-tema="escuro"] .pilula-boleto { background: rgba(255, 255, 255, .09); color: var(--tinta-2); }
:root[data-tema="escuro"] .pilula-cartao { background: rgba(208, 138, 46, .17); }
:root[data-tema="escuro"] .pilula-atraso,
:root[data-tema="escuro"] .pilula-falhou { background: rgba(224, 102, 102, .15); color: #e08b8b; }
:root[data-tema="escuro"] .pilula-hoje { background: rgba(208, 138, 46, .17); }
:root[data-tema="escuro"] .pilula-ok { background: rgba(46, 155, 114, .17); color: #5ac79b; }

.vazio {
  text-align: center;
  padding: 56px 24px;
  color: var(--tinta-3);
}
.vazio svg { width: 40px; height: 40px; margin-bottom: 14px; opacity: .55; }
.vazio-titulo { font-size: 15px; font-weight: 700; color: var(--tinta-2); margin-bottom: 6px; }
.vazio p { font-size: 12.5px; line-height: 1.6; max-width: 380px; margin: 0 auto; }

/* ---------- barra de seleção ---------- */

.barra-selecao {
  position: sticky;
  bottom: 16px;
  margin: 16px 0 0;
  background: var(--tinta);
  color: #fff;
  border-radius: var(--r);
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--sombra-alta);
  flex-wrap: wrap;
}

:root[data-tema="escuro"] .barra-selecao { background: var(--papel-2); border: 1px solid var(--borda-forte); color: var(--tinta); }

.barra-selecao .resumo { font-size: 13px; font-weight: 700; }
.barra-selecao .resumo span { font-variant-numeric: tabular-nums; }
.barra-selecao .detalhe { font-size: 11.5px; opacity: .72; margin-top: 2px; }
.barra-selecao .espaco { flex: 1; }

.barra-selecao .botao-claro {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}
.barra-selecao .botao-claro:hover { background: rgba(255, 255, 255, .12); }

:root[data-tema="escuro"] .barra-selecao .botao-claro { color: var(--tinta); border-color: var(--borda-forte); }

.botao-enviar { background: var(--teal); }
.botao-enviar:hover:not(:disabled) { background: #007e96; }

/* ---------- popup ---------- */

.fundo-popup {
  position: fixed;
  inset: 0;
  background: rgba(14, 22, 32, .52);
  display: grid;
  place-items: center;
  padding: 22px;
  z-index: 60;
  overflow-y: auto;
}

.popup {
  width: 100%;
  max-width: 560px;
  background: var(--papel);
  border-radius: 18px;
  box-shadow: var(--sombra-alta);
  padding: 24px 26px 22px;
  margin: auto;
}

.popup-largo { max-width: 760px; }

.popup-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.popup-titulo { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.popup-sub { font-size: 12px; color: var(--tinta-3); margin-top: 4px; }

.fechar {
  border: 0;
  background: none;
  color: var(--tinta);
  cursor: pointer;
  padding: 2px;
  line-height: 0;
  flex: 0 0 auto;
}
.fechar svg { width: 21px; height: 21px; stroke-width: 2.6; }
.fechar:hover { color: var(--teal); }

.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }

.popup-pe {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--borda);
}

.detalhe-linha {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
}
.detalhe-linha:last-child { border-bottom: 0; }
.detalhe-linha .rot { color: var(--tinta-3); font-weight: 600; }
.detalhe-linha .val { font-weight: 700; text-align: right; }

.previa {
  background: var(--papel-2);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.62;
  white-space: pre-wrap;
}

/* ---------- tabela de conferência ---------- */

.rolagem { max-height: 330px; overflow: auto; border: 1px solid var(--borda); border-radius: 10px; }

table.conferencia { width: 100%; border-collapse: collapse; font-size: 12.5px; }

table.conferencia th {
  position: sticky;
  top: 0;
  background: var(--papel-2);
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tinta-3);
  padding: 9px 12px;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}

table.conferencia td { padding: 9px 12px; border-bottom: 1px solid var(--borda); }
table.conferencia tr:last-child td { border-bottom: 0; }
table.conferencia td.dir { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- recados ---------- */

#recados {
  position: fixed;
  right: 18px; bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 80;
  max-width: 350px;
}

.recado {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--teal);
  border-radius: 11px;
  box-shadow: var(--sombra-alta);
  padding: 12px 15px;
  font-size: 12.5px;
  line-height: 1.5;
  animation: entrar .18s ease-out;
}

.recado.erro { border-left-color: var(--vermelho); }
.recado.ok { border-left-color: var(--verde); }
.recado-titulo { font-weight: 800; margin-bottom: 2px; }

@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* ---------- telas estreitas ---------- */

@media (max-width: 900px) {
  #moldura { flex-direction: column; }

  #menu {
    width: 100%;
    flex: none;
    height: auto;
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--borda);
  }

  .menu-itens { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; }
  .menu-item { margin: 0; white-space: nowrap; }
  .menu-grupo, .selo-breve { display: none; }
  .menu-item.futuro { display: none; }
  .menu-pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .menu-usuario { margin: 0; }

  .barra-topo, .area { padding-left: 16px; padding-right: 16px; }

  .linha-titulos { display: none; }

  .cobranca {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 10px;
    padding: 13px 15px;
  }
  .cobranca::after { content: ''; flex-basis: 100%; height: 0; order: 4; }
  .cobranca > .marca { order: 1; }
  .cobranca > .cobranca-corpo { order: 2; flex: 1 1 auto; min-width: 0; }
  .cobranca > .cobranca-valor { order: 3; margin-left: auto; }
  .cobranca > .cobranca-data { order: 5; color: var(--tinta-2); }
  .cobranca > .cobranca-atraso { order: 6; }
  .cobranca > .cobranca-forma { order: 7; }

  .grade-2, .grade-3 { grid-template-columns: 1fr; }
}