/* Panel «Planes de vivienda» (js/vivienda-planes.js). Reusa las clases .mm-* de css/major-mapa.css. */
#viviendaPlanesPanel {
    --mm-accent: #f472b6;
    position: fixed;
    inset: 0 0 0 auto;
    width: 380px;
    max-width: calc(100vw - 32px);
    z-index: 6460;
    display: flex;
    flex-direction: column;
    color: #e2e8f0;
    background:
        radial-gradient(circle at 90% 0, rgba(244, 114, 182, .16), transparent 36%),
        linear-gradient(180deg, rgba(15, 23, 42, .985), rgba(2, 6, 23, .985));
    border-left: 1px solid rgba(244, 114, 182, .3);
    box-shadow: -24px 0 70px rgba(0, 0, 0, .55);
    transform: translateX(105%);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
    font-family: Inter, system-ui, sans-serif;
}
#viviendaPlanesPanel.open { transform: translateX(0); }
#viviendaPlanesPanel .mm-logo { color: #f9a8d4; background: rgba(244, 114, 182, .13); border-color: rgba(244, 114, 182, .3); }
#viviendaPlanesPanel .mm-label { color: #f9a8d4; }
#viviendaPlanesPanel .vp-chk { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
#viviendaPlanesPanel .vp-chk input { accent-color: #f472b6; margin: 0; }
#viviendaPlanesPanel .vp-cov { display: block; font-size: 9px; color: #94a3b8; margin: 1px 0 3px; }
#viviendaPlanesPanel .vp-sin { margin: 10px 4px 2px; padding: 8px 10px; border-radius: 10px; font-size: 10px; line-height: 1.5; color: #94a3b8; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.12); }
#viviendaPlanesPanel .vp-sin b { color: #cbd5e1; }

/* Tarjeta «Vivienda de plan» en la ficha (#tab-resumen) */
.vp-card { padding: 16px; border-radius: 24px; background: linear-gradient(160deg, rgba(244,114,182,.10), rgba(15,23,42,.6)); border: 1px solid rgba(244,114,182,.28); color: #e2e8f0; }
.vp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.vp-head p { margin: 0; font-size: 10px; font-weight: 900; color: #f9a8d4; text-transform: uppercase; letter-spacing: .12em; }
.vp-head p i { margin-right: 6px; }
.vp-chip { font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 999px; border: 1px solid; }
.vp-chip.ok { color: #86efac; border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.1); }
.vp-chip.warn { color: #fcd34d; border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.1); }
.vp-conj { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.vp-conj span { font-size: 11px; font-weight: 800; color: #fff; padding: 3px 10px; border-radius: 8px; background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.vp-adj-nom { font-size: 14px; font-weight: 900; color: #fff; }
.vp-adj-sub { font-size: 10px; color: #94a3b8; margin: 2px 0 10px; }
.vp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vp-f { background: rgba(2,6,23,.45); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 6px 8px; min-width: 0; }
.vp-f > span { display: block; font-size: 8px; color: #64748b; text-transform: uppercase; font-weight: 800; letter-spacing: .06em; }
.vp-f b { display: block; font-size: 12px; color: #e2e8f0; overflow-wrap: anywhere; }
.vp-warn { margin: 8px 0 0; font-size: 10px; color: #fcd34d; }
.vp-nota { margin: 10px 0 0; font-size: 9px; color: #64748b; line-height: 1.45; }
.vp-buscar { box-sizing: border-box; width: 100%; margin: 10px 0 6px; padding: 7px 10px; border-radius: 10px; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; font-size: 11px; }
.vp-lista { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.vp-item { border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(2,6,23,.4); }
.vp-item summary { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) auto; gap: 6px; padding: 6px 8px; font-size: 10px; cursor: pointer; list-style: none; }
.vp-item summary::-webkit-details-marker { display: none; }
.vp-item summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-item[open] { padding-bottom: 8px; }
.vp-item[open] > :not(summary) { margin-left: 8px; margin-right: 8px; }
.vp-mas { margin-top: 6px; width: 100%; padding: 6px; border-radius: 10px; border: 1px solid rgba(244,114,182,.35); background: rgba(244,114,182,.1); color: #f9a8d4; font-size: 10px; font-weight: 800; cursor: pointer; }
