/* ================= e11: débito automático, boletim diário de arrecadação =================
   Plano: auditoria/evidencias-construcao/e11/PLANO-VISUAL.md. Só os tokens da e03.
   Ordem: base → componentes → @media (celular por último). */

.texto-ok { color: var(--ok); font-weight: 500; }
.texto-erro { color: var(--erro); font-weight: 500; }
.da-conta, .da-nome { font-variant-numeric: tabular-nums; white-space: nowrap; }
.da-nome { white-space: nowrap; }
.da-faixa .pc-busca-linha > button, .da-faixa .da-botoes { margin-left: auto; }
.da-faixa .pc-nota { flex: 1 1 320px; margin: 0; align-self: center; }
.da-faixa #da-msg:not(:empty) { margin-top: var(--esp-3); }
.da-botoes { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
button.sec.claro { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); color: var(--branco); }
button.sec.claro:hover { background: rgba(73, 179, 238, .16); border-color: var(--agua); }
.da-faixa .pc-campo { flex-basis: 340px; }
/* optantes em largura cheia; a inclusão embaixo, com os campos em linha */
.da-duas > .bloco { margin-bottom: var(--esp-4); }
.da-form { display: grid; grid-template-columns: minmax(120px, .8fr) minmax(220px, 1.6fr) minmax(110px, .7fr) minmax(130px, .8fr) minmax(170px, 1fr); gap: var(--esp-3); align-items: end; }
.da-form label { margin-top: 0; }
td.da-acoes { white-space: normal; }
td.da-acoes button { margin: 2px 0 2px 6px; }

/* escolher arquivo: o botão nativo vem na língua do navegador, então fica escondido atrás de um nosso */
.da-rotulo { display: block; font-size: var(--t-rotulo); font-weight: 600; margin: var(--esp-3) 0 6px; }
label.da-escolher { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); margin: 0; font-weight: 400; cursor: pointer; }
label.da-escolher input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.botao-falso { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--borda-forte); border-radius: var(--raio-controle);
  background: var(--branco); color: var(--tinta); font-weight: 500; font-size: var(--t-rotulo); }
label.da-escolher:hover .botao-falso { border-color: var(--azul); }
label.da-escolher:focus-within .botao-falso { outline: 2px solid var(--agua); outline-offset: 2px; }

