/*
	EB Money — sistema de identidade visual (manual de identidade aprovado nos mockups)
	Extraído dos mockups validados (Ficha de Carteira, Financeiro/Livro-razão, Compliance).
	Sprint 1 (2026-07-06): primeira tela real a usar este design system — futuras telas
	redesenhadas devem reaproveitar este arquivo em vez de duplicar os tokens.
*/
:root{
  --verde: #2F5D4A;
  --verde-80: #597D6E;
  --verde-60: #829E92;
  --verde-40: #ACBEB7;
  --cinza: #3E3E3E;
  --cinza-60: #666666;
  --cinza-40: #999999;
  --cinza-10: #E5E5E5;
  --verde-claro: #B9D2C6;
  --marfim: #F5F1E8;
  --marfim-70: #F7F4ED;
  --dourado: #C2A87B;
  --dourado-60: #DACBB0;
  --dourado-10: #F9F6F2;
  --white: #FFFFFF;
  --morno: #9C7A2E;
  --azul: #2B5A7A;
  --azul-bg: #E7EEF5;
  --verde-ok: #2C6B41;
  --verde-ok-bg: #E1EFE6;
  --vermelho: #B0432E;
  --vermelho-bg: #F7E4DE;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 2px 6px rgba(47,93,74,.10);
  --shadow-lg: 0 10px 28px rgba(47,93,74,.16);
  --mono: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}

