/* =============================================================================
   dash-riscos.dakila.tec.br — folha de estilo unica
   Tema escuro, sobrio, de leitura longa. Sem dependencia externa.
   ========================================================================== */

:root {
    --fundo:        #0c0f14;
    --fundo-2:      #11151c;
    --painel:       #151a23;
    --painel-alto:  #1b2130;
    --borda:        #232b39;
    --borda-forte:  #2f3a4d;

    --texto:        #e6eaf1;
    --texto-2:      #a5b0c2;
    --texto-3:      #6f7c92;

    --ouro:         #e3b43c;
    --ouro-fraco:   rgba(227, 180, 60, .12);
    --ok:           #3fc07a;
    --ok-fraco:     rgba(63, 192, 122, .12);
    --alerta:       #e0a13a;
    --alerta-fraco: rgba(224, 161, 58, .12);
    --risco:        #e2584a;
    --risco-fraco:  rgba(226, 88, 74, .12);
    --info:         #4d9fe0;
    --info-fraco:   rgba(77, 159, 224, .12);

    --raio:         10px;
    --raio-p:       6px;
    --sombra:       0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
    --fonte:        system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono:         ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    --lateral:      248px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font: 15px/1.55 var(--fonte);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 21px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

/* --- Estrutura -------------------------------------------------------------- */

.app { display: flex; min-height: 100%; }

.lateral {
    width: var(--lateral);
    flex: 0 0 var(--lateral);
    background: var(--fundo-2);
    border-right: 1px solid var(--borda);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.marca {
    padding: 20px 18px 18px;
    border-bottom: 1px solid var(--borda);
}
.marca .sigla {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--texto);
}
.marca .sigla .selo {
    width: 26px; height: 26px; border-radius: 7px;
    background: linear-gradient(150deg, var(--ouro), #b8862a);
    color: #17120a; font-size: 12px; font-weight: 800;
    display: grid; place-items: center;
}
.marca .dominio { margin-top: 6px; font-size: 11.5px; color: var(--texto-3); }

.menu { padding: 12px 10px; flex: 1; overflow-y: auto; }
.menu .grupo {
    padding: 14px 8px 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--texto-3);
}
.menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; margin-bottom: 2px;
    border-radius: var(--raio-p);
    color: var(--texto-2); font-size: 14px; text-decoration: none;
    border-left: 2px solid transparent;
}
.menu a:hover { background: var(--painel); color: var(--texto); }
.menu a.ativo {
    background: var(--ouro-fraco); color: var(--ouro);
    border-left-color: var(--ouro); font-weight: 600;
}
.menu a .ic { width: 16px; text-align: center; opacity: .9; }

.rodape-lateral {
    padding: 12px 14px; border-top: 1px solid var(--borda);
    font-size: 11px; color: var(--texto-3);
}

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 26px;
    background: var(--fundo-2);
    border-bottom: 1px solid var(--borda);
    position: sticky; top: 0; z-index: 20;
}
.topo .titulo-pagina { font-size: 17px; font-weight: 600; }
.topo .contexto { font-size: 11.5px; color: var(--texto-3); margin-top: 2px; }

.usuario-topo { display: flex; align-items: center; gap: 12px; }
.usuario-topo .quem { text-align: right; line-height: 1.3; }
.usuario-topo .quem strong { display: block; font-size: 13px; font-weight: 600; }
.usuario-topo .quem span { font-size: 11px; color: var(--texto-3); }
.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--painel-alto); border: 1px solid var(--borda-forte);
    display: grid; place-items: center;
    font-size: 12.5px; font-weight: 700; color: var(--ouro);
}

.conteudo { padding: 24px 26px 48px; max-width: 1360px; width: 100%; }

/* --- Cartoes e blocos ------------------------------------------------------- */

.painel {
    background: var(--painel);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
}
.painel > .cabeca {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 18px; border-bottom: 1px solid var(--borda);
}
.painel > .cabeca .sub { font-size: 11.5px; color: var(--texto-3); margin-top: 2px; }
.painel > .corpo { padding: 18px; }
.painel > .corpo.sem-espaco { padding: 0; }

