/* #329/#508 · Rotinas da agência. Tudo sob .rt: esta folha carrega no app inteiro. */
.rt { width: 100%; min-width: 0; flex: 1 1 auto; box-sizing: border-box; padding: var(--ds-s4) var(--ds-s5);
      display: flex; flex-direction: column; gap: var(--ds-s3); }
.rt h2 { margin: 0; }
.rt-topo { display: flex; flex-direction: column; gap: var(--ds-s1); }
.rt-pergunta { margin: 0; font-size: var(--ds-fs-md); }
.rt-grita { color: var(--ink-err); }
.rt-sub { color: var(--muted); font-size: var(--ds-fs-sm); }
.rt-h { margin: var(--ds-s3) 0 0; font-size: var(--ds-fs-md); }
.rt-erro { color: var(--ink-err); }
.rt-vazio { color: var(--muted); }
.rt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rt-btn { min-height: 36px; padding: 0 var(--ds-s3); border: 1px solid var(--line); border-radius: var(--ds-r);
          background: var(--panel-2); color: var(--ink); cursor: pointer; }
.rt-btn:focus-visible, .rt-chip:focus-visible, .rt-link:focus-visible, .rt-card:focus-visible,
.rt-cel button:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 1px; }

.rt-filtros { display: flex; flex-wrap: wrap; gap: var(--ds-s2); align-items: center; }
.rt-chips { display: flex; flex-wrap: wrap; gap: var(--ds-s1); }
.rt-chip { min-height: 36px; padding: 0 var(--ds-s3); border: 1px solid var(--line); border-radius: var(--ds-r-pill);
           background: transparent; color: var(--ink); cursor: pointer; }
.rt-chip.ativo { border-color: var(--ds-accent); color: var(--ink-accent); }
.rt-busca, .rt-filtros select { min-height: 36px; padding: 0 var(--ds-s2); border: 1px solid var(--line);
           border-radius: var(--ds-r); background: var(--panel); color: var(--ink); max-width: 100%; }
.rt-busca { flex: 1 1 200px; }

/* #523 · `contain: inline-size`: a largura intrínseca da matriz (uma coluna por
   cliente, 72 px cada) não conta para o tamanho do pai — sem isso o flex da
   coluna crescia até 914 px numa janela de 390 e a PÁGINA rolava de lado, em
   vez de só a matriz (achado do QA regressão). Mesmo remédio na tabela. */
.rt-matriz-rol { overflow: auto; max-height: 60vh; max-width: 100%; min-width: 0; contain: inline-size;
                 position: relative;
                 border: 1px solid var(--line); border-radius: var(--ds-r-lg); background: var(--panel); }
.rt-tabela { min-width: 0; max-width: 100%; overflow-x: auto; contain: inline-size; position: relative; }
/* `position: relative` nos dois (#523, 2ª rodada do QA): o `.rt-sr` ("sem
   rotina", só para leitor de tela) é position:absolute; sem um pai posicionado
   DENTRO do scroller, ele escapa do overflow e é ELE que esticava a página até
   914 px — o culpado que o robô nomeou (td.rt-cel.vazia > span.rt-sr). */
.rt-matriz { border-collapse: collapse; font-size: var(--ds-fs-sm); font-variant-numeric: tabular-nums; }
.rt-matriz th, .rt-matriz td { border-bottom: 1px solid var(--line-soft); padding: 0; }
.rt-matriz thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-2); padding: var(--ds-s2);
                      font-weight: 600; color: var(--muted); white-space: nowrap; max-width: 120px;
                      overflow: hidden; text-overflow: ellipsis; }
.rt-matriz .rt-rot { position: sticky; left: 0; z-index: 2; background: var(--panel); text-align: left;
                     padding: var(--ds-s2); max-width: 280px; white-space: nowrap; overflow: hidden;
                     text-overflow: ellipsis; font-weight: 500; }
.rt-matriz thead .rt-rot { z-index: 3; background: var(--panel-2); }
.rt-cel { text-align: right; }
.rt-cel button { width: 100%; min-width: 72px; min-height: 36px; padding: 0 var(--ds-s2); border: 0;
                 background: transparent; color: inherit; font: inherit; text-align: right; cursor: pointer; }
.rt-cel.err button { color: var(--ink-err); font-weight: 600; }
.rt-cel.warn button { color: var(--ink-warn); }
.rt-cel.ok button { color: var(--muted); }
.rt-cel button:hover { background: var(--panel-2); }
.rt-legenda { display: flex; flex-wrap: wrap; gap: var(--ds-s1); align-items: center; }

.rt-trunc { max-width: 360px; }
.rt-link { border: 0; background: none; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left;
           max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.rt-link:hover { color: var(--ink-accent); }
.rt-falha { color: var(--ink-warn); }

.rt-cards { display: none; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: var(--ds-s2); }
.rt-card { width: 100%; min-height: 44px; display: flex; flex-direction: column; gap: var(--ds-s1); text-align: left;
           padding: var(--ds-s3); border: 1px solid var(--line); border-radius: var(--ds-r-lg);
           background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; }
.rt-card-nome { font-weight: 500; overflow-wrap: anywhere; }

.rt-fundo { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .45); display: flex; justify-content: flex-end; }
.rt-painel { width: min(440px, 100%); height: 100%; overflow: auto; box-sizing: border-box; padding: var(--ds-s4);
             background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--ds-s3); }
.rt-painel header { display: flex; justify-content: space-between; gap: var(--ds-s2); align-items: flex-start; }
.rt-painel h3 { margin: 0; font-size: var(--ds-fs-md); overflow-wrap: anywhere; }
.rt-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-s3); margin: 0; }
.rt-grade dt { color: var(--muted); font-size: var(--ds-fs-sm); }
.rt-grade dd { margin: 0; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .rt { padding: var(--ds-s3) var(--ds-s4); }
  .rt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-tabela { display: none; }
  .rt-cards { display: flex; }
  .rt-matriz-rol { max-height: 50vh; }
  .rt-matriz .rt-rot { max-width: 160px; }
}