/* www/assets/codigo_titulo.css — o modal "Corrigir o código" (§40.72, 06/10/2026)
 *
 * O resto da gramática é a do modal de lançar (`fluxo_lancar.css`: .fl-doc, .fl-l, .fl-2,
 * .fl-sub, .fl-pe, .fl-ok/.fl-at/.fl-er) — aqui só o que é deste modal: os dois lados
 * (digitado × boleto) e a régua dígito a dígito.
 */
.ct-modal { font-size: 12.5px; }

/* ── as abas ───────────────────────────────────────────────────────────────── */
.ct-abas { display: flex; gap: .2rem; border-bottom: 1px solid rgba(125,125,125,.25); margin-bottom: .8rem; }
.ct-abas button { border: 0; background: none; padding: .45rem .8rem; font-weight: 600; font-size: 12.5px;
    color: inherit; opacity: .6; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ct-abas button.ativa { opacity: 1; border-bottom-color: var(--bs-primary, #2c6e9e); }
.ct-abas .n { font-size: 10.5px; padding: 0 .4rem; border-radius: 999px; background: rgba(125,125,125,.16);
    margin-left: .3rem; font-weight: 600; }
.ct-painel[hidden] { display: none; }

/* ── a frase de cima: o que está errado, em uma linha ─────────────────────── */
.ct-veredito { padding: .55rem .75rem; border-radius: 8px; margin-bottom: .8rem; font-size: 13px;
    border: 1px solid rgba(var(--danger-rgb), .25); background: rgba(var(--danger-rgb), .06); }
.ct-veredito.ok { border-color: rgba(var(--success-rgb), .3); background: rgba(var(--success-rgb), .07); }
.ct-veredito.neutro { border-color: rgba(125,125,125,.25); background: rgba(125,125,125,.05); }

/* ── os dois lados ─────────────────────────────────────────────────────────── */
.ct-lado { border: 1px solid rgba(125,125,125,.22); border-left-width: 4px; border-radius: 8px;
    padding: .55rem .75rem .6rem; min-width: 0; }
.ct-lado.errado { border-left-color: rgba(var(--danger-rgb), .75); }
.ct-lado.certo { border-left-color: rgba(var(--success-rgb), .8); }
.ct-lado.vazio { border-left-color: rgba(125,125,125,.4); }
.ct-cod { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.ct-grande { font-size: 14px; font-weight: 600; margin: .15rem 0 .45rem; letter-spacing: .02em; }
.ct-nota { font-size: 11px; opacity: .65; margin-top: .35rem; }
.ct-fls { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 860px) { .ct-fls { grid-template-columns: 1fr; } }

/* ── a régua dígito a dígito ───────────────────────────────────────────────── */
.ct-dif { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: .2rem 0 .35rem; }
.ct-dif .rots { display: inline-flex; flex-direction: column; gap: 2px; flex: 0 0 auto; margin-right: .5rem; }
.ct-dif .rots span { height: 22px; display: flex; align-items: center; font-size: 9.5px; text-transform: uppercase;
    letter-spacing: .05em; opacity: .55; white-space: nowrap; }
.ct-col { display: inline-flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.ct-col.sep { margin-left: 8px; }
.ct-col.pto { margin-left: 3px; }
.ct-d { width: 14px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; border-radius: 3px; }
.ct-d.igual { opacity: .8; }
.ct-d.falta { border: 1px dashed rgba(var(--danger-rgb), .75); }
.ct-d.sobra { background: rgba(var(--danger-rgb), .16); color: rgba(var(--danger-rgb), 1);
    text-decoration: line-through; font-weight: 700; }
.ct-d.errado { background: rgba(var(--danger-rgb), .16); color: rgba(var(--danger-rgb), 1); font-weight: 700; }
.ct-d.novo { background: rgba(var(--success-rgb), .2); color: rgba(var(--success-rgb), 1); font-weight: 700; }
.ct-frases { margin: .2rem 0 0; padding-left: 1.1rem; }
.ct-frases li { margin: .1rem 0; }

/* ── a análise do digitado ─────────────────────────────────────────────────── */
.ct-analise { margin-top: .8rem; border: 1px solid rgba(125,125,125,.2); border-radius: 8px; padding: .4rem .7rem; }
.ct-analise > summary { cursor: pointer; font-weight: 600; font-size: 12px; }
.ct-tab { border-collapse: collapse; margin-top: .4rem; font-size: 12px; }
.ct-tab td { padding: .15rem .8rem .15rem 0; vertical-align: top; }
.ct-tab td:first-child { opacity: .6; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }

/* ── os anexos ─────────────────────────────────────────────────────────────── */
.ct-anexos { list-style: none; margin: 0 0 .9rem; padding: 0; }
.ct-anexos li { display: flex; gap: .7rem; align-items: center; padding: .45rem .2rem;
    border-bottom: 1px solid rgba(125,125,125,.14); }
.ct-anexos li > i { font-size: 20px; opacity: .7; flex: 0 0 auto; }
.ct-anexos li > div { flex: 1 1 auto; min-width: 0; }
.ct-anexos .arq { opacity: .7; overflow-wrap: anywhere; }
.ct-anexos .sub { font-size: 11px; opacity: .65; }
.ct-anexos .btn { flex: 0 0 auto; white-space: nowrap; }

/* ── o título escolhido, quando a nota tem vários ─────────────────────────── */
.ct-tits { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.ct-tits button { border: 1px solid rgba(125,125,125,.3); background: none; border-radius: 999px;
    padding: .15rem .65rem; font-size: 11.5px; color: inherit; }
.ct-tits button.ativo { border-color: var(--bs-primary, #2c6e9e); background: rgba(44,110,158,.1); font-weight: 600; }

/* "conferindo no ERP…" — o modal abriu pelo cache e o vivo está a caminho */
.ct-vivo { margin-left: auto; align-self: center; font-size: 11px; opacity: .65; }

/* a prévia do "Notificar responsável" */
.ct-notif { border: 1px solid rgba(125,125,125,.25); border-radius: 8px; padding: .6rem .75rem; margin-top: .7rem;
    background: rgba(125,125,125,.04); }
.ct-notif.ok { border-color: rgba(var(--success-rgb), .35); background: rgba(var(--success-rgb), .06); }
.ct-notif.erro { border-color: rgba(var(--danger-rgb), .35); background: rgba(var(--danger-rgb), .05); }
.ct-notif .fl-l > .k { flex-basis: 96px; min-width: 96px; }
.ct-print-img { max-width: 100%; border: 1px solid rgba(125,125,125,.3); border-radius: 6px; }

/* o PRINT do e-mail (desenhado no servidor, num Edge sem janela) — o título do modal vai junto, como no
   cabeçalho, e o "abrir" do arquivo não é botão em imagem */
.ct-print { background: #fff; width: 1180px; }
.ct-print-tit { font-size: 17px; font-weight: 600; margin: 0 0 .8rem; }
.ct-print [data-ct-abrir] { display: none; }

/* a confirmação de gravar, no lugar dos botões */
.ct-confirma { border: 1px solid rgba(var(--danger-rgb), .35); border-radius: 8px; padding: .55rem .75rem;
    background: rgba(var(--danger-rgb), .05); width: 100%; }