/* Estilos de patrimônio (reserva, investimentos, imóveis e bens). Usa as variáveis de estilo.css (cores, tema escuro, raios de 3 a 8px). */

/* ---------- Abas, ritmo da página e cabeçalho de cada aba ---------- */
/* abas com a largura do texto: no celular estreito elas rolam de lado em vez de cortar o nome */
.seg.abas.pat-abas { grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; }
.pat-abas::-webkit-scrollbar { display: none; }
@media (max-width: 479px) {
  .seg.abas.pat-abas button { padding: 0 8px; font-size: 14px; }
  .pat-abas button .ic { display: none; }
}

.pat-pagina > * + * { margin-top: 16px; }
.pat-pagina > .secao { margin-top: 28px; }

.pat-cabeca { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
.pat-cabeca-texto { flex: 1 1 280px; min-width: 0; }
.pat-cabeca-texto h2 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.pat-cabeca-texto p { margin-top: 4px; font-size: 14px; color: var(--texto-3); }
.pat-cabeca-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 479px) {
  .pat-cabeca-acoes { width: 100%; }
  .pat-cabeca-acoes > .botao { flex: 1 1 0; padding: 0 10px; }
}
@media (min-width: 1024px) { .pat-cabeca-texto h2 { font-size: 22px; } }

/* ---------- Peças comuns ---------- */
.pat-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1024px) { .pat-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } }
.pat-quadro .painel-topo { flex-wrap: wrap; row-gap: 8px; }
.pat-quadro-frase { margin: -6px 0 16px; font-size: 14px; color: var(--texto-3); }
.pat-nota { font-size: 13px; line-height: 1.45; color: var(--texto-3); }
.pat-subtitulo { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
/* rótulo miúdo dentro dos quadros: à esquerda (o do app é feito para o canto direito das linhas) */
.pat-termometro .rotulo-mini, .pat-analise-bloco .rotulo-mini, .pat-recs-caixa .rotulo-mini { text-align: left; }

/* quadros de números: 4 lado a lado só em tela larga (um patrimônio de R$ 1.119.370,00 não pode ser cortado);
   no celular, cada quadro vira uma linha com o valor à direita */
.pat-kpis.kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1280px) { .pat-kpis.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 720px) { .pat-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 479px) {
  .pat-kpis, .pat-kpis.kpis-4 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pat-kpis .kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 10px 14px; }
  .pat-kpis .kpi-rotulo { grid-column: 1; grid-row: 1; }
  .pat-kpis .kpi-nota { grid-column: 1; grid-row: 2; }
  .pat-kpis .kpi-valor { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; font-size: 17px; }
}

/* listas (histórico, ativos, imóveis, contratos): no celular o valor e a situação descem para uma segunda linha,
   e o nome e os detalhes ganham a largura toda */
@media (max-width: 479px) {
  .pat-lista .linha { flex-wrap: wrap; row-gap: 6px; }
  .pat-lista .linha-titulo { white-space: normal; overflow-wrap: anywhere; }
  .pat-lista .linha-sub { flex-wrap: wrap; row-gap: 2px; }
  .pat-lista .linha-sub > span { white-space: normal; }
  .pat-lista .linha > .ic:last-child { order: 2; align-self: center; }
  .pat-lista .linha-fim { order: 3; flex: 1 0 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 10px; padding-left: 50px; }
  .pat-lista .linha-fim .rotulo-mini { text-align: left; margin: 0; }
}

/* ícone em ladrilho (movimentos da reserva e contratos) */
.pat-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r3); background: var(--superficie-2); color: var(--texto-2); }
.pat-ic-aporte { background: var(--verde-suave); color: var(--verde); }
.pat-ic-retirada { background: var(--ambar-suave); color: var(--ambar); }
.pat-ic-contrato { background: var(--marca-suave); color: var(--marca); }

/* alertas (concentração elevada, contrato vencido ou vencendo) */
.pat-alerta {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r3);
  background: var(--ambar-suave); color: var(--texto); font-size: 14px; line-height: 1.45;
}
.pat-alerta > .ic { flex: none; margin-top: 1px; color: var(--ambar); }
.pat-alertas { display: flex; flex-direction: column; gap: 8px; }
.pat-alertas .pat-alerta { align-items: center; flex-wrap: wrap; }
.pat-alertas .pat-alerta > span { flex: 1 1 200px; min-width: 0; font-weight: 600; }
.pat-alerta-vencido { background: var(--vermelho-suave); }
.pat-alerta-vencido > .ic { color: var(--vermelho); }

