/* ============================================================================
REGRAS AUTOMÁTICAS EM DUAS COLUNAS (mockup aprovado pelo dono, 25/09/2026)
----------------------------------------------------------------------------
Arquivo PRÓPRIO de propósito: public/atendimento.css está sendo mexido por outra
frente. Aqui só o enquadramento novo da aba "Regras automáticas"; os controles
(.at-sw, .at-num, .at-hora, .at-radio) continuam sendo os de sempre.
REVERTER: apagar o deste arquivo no index.html — a tela volta ao
empilhamento simples (o HTML novo continua legível, só sem as colunas).
============================================================================ */
/* duas colunas da MESMA altura; a faixa larga ocupa a linha inteira embaixo.
DUAS COLUNAS FIXAS, não `auto-fit`: com `auto-fit` a tela larga (1920+) cabia QUATRO
trilhos de 440 px, e os dois cartões ficavam espremidos na metade esquerda enquanto a
faixa de baixo ocupava a largura toda — fora de esquadro. `minmax(0,1fr)` mantém o
padrão do projeto (nunca estoura na horizontal). O empilhamento fica na @media. */
.rd-colunas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch;}
.rd-col{background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-width:0;}
.rd-larga{grid-column:1/-1;}
/* cabeçalhos com a MESMA altura mínima nas duas colunas: a primeira regra começa na mesma linha */
.rd-cab{padding:11px 17px;border-bottom:1px solid var(--line,#e5e7eb);background:var(--bg2,rgba(127,127,127,.06));min-height:58px;}
.rd-cab b{font-size:14.5px;display:block;}
.rd-cab p{margin:2px 0 0;font-size:12.5px;color:var(--tx2);}
/* toda regra com a MESMA altura mínima e a faixa de controles FIXA em 208 px:
é isso que põe os controles das duas colunas na mesma vertical */
.rd-reg{display:grid;grid-template-columns:minmax(0,1fr) 208px;gap:12px;align-items:center;padding:0 17px;border-top:1px solid var(--line,#e5e7eb);min-height:68px;}
.rd-reg:first-of-type{border-top:0;}
.rd-reg.rd-auto{grid-template-columns:minmax(0,1fr) auto;}
.rd-reg b{font-size:14.5px;display:block;line-height:1.3;}
.rd-reg p{margin:2px 0 0;font-size:12.5px;color:var(--tx2);line-height:1.35;}
.rd-reg .rd-extra{margin-top:5px;font-size:12px;}
.rd-dir{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap;}
.rd-min{font-size:12.5px;color:var(--tx2);white-space:nowrap;}
.rd-radios{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:12.5px;}
.rd-mini{background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);color:inherit;border-radius:8px;padding:5px 7px;font-size:12.5px;max-width:120px;}
.rd-nummini{width:62px!important;}
/* selo "novo" e o "?" com o detalhe da regra (o texto está no title) */
.rd-novo{background:rgba(245,158,11,.07);}
.rd-selo{font-size:10px;font-weight:700;border-radius:5px;padding:1px 6px;background:#dcfce7;color:#166534;margin-left:6px;vertical-align:2px;}
.rd-i{display:inline-flex;width:15px;height:15px;border-radius:50%;background:rgba(127,127,127,.22);color:var(--brand);font-size:10.5px;font-weight:700;align-items:center;justify-content:center;margin-left:5px;vertical-align:1px;cursor:help;}
.rd-i:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
/* a coluna mais curta preenche o resto com um rodapé leve, em vez de deixar buraco cinza */
.rd-enche{flex:1;display:flex;align-items:center;justify-content:center;padding:14px 17px;border-top:1px solid var(--line,#e5e7eb);background:var(--bg2,rgba(127,127,127,.04));color:var(--tx2);font-size:12.5px;text-align:center;}
.rd-enche b{color:var(--tx1);}
/* "no máximo N por pessoa" só aparece no ritmo 'no máximo N' */
.rd-off{display:none;}
/* tela estreita (notebook 1366 com a barra lateral aberta): as duas colunas viram uma,
antes de o texto começar a quebrar em quatro linhas dentro de cada regra */
@media (max-width:1100px){
.rd-colunas{grid-template-columns:minmax(0,1fr);}
}
/* telefone/tablet: uma coluna só, controles embaixo do texto */
@media (max-width:760px){
.rd-reg,.rd-reg.rd-auto{grid-template-columns:minmax(0,1fr);padding:12px 14px;}
.rd-dir{justify-content:flex-start;}
.rd-radios{align-items:flex-start;}
}
/* nota curta na linha de baixo de uma regra (o detalhe longo mora no "?") */
.rd-nota{border-bottom:1px dotted var(--tx2);cursor:help;}
/* ============================================================================
HERANÇA DO PADRÃO (mockup_regras_padrao.html, dono 25/09/2026)
O Padrão vale para todas as áreas; a área marca exceção campo a campo.
A RÉGUA DAS DUAS COLUNAS CONTINUA DE PÉ: a faixa de controles segue com os
mesmos 208 px e o selo ganha uma LINHA PRÓPRIA (flex-basis:100%) dentro do
.rd-dir — presente em TODA regra quando se olha uma área, inherited ou não,
para que as linhas continuem com a mesma altura nas duas colunas.
REVERTER: junto com o resto do arquivo (apagar o no index.html).
============================================================================ */
/* faixa logo abaixo do seletor: quantas áreas o Padrão alcança / quantas exceções a área tem */
.rd-faixa{border-radius:10px;padding:9px 13px;font-size:13.5px;margin:0 0 12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;line-height:1.45;}
.rd-f-padrao{background:var(--brand-l);border:1px solid var(--brand-bd,var(--brand));color:var(--brand-tx,inherit);}
.rd-f-propria{background:var(--warn-bg);border:1px solid var(--warn);color:var(--warn-tx,inherit);}
.rd-f-aviso{background:var(--err-bg);border:1px solid var(--err);color:var(--err-tx,inherit);}
/* o selo mora numa linha só dele, encostado à direita, junto com o "voltar" daquela regra */
.rd-selos{flex-basis:100%;display:flex;justify-content:flex-end;align-items:center;gap:7px;min-height:17px;order:-1;}
.rd-marca{font-size:10.5px;font-weight:700;border-radius:5px;padding:1px 7px;white-space:nowrap;}
.rd-m-herda{background:var(--brand-l);color:var(--brand-tx,var(--brand));}
.rd-m-propria{background:var(--warn-bg);color:var(--warn-tx,var(--warn));}
.rd-voltar{font-size:11.5px;color:var(--brand);text-decoration:underline;cursor:pointer;white-space:nowrap;background:none;border:0;padding:0;font-family:inherit;}
.rd-voltar:hover{opacity:.75;}
.rd-voltar:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
/* fundo levíssimo separando o que herda do que é exceção (o selo é quem informa; a cor só ajuda a varrer a tela) */
.rd-herda{background:rgba(127,127,127,.03);}
.rd-propria{background:var(--warn-bg);}
/* a regra nova já tem fundo próprio (.rd-novo); sendo exceção, o de exceção é que vale */
.rd-reg.rd-novo.rd-propria{background:var(--warn-bg);}
@media (max-width:760px){
.rd-selos{justify-content:flex-start;}
}