/* Portal do parceiro do motor de crédito. Tokens e blocos comuns vêm do jacredita.css (o design system
   da JáCredita, carregado antes); aqui só o que é deste portal: o menu lateral claro, o editor da
   política, o painel do rascunho, a simulação no painel escuro e o aviso de reconexão. */

/* ---------- Estrutura: menu lateral claro ---------- */
.portal { min-height: 100vh; display: flex; }
.lateral {
    width: 250px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem .9rem; background: var(--bg); border-right: 1px solid var(--line);
}
.lateral-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .35rem; }
.lateral .marca { font-size: 1.15rem; min-width: 0; }
.lateral-corpo { display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.lateral-rotulo { font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding: 0 .5rem; }
.alternar-menu { display: none; align-items: center; gap: .35rem; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral nav a { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 500; padding: .55rem .7rem; border-radius: var(--r-controle); }
.lateral nav a:hover { background: var(--brand-50); text-decoration: none; }
.lateral nav a.active { background: var(--brand); color: var(--on-brand); font-weight: 600; }
svg.icone { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lateral-rodape {
    margin-top: auto; display: grid; gap: .15rem; font-size: .82rem; color: var(--muted); line-height: 1.4;
    border: 1px solid var(--line); border-radius: var(--r-controle); padding: .65rem .75rem; overflow-wrap: anywhere;
}
.lateral-rodape .menu-parceiro { color: var(--ink); font-size: .9rem; }
.lateral-rodape .links-conta { display: inline-flex; gap: .9rem; margin-top: .25rem; }
.botao-link { font: inherit; font-weight: 500; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; }
.botao-link:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main { padding: 1.5rem 1.5rem 3rem; width: 100%; max-width: 1240px; margin: 0 auto; }
.conta main { padding: 2rem 1.9rem 1.75rem; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.painel-tabela { padding: 0; overflow-x: auto; }
.rolagem { overflow-x: auto; max-width: 100%; }
.tabela code, .tabela td.codigo { white-space: nowrap; word-break: normal; }

/* ---------- Cabeçalho da política ---------- */
.cabecalho-politica { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: flex-end; justify-content: space-between; margin-bottom: .75rem; }
.cabecalho-politica h1 { margin-bottom: .35rem; }
.cabecalho-politica .subtitulo { margin: 0; }
.seletor-politica { display: flex; flex-direction: column; gap: .25rem; font-weight: 500; font-size: 13px; }
.seletor-politica select { font-family: var(--fonte-mono); font-size: 13px; min-height: 40px; }

/* ---------- Editor: abas, grupos e campos ---------- */
.editor-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.editor-grade > .painel { margin-bottom: 0; }
.editor { padding-top: .35rem; }
.abas button { font: inherit; background: none; border: 0; padding: .7rem .9rem; min-height: 44px; color: var(--muted); font-weight: 500; cursor: pointer; }
.abas button:hover { color: var(--ink); }
.abas button.active { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.grupos { display: flex; flex-direction: column; gap: 1.25rem; }
.grupo { border: 1px solid var(--line); border-radius: var(--r); padding: .75rem 1rem 1rem; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.grupo > legend { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 0 .4rem; }
.grupo > .nota { margin: 0; }
.campos-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .9rem 1rem; }
.campo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; margin: 0; }
.campo > label { font-weight: 500; }
.campo-largo { grid-column: 1 / -1; }
.campo-com-unidade { display: flex; align-items: stretch; border: 1px solid var(--campo); border-radius: var(--r-controle); background: var(--bg); overflow: hidden; }
.campo-com-unidade:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--brand); }
.campo-com-unidade input { flex: 1 1 auto; border: 0; border-radius: 0; min-height: 40px; font-weight: 600; font-variant-numeric: tabular-nums; }
.campo-com-unidade input:focus { outline: none; }
.campo-com-unidade .unidade { display: flex; align-items: center; padding: 0 .6rem; background: var(--alt); color: var(--muted); font-size: 12px; border-left: 1px solid var(--line); white-space: nowrap; }
.campo-alterado .campo-com-unidade, .campo-alterado > textarea { border-color: var(--accent); }
.campo-rodape { min-height: 1.2rem; }
.campo-rodape small { font-size: .8rem; }
.campo-rodape .selo { white-space: normal; }
.caixa-marcar { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .75rem; border: 1px solid var(--line); border-radius: var(--r-controle); cursor: pointer; font-weight: 500; }
.campo-alterado > .caixa-marcar { border-color: var(--accent); }
input:disabled, textarea:disabled, select:disabled { background: var(--alt); color: var(--muted); cursor: not-allowed; }
.opcoes { border: 0; padding: 0; }
.opcoes > legend { font-weight: 500; padding: 0; margin-bottom: .3rem; }
.opcoes-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem; }
.opcao { position: relative; display: flex; flex-direction: column; gap: 2px; padding: .6rem .75rem .6rem 2.2rem; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-controle); cursor: pointer; }
.opcao input { position: absolute; left: .75rem; top: .8rem; accent-color: var(--brand); }
.opcao-nome { font-weight: 700; }
.opcao-descricao { font-size: 12px; color: var(--muted); }
.opcao-marcada { border-color: var(--brand); background: var(--brand-50); }
.marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; }