/* ---------- Reserva: termômetro ---------- */
.pat-termo-saldo { margin-top: 4px; font-size: clamp(24px, 8vw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.pat-termo-meses { margin-top: 6px; font-size: 15px; color: var(--texto-2); }
.pat-termo-meses strong { font-weight: 700; color: var(--texto); }
.pat-cor-critico strong { color: var(--vermelho); }
.pat-cor-atencao strong { color: var(--ambar); }
.pat-cor-bom strong { color: var(--verde); }
.pat-cor-excelente strong { color: var(--marca); }

.pat-regua { margin: 18px 0 14px; }
.pat-regua-trilho { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; height: 10px; }
.pat-zona { border-radius: var(--rp); opacity: .3; }
.pat-zona.ativa { opacity: 1; }
.pat-zona-critico { background: var(--vermelho); }
.pat-zona-atencao { background: var(--ambar); }
.pat-zona-bom { background: var(--verde); }
.pat-zona-excelente { background: var(--marca); }
.pat-regua-marca {
  position: absolute; top: -5px; width: 4px; height: 20px; margin-left: -2px; border-radius: var(--rp);
  background: var(--texto); box-shadow: 0 0 0 2px var(--superficie);
}
.pat-regua-rotulos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin-top: 8px; }
.pat-regua-rotulos span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 600; color: var(--texto-2); }
.pat-regua-rotulos small { display: block; font-size: 11px; font-weight: 500; color: var(--texto-3); }

.pat-faixa {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r3);
  background: var(--superficie-2); color: var(--texto); font-size: 14px; line-height: 1.45;
}
.pat-faixa > .ic { flex: none; margin-top: 1px; color: var(--texto-3); }
.pat-faixa-critico { background: var(--vermelho-suave); }
.pat-faixa-critico > .ic { color: var(--vermelho); }
.pat-faixa-atencao { background: var(--ambar-suave); }
.pat-faixa-atencao > .ic { color: var(--ambar); }
.pat-faixa-bom { background: var(--verde-suave); }
.pat-faixa-bom > .ic { color: var(--verde); }
.pat-faixa-excelente { background: var(--marca-suave); }
.pat-faixa-excelente > .ic { color: var(--marca); }

.pat-meta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borda); }
.pat-meta-texto { margin-top: 8px; font-size: 14px; color: var(--texto-2); }

/* ---------- Reserva: calculadora e simulador ---------- */
.pat-simulador { margin-top: 2px; padding: 14px; border-radius: var(--r3); background: var(--superficie-2); }
.pat-range { display: block; width: 100%; height: 24px; margin: 12px 0 2px; accent-color: var(--marca); cursor: pointer; }
.pat-range-limites { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--texto-3); }
.pat-simulacao { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.pat-simulacao strong { color: var(--texto); }
.pat-calc-rodape { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 12px; margin-top: 16px; }
.pat-calc-rodape .mudo { flex: 1 1 180px; font-size: 13px; }
@media (max-width: 479px) {
  .pat-calc-rodape .botao { width: 100%; }
  .pat-calc .seg button { padding: 0 4px; }
}

/* ---------- Investimentos ---------- */
.pat-kpi-destaque { background: var(--marca-suave); border-color: color-mix(in srgb, var(--marca) 30%, transparent); }
.pat-kpi-destaque .kpi-rotulo { color: var(--marca); }
.pat-conta { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--texto-3); }
.pat-conta strong { color: var(--texto); }
.pat-conta > span, .pat-conta > strong { white-space: nowrap; }
.pat-seg-mini { padding: 3px; }
.pat-seg-mini button { height: 30px; padding: 0 10px; font-size: 13px; }

.pat-analise-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 720px) { .pat-analise-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pat-analise-bloco { min-width: 0; padding: 14px; border: 1px solid var(--borda); border-radius: var(--r3); }
.pat-analise-bloco .barra { margin: 10px 0 8px; }
.pat-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pat-score strong { font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.pat-score > span:not(.selo) { margin-right: 8px; font-weight: 600; color: var(--texto-3); }
.pat-score .selo { align-self: center; }
.pat-renda { margin: 6px 0; font-size: clamp(22px, 7vw, 26px); font-weight: 800; letter-spacing: -.02em; }
.pat-analise .pat-alerta { margin-top: 14px; }
.pat-bloco-tipos { margin-top: 18px; }
.pat-recs { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borda); }
.pat-recs-caixa { margin-top: 14px; }
.pat-recs-caixa .lista-simples { margin-top: 6px; }
.pat-recs-caixa .lista-simples li { line-height: 1.5; }
.pat-aviso { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--texto-3); }
.pat-aviso > .ic { flex: none; margin-top: 1px; }

.pat-chips { margin-bottom: 12px; }
.pat-variacao { font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ---------- Imóveis e bens ---------- */
@media (max-width: 479px) {
  .pat-secoes { display: grid; width: 100%; grid-auto-columns: minmax(0, 1fr); }
  .pat-secoes button { padding: 0 4px; font-size: 13px; }
}
@media (max-width: 359px) { .pat-secoes button { font-size: 12px; } }
.pat-secao > .kpis:first-child { margin-top: 0; }
.pat-lancar { background: var(--superficie-2); box-shadow: none; }
.pat-form-contratos { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--borda); }
.pat-rent-ano { font-size: 15px; font-weight: 700; color: var(--verde); white-space: nowrap; }
.pat-rent-mes { font-size: 12px; color: var(--texto-3); white-space: nowrap; }