.eb-app{background:var(--marfim);color:var(--cinza);font-family:'Inter',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;min-height:100vh;font-size:15px;}
.eb-app svg.icon{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

.eb-topnav{background:var(--verde);color:var(--marfim);display:flex;align-items:center;gap:2rem;padding:0 1.5rem;height:60px;}
.eb-topnav .eb-logo-mark{height:26px;display:block;}
.eb-topnav nav{display:flex;gap:.3rem;flex:1;flex-wrap:wrap;}
.eb-topnav nav a,.eb-topnav nav a:visited{color:#D7E2DB;text-decoration:none;font-size:.86rem;font-weight:500;padding:.55rem .9rem;border-radius:6px;display:flex;align-items:center;gap:.4rem;cursor:pointer;}
.eb-topnav nav a:hover{background:rgba(255,255,255,.08);color:var(--marfim);}
.eb-topnav nav a.active{color:var(--white);border-bottom:2px solid var(--dourado);border-radius:6px 6px 0 0;}
.eb-topnav nav a.eb-coming-soon{color:#9BB2A6;cursor:default;pointer-events:none;}
.eb-topnav nav a.eb-coming-soon:hover{background:none;color:#9BB2A6;}
.eb-topnav nav a.eb-coming-soon .eb-cs-tag{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:rgba(255,255,255,.12);color:#D7E2DB;padding:.1rem .4rem;border-radius:10px;margin-left:.35rem;}
.eb-topnav .eb-right{display:flex;align-items:center;gap:1rem;color:var(--marfim);}
.eb-avatar{width:32px;height:32px;border-radius:50%;background:var(--dourado);color:var(--verde);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem;font-family:'Bitter',serif;flex-shrink:0;}

.eb-wrap{max-width:1440px;margin:0 auto;padding:0 2rem 3rem 2rem;}

.eb-topbar2{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 0 0 0;flex-wrap:wrap;gap:.8rem;}
.eb-breadcrumb{font-size:.78rem;color:var(--cinza-40);}
.eb-breadcrumb a{color:var(--verde-80);text-decoration:none;cursor:pointer;}

.eb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;padding:1.1rem 0 1.4rem 0;flex-wrap:wrap;}
.eb-head-left h1{font-family:'Bitter',serif;font-size:1.55rem;margin:0 0 .4rem 0;color:var(--cinza);}
.eb-head-left .eb-client-line{font-size:.9rem;color:var(--verde-80);font-weight:600;margin-bottom:.5rem;}
.eb-badges{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;}

.eb-pill{font-size:.7rem;font-weight:700;padding:.3rem .7rem;border-radius:20px;display:inline-flex;align-items:center;gap:.35rem;}
.eb-pill.fase-ativa{background:var(--verde-ok-bg);color:var(--verde-ok);}
.eb-pill.fase-suspensa{background:var(--dourado-10);color:var(--morno);border:1px solid var(--dourado-60);}
.eb-pill.fase-cancelada{background:var(--vermelho-bg);color:var(--vermelho);}
.eb-pill.fase-encerrada{background:var(--cinza-10);color:var(--cinza-60);}
.eb-pill.fase-assinar{background:var(--azul-bg);color:var(--azul);}
.eb-pill.etapa{background:var(--verde-claro);color:var(--verde);}
.eb-pill.destino{background:var(--marfim-70);color:var(--cinza-60);border:1px solid var(--cinza-10);}

/* Variantes semânticas genéricas, sobre os mesmos tokens das variantes de fase.
   As telas de Pessoas já usavam .ok/.info/.warn desde 05/08 sem que existissem —
   renderizavam como pílula cinza. Definidas aqui, valem para todo o sistema. */
.eb-pill.ok{background:var(--verde-ok-bg);color:var(--verde-ok);}
.eb-pill.info{background:var(--azul-bg);color:var(--azul);}
.eb-pill.warn{background:var(--dourado-10);color:var(--morno);border:1px solid var(--dourado-60);}
.eb-pill.danger{background:var(--vermelho-bg);color:var(--vermelho);}

.eb-head-actions{display:flex;gap:.5rem;flex-wrap:wrap;}
.eb-btn{border:none;border-radius:7px;font-family:'Inter',sans-serif;font-weight:600;font-size:.8rem;padding:.6rem 1rem;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;}
/* Botão que é <a> herdava o sublinhado do link — some em todos os estados. */
.eb-btn,.eb-btn:hover,.eb-btn:focus{text-decoration:none;}
.eb-btn-primary{background:var(--verde);color:var(--marfim);}
.eb-btn-primary:hover{background:#294F3F;color:var(--marfim);}
.eb-btn-ghost{background:transparent;color:var(--verde);border:1px solid var(--verde-40);}
.eb-btn-ghost:hover{background:var(--verde-claro);}
.eb-btn-danger-ghost{background:transparent;color:var(--vermelho);border:1px solid #E0B8AC;}
.eb-btn-danger-ghost:hover{background:var(--vermelho-bg);}
.eb-btn:disabled{opacity:.4;cursor:not-allowed;}

.eb-tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--cinza-10);margin-bottom:1.3rem;flex-wrap:wrap;}
/* Abas podem ser <button> (troca de painel na mesma tela) ou <a> (navega entre as
   telas de um mesmo guarda-chuva, como Pessoas). As duas têm o mesmo aspecto. */
.eb-tabs button,.eb-tabs a{border:none;background:none;font-family:inherit;font-size:.86rem;font-weight:600;color:var(--cinza-60);padding:.75rem 1rem;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;}
.eb-tabs button:hover,.eb-tabs a:hover{color:var(--verde);}
.eb-tabs button.active,.eb-tabs a.active{color:var(--verde);border-bottom-color:var(--verde);}
.eb-tabs .eb-pill{margin-left:.15rem;}

/* ---------------------------------------------------------------------------
   Filtro de listagem e paginação — componentes do padrão de Index.

   Antes disto cada tela improvisava: Clientes e Cedentes usavam `.filters-container`
   (flex, do Site.css legado, com tokens antigos) mais uma família `cliente-*`/
   `cedente-*` que NÃO estava definida em CSS nenhum — a barra de paginação
   renderizava sem estilo. Pessoas e Parceiros usavam `.eb-form-row` com
   grid-template-columns inline, diferente em cada tela.
   --------------------------------------------------------------------------- */
.eb-filtros{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.8rem;align-items:end;}
.eb-filtros .eb-form-group{margin-bottom:0;}
/* Busca livre ocupa o dobro: é o campo que o operador usa em 9 de cada 10 vezes. */
.eb-filtros .eb-filtro-largo{grid-column:span 2;}
.eb-filtros .eb-filtro-acoes{display:flex;align-items:flex-end;}
.eb-filtros .eb-filtro-acoes .eb-btn{width:100%;}
@media(max-width:640px){.eb-filtros .eb-filtro-largo{grid-column:span 1;}}

/* Linha de resumo entre o filtro e a tabela ("12 pessoas — 3 com mais de um papel"). */
.eb-lista-resumo{font-size:.8rem;color:var(--cinza-40);margin:.9rem 0 .6rem;}

.eb-pagination{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--cinza-10);}
.eb-pagination .eb-page-size{display:flex;align-items:center;gap:.45rem;}
.eb-pagination .eb-page-size .eb-label{margin:0;white-space:nowrap;}
.eb-pagination .eb-page-size .eb-select{width:auto;padding-top:.35rem;padding-bottom:.35rem;}
.eb-pagination .eb-page-status{font-size:.8rem;color:var(--cinza-40);margin-right:auto;}
.eb-pagination .eb-page-actions{display:flex;gap:.3rem;}
.eb-pagination .eb-page-actions .eb-btn{padding:.35rem .7rem;font-size:.8rem;}

/* Estado vazio de tabela: mesma voz em todas as listagens. */
.eb-empty{text-align:center;color:var(--cinza-40);padding:1.6rem .8rem;font-size:.86rem;}

/* Título de seção dentro de um card (Identidade, Papéis, Contatos…). */
.eb-secao-titulo{font-family:'Bitter',serif;font-size:.95rem;color:var(--verde);margin:0 0 .7rem;}

/* ---------------------------------------------------------------------------
   Linha do tempo da Pessoa. Marco tem bolinha cheia e texto forte; detalhe do
   dia a dia fica esmaecido, para a história não sumir no meio do extrato.
   --------------------------------------------------------------------------- */
.eb-timeline{list-style:none;margin:0;padding:0 0 0 1.1rem;border-left:2px solid var(--cinza-10);}
.eb-timeline li{position:relative;padding:0 0 1rem 1.1rem;}
.eb-timeline li::before{content:'';position:absolute;left:-1.42rem;top:.35rem;width:10px;height:10px;border-radius:50%;background:var(--cinza-10);border:2px solid var(--white);}
.eb-timeline li.marco::before{background:var(--verde);}
.eb-timeline li:not(.marco){opacity:.72;}
.eb-timeline-topo{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.88rem;}
.eb-timeline-data{margin-left:auto;font-size:.76rem;color:var(--cinza-40);white-space:nowrap;}
.eb-timeline-detalhe{font-size:.82rem;color:var(--cinza-60);margin-top:.15rem;}

/* ---------------------------------------------------------------------------
   Quadro de Oportunidades. Rola na horizontal dentro do próprio contêiner —
   o corpo da página nunca rola de lado.
   --------------------------------------------------------------------------- */
.eb-kanban{display:flex;gap:.8rem;overflow-x:auto;padding-bottom:.8rem;align-items:flex-start;}
.eb-coluna{flex:0 0 250px;background:var(--marfim-70);border:1px solid var(--cinza-10);border-radius:8px;padding:.7rem;}
.eb-coluna-topo{display:flex;align-items:center;justify-content:space-between;gap:.4rem;}
.eb-coluna-nome{font-family:'Bitter',serif;font-size:.84rem;color:var(--verde);}
.eb-coluna-ajuda{font-size:.7rem;color:var(--cinza-40);margin:.25rem 0 .6rem;line-height:1.35;min-height:2.4em;}
.eb-coluna-corpo{min-height:80px;display:flex;flex-direction:column;gap:.5rem;}
.eb-coluna-corpo.sobre{outline:2px dashed var(--verde-40);outline-offset:3px;border-radius:6px;}

.eb-card-op{background:var(--white);border:1px solid var(--cinza-10);border-left:3px solid var(--verde-40);border-radius:6px;padding:.6rem .7rem;cursor:grab;}
.eb-card-op.atrasada{border-left-color:var(--vermelho);}
.eb-card-op-nome{display:block;font-weight:600;font-size:.85rem;color:var(--verde);text-decoration:none;}
.eb-card-op-nome:hover{text-decoration:underline;}
.eb-card-op-linha{font-size:.76rem;color:var(--cinza-60);margin-top:.2rem;}
.eb-card-op-acao{font-size:.73rem;color:var(--cinza-40);margin-top:.4rem;}
.eb-card-op-acao.atrasada{color:var(--vermelho);font-weight:600;}
.eb-card-op-acao.sem{font-style:italic;}

/* Resultado da busca de pessoa ao abrir uma oportunidade. */
.eb-op-resultado{padding:.45rem .6rem;border:1px solid var(--cinza-10);border-radius:6px;margin-bottom:.35rem;cursor:pointer;background:var(--white);}
.eb-op-resultado:hover{background:var(--marfim-70);border-color:var(--verde-40);}

/* Campo de valor com a unidade colada à esquerda: o operador digita só o número,
   e a moeda deixa de disputar espaço com o rótulo. */
.eb-input-prefixo{display:flex;align-items:stretch;}
.eb-input-prefixo>span{display:flex;align-items:center;padding:0 .6rem;background:var(--marfim-70);border:1px solid var(--cinza-10);border-right:none;border-radius:6px 0 0 6px;font-size:.8rem;font-weight:600;color:var(--cinza-60);white-space:nowrap;}
.eb-input-prefixo>.eb-input{border-radius:0 6px 6px 0;text-align:right;}

/* Ficha em duas colunas: dados à esquerda, histórico à direita. */
.grid-ficha{display:grid;grid-template-columns:1.35fr 1fr;gap:1rem;align-items:start;}
@media(max-width:980px){.grid-ficha{grid-template-columns:1fr;}}
.eb-tab-panel{display:none;}
.eb-tab-panel.active{display:block;}

.eb-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1.3rem 1.4rem;margin-bottom:1.2rem;}
.eb-card h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--verde-80);margin:0 0 1rem 0;font-weight:700;}

