/* IOMI r15 — Carteira IOMI: imóveis fora do mercado.
   Carrega depois de iomi-r14.css. Dois caminhos, preto e branco: à venda (claro) e na Carteira (azul-marinho).
   O elemento próprio desta versão é a régua de preços por m² na ficha de cada imóvel guardado. */

:root {
  --gold-gem: linear-gradient(135deg, #F1D9A2 0%, #C49841 55%, #8E6A24 100%);
  --platinum-gem: linear-gradient(135deg, #F4F7FA 0%, #B9C4D1 50%, #7D8B9C 100%);
}

/* ---------------------------------------------------------------- Estado e níveis */
.badge-kept { background: var(--brand-tint); color: var(--brand); box-shadow: inset 2px 0 0 var(--seal); }
.vault-tier { display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.45em; vertical-align: 0.02em; transform: rotate(45deg); border-radius: 2px; background: var(--gold-gem); box-shadow: 0 0 0 1px rgba(1, 27, 58, 0.18); }
.vault-tier.tier-platina { background: var(--platinum-gem); }
.pro-band .vault-tier { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
.vault-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--ink-faint); }

.is-up { color: var(--ok); }
.is-down { color: var(--danger); }
.mini-facts dd.is-up, .mini-facts dd.is-down { font-variant-numeric: tabular-nums; }

/* Lançar para venda: o único botão dourado da aplicação. Leva do azul (guardado) para o mercado. */
.btn.vault-launch { background: var(--seal); border-color: var(--seal); color: #011F40; }
.btn.vault-launch:hover { background: #D6AE5A; border-color: #D6AE5A; color: #011F40; }
.btn .i { width: 1.1rem; height: 1.1rem; }

/* ---------------------------------------------------------------- Lista da Carteira */
.vault-band .pos-figure small { white-space: nowrap; }
.vault-cards .prop-card-body h3 { font-family: var(--serif); font-size: 1.15rem; }
.vault-chip { position: absolute; left: 0.6rem; top: 0.6rem; padding: 0.15rem 0.55rem; border-left: 2px solid var(--seal); border-radius: 5px; background: rgba(1, 27, 58, 0.86); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.01em; }
.vault-ref { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.vault-ref-label { font-size: 0.75rem; color: var(--ink-faint); }
.vault-ref-value { margin-top: 0.1rem; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums lining-nums; }
.vault-ref-basis { margin-top: 0.25rem; font-size: 0.78rem; color: var(--ink-soft); }
.vault-ref-none { font-size: 0.85rem; color: var(--ink-faint); }
.vault-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.9rem; }
.vault-card-actions form { margin: 0; }
.vault-ref + .vault-card-actions { margin-top: 0; }

.vault-uses { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.25rem 0 0; padding: 0; }
.vault-uses li { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--paper); font-size: 0.8rem; color: var(--ink-soft); }
.vault-uses strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.vault-compare td.num, .vault-zones td.num { font-variant-numeric: tabular-nums; }
.vault-zones-bars .hbar-label small { margin-left: 0.3rem; font-size: 0.74rem; color: var(--ink-faint); }
.vault-footnote { max-width: 52rem; margin-top: 2rem; }
.vault-hint { display: flex; align-items: center; gap: 0.5rem; margin: -0.5rem 0 1.25rem; font-size: 0.9rem; color: var(--ink-soft); }
.vault-hint .i { flex: none; width: 1.15rem; height: 1.15rem; color: var(--brand); }

/* ---------------------------------------------------------------- Dois caminhos e planos */
.vault-offer { margin-top: 0.5rem; }
.vault-paths { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 760px) { .vault-paths { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.vault-path { display: flex; flex-direction: column; padding: 1.35rem 1.5rem; border-radius: var(--radius-card); border: 1px solid var(--line); background: var(--surface); }
.vault-path.is-kept { position: relative; overflow: hidden; border-color: transparent; background: var(--band); color: #fff; }
.vault-path.is-kept::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(#E3C47E, #C49841); }
.vault-path-name { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.vault-path.is-kept .vault-path-name { color: rgba(255, 255, 255, 0.72); }
.vault-path-price { margin-top: 0.2rem; font-family: var(--serif); font-size: 1.75rem; font-weight: 600; line-height: 1.15; }
.vault-path.is-sale .vault-path-price { color: var(--ok); }
.vault-path ul { margin: 0.85rem 0 0; padding-left: 1.1rem; font-size: 0.92rem; }
.vault-path li + li { margin-top: 0.3rem; }
.vault-path.is-kept li { color: rgba(255, 255, 255, 0.86); }
.vault-link { display: inline-block; margin-top: auto; padding-top: 0.9rem; font-weight: 600; font-size: 0.9rem; }
.vault-path-move { display: grid; place-items: center; align-content: center; gap: 0.3rem; margin: 0; color: var(--seal-deep); font-size: 0.78rem; font-weight: 600; text-align: center; }
.vault-path-move svg { width: 3rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 759px) { .vault-path-move svg { transform: rotate(90deg); } }

.vault-plans { display: grid; gap: 1rem; margin: 1.25rem 0 0.9rem; }
@media (min-width: 760px) { .vault-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vault-plan { display: flex; flex-direction: column; padding: 1.4rem 1.5rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.vault-plan.tier-platina { border-color: var(--brand); box-shadow: 0 24px 60px -40px rgba(1, 27, 58, 0.6); }
.vault-plan header h3 { display: inline; font-family: var(--serif); font-size: 1.45rem; }
.vault-plan-limit { margin-top: 0.25rem; font-size: 0.88rem; color: var(--ink-soft); }
.vault-plan-price { margin: 0.9rem 0 0; font-family: var(--serif); font-size: 2.2rem; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums lining-nums; }
.vault-plan-price span { font-family: var(--font); font-size: 0.85rem; font-weight: 400; color: var(--ink-faint); }
.vault-checks { list-style: none; margin: 1rem 0 1.25rem; padding: 0; display: grid; gap: 0.45rem; font-size: 0.92rem; }
.vault-checks li { position: relative; padding-left: 1.5rem; }
.vault-checks li::before { content: ""; position: absolute; left: 0.15rem; top: 0.38em; width: 0.7rem; height: 0.38rem; border-left: 2px solid var(--seal); border-bottom: 2px solid var(--seal); transform: rotate(-45deg); }
.vault-plan .btn { margin-top: auto; align-self: flex-start; }

/* Escolha do plano */
.vault-options { display: grid; gap: 0.75rem; margin: 0 0 1rem; padding: 0; border: 0; }
@media (min-width: 640px) { .vault-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vault-option { position: relative; display: flex; gap: 0.75rem; padding: 1rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius-card); background: var(--surface); cursor: pointer; }
.vault-option input { margin-top: 0.3rem; accent-color: var(--brand); }
.vault-option:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.vault-option:has(input:focus-visible) { outline: 2px solid var(--seal); outline-offset: 2px; }
.vault-option-body { display: grid; gap: 0.15rem; }
.vault-option-head strong { font-size: 1.05rem; }
.vault-option-price { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.vault-option-price small { font-family: var(--font); font-size: 0.8rem; font-weight: 400; color: var(--ink-faint); }
.vault-option-note { font-size: 0.82rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- Ficha do imóvel guardado */
.vault-value { display: grid; gap: 1.5rem 2.5rem; margin: 0 0 2rem; padding: 1.5rem 1.6rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
@media (min-width: 980px) { .vault-value { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; } }
.vault-value .pos-label { margin: 0; font-family: var(--font); font-size: 0.82rem; color: var(--ink-soft); }
.vault-value-big { margin-top: 0.3rem; font-family: var(--serif); font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums lining-nums; }
.vault-value-big.is-empty { font-size: 1.5rem; color: var(--ink-soft); }
.vault-dash { color: var(--seal); }
.vault-value-note { margin-top: 0.5rem; font-size: 0.85rem; color: var(--ink-soft); max-width: 34rem; }
.vault-value-gain { margin-top: 0.5rem; font-size: 0.9rem; font-weight: 600; }

/* Gráfico de pontos por zona: o elemento próprio desta versão. Uma linha por zona, na mesma escala de €/m².
   Ponto azul = referência oficial; faixa dourada = metade central dos imóveis na IOMI; linha dourada = este imóvel. */
.zone-plot { margin: 0; }
.zone-plot-row, .zone-plot-head, .zone-plot-scale { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0 0.75rem; align-items: center; }
.zone-plot-row { min-height: 3rem; border-top: 1px dashed var(--line); }
.zone-plot-row:last-of-type { border-bottom: 1px dashed var(--line); }
.zone-plot-name { font-size: 0.86rem; font-weight: 600; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.zone-plot-name small { display: block; font-size: 0.72rem; font-weight: 400; color: var(--ink-faint); }
.zone-plot-track, .zone-plot-headtrack { position: relative; margin: 0 1.5rem; }
.zone-plot-track { height: 3rem; }
.zone-plot-track::before { content: ""; position: absolute; left: -0.6rem; right: -0.6rem; top: 64%; height: 1px; background: var(--line-strong); }
.zone-plot-band { position: absolute; top: calc(64% - 5px); height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--seal) 38%, transparent); box-shadow: inset 0 0 0 1px var(--seal); }
.zone-plot-line { position: absolute; top: -1px; bottom: -1px; width: 0; border-left: 2px solid var(--seal); transform: translateX(-1px); }
.zone-plot-dot, .zone-plot-mid { position: absolute; top: 64%; z-index: 1; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%); }
.zone-plot-dot { background: var(--brand); box-shadow: 0 0 0 2.5px var(--surface); }
.zone-plot-mid { background: var(--surface); border: 2px solid var(--seal-deep); }
.zone-plot-val { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); font-family: var(--serif); font-size: 0.84rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.zone-plot-headtrack { height: 1.5rem; }
.zone-plot-you { position: absolute; bottom: 0.15rem; transform: translateX(-50%); white-space: nowrap; font-size: 0.75rem; font-weight: 700; color: var(--seal-deep); }
.zone-plot-you.is-end { transform: translateX(-100%); }
.zone-plot-you.is-start { transform: none; }
.zone-plot-axis { display: flex; justify-content: space-between; margin: 0.35rem 1.5rem 0; font-size: 0.7rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.zone-plot-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-top: 0.75rem; font-size: 0.76rem; color: var(--ink-soft); }
.zone-plot-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.zone-plot-legend i { display: inline-block; flex: none; }
.zl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.zl-band { width: 18px; height: 8px; border-radius: 2px; background: color-mix(in srgb, var(--seal) 38%, transparent); box-shadow: inset 0 0 0 1px var(--seal); }
.zl-line { width: 0; height: 12px; border-left: 2px solid var(--seal); }
@media (max-width: 560px) {
  .zone-plot-row, .zone-plot-head, .zone-plot-scale { grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0 0.4rem; }
  .zone-plot-track, .zone-plot-headtrack { margin: 0 1rem; }
  .zone-plot-axis { margin: 0.35rem 1rem 0; }
}

/* Terceira série nos gráficos de linha (país). */
.chart-line.s2 { stroke: var(--ink-faint); stroke-dasharray: 5 4; }
.chart-hover-dot.s2 { border-color: var(--ink-faint); }
.sw.s2 { background: var(--ink-faint); }
.chart-end.s2 { background: var(--ink-faint); }

.vault-zones tr.is-nearest th, .vault-zones tr.is-nearest td { background: var(--seal-tint); }
.vault-cols { margin-top: 0.5rem; }
.vault-private-title { display: flex; align-items: center; gap: 0.45rem; margin: 1.5rem 0 0.75rem; font-size: 1rem; }
.vault-private-title .i { width: 1.1rem; height: 1.1rem; color: var(--seal-deep); }
.vault-private > div { background: var(--paper); }
.vault-private-form h2 { display: flex; align-items: center; gap: 0.45rem; }
.vault-private-form h2 .i { width: 1.1rem; height: 1.1rem; color: var(--seal-deep); }
.vault-upload { margin-top: 1rem; }
.vault-sell { padding: 1.35rem 1.5rem 1.5rem; border-radius: var(--radius-card); background: var(--band); color: #fff; }
.vault-sell h2 { color: #fff; }
.vault-steps { margin: 0.9rem 0 1.2rem; padding-left: 1.25rem; display: grid; gap: 0.55rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.86); }
.vault-steps strong { color: #fff; }
.vault-sell :focus-visible { outline-color: #E3C47E; }
.vault-photo-note { max-width: 52rem; }

/* Administração: referências de mercado */
.vault-csv { overflow-x: auto; margin-top: 0.75rem; font-size: 0.8rem; line-height: 1.6; white-space: pre; }
.vault-csv-notes { margin: 0.75rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }

/* ---------------------------------------------------------------- Modo planta */
:root[data-theme="planta"] .badge-kept { background: rgba(217, 178, 94, 0.14); color: var(--ink); }
:root[data-theme="planta"] .btn.vault-launch { background: var(--seal); border-color: var(--seal); color: #061A33; }
:root[data-theme="planta"] .vault-path.is-kept,
:root[data-theme="planta"] .vault-sell { box-shadow: 0 0 0 1px var(--line-strong); }
:root[data-theme="planta"] .vault-plan.tier-platina { border-color: var(--seal); }
:root[data-theme="planta"] .zone-plot-dot, :root[data-theme="planta"] .zl-dot { background: var(--ink); }
:root[data-theme="planta"] .zone-plot-you { color: var(--seal); }
:root[data-theme="planta"] .vault-path.is-sale .vault-path-price { color: var(--ok); }
@container (max-width: 400px) { .chart-x span:nth-last-child(2) { display: none; } }