/* ---------- a viagem do arquivo: três estações ligadas por um traço ---------- */
ul.da-viagens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-5); }
.da-viagem h4 { margin: 0 0 var(--esp-3); font-size: var(--t-corpo); font-weight: 600; }
.da-viagem h4 small { font-weight: 400; color: var(--apoio); font-size: var(--t-nota); margin-left: 6px; }
.da-viagem ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* o ponto em cima, o texto embaixo: o traço corre na altura dos pontos e não passa pelo texto */
.da-estacao { position: relative; display: flex; flex-direction: column; gap: var(--esp-2); padding-right: var(--esp-4); }
/* o traço sai do ponto e vai até o ponto da estação seguinte */
.da-estacao:not(:last-child)::after { content: ''; position: absolute; top: 10px; left: 22px; right: 0; height: 2px; background: #D3DCE7; }
.da-estacao.feita:not(:last-child)::after { background: var(--azul); }
.da-estacao > i { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: var(--branco); border: 2px solid #C3CDD9; box-sizing: border-box; }
.da-estacao.feita > i { background: var(--azul); border-color: var(--azul); }
.da-estacao.atual > i { border: 6px solid var(--agua); box-shadow: 0 0 0 4px rgba(73, 179, 238, .22); }
.da-estacao > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.da-estacao b { font-size: var(--t-rotulo); font-weight: 600; }
.da-estacao:not(.atual):not(.feita) b { color: var(--apoio); }
.da-estacao span { font-size: var(--t-nota); color: var(--apoio); font-variant-numeric: tabular-nums; }
.da-estacao button { align-self: flex-start; margin-top: var(--esp-2); }

/* ---------- o arquivo aberto: 150 colunas, régua e a letra do registro na margem ---------- */
.da-modal { max-width: min(1180px, calc(100vw - 32px)); }
.da-arquivo { border: 1px solid var(--borda); border-radius: var(--raio-controle); background: #FBFCFD; overflow-x: auto; padding: 6px 0; margin-top: var(--esp-3); }
.da-arq-linha { display: grid; grid-template-columns: 30px max-content; column-gap: var(--esp-3); row-gap: 1px; align-items: center; padding: 4px 12px 4px 8px; }
.da-arq-linha:not(.da-regua):hover { background: var(--azul-claro-fundo); }
.da-arq-linha code { font-family: var(--fonte-codigo); font-size: 11.5px; line-height: 1.5; white-space: pre; color: var(--tinta); }
.da-regua code { color: #93A1B4; line-height: 1.25; }
.da-regua { border-bottom: 1px dashed var(--borda); padding-bottom: 6px; margin-bottom: 4px; }
.da-tipo { display: inline-grid; place-items: center; width: 24px; height: 22px; border-radius: 6px; font-weight: 700; font-size: 12px; color: var(--branco); }
.da-regua .da-tipo { background: transparent; }
.t-A, .t-Z { background: var(--marinho); }
.t-B { background: #6B7A90; }
.t-E { background: var(--azul); }
.t-F { background: #1C8FCB; }
.da-diz { grid-column: 2; font-size: var(--t-nota); color: var(--apoio); }
.da-regua .da-diz { display: none; }

/* ---------- a conta do optante: aviso no lugar do código de barras ---------- */
.da-aviso-conta { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--esp-3); margin: var(--esp-4) 0 var(--esp-2); padding: 14px 16px;
  background: var(--azul-claro-fundo); border: 1px solid #BCD4F0; border-radius: var(--raio-controle); color: var(--tinta); }
.da-aviso-conta .icone { color: var(--azul); width: 22px; height: 22px; }
.da-aviso-conta b { font-size: var(--t-corpo); }
.da-aviso-conta p { margin: 4px 0; font-size: var(--t-rotulo); }
.da-ficha .da-cadastro { margin: 0; }

/* ---------- boletim: a composição do dia numa barra só ---------- */
.bd-composicao { display: flex; height: 18px; border-radius: 999px; overflow: hidden; background: #E3E8EF; gap: 2px; }
.bd-composicao i { flex: 0 0 var(--w); animation: bd-cresce .3s var(--ease) both; transform-origin: left; }
@keyframes bd-cresce { from { transform: scaleX(0); } }
.f-guiche { background: var(--marinho); }
.f-pix { background: var(--agua); }
.f-retorno { background: var(--azul); }
.f-debito { background: #2E9E6B; }
.f-outros { background: #9AA7B8; }
ul.bd-legenda { list-style: none; margin: var(--esp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--esp-3) var(--esp-5); }
.bd-legenda li { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: var(--esp-2); align-items: baseline; }
.bd-legenda li > i { width: 12px; height: 12px; border-radius: 3px; align-self: center; }
.bd-legenda span { font-size: var(--t-rotulo); color: var(--apoio); }
.bd-legenda b { grid-column: 2; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bd-legenda small { grid-column: 2; font-size: var(--t-nota); color: var(--apoio); }
tr.bd-total td { background: var(--fundo-suave); border-top: 1px solid var(--borda-forte); }
.bd-mapas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (prefers-reduced-motion: reduce) {
  .bd-composicao i { animation: none; }
}
@media (max-width: 1100px) {
  .bd-mapas { grid-template-columns: minmax(0, 1fr); }
  .da-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .da-form-banco { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .da-faixa .pc-busca-linha > button, .da-faixa .da-botoes { margin-left: 0; flex: 1 1 100%; }
  .da-botoes button { flex: 1 1 100%; justify-content: center; }
  /* as estações empilham, o traço desce na vertical */
  .da-form { grid-template-columns: minmax(0, 1fr); }
  .da-viagem ol { grid-template-columns: minmax(0, 1fr); gap: var(--esp-4); }
  .da-estacao { flex-direction: row; gap: var(--esp-3); padding-right: 0; }
  .da-estacao > i { flex: none; }
  .da-estacao:not(:last-child)::after { top: 22px; bottom: calc(-1 * var(--esp-4)); left: 10px; right: auto; width: 2px; height: auto; }
  .da-arquivo { max-width: 100%; }
  /* a explicação fica parada na parte visível enquanto a linha de 150 colunas rola */
  .da-diz { position: sticky; left: 42px; max-width: calc(100vw - 150px); }
  ul.bd-legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bd-legenda b { font-size: 17px; }
  tr.bd-total td:empty { display: none; }
}

/* seções do boletim e do fechamento impressos */
.doc-corpo h2.doc-sub { font-size: 11pt; font-weight: 600; margin: 7mm 0 2.5mm; }
.doc-corpo > h2.doc-sub:first-child { margin-top: 0; }
.doc-corpo .grafico + h2.doc-sub { margin-top: 9mm; }