/* Neutraliza o cabeçalho de modal Bootstrap das partials reaproveitadas
   (_DetalheCarteira, _AnexosCarteira, _DadosLiquidacaoCarteira, _EditCarteira)
   quando carregadas dentro de um card da Ficha, em vez de dentro de um modal. */
.eb-card-partial .modal-header{background:none;border:none;padding:0 0 1rem 0;margin-bottom:1rem;border-bottom:1px solid var(--cinza-10);}
.eb-card-partial .modal-header .close{display:none;}
.eb-card-partial .modal-header .modal-title{font-family:'Bitter',serif;font-size:1rem;color:var(--cinza);margin:0;}
.eb-card-partial .modal-body{padding:0;}
.eb-card-partial .modal-footer{border-top:1px solid var(--cinza-10);padding:1rem 0 0 0;background:none;}

.eb-loading{padding:2rem;text-align:center;color:var(--cinza-40);font-size:.85rem;}

/* Grid de leitura (label + valor) pra telas de detalhe/ficha — substitui .detail-section/
   .detail-grid/.detail-item do CSS legado (usado em _DetalheCarteira, _DetalheLote etc.). */
.eb-detail-section{margin-bottom:1.6rem;}
.eb-detail-section:last-child{margin-bottom:0;}
.eb-detail-section h4{display:flex;align-items:center;gap:.5rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--verde-80);margin:0 0 .9rem 0;font-weight:700;}
.eb-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem 1.5rem;}
.eb-detail-item{display:flex;flex-direction:column;gap:.25rem;}
.eb-detail-label{font-size:.7rem;color:var(--cinza-40);text-transform:uppercase;letter-spacing:.04em;}
.eb-detail-value{font-size:.9rem;color:var(--cinza);}
.eb-detail-value.highlight{font-weight:700;color:var(--verde);font-size:1rem;}
.eb-detail-value a{color:var(--verde-80);}

/* Cartões compactos pra grades de itens (extrato de pagamentos, parcelas em card) —
   mesmos tokens do .eb-card, só com padding/tipografia reduzidos. */
.eb-mini-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.9rem;margin-top:.9rem;}
.eb-mini-card{background:var(--white);border:1px solid var(--cinza-10);border-left:3px solid var(--verde);border-radius:8px;padding:.85rem 1rem;}
.eb-mini-card-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.6rem;}
/* Lista rótulo/valor usada na ficha da Pessoa e na comparação de identidades. Estava
   sendo aplicada nas views sem existir aqui — renderizava como <dl> cru. */
.eb-kv{display:grid;grid-template-columns:130px 1fr;gap:.25rem .6rem;font-size:.83rem;margin:0;}
.eb-kv dt{color:var(--cinza-40);font-size:.74rem;font-weight:400;}
.eb-kv dd{margin:0;}
.eb-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.35rem .9rem;font-size:.84rem;}
.eb-mini-grid .full{grid-column:1/-1;}
.eb-mini-card-title{font-family:'Bitter',serif;font-size:.85rem;color:var(--verde-80);}
/* Ações por operação no card (editar / anexos / excluir) — empurradas para a direita do head,
   depois dos pills de status e etapa. */
.eb-mini-card-acoes{display:flex;gap:.15rem;margin-left:auto;}
/* Histórico de comentários da operação — leitura, preserva as quebras de linha das entradas datadas. */
.eb-historico-comentarios{background:var(--cinza-05,#F5F5F3);border:1px solid var(--cinza-10);border-radius:6px;padding:.6rem .75rem;font-size:.78rem;color:var(--cinza-60);white-space:pre-wrap;max-height:160px;overflow-y:auto;}
.eb-mini-card-grid-fields{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .8rem;font-size:.76rem;color:var(--cinza-60);}
.eb-mini-card-grid-fields .full{grid-column:1 / -1;}
/* Par de valores (R$ a pagar | EB$ em créditos) com grid próprio, para ficarem sempre
   alinhados entre si independentemente de quantos campos venham antes no card. */
.eb-mini-card-valores{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .8rem;}
.eb-empty{text-align:center;color:var(--cinza-40);font-size:.85rem;padding:1.5rem;background:var(--marfim-70);border-radius:8px;}

/* Alertas contextuais (avisos de negócio: carteira sem reserva, saldo baixo, expirada etc.)
   — substitui as caixas com rgba()/emoji embutidas inline em _DetalheCarteira. */
.eb-alert{display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-radius:8px;font-size:.85rem;font-weight:600;margin-bottom:1.2rem;}
.eb-alert i{font-size:1rem;flex-shrink:0;}
.eb-alert-warning{background:var(--dourado-10);color:var(--morno);border:1px solid var(--dourado-60);}
.eb-alert-danger{background:var(--vermelho-bg);color:var(--vermelho);border:1px solid #E0B8AC;}
.eb-alert-info{background:var(--azul-bg);color:var(--azul);border:1px solid #B9CBDB;}

/* Alertas do Dashboard (Fase 5, 2026-07-31) — reusam as variantes de cor acima, mas são
   clicáveis e ficam lado a lado no topo da página. */
.eb-alertas-dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.8rem;margin-bottom:1.2rem;}
.eb-alerta-dash{display:flex;flex-direction:column;gap:.15rem;padding:.8rem 1rem;border-radius:8px;text-decoration:none;transition:filter .15s;}
.eb-alerta-dash:hover{filter:brightness(.97);text-decoration:none;}
.eb-alerta-dash strong{font-size:.85rem;}
.eb-alerta-dash span{font-size:.78rem;opacity:.9;}

/* Aliases de status (Lançamento/parcela) sobre os mesmos tokens de cor do .eb-pill de fase —
   nome próprio pra não confundir semântica de "fase da carteira" com "status da parcela". */
.eb-pill.status-pago{background:var(--verde-ok-bg);color:var(--verde-ok);}
.eb-pill.status-atrasado{background:var(--vermelho-bg);color:var(--vermelho);}
.eb-pill.status-suspenso{background:var(--dourado-10);color:var(--morno);border:1px solid var(--dourado-60);}
.eb-pill.status-em-aberto{background:var(--azul-bg);color:var(--azul);}

/* Etapa da OPERAÇÃO em carteira Mensal (task #117) — dimensão distinta do status financeiro
   acima: "Processando" reusa o .eb-pill.etapa (etapa da carteira), e "Liquidado" ganha
   contorno próprio para se destacar do verde de "Pago" sem virar mais uma cor no sistema. */
.eb-pill.etapa-liquidado{background:var(--verde-claro);color:var(--verde);border:1px solid var(--verde);font-weight:600;}

/* ============================================================================
   Acordeão de operação (demonstrativo de liquidação por operação, 2026-07-25;
   componente genérico — reusado também em "Carteiras do Cliente"). */
.eb-liq-contexto{display:flex;gap:2rem;flex-wrap:wrap;margin-bottom:1rem;font-size:.86rem;}
.eb-liq-contexto>div{display:flex;flex-direction:column;gap:.15rem;}
.liq-invalido{border-color:var(--vermelho) !important;background:var(--vermelho-bg) !important;}
.eb-liq-comp{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem;}
.eb-liq-comp .eb-input{max-width:110px;}
.eb-liq-rateio-editor{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--cinza-10);}
.eb-liq-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem;margin-bottom:1.1rem;}
.eb-liq-kpi{background:var(--marfim-70);border:1px solid var(--cinza-10);border-radius:8px;padding:.6rem .8rem;display:flex;flex-direction:column;gap:.2rem;}
.eb-liq-kpi .l{font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;color:var(--cinza-40);font-weight:700;}
.eb-liq-kpi .v{font-size:.95rem;font-weight:700;color:var(--verde);font-variant-numeric:tabular-nums;}
.eb-liq-grupo,.eb-acc-grupo{background:var(--white);border:1px solid var(--cinza-10);border-radius:10px;margin-bottom:.7rem;overflow:hidden;}
.eb-liq-grupo.aberta,.eb-acc-grupo.aberta{border-color:var(--verde-40);}
.eb-liq-head,.eb-acc-head{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;padding:.75rem 1rem;cursor:pointer;}
.eb-liq-head:hover,.eb-acc-head:hover{background:var(--marfim-70);}
.eb-liq-seta,.eb-acc-seta{color:var(--cinza-40);font-size:.8rem;transition:transform .15s;}
.eb-liq-grupo.aberta .eb-liq-seta,.eb-acc-grupo.aberta .eb-acc-seta{transform:rotate(90deg);}
.eb-liq-titulo,.eb-acc-titulo{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;}
.eb-liq-titulo strong,.eb-acc-titulo strong{color:var(--verde);font-variant-numeric:tabular-nums;}
.eb-liq-meta,.eb-acc-meta{flex-basis:100%;font-size:.72rem;color:var(--cinza-40);}
.eb-liq-totais,.eb-acc-totais{display:flex;gap:1.3rem;justify-content:flex-end;font-variant-numeric:tabular-nums;}
.eb-liq-totais>div,.eb-acc-totais>div{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;}
.eb-liq-totais .l,.eb-acc-totais .l{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--cinza-40);font-weight:700;}
.eb-liq-totais .v,.eb-acc-totais .v{font-size:.84rem;font-weight:700;}
.eb-liq-totais .v.destaque,.eb-acc-totais .v.destaque{color:var(--verde);}
.eb-liq-corpo,.eb-acc-corpo{display:none;border-top:1px solid var(--cinza-10);padding:.9rem 1rem;}
.eb-liq-grupo.aberta .eb-liq-corpo,.eb-acc-grupo.aberta .eb-acc-corpo{display:block;}
.eb-liq-tabela td{padding:.3rem .4rem;}
.eb-liq-tabela .eb-input,.eb-liq-tabela .eb-select{padding:.35rem .5rem;font-size:.8rem;min-width:90px;width:100%;}
.eb-liq-tabela .liquidacao-texto{min-width:130px;}
.eb-liq-tabela .liq-curto{min-width:80px;}
.eb-liq-tabela .liquidacao-valor,.eb-liq-tabela .liquidacao-percentual,.eb-liq-tabela .liq-calculado{text-align:right;}
.eb-liq-tabela .liq-calculado{background:var(--marfim-70);color:var(--cinza-60);pointer-events:none;font-weight:600;}
.eb-liq-tabela th.num{text-align:right;}
.eb-liq-tabela .liq-acoes{white-space:nowrap;}
.eb-liq-vazio,.eb-acc-vazio{text-align:center;color:var(--cinza-40);font-size:.8rem;padding:.9rem;background:var(--marfim-70);border-radius:8px;margin-top:.3rem;}

/* Item de anexo/documento (reskin Anexos & Documentos, 2026-07-30) */
.eb-anexo-item{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.55rem .8rem;background:var(--marfim-70);border:1px solid var(--cinza-10);border-radius:8px;margin-bottom:.45rem;}
.eb-anexo-info{display:flex;align-items:center;gap:.7rem;min-width:0;}
.eb-anexo-icone{font-size:1.3rem;color:var(--verde);flex-shrink:0;}
.eb-anexo-nome{font-weight:600;font-size:.85rem;word-break:break-all;}
.eb-anexo-meta{font-size:.72rem;color:var(--cinza-40);display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.1rem;}
/* Trilha de autoria do anexo (quem anexou / quem substituiu o arquivo) — informação de
   auditoria, então fica um degrau abaixo da meta na hierarquia visual. */
.eb-anexo-autoria{font-size:.68rem;color:var(--cinza-40);display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.2rem;}
.eb-anexo-acoes{display:flex;gap:.35rem;flex-shrink:0;}
.eb-anexo-upload{display:flex;gap:.6rem;align-items:stretch;flex-wrap:wrap;}
.eb-anexo-upload .eb-input[type="file"]{flex:1;min-width:220px;}
@media (max-width:900px){.eb-acc-head{grid-template-columns:auto 1fr;}.eb-acc-totais{grid-column:1 / -1;justify-content:flex-start;}}
.eb-liq-rateio-grupo{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.8rem;padding-top:.7rem;border-top:1px dashed var(--cinza-10);font-size:.78rem;color:var(--cinza-60);}
.eb-liq-saldo-grupo{margin-left:auto;font-weight:700;color:var(--verde);font-variant-numeric:tabular-nums;}
.eb-liq-acoes-grupo{margin-top:.7rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;}
.eb-liq-msg-grupo{font-size:.8rem;font-weight:600;}
.eb-liq-nova-operacao{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--cinza-10);}
.eb-liq-nova-nota{font-size:.76rem;color:var(--cinza-40);}
@media (max-width:900px){.eb-liq-head{grid-template-columns:auto 1fr;}.eb-liq-totais{grid-column:1 / -1;justify-content:flex-start;}}

/* Tabela leve/editorial (extraída do mockup de Auditoria/Compliance) — usar em listagens
   dentro de .eb-card no lugar do .table legado do Site.css (cabeçalho verde sólido, mais
   pesado, herdado da GCT antiga). */
/* ------------------------------------------------------------------ modais --
   O Bootstrap CSS NÃO é carregado neste layout (só o JS): as classes modal-lg
   e modal-xl não tinham efeito nenhum, e a largura real vinha de
   `Site.css .modal-content { max-width: 700px }` — o mesmo teto para todos.
   Era isso que apertava os formulários de carteira e lote.

   Três tamanhos, e só três:
     modal-sm  -> confirmação, uma pergunta e dois botões
     padrão    -> formulário comum
     modal-xl  -> formulário largo: wizard de carteira, lote, detalhe */
.modal-dialog > .modal-content{max-width:900px;}
.modal-dialog.modal-xl > .modal-content{max-width:1140px;}
.modal-dialog.modal-sm > .modal-content{max-width:420px;}
@media (max-width:1200px){ .modal-dialog.modal-xl > .modal-content{max-width:96vw;} }
@media (max-width:960px){ .modal-dialog > .modal-content{max-width:96vw;} }

.eb-table-wrap{overflow-x:auto;border:1px solid var(--cinza-10);border-radius:8px;}

/* Tabela alta com rolagem PRÓPRIA — para listas que crescem sem teto, como as
   parcelas de um contrato de até 420. Sem isso, a tabela empurra o resto do
   formulário para fora da tela e obriga a rolar centenas de linhas para chegar
   aos botões do wizard. O cabeçalho fica grudado no topo enquanto se rola. */
.eb-table-scroll-y{max-height:340px;overflow-y:auto;overflow-x:auto;
  border:1px solid var(--cinza-10);border-radius:8px;}
.eb-table-scroll-y thead th{position:sticky;top:0;z-index:2;background:var(--marfim-70);
  box-shadow:inset 0 -1px 0 var(--cinza-10);}
/* O total também gruda: rolando 700 linhas, ele ficaria a 18.000px do início. */
.eb-table-scroll-y tfoot th{position:sticky;bottom:0;z-index:2;background:var(--marfim-70);
  box-shadow:inset 0 1px 0 var(--cinza-10);}
.eb-table{width:100%;border-collapse:collapse;font-size:.86rem;background:var(--white);}
.eb-table th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--cinza-40);font-weight:700;padding:.65rem .8rem;border-bottom:2px solid var(--cinza-10);white-space:nowrap;}
.eb-table td{padding:.65rem .8rem;border-bottom:1px solid var(--cinza-10);vertical-align:middle;}
.eb-table tbody tr:hover{background:var(--marfim-70);}
.eb-table tbody tr:last-child td{border-bottom:none;}

/* Botão de ação discreto pra linha de tabela (ghost, ícone só) — mesmo padrão dos
   botões de paginação do mockup de Auditoria (.pg-btn), reaproveitado pras ações
   de linha (ver/editar/excluir/anexar) no lugar dos .btn/.btn-accent/.btn-danger chapados. */
.eb-icon-btn{border:1px solid var(--cinza-10);background:var(--white);color:var(--cinza-60);width:30px;height:30px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;}
.eb-icon-btn:hover{border-color:var(--verde-40);color:var(--verde);background:var(--verde-claro);}
.eb-icon-btn.danger:hover{border-color:#E0B8AC;color:var(--vermelho);background:var(--vermelho-bg);}
.eb-icon-btn.accent:hover{border-color:var(--dourado-60);color:var(--morno);background:var(--dourado-10);}
.eb-icon-btn:disabled{opacity:.4;cursor:not-allowed;}
.eb-row-actions{display:flex;gap:.4rem;}
.eb-card-title{font-family:'Bitter',serif;font-size:1.05rem;margin:0 0 .6rem 0;color:var(--verde);display:flex;align-items:center;gap:.5rem;}
.eb-sub{font-size:.85rem;color:var(--cinza-40);margin:0;}

/* Componentes de formulário (promovidos de _ParceirosCarteira.cshtml, generalizados pra
   qualquer modal/tela — substituem .form-input/.form-select/--color-* do Site.css legado). */
.eb-form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;}
.eb-form-row.eb-form-row-3{grid-template-columns:1fr 1fr 1fr;}
.eb-form-row.eb-form-row-4{grid-template-columns:1fr 1fr 1fr 1fr;}
.eb-form-group{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;}

/* Grades de colunas IGUAIS. `grid-template-columns: auto ...` deixa cada coluna com a
   largura do próprio conteúdo, e aí os campos não fecham alinhados — foi o que
   desalinhou a etapa de pagamento. Com 1fr todas medem o mesmo. */
.eb-form-grid-2,.eb-form-grid-3,.eb-form-grid-4,.eb-form-grid-5{display:grid;gap:.6rem 1rem;}
.eb-form-grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.eb-form-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.eb-form-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.eb-form-grid-5{grid-template-columns:repeat(5,minmax(0,1fr));}
/* Os rótulos têm alturas diferentes (uns quebram em duas linhas): sem isto os campos
   ficariam em alturas diferentes dentro da mesma linha da grade. */
.eb-form-grid-2>.eb-form-group,.eb-form-grid-3>.eb-form-group,
.eb-form-grid-4>.eb-form-group,.eb-form-grid-5>.eb-form-group{margin-bottom:.4rem;justify-content:space-between;}
@media (max-width:1100px){
  .eb-form-grid-5{grid-template-columns:repeat(3,minmax(0,1fr));}
  .eb-form-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  .eb-form-grid-2,.eb-form-grid-3,.eb-form-grid-4,.eb-form-grid-5{grid-template-columns:1fr;}
}
.eb-label{font-size:.78rem;font-weight:600;color:var(--cinza-60);}
.eb-label .required{color:var(--vermelho);margin-left:.15rem;}
/* box-sizing e altura fixa: input[type=date] e input[type=number] trazem widgets
   nativos que os deixam 2px mais altos que os de texto. Lado a lado numa grade,
   a diferença aparece como campo desalinhado. */
.eb-input,.eb-select{border:1px solid var(--cinza-10);border-radius:6px;padding:.55rem .7rem;font-family:'Inter',sans-serif;font-size:.85rem;color:var(--cinza);background:var(--white);
  box-sizing:border-box;height:37px;line-height:1.2;}
textarea.eb-input{height:auto;}
.eb-input:focus,.eb-select:focus{outline:none;border-color:var(--verde-40);box-shadow:0 0 0 3px var(--verde-claro);}
.eb-input:disabled,.eb-select:disabled,.eb-input.eb-locked,.eb-select.eb-locked{background:var(--marfim-70);color:var(--cinza-40);pointer-events:none;}
.eb-input::placeholder{color:var(--cinza-40);}
.eb-hint{font-size:.72rem;color:var(--cinza-40);}

/* Tooltip — a explicação fica disponível sem ocupar a tela.
   Uso: <span class="eb-info" data-tip="texto"></span>  (o ícone vem do ::before)
   Também serve em qualquer elemento: class="eb-tip" data-tip="texto". */
.eb-info{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;background:var(--cinza-10);color:var(--cinza-60);font-size:.62rem;
  font-weight:700;font-family:'Inter',sans-serif;cursor:help;vertical-align:middle;
  margin-left:.3rem;flex-shrink:0;user-select:none;}
.eb-info::before{content:"i";font-style:italic;}
.eb-info:hover{background:var(--dourado);color:var(--verde);}

.eb-tip{cursor:help;border-bottom:1px dotted var(--cinza-40);}

/* O balão é UM elemento no fim do <body>, posicionado por JS (Funcoes.js).
   Balão como ::after do próprio ícone era recortado por qualquer ancestral com
   overflow — tabela com scroll horizontal, modal, card — e herdava text-transform
   do título onde estivesse. Fora do fluxo, nada disso alcança. */
#ebTip{position:fixed;z-index:2000;max-width:320px;padding:.55rem .7rem;border-radius:6px;
  background:var(--verde);color:var(--white);font-family:'Inter',sans-serif;font-size:.72rem;
  font-weight:400;font-style:normal;line-height:1.45;text-align:left;text-transform:none;
  letter-spacing:0;box-shadow:0 4px 14px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none;}
#ebTip.eb-tip-visivel{opacity:1;visibility:visible;}
#ebTip.eb-tip-linhas{white-space:pre-line;max-width:400px;font-variant-numeric:tabular-nums;}

/* Indicador de etapas (wizard) — substitui .wizard-progress/.wizard-step/.step-circle do Site.css. */
.eb-wizard-steps{display:flex;gap:1.5rem;margin-bottom:1.3rem;padding-bottom:1rem;border-bottom:1px solid var(--cinza-10);}
.eb-wizard-step{display:flex;align-items:center;gap:.5rem;color:var(--cinza-40);font-size:.8rem;font-weight:600;}
.eb-wizard-step .eb-wizard-circle{width:24px;height:24px;border-radius:50%;background:var(--cinza-10);color:var(--cinza-60);display:flex;align-items:center;justify-content:center;font-size:.72rem;flex-shrink:0;}
.eb-wizard-step.active{color:var(--verde);}
.eb-wizard-step.active .eb-wizard-circle{background:var(--verde);color:var(--marfim);}

/* Rateio entre parceiros (promovido de _ParceirosCarteira.cshtml — reaproveitado tal como
   está, tanto em Carteira quanto no novo painel de Lote). */
.eb-rateio-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.8rem;flex-wrap:wrap;}
.eb-rateio-hint{font-size:.78rem;color:var(--cinza-40);margin:.2rem 0 0 0;}
.eb-rateio-lista{display:flex;gap:.5rem;flex-wrap:wrap;}
.eb-rateio-linha{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem;}
.eb-input.rateio-nome{flex:1;}
.eb-input.rateio-percentual{width:110px;text-align:right;}
.eb-rateio-soma{font-size:.8rem;font-weight:600;margin:.6rem 0;color:var(--cinza-60);}
.eb-rateio-soma.erro{color:var(--vermelho);}
.eb-rateio-soma.ok{color:var(--verde-ok);}
.eb-rateio-acoes{display:flex;gap:.5rem;margin-top:.4rem;}
.eb-rateio-mensagem{margin-top:.6rem;font-size:.8rem;color:var(--vermelho);}

