/* A régua de cobrança — o mesmo desenho no cartão do Canteiro e em Pessoas
   (23/09/2026). Fica em arquivo próprio porque o componente é um só: mudar a
   cara aqui muda nos dois lugares, que é exatamente o que o Bruno pediu. */

.rg { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.rg-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rg-topo h5 { margin: 0; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 650; color: var(--fraco); text-transform: none; letter-spacing: 0; }
.rg-topo h5 .ic { width: 15px; height: 15px; }
.rg-topo h5 em { font-style: normal; font-size: 11.5px; color: var(--apagado); }
.rg-add { height: 30px; padding: 0 11px; border-radius: 10px; cursor: pointer; font-size: 12px;
  border: 1px dashed var(--linha-forte); background: transparent; color: var(--fraco);
  display: inline-flex; align-items: center; gap: 5px; }
.rg-add:hover { border-color: var(--marca); color: var(--texto); }
.rg-add .ic { width: 14px; height: 14px; }

.rg-carregando, .rg-vazio { font-size: 12.5px; line-height: 1.55; color: var(--apagado);
  background: var(--fundo2); border-radius: 12px; padding: 10px 12px; }
.rg-vazio b { color: var(--fraco); font-weight: 600; }
.rg-sugestoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rg-sugestoes button { height: 30px; padding: 0 11px; border-radius: 9px; cursor: pointer;
  font-size: 12px; border: 1px solid var(--linha-forte); background: var(--painel); color: var(--texto); }
.rg-sugestoes button:hover { border-color: var(--marca); }

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

/* Cada regra é um bloco fechado: dá para ler uma de cada vez e somar de cima
   para baixo, que é como ele escreve ("até dia 25 assim; depois assado"). */
.rgr { border: 1px solid var(--linha-forte); border-radius: 13px; padding: 9px 11px 11px;
  background: var(--painel); display: flex; flex-direction: column; gap: 7px; }
.rgr.valendo { border-color: color-mix(in srgb, var(--marca) 55%, var(--linha-forte));
  background: color-mix(in srgb, var(--marca) 8%, var(--painel)); }
.rgr.off { opacity: .55; }
.rgr-alto { display: flex; align-items: center; gap: 9px; }
.rgr-n { flex: 1; font-size: 11.5px; font-weight: 650; color: var(--fraco); }
.rgr.valendo .rgr-n { color: var(--marca); }
.rgr-liga { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--apagado); }
.rgr-liga input { width: 15px; height: 15px; accent-color: var(--marca); }
.rgr-x { width: 28px; height: 28px; border-radius: 9px; border: none; cursor: pointer;
  background: transparent; color: var(--apagado); display: inline-flex; align-items: center;
  justify-content: center; }
.rgr-x:hover { color: var(--alerta); background: var(--fundo2); }
.rgr-x .ic { width: 14px; height: 14px; }

/* A frase é a regra escrita em português, acima dos campos: ele confere o que
   entendeu antes de olhar o miudinho. */
.rgr-frase { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--texto); }

.rgr-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.rgr-rot { flex: 0 0 auto; min-width: 96px; font-size: 11.5px; color: var(--apagado); }
.rgr-e { font-size: 11.5px; color: var(--apagado); }
.rgr-mini { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--apagado); }
.rgr-mini i { font-style: normal; color: var(--fraco); }
.rgr select, .rgr input[type="number"], .rgr input[type="date"] {
  height: 32px; min-height: 32px; border-radius: 9px; border: 1px solid var(--linha-forte);
  background: var(--fundo2); color: var(--texto); font-size: 12.5px; padding: 0 8px;
  font-family: inherit; }
.rgr .rgr-num { width: 58px; text-align: center; }
.rgr select { cursor: pointer; }

.rgr-dias { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.rgr-dias button { width: 30px; height: 30px; border-radius: 9px; cursor: pointer; font-size: 12px;
  border: 1px solid var(--linha-forte); background: var(--fundo2); color: var(--apagado); }
.rgr-dias button.on { border-color: var(--marca); color: var(--texto); font-weight: 650;
  background: color-mix(in srgb, var(--marca) 16%, transparent); }
.rgr-dias .rgr-todos { width: auto; padding: 0 9px; font-size: 11.5px; }

.rg-agora, .rg-toques, .rg-fim { margin: 0; display: flex; align-items: flex-start; gap: 7px;
  font-size: 12px; line-height: 1.5; color: var(--fraco); background: var(--fundo2);
  border-radius: 11px; padding: 8px 10px; }
.rg-agora .ic, .rg-toques .ic, .rg-fim .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.rg-agora b, .rg-toques b { color: var(--texto); font-weight: 650; }
.rg-fim { color: var(--aviso); background: color-mix(in srgb, var(--aviso) 10%, var(--fundo2)); }

@media (max-width: 700px) {
  .rgr-rot { min-width: 100%; }
  .rgr-linha { gap: 5px; }
}