/* ---------- Editor em blocos: blocos, parâmetros de contrato e regras ---------- */
.bloco-topo { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-start; justify-content: space-between; }
.bloco-topo .nota { margin: 0; flex: 1 1 280px; }
.bloco-selos { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.bloco .alerta { margin: 0; }
.campo-rodape { display: flex; flex-direction: column; gap: .15rem; }
.campo-com-erro .campo-com-unidade, .campo-com-erro > textarea { border-color: var(--perigo); }
.campo-contrato .campo-com-unidade { background: var(--alt); }
.etiqueta-contrato { font-size: .68rem; margin-left: .25rem; vertical-align: middle; }
.acrescentar-bloco .filtros { margin: 0; }
.tabela-regras { min-width: 980px; }
.tabela-regras td { vertical-align: top; }
.tabela-regras input, .tabela-regras select { width: 100%; min-width: 0; }
.tabela-regras td:first-child { width: 12rem; }
.tabela-regras .valor-regra { min-width: 11rem; }
.faixa-regra { display: flex; gap: .35rem; align-items: center; }
.faixa-regra .unidade { color: var(--muted); font-size: 12px; white-space: nowrap; }
.marcas-regra { display: flex; flex-wrap: wrap; gap: .35rem; }
.marcas-regra .caixa-marcar { min-height: 36px; padding: 0 .5rem; }
.linha-erro-regra td { padding-top: 0; border-top: 0; }
.linha-erro-regra .erro-campo { display: block; }

/* ---------- Painel do rascunho ---------- */
.rascunho { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.rascunho h2 { margin: 0; }
.rascunho .alerta { margin-bottom: 0; }
.diferencas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.diferencas li { display: flex; flex-direction: column; gap: .1rem; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: var(--r-controle); background: var(--bg); }
.diferenca-campo { font-weight: 600; }
.diferenca-valores { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.diferenca-de { color: var(--muted); text-decoration: line-through; }
.diferenca-para { color: var(--ink); }
.acoes-rascunho { flex-direction: column; align-items: stretch; }
.acoes-rascunho .botao { white-space: normal; }
.campo-comentario { display: flex; flex-direction: column; gap: .25rem; font-weight: 500; }
.botao-perigo-contorno { background: var(--bg); border-color: var(--perigo); color: var(--perigo); }
.botao-perigo-contorno:hover { background: var(--perigo-50); }
.alerta-dica { margin: .4rem 0 0; }

/* ---------- Aprovações ---------- */
.rascunho-pendente h3 { font-size: .95rem; margin: .75rem 0 .5rem; }
.rascunho-pendente .acoes, .rascunho-pendente .confirmacao { margin-top: .75rem; }
.confirmacao label { display: flex; flex-direction: column; gap: .25rem; font-weight: 500; }

/* ---------- Simulação no painel escuro ---------- */
[data-resultado] {
    margin-top: 1rem; background: var(--panel); color: #fff; border-radius: 18px; padding: 1.2rem 1.35rem 1.35rem;
}
[data-resultado] h2, [data-resultado] h3 { color: #fff; }
[data-resultado] h3 { font-size: .95rem; margin: 1.1rem 0 .5rem; }
[data-resultado] .nota { color: var(--panel-ink); margin: -.25rem 0 .9rem; }
[data-resultado] .selo-bom { background: rgba(127, 209, 168, .14); color: var(--ok-claro); }
[data-resultado] .selo-aviso { background: rgba(217, 164, 65, .16); color: var(--accent); }
.simulacao-topo { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .5rem; }
.simulacao-topo h2 { margin: 0; }
.tabela-escura { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tabela-escura th, .tabela-escura td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--panel-line); vertical-align: top; }
.tabela-escura thead th { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--panel-ink); }
.tabela-escura tbody th { font-weight: 500; color: var(--brand-100); }
.tabela-escura tbody th small { color: var(--panel-ink); }
.tabela-escura .numero { text-align: right; font-weight: 600; }
.tabela-escura td:last-child.numero { text-decoration: underline 2px var(--accent); text-underline-offset: 5px; }
.tabela-escura .codigo { color: var(--brand-100); }

/* ---------- Testar proposta ---------- */
.formulario-proposta .campos-grade { margin: .25rem 0 1rem; }
.formulario-proposta .campo .caixa-marcar { margin-top: auto; }
.formulario-proposta select.invalid, .formulario-proposta input.invalid { border-color: var(--perigo); }
.campo-com-unidade:has(input.invalid) { border-color: var(--perigo); }
.campo-com-unidade input.invalid { outline: none; }
.resposta-proposta h2 { margin-top: 0; }
.resposta-proposta dl.dados { margin-bottom: 0; }
.resposta-proposta dd { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.propostas-lados { align-items: start; }
.propostas-lados > .proposta-lado { margin: 0; min-width: 0; }
.proposta-lado h3 { font-size: .95rem; margin: 1.1rem 0 .5rem; }
.proposta-lado .seguro-topo { margin: 1.1rem 0 .5rem; }
.proposta-lado .seguro-topo h3 { margin: 0; }
.lista-motivos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.lista-motivos .codigo { display: block; font-size: .78rem; }
[data-resultado] .lista-motivos .codigo { color: var(--brand-100); }
.tabela-valores tbody th { width: 45%; }
.tabela .valor, .tabela-escura .valor { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela td.valor, .tabela-escura td.valor { font-weight: 600; }
.tabela-escura td.valor small { font-weight: 400; color: var(--panel-ink); }
.tabela-cronograma td, .tabela-cronograma th { padding: .35rem .5rem; }
.ver-json summary { cursor: pointer; font-weight: 600; }
.ver-json h3 { font-size: .9rem; margin: 1rem 0 .4rem; }
.ver-json pre { margin: 0; max-height: 32rem; overflow: auto; }

@media (max-width: 1000px) {
    .editor-grade { grid-template-columns: 1fr; }
    .rascunho { position: static; }
}

@media (max-width: 800px) {
    /* Celular: o menu vira uma barra no topo com o botão "Menu", que abre a lista. */
    .portal { flex-direction: column; }
    .lateral { width: 100%; height: auto; position: static; padding: .6rem 1rem; gap: .6rem; border-right: 0; border-bottom: 1px solid var(--line); }
    .alternar-menu { display: inline-flex; }
    .lateral-corpo { display: none; }
    .menu-aberto .lateral-corpo { display: flex; }
    main { padding: 1rem 1rem 2.5rem; }
}

/* ---------- Reconexão do circuito e erro do Blazor ---------- */
#blazor-error-ui {
    color-scheme: light only; background: var(--accent-50); bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }