/* Radar: cores acompanham os temas claro e escuro. */
.card.radar { border-top: 3px solid var(--mf-azul); }
[data-bs-theme="dark"] .radar a { color: #9dc1ff; }
[data-bs-theme="dark"] .radar .btn-outline-primary { --bs-btn-color: #9dc1ff; --bs-btn-border-color: #9dc1ff; --bs-btn-hover-color: #fff; }
.radar-sobretitulo { color: var(--mf-texto-suave); font-size: .65rem; font-weight: 700; letter-spacing: .12em; margin-bottom: .5rem; }
.radar-resumo { padding: 1rem; border-radius: 12px; background: var(--mf-fundo); }
.radar-total { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.radar-pendencia { color: var(--mf-vermelho); }
.radar-semana { border: 1px solid var(--mf-borda); border-radius: 10px; padding: .8rem; overflow-wrap: anywhere; }
.radar-pico { border-color: var(--mf-azul); background: var(--mf-fundo); }
.radar-pico-texto { font-size: .65rem; font-weight: 700; color: var(--mf-texto); }
.radar-barra { height: 6px; background: var(--mf-borda); border-radius: 8px; overflow: hidden; }
.radar-barra span { display: block; height: 100%; background: var(--mf-azul); border-radius: inherit; }
.radar-agenda { border-top: 1px solid var(--mf-borda); padding-top: 1rem; }
.radar-agenda summary { cursor: pointer; padding: .25rem; }
.radar-agenda summary:focus-visible { outline: 2px solid var(--mf-azul); outline-offset: 3px; border-radius: 4px; }
.radar-agenda ul { max-height: 390px; overflow-y: auto; }
.radar-evento { display: flex; align-items: center; gap: 1rem; padding: .85rem .25rem; border-bottom: 1px solid var(--mf-borda); }
.radar-data { min-width: 65px; font-weight: 700; }
.radar-data span { display: block; font-size: .65rem; font-weight: 400; }
.radar-descricao { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.radar-valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 480px) {
  .radar-evento { flex-wrap: wrap; gap: .5rem; }
  .radar-valor { width: 100%; padding-left: 73px; }
}

:root {
  --mf-azul: #1f5eff;
  --mf-azul-escuro: #14293d;
  --mf-verde: #1e8e3e;
  --mf-vermelho: #d0342c;
  --mf-amarelo: #d99a00;
  --mf-cinza: #6b7280;
  --mf-menu-larg: 240px;
  --mf-menu-larg-rec: 68px;
  --mf-fundo: #f4f6fa;
  --mf-cartao: #ffffff;
  --mf-borda: #e5e8ef;
  --mf-texto: #1c2430;
  --mf-texto-suave: #6b7280;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-bs-theme="dark"] {
  --mf-fundo: #0f141b;
  --mf-cartao: #171e28;
  --mf-borda: #273140;
  --mf-texto: #e6eaf0;
  --mf-texto-suave: #9aa4b2;
  --mf-verde: #3ddc84;
  --mf-vermelho: #ff6b62;
  --mf-amarelo: #ffc857;
}
body { background: var(--mf-fundo); color: var(--mf-texto); font-family: var(--bs-body-font-family); min-height: 100vh; }
a { color: var(--mf-azul); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Menu lateral */
.menu-lateral { position: fixed; inset: 0 auto 0 0; width: var(--mf-menu-larg); background: var(--mf-azul-escuro); color: #dbe3ee; display: flex; flex-direction: column; transition: width .2s, transform .2s; z-index: 1040; }
.menu-recolhido .menu-lateral { width: var(--mf-menu-larg-rec); }
.menu-recolhido .rotulo-menu { display: none; }
.menu-topo { display: flex; align-items: center; justify-content: space-between; padding: .9rem .9rem; }
.marca { color: #fff; font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; gap: .6rem; white-space: nowrap; }
.marca:hover { text-decoration: none; color: #fff; }
.marca .bi { font-size: 1.4rem; color: #7cc0ff; }
.menu-itens { display: flex; flex-direction: column; gap: 2px; padding: .4rem .6rem; overflow-y: auto; flex: 1; }
.menu-itens .item { display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; border-radius: 8px; color: #c7d2e0; font-weight: 500; white-space: nowrap; }
.menu-itens .item .bi { font-size: 1.15rem; width: 22px; text-align: center; }
.menu-itens .item:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.menu-itens .item.ativo { background: var(--mf-azul); color: #fff; }
.menu-itens .separador { height: 1px; background: rgba(255,255,255,.12); margin: .5rem .3rem; }
.menu-rodape { padding: .6rem 1rem; font-size: .75rem; color: #7f8ea3; }
.menu-fundo { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1035; }
.btn-icone { background: transparent; border: 0; color: inherit; width: 38px; height: 38px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; position: relative; }
.btn-icone:hover { background: rgba(127,127,127,.15); }

/* Barra superior */
.barra-topo { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: .75rem; padding: .55rem 1.25rem; margin-left: var(--mf-menu-larg); background: var(--mf-cartao); border-bottom: 1px solid var(--mf-borda); transition: margin .2s; }
.menu-recolhido .barra-topo { margin-left: var(--mf-menu-larg-rec); }
.busca-global { flex: 1; max-width: 560px; position: relative; }
.busca-global .bi { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--mf-texto-suave); }
.busca-global input { padding-left: 2.2rem; border-radius: 999px; background: var(--mf-fundo); }
.barra-acoes { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--mf-azul); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; margin-left: .3rem; }
.avatar:hover { text-decoration: none; color: #fff; }
.ponto-alerta { position: absolute; top: 4px; right: 4px; background: var(--mf-vermelho); color: #fff; font-size: .65rem; font-weight: 700; border-radius: 999px; min-width: 16px; height: 16px; line-height: 16px; text-align: center; padding: 0 4px; }

/* Conteúdo */
.conteudo { margin-left: var(--mf-menu-larg); padding: 1.25rem 1.5rem 3rem; transition: margin .2s; max-width: 1600px; }
.menu-recolhido .conteudo { margin-left: var(--mf-menu-larg-rec); }
.conteudo-solto { margin-left: 0; }
.cabecalho-pagina { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.cabecalho-pagina h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.cabecalho-pagina .sub { color: var(--mf-texto-suave); }
.acoes-pagina { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Cartões e indicadores */
.card { background: var(--mf-cartao); border: 1px solid var(--mf-borda); border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card-body { padding: 1rem 1.1rem; }
.titulo-cartao { font-size: .95rem; font-weight: 700; margin: 0 0 .5rem; display: flex; align-items: center; gap: .4rem; }
.rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mf-texto-suave); font-weight: 600; }
.indicador { display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.1rem; height: 100%; }
.indicador .valor { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.indicador .detalhe { font-size: .8rem; color: var(--mf-texto-suave); }
.indicador .icone { position: absolute; right: 1rem; top: .9rem; font-size: 1.4rem; opacity: .35; }
.indicador-card { position: relative; }
.val-pos { color: var(--mf-verde) !important; }
.val-neg { color: var(--mf-vermelho) !important; }
.val-atencao { color: var(--mf-amarelo) !important; }
.val-info { color: var(--mf-azul) !important; }
.grafico { position: relative; height: 300px; }
.grafico-medio { position: relative; height: 240px; }
.grafico-pequeno { position: relative; height: 170px; }

/* Tabelas */
.tabela-limpa td, .tabela-limpa th { border-color: var(--mf-borda); padding: .5rem .6rem; vertical-align: middle; }
.tabela-limpa thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mf-texto-suave); font-weight: 600; }
.tabela-limpa tr:last-child td { border-bottom: 0; }
.table { --bs-table-bg: transparent; }
.col-estreita { width: 1%; white-space: nowrap; }
.texto-corte { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bolinha { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--cor, #999); margin-right: .35rem; vertical-align: middle; }
.etiqueta { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; padding: .12rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--cor, #6b7280) 16%, transparent); color: inherit; border-left: 4px solid var(--cor, #6b7280); white-space: nowrap; }
.icone-conta { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--cor, #6b7280); color: #fff; font-size: 1.05rem; flex: none; }
.situacao { font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 6px; text-transform: uppercase; letter-spacing: .04em; }
.situacao-pago, .situacao-paga, .situacao-ativa { background: color-mix(in srgb, var(--mf-verde) 18%, transparent); color: var(--mf-verde); }
.situacao-pendente, .situacao-previsto, .situacao-teste, .situacao-parcial, .situacao-fechada { background: color-mix(in srgb, var(--mf-amarelo) 22%, transparent); color: #8a6100; }
[data-bs-theme="dark"] .situacao-pendente, [data-bs-theme="dark"] .situacao-previsto, [data-bs-theme="dark"] .situacao-parcial, [data-bs-theme="dark"] .situacao-fechada { color: var(--mf-amarelo); }
.situacao-vencido, .situacao-vencida, .situacao-cancelado, .situacao-cancelada { background: color-mix(in srgb, var(--mf-vermelho) 16%, transparent); color: var(--mf-vermelho); }
.situacao-aberta, .situacao-pausada { background: color-mix(in srgb, var(--mf-azul) 16%, transparent); color: var(--mf-azul); }

/* Alertas */
.alerta-item { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem .75rem; border-radius: 10px; border: 1px solid var(--mf-borda); background: var(--mf-cartao); margin-bottom: .4rem; }
.alerta-item .bi { font-size: 1.2rem; }
.alerta-critico { border-left: 4px solid var(--mf-vermelho); }
.alerta-atencao { border-left: 4px solid var(--mf-amarelo); }
.alerta-info { border-left: 4px solid var(--mf-azul); }

/* Formulários */
.form-label { font-size: .8rem; font-weight: 600; color: var(--mf-texto-suave); margin-bottom: .2rem; }
.form-control, .form-select { background: var(--mf-cartao); border-color: var(--mf-borda); color: var(--mf-texto); }
.form-control:focus, .form-select:focus { border-color: var(--mf-azul); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--mf-azul) 20%, transparent); }
.campo-erro { color: var(--mf-vermelho); font-size: .8rem; margin-top: .15rem; }
.form-texto { font-size: .78rem; color: var(--mf-texto-suave); }
.grade-form { display: grid; grid-template-columns: repeat(12, 1fr); gap: .75rem 1rem; }
.grade-form > * { grid-column: span 12; }
@media (min-width: 768px) { .c6 { grid-column: span 6 !important; } .c4 { grid-column: span 4 !important; } .c3 { grid-column: span 3 !important; } .c8 { grid-column: span 8 !important; } }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: end; }
.filtros .form-label { margin-bottom: .1rem; }
.filtros .form-select, .filtros .form-control { min-width: 140px; }

/* Estados vazios */
.vazio { text-align: center; padding: 3rem 1rem; color: var(--mf-texto-suave); }
.vazio .bi { font-size: 2.8rem; opacity: .5; }
.vazio h3 { font-size: 1.1rem; font-weight: 700; margin-top: .75rem; color: var(--mf-texto); }

/* Progresso */
.progress { height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--mf-borda) 70%, transparent); }
.progress-bar { background: var(--mf-verde); width: var(--pct, 0%); }
.progress-bar.atencao { background: var(--mf-amarelo); }
.progress-bar.critico { background: var(--mf-vermelho); }
.progress-bar.info { background: var(--mf-azul); }

/* Linha do tempo */
.linha-tempo { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.linha-tempo li { border: 1px solid var(--mf-borda); border-radius: 10px; padding: .5rem .6rem; font-size: .85rem; background: var(--mf-cartao); }
.linha-tempo li.paga { border-color: var(--mf-verde); }
.linha-tempo li.atual { border-color: var(--mf-azul); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mf-azul) 25%, transparent); }

/* Calendário */
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendario .dia-nome { font-size: .72rem; text-transform: uppercase; color: var(--mf-texto-suave); text-align: center; padding: .3rem 0; font-weight: 600; }
.calendario .dia { min-height: 92px; border: 1px solid var(--mf-borda); border-radius: 8px; padding: .3rem .4rem; background: var(--mf-cartao); font-size: .78rem; }
.calendario .dia.outro-mes { opacity: .45; }
.calendario .dia.hoje { border-color: var(--mf-azul); }
.calendario .dia .num { font-weight: 700; }
.calendario .evento { display: block; border-radius: 4px; padding: 1px 4px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; background: var(--cor, var(--mf-cinza)); }

/* Auth */
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; background: radial-gradient(1200px 600px at 20% -10%, color-mix(in srgb, var(--mf-azul) 18%, transparent), transparent), var(--mf-fundo); }
.auth-caixa { width: 100%; max-width: 440px; background: var(--mf-cartao); border: 1px solid var(--mf-borda); border-radius: 18px; padding: 2rem; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.auth-marca { font-weight: 800; color: var(--mf-azul); font-size: 1.15rem; margin-bottom: 1rem; }
.auth-titulo { font-size: 1.4rem; font-weight: 800; margin-bottom: 1.25rem; }
.auth-rodape { margin-top: 1rem; color: var(--mf-texto-suave); font-size: .85rem; }
.qr { background: #fff; padding: 8px; border-radius: 10px; display: inline-block; }
.codigos-reserva { columns: 2; font-family: ui-monospace, monospace; font-size: 1.05rem; }

/* Lista de cartões de crédito */
.cartao-credito { border-radius: 16px; padding: 1.1rem 1.2rem; color: #fff; background: linear-gradient(135deg, var(--cor, #1f5eff), color-mix(in srgb, var(--cor, #1f5eff) 60%, #000)); min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; }
.cartao-credito .apelido { font-weight: 700; font-size: 1.05rem; }
.cartao-credito .numero { letter-spacing: .15em; font-family: ui-monospace, monospace; }
.cartao-credito .progress { background: rgba(255,255,255,.25); }
.cartao-credito .progress-bar { background: #fff; }

/* Utilidades */
.texto-suave { color: var(--mf-texto-suave); }
.mono { font-family: ui-monospace, monospace; }
.clicavel { cursor: pointer; }
.tabela-cartoes tbody tr { cursor: pointer; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
kbd { background: var(--mf-borda); color: inherit; border-radius: 4px; padding: 0 .35rem; }

@media (max-width: 991.98px) {
  .menu-lateral { transform: translateX(-100%); width: var(--mf-menu-larg); }
  .menu-aberto .menu-lateral { transform: none; }
  .menu-recolhido .rotulo-menu { display: inline; }
  .barra-topo, .conteudo { margin-left: 0 !important; }
  .conteudo { padding: 1rem .9rem 5rem; }
  .cabecalho-pagina h1 { font-size: 1.25rem; }
  .indicador .valor { font-size: 1.2rem; }
  .tabela-responsiva thead { display: none; }
  .tabela-responsiva tr { display: block; border: 1px solid var(--mf-borda); border-radius: 10px; margin-bottom: .6rem; padding: .4rem .6rem; background: var(--mf-cartao); }
  .tabela-responsiva td { display: flex; justify-content: space-between; gap: .75rem; border: 0 !important; padding: .25rem 0 !important; }
  .tabela-responsiva td::before { content: attr(data-rotulo); font-size: .72rem; text-transform: uppercase; color: var(--mf-texto-suave); font-weight: 600; }
  .tabela-responsiva td.sem-rotulo::before { content: none; }
  .calendario .dia { min-height: 56px; }
  .calendario .evento { font-size: .68rem; }
}

/* Orçamentos e metas (módulo orcamentos) */
.orc-icone-peq { width: 28px; height: 28px; border-radius: 8px; font-size: .85rem; }
.orc-col-barra { min-width: 140px; }
.orc-col-limite { min-width: 150px; }
.orc-input-limite { max-width: 160px; margin-left: auto; }
.orc-form-limite { display: inline-block; width: 100%; }
.orc-mes-atual { min-width: 160px; text-transform: capitalize; }
.orc-barra-grande { height: 16px; }
.situacao-ok, .situacao-no_planejado, .situacao-concluida { background: color-mix(in srgb, var(--mf-verde) 18%, transparent); color: var(--mf-verde); }
.situacao-atencao, .situacao-atrasada { background: color-mix(in srgb, var(--mf-amarelo) 22%, transparent); color: #8a6100; }
[data-bs-theme="dark"] .situacao-atencao, [data-bs-theme="dark"] .situacao-atrasada { color: var(--mf-amarelo); }
.situacao-estourado { background: color-mix(in srgb, var(--mf-vermelho) 16%, transparent); color: var(--mf-vermelho); }
.situacao-sem_limite { background: color-mix(in srgb, var(--mf-borda) 70%, transparent); color: var(--mf-texto-suave); }
.meta-concluida { opacity: .8; }
.meta-dados dt, .meta-dados dd { padding: .1rem 0; }
@media (max-width: 991.98px) {
  .orc-input-limite { margin-left: 0; }
  .tabela-responsiva td.orc-col-barra { display: block; }
  .tabela-responsiva td.orc-col-barra::before { display: block; margin-bottom: .2rem; }
}

/* assinaturas */
.assinaturas-form { max-width: 960px; }

/* importacao */
.zona-soltar { display: block; width: 100%; cursor: pointer; text-align: center; padding: 2rem 1rem; border: 2px dashed var(--mf-borda); border-radius: 14px; background: var(--mf-fundo); color: var(--mf-azul); transition: all .15s; }
.zona-soltar:hover, .zona-soltar.ativa { border-color: var(--mf-azul); background: color-mix(in srgb, var(--mf-azul) 8%, transparent); }

[x-cloak] { display: none !important; }

@media (max-width: 991.98px) { body { overflow-x: hidden; } .filtros > div { width: 100%; } .filtros .form-select, .filtros .form-control { width: 100%; } }

/* insights */
.cartao-insights { background: linear-gradient(135deg, var(--mf-cartao), color-mix(in srgb, var(--mf-azul) 6%, var(--mf-cartao))); }
.insight { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .7rem; border-radius: 10px; background: var(--mf-cartao); border: 1px solid var(--mf-borda); height: 100%; font-size: .9rem; }
.insight .bi { font-size: 1.15rem; flex: none; }
.insight-pos .bi { color: var(--mf-verde); } .insight-neg .bi { color: var(--mf-vermelho); } .insight-atencao .bi { color: var(--mf-amarelo); } .insight-info .bi { color: var(--mf-azul); }
/* paleta de comandos */
.paleta { max-width: 640px; }
.paleta input { font-size: 1.05rem; border: 0; box-shadow: none !important; }
.paleta .lista { max-height: 60vh; overflow: auto; }
.paleta .item { display: flex; align-items: center; gap: .7rem; padding: .55rem .9rem; cursor: pointer; border-radius: 8px; color: inherit; text-decoration: none; }
.paleta .item:hover, .paleta .item.ativo { background: color-mix(in srgb, var(--mf-azul) 12%, transparent); }
.paleta .item .bi { width: 22px; text-align: center; color: var(--mf-azul); }
.paleta .item kbd { margin-left: auto; font-size: .7rem; }
/* botão flutuante (celular) */
.fab { position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; border-radius: 50%; background: var(--mf-azul); color: #fff; display: none; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 1041; }
.fab:hover { color: #fff; text-decoration: none; }
@media (max-width: 991.98px) { .fab { display: inline-flex; } }

/* painel: card de indicador que abre o detalhamento com dois cliques */
.abre-detalhe { cursor: pointer; user-select: none; transition: border-color .15s, transform .15s; }
.abre-detalhe:hover { border-color: var(--mf-azul); transform: translateY(-1px); }
.abre-detalhe:focus-visible { outline: 2px solid var(--mf-azul); outline-offset: 2px; }
.abre-detalhe::after { content: "\F128"; font-family: bootstrap-icons; position: absolute; right: .6rem; bottom: .45rem; font-size: .7rem; opacity: 0; transition: opacity .15s; }
.abre-detalhe:hover::after, .abre-detalhe:focus-visible::after { opacity: .45; }
.detalhe-indicador { max-height: 55vh; overflow-y: auto; }
.detalhe-indicador tfoot th { border-top: 2px solid var(--mf-borda); }