/* Conjuntos residenciales (Lynkko PH) — estilos propios de la página.
   Solo tokens de site.css. Todo lo que vive dentro de .demo usa --panel-*. */

/* Demo ph-portfolio ------------------------------------------------------ */
.ph-panel{display:grid;gap:16px;min-width:0}
.ph-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px}
.ph-name{font-family:var(--serif);font-size:20px;line-height:1.25;color:var(--panel-ink)}
.ph-meta{font-size:12px;color:var(--panel-ink-2)}

.ph-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.ph-kpis .kpi{padding:12px;align-content:start}
.ph-kpis .kpi-label,.ph-kpis .kpi-sub{line-height:1.35}
.ph-kpis .kpi-value{font-size:24px}
@media (max-width:560px){.ph-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

.ph-label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;margin-bottom:10px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--panel-ink-2)}
.ph-label span + span{font-weight:500;letter-spacing:0;text-transform:none;font-size:12px}

.ph-bars{list-style:none;display:grid;gap:8px}
.ph-bars li{display:grid;grid-template-columns:minmax(0,10.5em) minmax(0,1fr) 3.4em;gap:12px;align-items:center;font-size:13px;color:var(--panel-ink);transition:opacity .2s}
.ph-bars li.is-dim{opacity:.45}
.ph-bars li > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ph-bars b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.ph-bars .meter{position:relative}
.ph-bars .meter::after{content:"";position:absolute;top:0;bottom:0;left:var(--goal,100%);width:2px;background:var(--panel-ink);opacity:.6}
.ph-bars .meter > i.warn{background:var(--panel-warn)}
.ph-bars .meter > i.alert{background:var(--panel-alert)}
@media (max-width:480px){.ph-bars li{grid-template-columns:minmax(0,8em) minmax(0,1fr) 3.2em;gap:10px}}

.ph-approve{display:block;width:max-content;max-width:100%;margin-top:10px;font:500 13px/1 var(--sans);padding:9px 14px;border-radius:var(--r);border:1px solid var(--panel-accent);background:transparent;color:var(--panel-accent);cursor:pointer;transition:background .15s,color .15s}
.ph-approve:hover{background:var(--panel-accent);color:var(--panel)}
.ph-approve:focus-visible{outline-color:var(--panel-accent)}
[data-demo="ph-portfolio"] .feed li:focus-visible{outline-color:var(--panel-accent)}
.ph-foot-note{color:var(--panel-accent)}