/* Barra lateral de navegação (substitui .eb-topnav horizontal). */
.eb-sidebar{position:fixed;top:0;left:0;bottom:0;width:220px;background:var(--verde);color:var(--marfim);display:flex;flex-direction:column;overflow-y:auto;z-index:40;}
.eb-sidebar-logo{padding:1.1rem 1.2rem;flex-shrink:0;}
.eb-sidebar-logo .eb-logo-mark{height:24px;display:block;}
.eb-sidebar-nav{flex:1;overflow-y:auto;padding:.5rem .7rem 1rem .7rem;display:flex;flex-direction:column;gap:.15rem;}
.eb-sidebar-nav a,.eb-sidebar-nav a:visited{color:#D7E2DB;text-decoration:none;font-size:.85rem;font-weight:500;padding:.6rem .8rem;border-radius:6px;display:flex;align-items:center;gap:.6rem;cursor:pointer;}
.eb-sidebar-nav a:hover{background:rgba(255,255,255,.08);color:var(--marfim);}
.eb-sidebar-nav a.active{background:rgba(255,255,255,.14);color:var(--white);}
.eb-sidebar-nav a.eb-coming-soon{color:#9BB2A6;cursor:default;pointer-events:none;}
.eb-sidebar-nav a.eb-coming-soon:hover{background:none;}
.eb-sidebar-nav .eb-cs-tag{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:rgba(255,255,255,.12);color:#D7E2DB;padding:.1rem .35rem;border-radius:10px;margin-left:auto;}
/* Contratante da sessão (M2): a EB Money é a plataforma e fica no topo; logo abaixo, quem opera. */
.eb-contratante{margin:0 .7rem .6rem;padding:.6rem .7rem;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);display:flex;align-items:center;gap:.6rem;flex-shrink:0;}
.eb-contratante-marca{width:32px;height:32px;border-radius:6px;background:var(--dourado);color:var(--verde);font-size:.78rem;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.eb-contratante-marca img{width:100%;height:100%;object-fit:contain;background:var(--white);}
.eb-contratante-info{min-width:0;flex:1;}
.eb-contratante-rot{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#9BB2A6;}
.eb-contratante-nome{font-size:.85rem;font-weight:600;color:var(--marfim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eb-contratante-select{width:100%;margin-top:.15rem;font-size:.8rem;font-weight:600;color:var(--marfim);background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:.2rem .3rem;cursor:pointer;}
.eb-contratante-select:focus{outline:2px solid var(--dourado);outline-offset:1px;}
.eb-contratante-select option{color:var(--cinza);background:var(--white);}
.eb-contratante-ro{font-size:.68rem;color:var(--dourado-60);margin-top:.1rem;}
.eb-contratante.somente-leitura{border-color:var(--dourado);}
.eb-sidebar-footer{padding:.9rem 1.2rem;border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;gap:.6rem;flex-shrink:0;}
.eb-sidebar-footer a{color:var(--marfim);text-decoration:none;font-size:.8rem;}
.eb-app.eb-has-sidebar{padding-left:220px;}
@media (max-width:900px){
  .eb-sidebar{width:64px;}
  .eb-sidebar-nav a span{display:none;}
  .eb-app.eb-has-sidebar{padding-left:64px;}
}

/* ---------------------------------------------------------------------------
   Hub de Configurações — cartões de seção.
   Um cartão "em breve" precisa parecer desligado sem sumir: ele comunica que a
   coisa existe no plano, e é isso que evita a pergunta "cadê?".
   --------------------------------------------------------------------------- */
.eb-cfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.9rem;}
.eb-cfg-card{display:flex;gap:.8rem;align-items:flex-start;background:var(--white);border:1px solid var(--cinza-10);border-left:3px solid var(--verde);border-radius:8px;padding:.9rem 1rem;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s;}
.eb-cfg-card:hover{border-color:var(--verde-40);border-left-color:var(--verde);box-shadow:0 2px 10px rgba(47,93,74,.10);text-decoration:none;color:inherit;}
.eb-cfg-card i{font-size:1.25rem;color:var(--verde);line-height:1.2;}
.eb-cfg-card .eb-cfg-titulo{font-family:'Bitter',serif;font-size:.9rem;color:var(--verde);margin-bottom:.2rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
.eb-cfg-card .eb-cfg-desc{font-size:.78rem;color:var(--cinza-60);line-height:1.4;}
.eb-cfg-card.em-breve{border-left-color:var(--cinza-10);background:var(--marfim-70);cursor:default;pointer-events:none;}
.eb-cfg-card.em-breve i,.eb-cfg-card.em-breve .eb-cfg-titulo{color:var(--cinza-40);}
.eb-cfg-card.em-breve .eb-cfg-desc{color:var(--cinza-40);}
/* Cartão de escolha (um entre vários, ex.: modo de confirmação): o mesmo cartão, virado rádio. */
.eb-cfg-card.escolha{cursor:pointer;border-left-color:var(--cinza-10);}
.eb-cfg-card.escolha input[type=radio]{margin-top:.25rem;accent-color:var(--verde);flex-shrink:0;}
.eb-cfg-card.escolha.on{border-color:var(--verde);border-left-color:var(--verde);background:var(--dourado-10);}
.eb-cfg-card.escolha:focus-within{outline:2px solid var(--dourado);outline-offset:2px;}
.eb-cfg-card.escolha.travado{cursor:default;opacity:.7;}
.eb-cfg-tag{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:var(--dourado-10);color:var(--morno);border:1px solid var(--dourado-60);padding:.1rem .4rem;border-radius:10px;}

/* Tabela larga rola dentro do próprio cartão — o corpo da página nunca anda de lado. */
.eb-tabela-scroll{overflow-x:auto;}