/* Classes ds-* do design system NeoAtend — CÓPIA LITERAL, não editar aqui.
   Origem: NeoAccess/design-system/components/bundle.css (onda 3, 22/10/2026),
   quatro seções sem edição: "Tela e painel", "Abas", "Pílula de estado" e
   "Formulário e detalhe" até o fim. O bundle inteiro não serve: ele também
   define body, .botao, .campo e .cartao, que o Admin ainda usa com outro
   desenho (o Monitor também copia as ds-* para a folha dele). Para atualizar,
   recopie as mesmas quatro seções do bundle.css. Ajustes do Admin vão no
   estilo.css, nunca aqui.
   Tokens: no :root do estilo.css. */

/* ── Tela e painel (PADRAO-DE-TELA) ───────────────────────────────────── */
.tela { height: 100dvh; overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: var(--espaco-5); padding: var(--espaco-5) var(--espaco-6); box-sizing: border-box; }
.tela-topo { min-height: var(--altura-topo); display: flex; align-items: center; gap: var(--espaco-5); padding: 0 var(--espaco-5); background: var(--topo-fundo); color: var(--topo-texto); border-radius: var(--raio); }
.tela-topo h1 { margin: 0; font-size: 1rem; font-weight: 700; }
.tela-abas { display: none; gap: var(--espaco-1); }
.tela-grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--espaco-5); min-height: 0; }
.painel { display: flex; flex-direction: column; min-height: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.painel-topo { flex: none; min-height: var(--altura-cabeca); display: flex; align-items: center; gap: var(--espaco-3); padding: 0 var(--espaco-4); border-bottom: 1px solid var(--borda); font-size: .84rem; font-weight: 700; }
.painel-topo .acoes { margin-left: auto; display: flex; gap: var(--espaco-2); }
.painel-corpo { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--espaco-2); padding: var(--espaco-2); }
.painel-corpo thead th { position: sticky; top: 0; background: var(--superficie-2); }
@media (max-width: 1199px) { .tela-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .tela-abas { display: flex; }
  .tela-grade { grid-template-columns: minmax(0, 1fr); }
  .tela-grade > .painel:not(.ativo) { display: none; }
}

/* ── Abas ─────────────────────────────────────────────────────────────── */
.abas { display: flex; gap: var(--espaco-5); border-bottom: 1px solid var(--borda); }
.aba { padding: var(--espaco-3) 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--texto-fraco); font: 700 .74rem var(--font-sans); cursor: pointer; display: inline-flex; gap: var(--espaco-1); align-items: center; }
.aba[aria-selected="true"] { color: var(--azul); border-bottom-color: var(--azul); }

/* ── Pílula de estado ─────────────────────────────────────────────────── */
.pilula { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--raio-3); font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--superficie-2); color: var(--texto-fraco); }
.pilula.azul { background: var(--azul-esc); color: var(--azul); }
.pilula.verde { background: var(--verde-esc); color: var(--verde); }
.pilula.laranja { background: var(--laranja-esc); color: var(--laranja); }
.pilula.vermelho { background: var(--vermelho-esc); color: var(--vermelho); }
.pilula.roxo { background: var(--roxo-esc); color: var(--roxo); }

/* ── Formulário e detalhe ("estilo Apple", 20/10/2026) ──────────────────
   Grupos de linhas no lugar de caixas, segmentado, chave, número de destaque,
   cartão limpo e barra de ações. Nasceu nas telas de OS do Monitor (v1.145);
   as mesmas classes ds-* lá e aqui. Ver "Dois estilos de tela" no guia. */
.ds-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--superficie-3); }
.ds-seg > button { height: 28px; padding: 0 16px; border: 0; border-radius: 7px; background: none; font: inherit;
  font-size: .8rem; font-weight: 600; color: var(--texto); cursor: pointer; }
.ds-seg > button[aria-selected="true"] { background: var(--superficie); box-shadow: 0 1px 3px rgba(15,30,51,.12); }
.ds-barra { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 4px; }
.ds-barra-det { justify-content: space-between; }
.ds-barra-titulo { font-size: .95rem; }
.ds-barra-dir { display: flex; align-items: center; gap: 16px; }
.ds-texto-btn { border: 0; background: none; padding: 6px 0; font: inherit; font-size: .9rem; color: var(--azul); cursor: pointer; }
.ds-texto-btn:hover { text-decoration: underline; }
.ds-col { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 18px; padding: 8px 2px 16px; }
.ds-cab { display: flex; flex-direction: column; gap: 2px; padding-left: 4px; }
.ds-h1 { margin: 0; font-size: 1.55rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
.ds-h1-grande { font-size: 1.75rem; }
.ds-h2 { margin: 0; font-size: 1.2rem; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.ds-sub { margin: 0; font-size: .8rem; color: var(--texto-fraco); }
.ds-bloco { display: flex; flex-direction: column; }
.ds-gt { margin: 0 0 6px 14px; font-size: .78rem; font-weight: 600; color: var(--texto-fraco); }
.ds-grupo { background: var(--superficie); border-radius: 12px; overflow: hidden; }
.ds-linha { position: relative; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 7px 14px;
  box-sizing: border-box; width: 100%; border: 0; background: none; text-align: left; font: inherit; font-size: .86rem; color: var(--texto); }
.ds-linha + .ds-linha::before { content: ""; position: absolute; top: 0; left: 14px; right: 0; height: 1px; background: var(--borda); }
button.ds-linha, label.ds-linha { cursor: pointer; }
button.ds-linha:hover { background: var(--superficie-2); }
.ds-linha.sel { background: var(--azul-esc); }
.ds-rot { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ds-val { color: var(--texto-fraco); text-align: right; max-width: 60%; overflow-wrap: anywhere; }
.ds-val-forte { color: var(--texto); }
.ds-sec { font-size: .74rem; color: var(--texto-fraco); margin-top: 1px; }
.ds-forte { font-weight: 600; }
.ds-fraco { color: var(--texto-fraco); }
.ds-num { font-variant-numeric: tabular-nums; }
.ds-nota { margin: 6px 14px 0; font-size: .74rem; line-height: 1.4; color: var(--texto-fraco); }
.ds-centro { text-align: center; margin: 0; }
.ds-seta { color: var(--borda-forte); flex: none; }
.ds-sel { max-width: 62%; appearance: none; -webkit-appearance: none; border: 0; background: none; background-image: none; padding: 0;
  font: inherit; font-size: .86rem; color: var(--texto-fraco); text-align: right; text-align-last: right; cursor: pointer; }
.ds-sel:focus-visible, .ds-entrada:focus-visible, .ds-valor:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
.ds-entrada { flex: 0 1 60%; min-width: 0; border: 0; background: none; font: inherit; font-size: .86rem; color: var(--texto); text-align: right; }
.ds-entrada::placeholder { color: var(--texto-fraco); }
.ds-valor { width: 86px; height: 30px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--borda-campo);
  border-radius: 8px; background: var(--superficie); font: inherit; font-size: .84rem; text-align: right; font-variant-numeric: tabular-nums; }
.ds-texto { display: block; width: 100%; box-sizing: border-box; min-height: 70px; padding: 11px 14px; border: 0; background: none;
  font: inherit; font-size: .86rem; color: var(--texto); resize: vertical; }
.ds-texto:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.ds-av { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: .78rem; font-weight: 700; color: var(--azul); background: var(--azul-esc); }
.ds-ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; vertical-align: middle; }
.ds-preco { font-weight: 600; font-variant-numeric: tabular-nums; }
.ds-add { flex: none; border: 0; border-radius: 999px; padding: 6px 14px; background: var(--azul-esc); color: var(--azul);
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.ds-add:hover { filter: brightness(.97); }
.ds-add:disabled { opacity: .5; cursor: default; }
.ds-passo { flex: none; display: inline-flex; align-items: center; border-radius: 8px; background: var(--superficie-2); }
.ds-passo button { width: 32px; height: 30px; border: 0; background: none; font-size: 1.1rem; color: var(--azul); cursor: pointer; }
.ds-passo span { min-width: 20px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.ds-check { color: var(--azul); font-weight: 700; flex: none; }
.ds-chave { appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 26px; margin: 0; border-radius: 999px;
  background: var(--superficie-3); position: relative; cursor: pointer; transition: background .15s; }
.ds-chave::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--sobre-cor); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .15s; }
.ds-chave:checked { background: var(--verde); }
.ds-chave:checked::after { left: 20px; }
.ds-chave:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.ds-heroi { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.ds-sub0 { font-size: .78rem; color: var(--texto-fraco); }
.ds-total { font-size: 2.3rem; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ds-total-mini { font-size: 1rem; }
.ds-legenda { font-size: .86rem; }
.ds-fim { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.ds-fim-dir { display: flex; justify-content: flex-end; padding: 0 12px 12px; }
.ds-primario { height: 46px; width: 100%; border: 0; border-radius: 12px; background: var(--primario); color: var(--sobre-primario);
  font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; }
.ds-primario:hover { filter: brightness(1.06); }
.ds-primario:disabled { opacity: .6; cursor: default; }
.ds-primario-mini { width: auto; height: 32px; padding: 0 14px; border-radius: 9px; font-size: .86rem; }
.ds-reparo { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; align-items: start; }
.ds-cats { display: flex; flex-direction: column; gap: 2px; }
.ds-cat { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 36px; padding: 0 10px;
  border: 0; border-radius: 9px; background: none; font: inherit; font-size: .84rem; color: var(--texto); text-align: left; cursor: pointer; }
.ds-cat .ds-num { font-size: .74rem; color: var(--texto-fraco); }
.ds-cat:hover { background: var(--superficie); }
.ds-cat.sel { background: var(--azul-esc); color: var(--azul); font-weight: 600; }
.ds-cat.sel .ds-num { color: var(--azul); }
.ds-lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ds-vazia { color: var(--texto-fraco); font-size: .8rem; }
.ds-paragrafo { padding: 11px 14px; font-size: .86rem; line-height: 1.45; white-space: pre-wrap; }
.ds-qtd { color: var(--texto-fraco); min-width: 22px; }
.ds-filtros { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ds-busca { flex: 0 1 260px; height: 32px; box-sizing: border-box; padding: 0 12px; border: 0; border-radius: 9px;
  background: var(--superficie-3); font: inherit; font-size: .84rem; color: var(--texto); }
.ds-filtro { height: 32px; padding: 0 10px; border: 0; border-radius: 9px; background: var(--superficie-3);
  font: inherit; font-size: .8rem; color: var(--texto); }
.ds-busca:focus-visible, .ds-filtro:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.ds-kanban { gap: 16px; }
.ds-coluna { display: flex; flex-direction: column; min-height: 0; }
.ds-coluna-cab { margin: 0 0 8px 4px; font-size: .9rem; font-weight: 700; }
.ds-coluna-cab .ds-num { color: var(--texto-fraco); font-weight: 600; }
.ds-coluna.resolvidas .ds-coluna-cab { color: var(--texto-fraco); }
.ds-coluna-corpo { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
.ds-coluna-vazia { padding: 8px 4px; font-size: .78rem; color: var(--texto-fraco); }
.ds-cartao { display: flex; flex-direction: column; gap: 3px; padding: 11px 13px; background: var(--superficie); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,30,51,.07); cursor: pointer; }
.ds-cartao:hover { box-shadow: 0 2px 8px rgba(15,30,51,.12); }
.ds-cartao:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.ds-coluna.resolvidas .ds-cartao { opacity: .85; }
.ds-cartao-topo { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--texto-fraco); }
.ds-cartao-titulo { font-size: .88rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ds-cartao-sub { font-size: .78rem; color: var(--texto-fraco); overflow-wrap: anywhere; }
.ds-cartao-alerta { font-size: .74rem; font-weight: 600; color: var(--vermelho); }
.ds-cartao-valor { display: flex; justify-content: space-between; align-items: baseline; margin-top: 3px; font-size: .82rem; }
.ds-cartao-idade { font-size: .7rem; color: var(--texto-fraco); }
.ds-cobranca { font-weight: 600; color: var(--texto-fraco); }
.ds-cobranca.a_cobrar { color: var(--laranja); }
.ds-cobranca.cobrado { color: var(--verde); }
.ds-cartao-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.ds-acao { border: 0; background: none; padding: 2px 0; font: inherit; font-size: .78rem; color: var(--azul); cursor: pointer; }
.ds-acao.forte { font-weight: 700; }
.ds-acao:hover { text-decoration: underline; }
.ds-det { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 28px; }
.ds-eventos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ds-eventos li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; font-size: .84rem; }
.ds-eventos .ds-ponto { margin-top: 5px; width: 9px; height: 9px; }
.ds-ev-quando { font-size: .76rem; color: var(--texto-fraco); }
.ds-ev-texto { margin-top: 3px; line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .ds-det { grid-template-columns: minmax(0, 1fr); }
}
.ds-linha > .ds-rot.fixo { flex: none; white-space: nowrap; }
.ds-linha > .ds-sel, .ds-linha > .ds-entrada { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; height: auto; }
.ds-linha > .ds-valor { margin-left: auto; }
.ds-kanban { gap: 0; }
.ds-coluna { padding: 0 12px; }
.ds-coluna:first-child { padding-left: 0; }
.ds-coluna:last-child { padding-right: 0; }
.ds-coluna + .ds-coluna { border-left: 1px solid var(--borda-forte); }

/* Títulos e números grandes em Montserrat; o resto em Source Sans 3 (20/10/2026). */
.ds-h1, .ds-h2, .ds-total, .ds-barra-titulo, .tela-topo h1 { font-family: var(--font-titulo); }