.grade { display: grid; gap: 16px; }
.grade.kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grade.duas { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.grade.modulos { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.kpi { padding: 16px 18px; }
.kpi .rotulo {
    font-size: 11px; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--texto-3);
}
.kpi .valor {
    margin-top: 8px; font-size: 30px; font-weight: 700; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.kpi .nota { margin-top: 7px; font-size: 12px; color: var(--texto-2); }
.kpi.destaque .valor { color: var(--ouro); }
.kpi.risco .valor { color: var(--risco); }
.kpi.ok .valor { color: var(--ok); }

/* --- Tabelas ---------------------------------------------------------------- */

.tabela-rolagem { overflow-x: auto; }

table.dados {
    width: 100%; border-collapse: collapse; font-size: 13.5px;
}
table.dados th {
    text-align: left; padding: 11px 14px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--texto-3); background: var(--fundo-2);
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}
table.dados td {
    padding: 11px 14px; border-bottom: 1px solid var(--borda);
    color: var(--texto-2); vertical-align: middle;
}
table.dados tbody tr:hover td { background: var(--painel-alto); }
table.dados tbody tr:last-child td { border-bottom: 0; }
table.dados td strong { color: var(--texto); font-weight: 600; }
table.dados td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dados td.mono, .mono { font-family: var(--mono); font-size: 12px; }

.vazio { padding: 40px 18px; text-align: center; color: var(--texto-3); font-size: 13.5px; }

/* --- Etiquetas -------------------------------------------------------------- */

.tag {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: .02em;
    border: 1px solid transparent; white-space: nowrap;
}
.tag.cinza  { background: var(--painel-alto); color: var(--texto-2); border-color: var(--borda-forte); }
.tag.ouro   { background: var(--ouro-fraco);  color: var(--ouro);   border-color: rgba(227,180,60,.3); }
.tag.ok     { background: var(--ok-fraco);    color: var(--ok);     border-color: rgba(63,192,122,.3); }
.tag.alerta { background: var(--alerta-fraco);color: var(--alerta); border-color: rgba(224,161,58,.3); }
.tag.risco  { background: var(--risco-fraco); color: var(--risco);  border-color: rgba(226,88,74,.3); }
.tag.info   { background: var(--info-fraco);  color: var(--info);   border-color: rgba(77,159,224,.3); }

.ponto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ponto.ok { background: var(--ok); }
.ponto.risco { background: var(--risco); }

/* --- Formularios ------------------------------------------------------------ */

.campo { margin-bottom: 16px; }
.campo label {
    display: block; margin-bottom: 6px;
    font-size: 12px; font-weight: 600; color: var(--texto-2);
}
.campo .ajuda { margin-top: 6px; font-size: 11.5px; color: var(--texto-3); }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="search"], select, textarea {
    width: 100%; padding: 10px 12px;
    background: var(--fundo);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-p);
    color: var(--texto); font: 14px var(--fonte);
    outline: none;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--ouro);
    box-shadow: 0 0 0 3px var(--ouro-fraco);
}
input::placeholder { color: var(--texto-3); }
select { appearance: none; background-image: none; cursor: pointer; }
input[type="checkbox"] { accent-color: var(--ouro); width: 15px; height: 15px; }

.linha-campos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.marcador { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--texto-2); }
.marcador input { margin-top: 2px; }

.acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acoes.fim { justify-content: flex-end; }

.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px; border-radius: var(--raio-p);
    font: 600 13.5px var(--fonte); cursor: pointer;
    border: 1px solid var(--borda-forte); background: var(--painel-alto); color: var(--texto);
    text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--borda); text-decoration: none; }
.btn.primario {
    background: linear-gradient(160deg, var(--ouro), #c9992d);
    border-color: #c9992d; color: #17120a;
}
.btn.primario:hover { filter: brightness(1.07); }
.btn.perigo { border-color: rgba(226,88,74,.45); color: var(--risco); background: var(--risco-fraco); }
.btn.perigo:hover { background: rgba(226,88,74,.2); }
.btn.discreto { background: transparent; }
.btn.pequeno { padding: 6px 11px; font-size: 12.5px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* --- Avisos ----------------------------------------------------------------- */

.avisos { display: grid; gap: 10px; margin-bottom: 18px; }
.aviso {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px; border-radius: var(--raio-p);
    border: 1px solid var(--borda-forte); background: var(--painel);
    font-size: 13.5px; color: var(--texto-2);
}
.aviso .ic { font-size: 14px; line-height: 1.4; }
.aviso.sucesso { border-color: rgba(63,192,122,.35);  background: var(--ok-fraco);     color: #bff0d4; }
.aviso.erro    { border-color: rgba(226,88,74,.35);   background: var(--risco-fraco);  color: #f6c9c4; }
.aviso.atencao{ border-color: rgba(224,161,58,.35);  background: var(--alerta-fraco); color: #f2ddb4; }
.aviso.info    { border-color: rgba(77,159,224,.35);  background: var(--info-fraco);   color: #c5e0f6; }

/* --- Barra de filtros ------------------------------------------------------- */

.filtros {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
    padding: 14px 18px; border-bottom: 1px solid var(--borda);
}
.filtros .campo { margin: 0; flex: 1 1 170px; min-width: 140px; }
.filtros .campo.largo { flex: 2 1 260px; }
.filtros .acoes { flex: 0 0 auto; }

/* --- Paginacao -------------------------------------------------------------- */

.paginacao {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 18px; border-top: 1px solid var(--borda);
    font-size: 12.5px; color: var(--texto-3);
}
.paginacao .paginas { display: flex; gap: 6px; }
.paginacao a, .paginacao span.atual {
    padding: 5px 10px; border-radius: var(--raio-p);
    border: 1px solid var(--borda-forte); color: var(--texto-2); text-decoration: none;
}
.paginacao a:hover { background: var(--painel-alto); text-decoration: none; }
.paginacao span.atual { background: var(--ouro-fraco); border-color: rgba(227,180,60,.35); color: var(--ouro); font-weight: 600; }

/* --- Grafico de barras (auditoria por dia) ---------------------------------- */

.barras { display: flex; align-items: flex-end; gap: 6px; height: 96px; padding: 6px 2px 0; }
.barras .barra { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.barras .barra i {
    display: block; border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--ouro), rgba(227,180,60,.35));
    min-height: 2px;
}
.barras-legenda { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10.5px; color: var(--texto-3); }

/* --- Trilha / detalhes ------------------------------------------------------ */

.lista-def { display: grid; grid-template-columns: 180px 1fr; gap: 1px; background: var(--borda); border-radius: var(--raio-p); overflow: hidden; }
.lista-def dt, .lista-def dd { margin: 0; padding: 11px 14px; background: var(--painel); font-size: 13.5px; }
.lista-def dt { color: var(--texto-3); font-size: 12px; font-weight: 600; }
.lista-def dd { color: var(--texto); word-break: break-word; }

pre.json {
    margin: 0; padding: 14px;
    background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio-p);
    font: 12px/1.6 var(--mono); color: var(--texto-2);
    overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}
pre.json ins { background: var(--ok-fraco); color: var(--ok); text-decoration: none; }
pre.json del { background: var(--risco-fraco); color: var(--risco); text-decoration: none; }

.hash { font-family: var(--mono); font-size: 11.5px; color: var(--texto-3); word-break: break-all; }

.trilha { display: grid; gap: 0; }
.trilha .item {
    display: grid; grid-template-columns: 150px 1fr; gap: 14px;
    padding: 12px 18px; border-bottom: 1px solid var(--borda); font-size: 13.5px;
}
.trilha .item:last-child { border-bottom: 0; }
.trilha .quando { color: var(--texto-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.trilha .oque { color: var(--texto-2); }
.trilha .oque strong { color: var(--texto); }

/* --- Roadmap dos modulos ---------------------------------------------------- */

.modulo { padding: 16px 18px; border: 1px dashed var(--borda-forte); border-radius: var(--raio); background: var(--fundo-2); }
.modulo .codigo { font: 700 11px var(--mono); color: var(--ouro); letter-spacing: .08em; }
.modulo h3 { margin: 6px 0 8px; font-size: 14.5px; color: var(--texto); }
.modulo p { margin: 0; font-size: 12.5px; color: var(--texto-3); line-height: 1.55; }

/* --- Telas fora da sessao (login, senha, erro) ------------------------------ */

.tela-central {
    min-height: 100vh; display: grid; place-items: center; padding: 28px;
    background:
        radial-gradient(1100px 520px at 50% -12%, rgba(227,180,60,.10), transparent 62%),
        var(--fundo);
}
.cartao-central { width: 100%; max-width: 428px; }
.cartao-central .marca-central { text-align: center; margin-bottom: 22px; }
.cartao-central .marca-central .selo {
    width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 14px;
    background: linear-gradient(150deg, var(--ouro), #b8862a);
    color: #17120a; font: 800 17px var(--fonte);
    display: grid; place-items: center;
    box-shadow: 0 8px 26px rgba(227,180,60,.24);
}
.cartao-central .marca-central h1 { font-size: 19px; }
.cartao-central .marca-central p { margin: 7px 0 0; font-size: 12.5px; color: var(--texto-3); }
.cartao-central .painel > .corpo { padding: 24px; }
.cartao-central .rodape { margin-top: 18px; text-align: center; font-size: 11.5px; color: var(--texto-3); line-height: 1.6; }

.codigo-erro { font: 800 58px/1 var(--fonte); color: var(--ouro); }

/* --- Utilitarios ------------------------------------------------------------ */

.mt-0 { margin-top: 0; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.texto-2 { color: var(--texto-2); }
.texto-3 { color: var(--texto-3); }
.pequeno { font-size: 12px; }
.nowrap { white-space: nowrap; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pilha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.linha-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }

/* --- Responsivo ------------------------------------------------------------- */

@media (max-width: 980px) {
    .grade.duas { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .app { flex-direction: column; }
    .lateral { width: 100%; flex: none; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--borda); }
    .menu { display: flex; gap: 4px; overflow-x: auto; padding: 8px; }
    .menu .grupo, .rodape-lateral { display: none; }
    .menu a { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
    .menu a.ativo { border-bottom-color: var(--ouro); }
    .conteudo { padding: 18px 14px 40px; }
    .topo { padding: 12px 14px; }
    .usuario-topo .quem { display: none; }
    .lista-def { grid-template-columns: 1fr; }
    .lista-def dt { padding-bottom: 0; background: var(--painel); }
    .trilha .item { grid-template-columns: 1fr; gap: 4px; }
}

@media print {
    .lateral, .topo, .filtros, .acoes, .paginacao { display: none !important; }
    body { background: #fff; color: #000; }
    .painel { border-color: #ccc; box-shadow: none; }
}

/* --- Ingestao de extratos --------------------------------------------------- */

.positivo { color: var(--ok); }
.negativo { color: var(--risco); }
.neutro   { color: var(--texto-3); }
.texto-risco { color: var(--risco); }

table.dados tr.apagada td { opacity: .45; }
table.dados tr.apagada td strong { font-weight: 500; }

.lista-notas { margin: 0; padding-left: 18px; }
.lista-notas li { margin-bottom: 12px; font-size: 13px; color: var(--texto-2); line-height: 1.6; }
.lista-notas li:last-child { margin-bottom: 0; }
.lista-notas strong { color: var(--texto); }

select.mini {
    padding: 4px 8px; font-size: 11.5px; max-width: 190px;
    background: var(--fundo-2); border-color: var(--borda);
}

input[type="file"] {
    width: 100%; padding: 10px 12px;
    background: var(--fundo); border: 1px dashed var(--borda-forte);
    border-radius: var(--raio-p); color: var(--texto-2); font: 13px var(--fonte);
    cursor: pointer;
}
input[type="file"]:hover { border-color: var(--ouro); background: var(--fundo-2); }
input[type="file"]::file-selector-button {
    margin-right: 12px; padding: 6px 12px;
    background: var(--painel-alto); border: 1px solid var(--borda-forte);
    border-radius: var(--raio-p); color: var(--texto); font: 600 12.5px var(--fonte);
    cursor: pointer;
}

/* Coluna de valor sempre alinhada e tabular, para conferir contra o extrato. */
table.dados td.num, .lista-def dd.positivo, .lista-def dd.negativo {
    font-variant-numeric: tabular-nums;
}

/* --- M1: extratificacao consolidada ----------------------------------------- */

/* Ponte da conciliacao: bruto -> expurgos -> fluxo real. */
.ponte {
    display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap;
}
.ponte .etapa {
    flex: 1 1 170px; min-width: 150px;
    padding: 14px 16px; border-radius: var(--raio-p);
    background: var(--fundo-2); border: 1px solid var(--borda);
}
.ponte .etapa .rotulo {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--texto-3); line-height: 1.35;
}
.ponte .etapa .valor {
    margin-top: 8px; font-size: 19px; font-weight: 700;
    font-variant-numeric: tabular-nums; color: var(--texto);
}
.ponte .etapa .nota { margin-top: 6px; font-size: 11.5px; color: var(--texto-3); line-height: 1.45; }
.ponte .etapa.expurgo { border-style: dashed; }
.ponte .etapa.expurgo .valor { color: var(--info); }
.ponte .etapa.destaque { border-color: rgba(227,180,60,.35); background: var(--ouro-fraco); }
.ponte .etapa.destaque .valor { color: var(--ouro); }
.ponte .etapa.final { border-color: rgba(63,192,122,.35); background: var(--ok-fraco); }
.ponte .etapa.final .valor { color: var(--ok); }
.ponte .operador {
    display: grid; place-items: center; padding: 0 2px;
    font: 700 17px var(--fonte); color: var(--texto-3);
}

/* Cartoes de alerta do painel. */
.grade.alertas { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.alerta-cartao { padding: 16px 18px; border-left-width: 3px; }
.alerta-cartao .titulo {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--texto-3);
}
.alerta-cartao .numero { margin-top: 7px; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.alerta-cartao p { margin: 9px 0 12px; font-size: 12px; line-height: 1.55; color: var(--texto-2); }
.alerta-cartao.risco  { border-left-color: var(--risco); }
.alerta-cartao.risco .numero { color: var(--risco); }
.alerta-cartao.alerta { border-left-color: var(--alerta); }
.alerta-cartao.alerta .numero { color: var(--alerta); }
.alerta-cartao.info   { border-left-color: var(--info); }
.alerta-cartao.info .numero { color: var(--info); font-size: 15px; }

/* Matriz conta x mes: primeira coluna fixa na rolagem horizontal. */
table.matriz { font-size: 12.5px; }
table.matriz th, table.matriz td { padding: 9px 11px; }
table.matriz th.fixa, table.matriz td.fixa {
    position: sticky; left: 0; z-index: 2;
    background: var(--painel); min-width: 190px;
    box-shadow: 1px 0 0 var(--borda);
}
table.matriz thead th.fixa { background: var(--fundo-2); z-index: 3; }
table.matriz tbody tr:hover td.fixa { background: var(--painel-alto); }
table.matriz td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.matriz .total { background: rgba(255,255,255,.02); font-weight: 600; }
table.matriz tfoot td {
    border-top: 1px solid var(--borda-forte); font-weight: 600;
    background: var(--fundo-2);
}
table.matriz a.celula { color: inherit; text-decoration: none; display: block; }
table.matriz a.celula:hover { text-decoration: underline; }
table.matriz .vazia { opacity: .4; }

/* --- M2: variacao patrimonial ------------------------------------------------ */

.resultado-m2 { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.resultado-m2 .numero {
    font-size: 34px; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.resultado-m2 .explicacao {
    flex: 1 1 320px; font-size: 13px; line-height: 1.6; color: var(--texto-2);
    max-width: 720px;
}

/* Celula de saldo editavel dentro da tabela de conciliacao. */
input.valor-celula {
    width: 140px; padding: 6px 9px; text-align: right;
    font: 13px/1.3 var(--mono); font-variant-numeric: tabular-nums;
    background: var(--fundo); border: 1px solid var(--borda);
}
input.valor-celula:focus { border-color: var(--ouro); }
input.valor-celula[readonly] { background: transparent; border-color: transparent; }

/* --- M3: partes relacionadas ------------------------------------------------- */

textarea {
    min-height: 84px; resize: vertical;
    font: 13px/1.5 var(--mono);
}

/* --- M4: monitor de riscos --------------------------------------------------- */

.apontamentos { display: grid; gap: 0; }

.apontamento {
    padding: 16px 18px;
    border-bottom: 1px solid var(--borda);
    border-left: 3px solid var(--borda-forte);
}
.apontamento:last-child { border-bottom: 0; }
.apontamento.alta  { border-left-color: var(--risco); }
.apontamento.media { border-left-color: var(--alerta); }
.apontamento.baixa { border-left-color: var(--borda-forte); }
.apontamento.tratado { opacity: .72; }
.apontamento.tratado:hover { opacity: 1; }

.apontamento .cabecalho {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.apontamento .titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.apontamento .titulo strong { color: var(--texto); font-weight: 600; }
.apontamento .valor { font: 700 16px var(--fonte); font-variant-numeric: tabular-nums; white-space: nowrap; }

.apontamento .resumo {
    margin: 10px 0 0; max-width: 900px;
    font-size: 12.5px; line-height: 1.6; color: var(--texto-2);
}
.apontamento .meta {
    margin-top: 9px; display: flex; gap: 7px; flex-wrap: wrap;
    font-size: 11.5px; color: var(--texto-3);
}
.apontamento .tratamento {
    margin-top: 11px; padding: 10px 12px;
    background: var(--ok-fraco); border-radius: var(--raio-p);
    font-size: 12.5px; color: var(--texto-2); line-height: 1.55;
}
.apontamento .tratamento strong { color: var(--ok); }

.acao-tratar { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.acao-tratar input[type="text"] { flex: 1 1 220px; padding: 6px 10px; font-size: 12.5px; }
.acao-tratar select.mini { flex: 0 0 auto; }