/*
 * Informe â€” paridad visual (CSS propio VHIVHE).
 * Tokens: css/public/vh-ds/vh-ds-tokens.css (cargar antes vÃ­a informes.php).
 * F-DS-C: duales 1:1 compuestos (.vh-ds-X.legacy, .legacy) â€” sin alias ambiguos.
 */

@keyframes vh-score-global-in {
    0% { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes vh-scores-glow {
    0%, to { transform: translate(-12%, -8%); }
    50% { transform: translate(12%, 8%); }
}

@keyframes vh-sc-card-in {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes vh-sc-card-in-dim {
    to { opacity: 0.55; transform: translateY(0) scale(1); }
}

@keyframes vh-sc-bar-in {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes vh-sc-bar-fill-in {
    0% { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes vh-ia-card-border {
    0%, to { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes vh-ia-cta-shimmer {
    0%, to { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.vh-ds-stage,
.vh-report-stage{
    background: var(--vh-bg);
    position: relative;
    padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
}

.vh-report-mobile-header{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    background: #ffffff;
    border-bottom: 1px solid var(--vh-border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.vh-report-mobile-header__back{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    color: var(--vh-text);
    text-decoration: none;
    background: var(--vh-surface-2);
}

.vh-report-mobile-header__title{
    font-weight: 700;
    font-size: 1rem;
    color: var(--vh-text);
    letter-spacing: -0.02em;
}

.vh-report-mobile-header__actions{
    margin-left: auto;
}

.vh-ds-chip,
.vh-report-chip{
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.vh-ds-chip--demo,
.vh-report-chip--demo{
    background: #fef3c7;
    color: #92400e;
}

.vh-report-res-wrap{
    padding: 14px 18px 28px;
    max-width: 640px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

.vh-report-body{
    width: 100%;
    min-width: 0;
}

.vh-report-layout{
    display: block;
}

.vh-report-main{
    min-width: 0;
}

.vh-report-meta{
    margin-bottom: 0.85rem;
}

.vh-report-address{
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--vh-text);
    font-family: inherit;
}

.vh-report-generated-at{
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
    color: var(--vh-text-3);
}

/* ?? Scores hero ?? */
.vh-report-scores-wrap{
    position: relative;
    background:
        radial-gradient(80% 60% at 0% 0%, rgba(96, 165, 250, 0.25), transparent 60%),
        radial-gradient(70% 80% at 100% 100%, rgba(52, 84, 180, 0.22), transparent 60%),
        linear-gradient(150deg, var(--vh-primary-strong) 0%, var(--vh-primary) 60%, var(--vh-primary-soft) 100%);
    border-radius: 22px;
    padding: 22px 18px 16px;
    margin-bottom: 0;
    box-shadow: 0 12px 32px -8px rgba(52, 84, 180, 0.45), 0 4px 12px -2px rgba(52, 84, 180, 0.28);
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
}

.vh-report-scores-wrap::before{
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse 60% 80% at 50% 40%, #000 30%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 40%, #000 30%, transparent 90%);
    pointer-events: none;
    opacity: 0.7;
    z-index: 0;
}

.vh-report-scores-wrap::after{
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle 220px at center, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08) 50%, transparent 100%);
    pointer-events: none;
    animation: vh-scores-glow 18s ease-in-out infinite;
    z-index: 0;
}

.vh-report-scores-wrap > *{
    position: relative;
    z-index: 1;
}

.vh-report-scores-header-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.vh-report-scores-header-row .vh-report-scores-header{
    margin-bottom: 0;
}

.vh-report-scores-header{
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.7);
}

.vh-report-scores-view-toggle{
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.vh-report-scores-view-toggle button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition:
        background var(--vh-dur-fast, 0.15s) var(--vh-ease-out),
        color var(--vh-dur-fast, 0.15s) var(--vh-ease-out),
        transform var(--vh-dur-fast, 0.15s) var(--vh-ease-out-soft);
}

.vh-report-scores-view-toggle button:hover{
    color: #ffffff;
}

.vh-report-scores-view-toggle button.active{
    background: rgba(255, 255, 255, 0.98);
    color: var(--vh-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.vh-report-scores-view-toggle button:active{
    transform: scale(0.94);
}

.vh-report-scores-view-toggle button .ti{
    font-size: 15px;
    line-height: 1;
}

.vh-report-score-global-row{
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}

.vh-ds-gauge--global,
.vh-report-score-global{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px 0;
    animation: vh-score-global-in 0.48s var(--vh-ease-spring) both;
}

.vh-report-score-global__halo{
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(20px);
    opacity: 0.65;
    z-index: -1;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.45), transparent 70%);
}

.vh-report-score-global[data-band="mid"] .vh-report-score-global__halo{
    background: radial-gradient(circle, rgba(252, 211, 77, 0.5), transparent 70%);
}

.vh-report-score-global[data-band="bad"] .vh-report-score-global__halo,
.vh-report-score-global[data-band="verybad"] .vh-report-score-global__halo{
    background: radial-gradient(circle, rgba(248, 113, 113, 0.5), transparent 70%);
}

.vh-report-score-global[data-band="none"] .vh-report-score-global__halo{
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 70%);
}

.vh-report-score-global svg{
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.3));
}

.vh-report-ring-progress{
    transition: stroke-dasharray 0.95s var(--vh-ease-out);
}

.vh-report-score-global__rating{
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -0.2px;
    margin-top: 8px;
}

.vh-report-score-global__count{
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.02em;
    text-align: center;
    max-width: 280px;
    line-height: 1.35;
}

.vh-report-scores-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 8px;
}

.vh-ds-gauge,
.vh-report-sc{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: #ffffff;
    padding: 6px 4px;
    border-radius: 12px;
    border: none;
    background: transparent;
    opacity: 0;
    transform: translateY(6px) scale(0.94);
    animation: vh-sc-card-in 0.36s var(--vh-ease-out) forwards;
    animation-delay: calc(var(--row-index, 0) * 35ms + 0.12s);
}

a.vh-report-sc--link{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--vh-dur-fast, 0.15s) var(--vh-ease-out), transform var(--vh-dur-fast, 0.15s) var(--vh-ease-out-soft);
}
a.vh-report-sc--link:hover{
    background: rgba(255, 255, 255, 0.08);
}
a.vh-report-sc--link:active{
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.12);
}
a.vh-report-sc--link:focus-visible{
    outline: 2px solid rgba(255, 255, 255, 0.55);
    outline-offset: 2px;
}

.vh-report-sc.is-unavailable{
    animation-name: vh-sc-card-in-dim;
}

/* ?? Vista barras (referente: scores-bars + sc-bar-group) ?? */
.vh-report-scores-bars{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vh-report-scores-bars[hidden]{
    display: none !important;
}

.vh-report-scores-grid[hidden]{
    display: none !important;
}

.vh-report-score-global-row[hidden]{
    display: none !important;
}

.vh-ds-progress,
.vh-report-sc-bar{
    padding: 8px 12px;
    border-radius: 10px;
    transition: background var(--vh-dur-fast, 0.15s) var(--vh-ease-out), transform var(--vh-dur-fast, 0.15s) var(--vh-ease-out-soft);
    -webkit-tap-highlight-color: transparent;
    opacity: 0;
    transform: translateY(6px);
    animation: vh-sc-bar-in 0.38s var(--vh-ease-out) forwards;
    animation-delay: calc(var(--row-index, 0) * 45ms + 80ms);
}

.vh-report-sc-bar--link{
    display: block;
    color: inherit;
    text-decoration: none;
}

.vh-report-sc-bar--link:hover{
    background: rgba(255, 255, 255, 0.08);
}

.vh-report-sc-bar--link:active{
    transform: scale(0.985);
    background: rgba(255, 255, 255, 0.12);
}

.vh-report-sc-bar__head{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.vh-report-sc-bar__label{
    font-size: 12.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.1px;
}

.vh-report-sc-bar__label .ti{
    margin-right: 6px;
    opacity: 0.8;
    font-size: 13px;
    vertical-align: -1px;
}

.vh-report-sc-bar__val{
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.vh-report-sc-bar__track{
    position: relative;
    height: 10px;
    background: rgba(255, 255, 255, 0.13);
    border-radius: 99px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}

.vh-report-sc-bar__fill{
    height: 100%;
    border-radius: 99px;
    position: relative;
    box-shadow: 0 0 12px -2px currentColor;
    transform-origin: left center;
    animation: vh-sc-bar-fill-in 0.72s var(--vh-ease-out) both;
    animation-delay: calc(var(--row-index, 0) * 45ms + 0.18s);
}

.vh-report-sc-bar__fill::after{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 50%);
    border-radius: inherit;
    pointer-events: none;
}

.vh-report-sc-bar__rating{
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
    font-style: italic;
}

.vh-report-sc-bar-group{
    margin-top: 6px;
}

.vh-report-sc-bar-group__title{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    padding: 5px 12px 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    opacity: 0;
    transform: translateX(-6px);
    animation: vh-sc-bar-group-title-in 0.32s var(--vh-ease-out) forwards;
    animation-delay: calc(var(--row-index, 0) * 45ms + 60ms);
}

.vh-report-sc-bar-group__title .ti{
    font-size: 12px;
}

@keyframes vh-sc-bar-group-title-in {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (min-width: 768px) {
    .vh-report-scores-bars{
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        gap: 8px 28px;
    }

    .vh-report-scores-bars > .vh-report-sc-bar:first-child{
        flex-basis: 100%;
    }

    .vh-report-sc-bar-group{
        flex: 1 1 0;
        min-width: 220px;
        max-width: 460px;
        margin-top: 0;
    }

    .vh-report-sc-bar-group + .vh-report-sc-bar-group{
        margin-top: 0;
    }
}

.vh-report-sc__lbl{
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: -0.1px;
}

.vh-report-sc__sub{
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    font-style: italic;
}

/* ?? Badges bajo scores ?? */
.vh-report-badges{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--vh-surface-2);
    margin-bottom: 14px;
}

.vh-ds-badge,
.vh-report-badge-pill{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.vh-report-badge-pill i{
    font-size: 12px;
}

.vh-report-badge-pill--success{
    background: var(--vh-success-bg);
    color: var(--vh-success-fg);
    border-color: var(--vh-success-border);
}

.vh-report-badge-pill--warn{
    background: var(--vh-warn-bg);
    color: var(--vh-warn-fg);
    border-color: var(--vh-warn-border);
}

.vh-report-badge-pill--danger{
    background: var(--vh-danger-bg);
    color: var(--vh-danger-fg);
    border-color: var(--vh-danger-border);
}

.vh-report-badge-pill--info{
    background: var(--vh-primary-bg);
    color: var(--vh-primary);
    border-color: var(--vh-primary-border);
}

/* ?? IA ?? */
.vh-report-sec{
    margin-bottom: 18px;
}

.vh-report-ia-card{
    position: relative;
    border-radius: 18px;
    background: var(--vh-surface);
    box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    isolation: isolate;
}

.vh-report-ia-card::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, #4285f4, #9333ea, #ea4335, #fbbc05 90%, #4285f4);
    background-size: 300% 300%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: vh-ia-card-border 8s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.45;
    z-index: 1;
}

.vh-report-ia-card__header{
    padding: 14px 16px 0;
    position: relative;
    z-index: 2;
}

.vh-report-ia-card__brand{
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vh-primary);
}

.vh-report-ia-card__brand-icon{
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.15), rgba(147, 51, 234, 0.15));
    color: #7c3aed;
}

.vh-report-ia-beta{
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.vh-report-ia-card__body{
    padding: 12px 16px 18px;
    position: relative;
    z-index: 2;
}

.vh-ds-empty,
.vh-report-ia-empty{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.vh-report-ia-empty__title{
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--vh-text);
    margin: 0;
}

.vh-report-ia-empty__sub{
    font-size: 13.5px;
    color: var(--vh-text-3);
    line-height: 1.55;
    max-width: 420px;
    margin: 0;
}

.vh-report-ia-cta{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #4285f4, #9333ea, #ea4335);
    background-size: 200% 200%;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 20px -6px rgba(147, 51, 234, 0.55);
    animation: vh-ia-cta-shimmer 5s ease-in-out infinite;
    transition: transform var(--vh-dur-tap) var(--vh-ease-out-soft), box-shadow var(--vh-dur-base) var(--vh-ease-out);
}

.vh-report-ia-cta:hover{
    box-shadow: 0 12px 28px -6px rgba(147, 51, 234, 0.7);
}

.vh-report-ia-cta:active{
    transform: scale(0.97);
}

.vh-report-ia-cta.is-disabled,
.vh-report-ia-cta:disabled{
    background: linear-gradient(135deg, #9ca3af, #d1d5db);
    animation: none;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.85;
}

.vh-report-ia-cta.is-busy{
    opacity: 0.75;
    pointer-events: none;
}

.vh-report-ia-status{
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--vh-text-2, #64748b);
    max-width: 36rem;
}

.vh-report-ia-note{
    font-size: 11.5px;
    color: var(--vh-text-muted);
    margin: 0;
}

.vh-report-ia-included{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--vh-success-fg);
    margin: 0;
}

/* ?? Columns + cards ?? */
.vh-report-cols{
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vh-report-col{
    min-width: 0;
}

.vh-ds-card,
.vh-report-card{
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    border: 1px solid transparent;
}

.vh-ds-card.is-pending,
.vh-report-card--pending{
    opacity: 0.78;
}

.vh-ds-section-header,
.vh-report-card__header{
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    border-bottom: 1px solid var(--vh-hairline);
    background: #ffffff;
}

.vh-report-card__header .ti{
    font-size: 16px;
    color: var(--vh-primary);
}

.vh-report-card__header-score{
    margin-left: auto;
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: 0;
    text-transform: none;
}

.vh-poi-legend-btn.is-empty{
    opacity: 0.45;
}

/* ?? Tarjeta catastro (paridad referente) ?? */
.vh-ds-hero.vh-cat-hero,
.vh-cat-hero{
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, var(--vh-surface) 100%);
    border-bottom: 1px solid var(--vh-hairline);
    align-items: center;
}





.vh-cat-hero__main{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vh-cat-hero__chips{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vh-ds-chip.vh-cat-chip,
.vh-cat-chip{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-border);
    font-size: 12px;
    font-weight: 700;
    color: var(--vh-text-2);
    white-space: nowrap;
}

.vh-cat-chip .ti{
    font-size: 13px;
    color: var(--vh-primary);
}

.vh-ds-metric.vh-cat-dr,
.vh-cat-dr{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 11px 15px;
    border-bottom: 1px solid var(--vh-hairline);
    gap: 12px;
    font-size: 14px;
    flex-wrap: wrap;
}

.vh-cat-dr--block{
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
}

.vh-cat-dr--block .vh-cat-dv{
    text-align: left;
    overflow-wrap: anywhere;
    font-weight: 800;
    font-size: 14.5px;
    letter-spacing: -0.2px;
    line-height: 1.35;
}

.vh-cat-dl{
    color: var(--vh-text-3);
    flex-shrink: 0;
}

.vh-cat-dv{
    font-weight: 600;
    color: var(--vh-text);
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

.vh-cat-ref-wrap{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.vh-cat-ref-row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

.vh-cat-ref-mono{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
}

.vh-cat-copy{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: var(--vh-text-muted);
    transition: color 0.15s ease;
}

.vh-cat-copy:hover,
.vh-cat-copy:focus-visible{
    color: var(--vh-text-3);
}

.vh-cat-copy .ti{
    font-size: 13px;
    line-height: 1;
}

.vh-cat-copy.is-copied{
    color: var(--vh-success-fg);
}

.vh-cat-rl2{
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--vh-accent);
    text-decoration: none;
}

.vh-cat-rl2:hover{
    text-decoration: underline;
}

.vh-cat-rl2 .ti{
    font-size: 10px;
}

.vh-cat-group-title{
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 15px 6px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vh-text-3);
    border-top: 1px solid var(--vh-hairline);
    margin-top: 2px;
}

.vh-cat-group-title .ti{
    font-size: 13px;
    color: var(--vh-primary);
}

.vh-cat-muted-inline{
    color: var(--vh-text-muted);
    margin-left: 5px;
    font-size: 11px;
    font-weight: 500;
}

.vh-cat-info-icon{
    font-size: 13px;
    color: var(--vh-text-muted);
    margin-left: 5px;
    vertical-align: middle;
}

.vh-cat-table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin: 0 12px 8px;
    border-radius: 10px;
    border: 1px solid var(--vh-border);
}

.vh-cat-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: var(--vh-surface);
}

.vh-cat-table thead th{
    background: var(--vh-surface-2);
    padding: 7px 10px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--vh-text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-bottom: 1px solid var(--vh-border);
}

.vh-cat-table tbody td{
    padding: 8px 10px;
    color: var(--vh-text-2);
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid var(--vh-hairline);
}

.vh-cat-table tbody tr:nth-child(2n) td{
    background: var(--vh-surface-2);
}

.vh-cat-table tbody tr:last-child td{
    border-bottom: none;
}

.vh-cat-table th.vh-cat-table__num,
.vh-cat-table td.vh-cat-table__num{
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.vh-cat-footer{
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--vh-text-3);
    padding: 8px 15px 12px;
}

.vh-ds-card__body,
.vh-report-card__body{
    padding: 14px 16px 16px;
}

.vh-ds-card__score,
.vh-report-card__score{
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 0.25rem;
    color: var(--vh-primary);
    letter-spacing: -0.03em;
}

.vh-ds-callout,
.vh-report-card__notice{
    font-size: 0.8125rem;
    color: var(--vh-text-3);
    margin: 0;
}

.vh-ds-callout--warn{
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--vh-warn-bg);
    border: 1px solid var(--vh-warn-border);
    color: var(--vh-warn-fg);
}

.vh-report-field-list{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.vh-report-field dt{
    font-size: 0.72rem;
    color: var(--vh-text-3);
    margin-bottom: 0.125rem;
}

.vh-report-field dd{
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    color: var(--vh-text);
}

.vh-report-photo{
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--vh-border);
    background: var(--vh-surface-2);
    display: block;
}

.vh-report-media-fallback{
    display: none;
    margin-top: 0.375rem;
}

.vh-report-card--media-unavailable .vh-report-photo{
    display: none;
}

.vh-report-card--media-unavailable .vh-report-media-fallback{
    display: block;
}

.vh-report-attribution,
.vh-report-score-version{
    font-size: 0.75rem;
    color: var(--vh-text-3);
    margin: 0.35rem 0 0;
}

.vh-report-disclaimer{
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vh-border);
    font-size: 0.78rem;
    color: var(--vh-text-3);
    line-height: 1.5;
}

/* ?? Sec nav rail ?? */
.vh-report-sec-nav{
    display: none;
}

.vh-report-sec-nav__head{
    margin: 0;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8a92a6;
}

.vh-report-sec-nav__list{
    list-style: none;
    margin: 0;
    padding: 0;
}

.vh-report-sec-nav__item{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: none;
    border-radius: 6px;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    color: #5a6274;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.14s var(--vh-ease-out), color 0.14s var(--vh-ease-out);
}

.vh-report-sec-nav__item i{
    flex: 0 0 auto;
    font-size: 15px;
    width: 1rem;
    text-align: center;
    opacity: 0.8;
}

.vh-report-sec-nav__item span{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vh-report-sec-nav__item:hover{
    background: #e8eaef;
    color: #1f2937;
}

.vh-report-sec-nav__item:hover i{
    opacity: 1;
}

.vh-report-sec-nav__item:focus-visible{
    outline: 2px solid var(--vh-primary-border);
    outline-offset: 1px;
}

/* FAB + sheet índice (paridad PA sec-nav-fab / overlay; rail solo ≥1440) */
.vh-report-sec-nav-fab{
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(70px + 58px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, var(--vh-primary-strong), var(--vh-primary-soft));
    color: #ffffff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 24px -6px rgba(37, 99, 235, 0.55), 0 4px 12px -2px rgba(0, 0, 0, 0.18);
    z-index: 1010;
    cursor: pointer;
    transform-origin: bottom right;
    transition: transform var(--vh-dur-tap, 0.14s) var(--vh-ease-out), opacity 0.16s var(--vh-ease-out);
    -webkit-tap-highlight-color: transparent;
    font: inherit;
    padding: 0;
}

.vh-report-sec-nav-fab .ti{
    font-size: 22px;
    line-height: 1;
}

.vh-report-sec-nav-fab:active{
    transform: scale(0.94);
}

.vh-report-sec-nav-fab[data-hidden="true"]{
    opacity: 0;
    pointer-events: none;
    transform: scale(0.85);
}

.vh-report-sec-nav-overlay{
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
}

.vh-report-sec-nav-overlay[data-open]{
    pointer-events: auto;
}

.vh-report-sec-nav-backdrop{
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 24, 0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.22s var(--vh-ease-out);
}

.vh-report-sec-nav-overlay[data-open] .vh-report-sec-nav-backdrop{
    opacity: 1;
}

.vh-report-sec-nav-sheet{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--vh-surface, #ffffff);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.22);
    max-height: min(75dvh, 640px);
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform 0.2s var(--vh-ease-out);
    will-change: transform;
}

.vh-report-sec-nav-overlay[data-open] .vh-report-sec-nav-sheet{
    transform: translateY(0);
    transition: transform 0.32s var(--vh-ease-spring, cubic-bezier(0.34, 1.2, 0.64, 1));
}

.vh-report-sec-nav-sheet__handle{
    flex-shrink: 0;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vh-report-sec-nav-sheet__handle::after{
    content: '';
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--vh-border, #e2e8f0);
}

.vh-report-sec-nav-sheet__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 16px 10px;
    flex-shrink: 0;
}

.vh-report-sec-nav-sheet__title{
    font-size: 14px;
    font-weight: 800;
    color: var(--vh-text, #0f172a);
    letter-spacing: -0.1px;
}

.vh-report-sec-nav-sheet__close{
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: var(--vh-surface-2, #f1f5f9);
    color: var(--vh-text-2, #64748b);
    display: grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    font: inherit;
    transition: transform var(--vh-dur-tap, 0.14s) var(--vh-ease-out);
    -webkit-tap-highlight-color: transparent;
}

.vh-report-sec-nav-sheet__close .ti{
    font-size: 16px;
}

.vh-report-sec-nav-sheet__close:active{
    transform: scale(0.92);
}

.vh-report-sec-nav-sheet__list{
    overflow-y: auto;
    padding: 0 8px 16px;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 1024px) and (pointer: fine) {
    .vh-report-sec-nav-fab{
        bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    }

    .vh-report-sec-nav-backdrop{
        background: rgba(8, 12, 24, 0.5);
    }

    .vh-report-sec-nav-sheet{
        top: 50%;
        bottom: auto;
        left: 50%;
        right: auto;
        width: min(400px, calc(100vw - 48px));
        border-radius: 18px;
        max-height: min(80dvh, 640px);
        padding-bottom: 0;
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.28);
        transform: translate(-50%, -50%) scale(0.96);
        opacity: 0;
        transition: transform 0.2s var(--vh-ease-out), opacity 0.16s var(--vh-ease-out);
    }

    .vh-report-sec-nav-overlay[data-open] .vh-report-sec-nav-sheet{
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        transition: transform 0.26s var(--vh-ease-spring, cubic-bezier(0.34, 1.2, 0.64, 1)), opacity 0.16s var(--vh-ease-out);
    }

    .vh-report-sec-nav-sheet__handle{
        display: none;
    }
}

/* ?? Action bar ?? */
.vh-report-action-bar{
    position: fixed;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    z-index: 40;
    background: #ffffff;
    border-top: 1px solid var(--vh-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    padding: 8px 14px;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 8px;
}

.vh-ds-btn,
.vh-report-action-btn{
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    min-width: 0;
    transition: background var(--vh-dur-fast) var(--vh-ease-out), transform var(--vh-dur-tap) var(--vh-ease-out), box-shadow var(--vh-dur-fast) var(--vh-ease-out), border-color var(--vh-dur-fast) var(--vh-ease-out);
}

.vh-ds-btn:active:not(:disabled),
.vh-report-action-btn:active:not(:disabled){
    transform: scale(0.97);
}

.vh-ds-btn--tertiary,
.vh-report-action-btn--tertiary{
    display: none;
    flex: 0 0 auto;
    margin-right: auto;
    border: none;
    background: transparent;
    color: var(--vh-text-2);
    padding: 9px 12px;
}

.vh-ds-btn--secondary,
.vh-report-action-btn--secondary{
    border: 1.5px solid var(--vh-primary-border);
    background: var(--vh-primary-bg);
    color: var(--vh-primary);
}

.vh-ds-btn--primary,
.vh-report-action-btn--primary{
    border: none;
    background: linear-gradient(135deg, var(--vh-accent), var(--vh-primary));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(52, 84, 180, 0.36);
}

.vh-ds-btn:disabled,
.vh-report-action-btn:disabled{
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

.vh-report-not-found{
    max-width: 640px;
    margin: 4rem auto;
    text-align: center;
    color: var(--vh-text);
    padding: 0 1.5rem;
}

@media (min-width: 768px) {
    .vh-report-res-wrap{
        max-width: 720px;
        padding-top: 20px;
    }

    /* Paridad PA: 2 columnas solo ≥1440 (no a 768) */
    .vh-ds-btn--tertiary,
.vh-report-action-btn--tertiary{
        display: inline-flex;
        min-width: auto;
    }
}

@media (min-width: 1024px) and (pointer: fine) {
    .vh-report-mobile-header{
        display: none;
    }

    .vh-ds-stage,
.vh-report-stage{
        padding-bottom: 88px;
    }

    /* Paridad PA: a 1024 el contenido es 840px; el rail TOC solo aparece ≥1440 */
    .vh-report-res-wrap{
        max-width: 840px;
        padding-left: 32px;
        padding-right: 32px;
        padding-top: 24px;
    }

    .vh-report-scores-wrap{
        padding: 26px 28px 20px;
    }

    .vh-report-action-bar{
        bottom: 0;
        left: var(--vh-app-sidebar-w, 248px);
        padding: 12px 32px max(12px, calc(12px + env(safe-area-inset-bottom, 0px)));
        justify-content: flex-end;
        gap: 12px;
        transition: left 0.18s var(--vh-ease-out);
    }

    .vh-app-shell.is-collapsed .vh-report-action-bar{
        left: var(--vh-app-sidebar-collapsed-w, 64px);
    }

    .vh-ds-btn,
.vh-report-action-btn{
        flex: 0 0 auto;
        min-width: 200px;
    }

    .vh-ds-btn--tertiary,
.vh-report-action-btn--tertiary{
        min-width: auto;
    }
}

/* Paridad PA: #res flex + res-wrap 1280 + sec-nav-rail 220, gap 28 */
@media (min-width: 1440px) and (pointer: fine) {
    .vh-report-body{
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 28px;
    }

    .vh-report-res-wrap{
        max-width: 1280px;
        flex: 0 1 1280px;
        min-width: 0;
        margin: 0;
    }

    .vh-report-cols{
        display: flex;
        flex-direction: row;
        gap: 16px;
        align-items: flex-start;
    }

    .vh-report-col{
        flex: 1 1 0;
        min-width: 0;
    }

    .vh-report-sec-nav{
        display: block;
        position: sticky;
        top: 24px;
        align-self: flex-start;
        flex: 0 0 220px;
        width: 220px;
        max-width: 220px;
        max-height: calc(100dvh - 48px);
        overflow-x: hidden;
        overflow-y: auto;
        padding: 4px 4px 24px;
        box-sizing: border-box;
    }

    .vh-report-sec-nav-fab{
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vh-report-scores-wrap::after,
.vh-ds-gauge--global,
.vh-report-score-global,
.vh-ds-gauge,
.vh-report-sc,
.vh-ds-progress,
.vh-report-sc-bar,
.vh-report-sc-bar__fill,
.vh-report-sc-bar-group__title,
.vh-report-ia-card::before,
.vh-report-ia-cta,
.vh-report-ring-progress,
.vh-report-sec-nav-fab,
.vh-report-sec-nav-fab[data-hidden="true"],
.vh-report-sec-nav-backdrop,
.vh-report-sec-nav-sheet,
.vh-report-sec-nav-overlay[data-open] .vh-report-sec-nav-sheet{
        animation: none !important;
        transition: none !important;
    }
}

/* F5 ? Tarjeta Entorno (paridad referente: hero, mapa, leyenda, lista, footer) */
.vh-report-card--entorno .vh-report-card__body{
    padding: 0;
}







.vh-entorno-hero__main{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vh-entorno-hero__title{
    font-size: 14.5px;
    font-weight: 800;
    color: var(--vh-text);
    letter-spacing: -0.2px;
    line-height: 1.2;
}

.vh-entorno-hero__chip{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-border);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--vh-text-2);
    width: fit-content;
}

.vh-entorno-hero__chip .ti{
    font-size: 13px;
    color: var(--vh-primary);
}

.vh-entorno-mode-toggle{
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--vh-surface-2);
    border: 1px solid var(--vh-border);
    flex-shrink: 0;
}

.vh-entorno-mode-toggle button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--vh-text-3);
    font-size: 14px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease, color 0.18s ease, transform 0.14s ease;
}

.vh-entorno-mode-toggle button:active{
    transform: scale(0.94);
}

.vh-entorno-mode-toggle button.is-active{
    background: var(--vh-surface);
    color: var(--vh-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.vh-entorno-map-wrap{
    padding: 12px 15px 6px;
}

.vh-poi-map{
    position: relative;
}

.vh-poi-map__canvas{
    position: relative;
    height: 320px;
    border-radius: 10px;
    border: 1px solid var(--vh-border);
    isolation: isolate;
    overflow: hidden;
}

.vh-poi-map__canvas .vh-map-credit{
    z-index: 2;
    border-bottom-left-radius: 9px;
}

.vh-poi-map.is-fullscreen{
    position: fixed;
    inset: 0.75rem;
    z-index: 1200;
    margin: 0;
    padding: 0;
    border-radius: 14px;
    background: var(--vh-surface);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
}

.vh-poi-map.is-fullscreen .vh-poi-map__canvas{
    flex: 1;
    height: auto;
    min-height: 0;
    border-radius: 0;
    border: 0;
}

.vh-poi-map.is-fullscreen .vh-poi-map__legend{
    margin-top: 0;
    padding: 8px 12px 10px;
    border-top: 1px solid var(--vh-hairline);
}

.vh-poi-map.is-fullscreen .vh-poi-map__fs{
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: 12px;
}

.vh-poi-map__fs{
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
}

.vh-map-fs-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 1px solid var(--vh-border);
    background: var(--vh-surface);
    color: var(--vh-text-2);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    pointer-events: auto;
    font-size: 15px;
}

.vh-map-fs-btn:hover{
    color: var(--vh-text);
}

.vh-poi-map__legend{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 8px;
    align-items: center;
}

.vh-poi-legend-static{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--vh-text-2);
}

.vh-poi-legend-static__dot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--vh-text);
    display: inline-block;
}

.vh-poi-legend-btn{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 6px;
    border-radius: 20px;
    border: 1.5px solid var(--vh-poi-color, var(--vh-border));
    background: color-mix(in srgb, var(--vh-poi-color, #64748b) 9.4%, transparent);
    color: var(--vh-poi-color, var(--vh-text-2));
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    transition: opacity 0.15s ease;
}

.vh-poi-legend-btn .ti{
    font-size: 12px;
    line-height: 1;
}

.vh-poi-legend-btn:not(.is-active){
    opacity: 0.45;
}

.vh-entorno-list-wrap{
    border-top: 1px solid var(--vh-hairline);
}

.vh-poi-cats-grid{
    display: flex;
    flex-direction: column;
}

.vh-poi-cat{
    min-width: 0;
    border-top: 1px solid var(--vh-hairline);
}

.vh-poi-cat:first-child{
    border-top: none;
}

.vh-poi-cat-t{
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vh-text-3);
    padding: 11px 16px 7px;
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--vh-surface-2);
    border-bottom: 1px solid var(--vh-hairline);
}

.vh-poi-cat-count{
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--vh-surface);
    border: 1px solid var(--vh-border);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--vh-text-2);
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

.vh-poi-list{
    list-style: none;
    margin: 0;
    padding: 0;
}

.vh-poi-list li{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--vh-hairline);
    font-size: 13px;
    color: var(--vh-text-2);
}

.vh-poi-list li:last-child{
    border-bottom: none;
}

.vh-poi-list__icon{
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--vh-poi-color, var(--vh-primary)) 12%, var(--vh-primary-bg));
    color: var(--vh-poi-color, var(--vh-primary));
}

.vh-poi-list__icon .ti{
    font-size: 14px;
    line-height: 1;
}

.vh-poi-list__name{
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--vh-text);
}

.vh-poi-list__dist{
    margin-left: auto;
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--vh-text-3);
    background: var(--vh-surface-2);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--vh-border);
}

.vh-entorno-footer{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px 11px;
    font-size: 11px;
    color: var(--vh-text-muted);
    border-top: 1px solid var(--vh-hairline);
}

.vh-entorno-footer .ti{
    font-size: 12px;
}

.vh-poi-map__canvas .maplibregl-ctrl-top-left{
    top: 8px;
    left: 8px;
}

@media (min-width: 580px) {
    .vh-poi-cats-grid{
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .vh-poi-cat{
        border-top: none;
        border-left: 1px solid var(--vh-hairline);
    }

    .vh-poi-cat:nth-child(odd){
        border-left: none;
    }

    .vh-poi-cat:nth-child(-n+2){
        border-top: none;
    }
}

/* ?? Estado fÃ¯Â¿Â½sico (paridad referente) ?? */






.vh-fisico-hero__main{
    flex: 1;
    min-width: 0;
}

.vh-fisico-hero__title{
    font-size: 14.5px;
    font-weight: 800;
    color: var(--vh-text);
    letter-spacing: -0.2px;
    line-height: 1.35;
}

.vh-fisico-hero__year{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    background: var(--vh-surface-2);
    border: 1px solid var(--vh-border);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--vh-text-2);
}

.vh-fisico-hero__year .ti{
    font-size: 12px;
    color: var(--vh-primary);
}

.vh-epoch-list{
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.vh-epoch-list li{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 9px 16px;
    border-bottom: 1px solid var(--vh-hairline);
    font-size: 13px;
    color: var(--vh-text-2);
    line-height: 1.5;
}

.vh-epoch-list li:last-child{
    border-bottom: none;
}

.vh-epoch-item__badge{
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-top: -1px;
}

.vh-epoch-item__badge .ti{
    font-size: 16px;
    line-height: 1;
}

.vh-epoch-list li[data-sev="good"] .vh-epoch-item__badge{
    background: var(--vh-success-bg);
    color: var(--vh-success-fg);
}

.vh-epoch-list li[data-sev="warn"] .vh-epoch-item__badge{
    background: var(--vh-warn-bg);
    color: var(--vh-warn-fg);
}

.vh-epoch-list li[data-sev="danger"] .vh-epoch-item__badge{
    background: var(--vh-danger-bg);
    color: var(--vh-danger-fg);
}

.vh-epoch-item__text{
    flex: 1;
    min-width: 0;
}

.vh-fisico-reforma{
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 12px 15px 15px;
    padding: 12px 14px;
    border-radius: 14px;
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(245, 158, 11, 0.12), transparent 60%),
        linear-gradient(135deg, var(--vh-warn-bg) 0%, var(--vh-surface) 100%);
    border: 1px solid var(--vh-warn-border);
}

.vh-fisico-reforma__icon{
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 4px 12px -3px rgba(245, 158, 11, 0.5);
}

.vh-fisico-reforma__icon .ti{
    font-size: 20px;
}

.vh-fisico-reforma__main{
    flex: 1;
    min-width: 0;
}

.vh-fisico-reforma__label{
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vh-warn-fg);
}

.vh-fisico-reforma__amount{
    font-size: 20px;
    font-weight: 800;
    color: var(--vh-text);
    margin-top: 2px;
    letter-spacing: -0.3px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.vh-fisico-ite{
    --ite-fg: var(--vh-text-2);
    --ite-bg: var(--vh-surface);
    --ite-border: var(--vh-border);
    --ite-chip-a: #94a3b8;
    --ite-chip-b: #64748b;
    --ite-glow: rgba(100, 116, 139, 0.12);
    --ite-shadow: rgba(100, 116, 139, 0.4);
    margin: 12px 15px 15px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--ite-border);
    background:
        radial-gradient(120% 100% at 100% 0%, var(--ite-glow), transparent 60%),
        linear-gradient(135deg, var(--ite-bg) 0%, var(--vh-surface) 100%);
}

.vh-fisico-ite__hero{
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.vh-fisico-ite__icon{
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--ite-chip-a), var(--ite-chip-b));
    box-shadow: 0 4px 12px -3px var(--ite-shadow);
}

.vh-fisico-ite__icon .ti{
    font-size: 20px;
}

.vh-fisico-ite__main{
    flex: 1;
    min-width: 0;
}

.vh-fisico-ite__label{
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ite-fg);
}

.vh-fisico-ite__title{
    font-size: 15px;
    font-weight: 800;
    color: var(--vh-text);
    margin-top: 2px;
    letter-spacing: -0.2px;
    line-height: 1.2;
}

.vh-fisico-ite__detail{
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--vh-text-2);
    margin-top: 4px;
}

.vh-fisico-ite__disclaimer{
    font-size: 10.5px;
    line-height: 1.4;
    color: var(--vh-text-muted);
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--vh-border);
}

/* ?? Salud (paridad referente) ?? */
.vh-ds-hero.vh-salud-hero,
.vh-salud-hero{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(239, 68, 68, 0.1), transparent 60%),
        linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, var(--vh-surface) 100%);
    border-bottom: 1px solid var(--vh-hairline);
    flex-wrap: nowrap;
}

.vh-salud-hero__avatar{
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 6px 16px -4px rgba(239, 68, 68, 0.5);
}

.vh-salud-hero__avatar .ti{
    font-size: 22px;
}

.vh-salud-hero__main{
    flex: 1 1 auto;
    min-width: 0;
}

.vh-salud-hero__title{
    font-size: 16px;
    font-weight: 800;
    color: var(--vh-text);
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.vh-salud-hero__hint{
    font-size: 11.5px;
    color: var(--vh-text-3);
    margin-top: 4px;
    line-height: 1.4;
}

.vh-salud-hero__actions{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

.vh-salud-hero__badge{
    flex-shrink: 0;
}

.vh-salud-hero .vh-entorno-mode-toggle{
    margin-left: 0;
}

@media (max-width: 560px){
    .vh-salud-hero{
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .vh-salud-hero__actions{
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
        padding-left: 56px;
    }
}

.vh-ds-badge.vh-salud-badge,
.vh-salud-badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.vh-salud-badge .ti{
    font-size: 14px;
}

.vh-salud-badge--success{
    background: var(--vh-success-bg);
    border: 1px solid var(--vh-success-border);
    color: var(--vh-success-fg);
}

.vh-salud-badge--warn{
    background: var(--vh-warn-bg);
    border: 1px solid var(--vh-warn-border);
    color: var(--vh-warn-fg);
}

.vh-salud-badge--danger{
    background: var(--vh-danger-bg);
    border: 1px solid var(--vh-danger-border);
    color: var(--vh-danger-fg);
}

.vh-salud-map-wrap{
    padding: 12px 15px 6px;
}

.vh-salud-map{
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--vh-hairline);
}

.vh-salud-summary{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px 15px 4px;
}

@media (max-width: 540px) {
    .vh-salud-summary{
        grid-template-columns: 1fr;
    }
}

.vh-salud-summary__card{
    background: var(--vh-surface);
    border: 1px solid var(--vh-hairline);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.vh-salud-summary__label{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vh-text-3);
}

.vh-salud-summary__label .ti{
    font-size: 13px;
    color: #dc2626;
}

.vh-salud-summary__value{
    font-size: 18px;
    font-weight: 800;
    color: var(--vh-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.vh-salud-summary__name{
    font-size: 12px;
    color: var(--vh-text-2);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.vh-salud-summary__none{
    font-size: 12px;
    color: var(--vh-text-3);
    font-style: italic;
}

.vh-salud-summary__name--secondary{
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--vh-text-3);
    line-height: 1.35;
    font-style: normal;
}

.vh-salud-notice--partial{
    margin: 0 16px 10px;
}

.vh-salud-block__note{
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--vh-text-3);
}

.vh-salud-block__note--list{
    margin-bottom: 6px;
}

.vh-salud-block{
    padding: 6px 15px 14px;
}

.vh-salud-block__title{
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--vh-text-3);
    margin: 10px 0 6px;
}

.vh-salud-block__title .ti{
    font-size: 13px;
    color: #dc2626;
}

.vh-salud-block__count{
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--vh-text-2);
    background: var(--vh-surface-2);
    padding: 2px 7px;
    border-radius: 999px;
    letter-spacing: 0;
    text-transform: none;
}

.vh-salud-list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vh-salud-item{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--vh-hairline);
    font-size: 13px;
}

.vh-salud-item:last-child{
    border-bottom: none;
}

.vh-salud-item__icon{
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    display: grid;
    place-items: center;
    font-size: 14px;
}

.vh-salud-item__main{
    flex: 1;
    min-width: 0;
}

.vh-salud-item__title{
    font-weight: 600;
    color: var(--vh-text);
    font-size: 13px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vh-salud-item__meta{
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11px;
    color: var(--vh-text-3);
}

.vh-salud-item__dist{
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--vh-text-2);
    font-variant-numeric: tabular-nums;
}

.vh-salud-sources{
    margin: 0;
    padding: 8px 15px 14px;
    font-size: 11px;
    color: var(--vh-text-muted);
    line-height: 1.4;
}

/* ?? Solar F6 (paridad referente) ?? */
.vh-report-card--solar .vh-report-card__body{
    padding: 0;
}

.vh-ds-hero.vh-solar-hero,
.vh-solar-hero{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(245, 158, 11, 0.12), transparent 60%),
        linear-gradient(135deg, #fffbeb 0%, var(--vh-surface, #f8fafc) 100%);
    border-bottom: 1px solid var(--vh-hairline, #e2e8f0);
    flex-wrap: wrap;
}

.vh-solar-hero__avatar{
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 6px 16px -4px rgba(245, 158, 11, 0.5);
}

.vh-solar-hero__avatar .ti{
    font-size: 22px;
}

.vh-solar-hero__main{
    flex: 1 1 calc(100% - 56px);
    min-width: 0;
}

.vh-solar-hero__value{
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 24px;
    font-weight: 800;
    color: var(--vh-report-text, #0f172a);
    letter-spacing: -0.4px;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.vh-solar-hero__unit{
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}

.vh-solar-hero__hint{
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 4px;
    line-height: 1.4;
}

.vh-solar-hero__ref{
    font-size: 11.5px;
    color: #64748b;
    font-style: italic;
    margin-top: 2px;
    line-height: 1.4;
}

.vh-solar-hero__badge{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    padding-left: 56px;
}

.vh-ds-badge.vh-solar-badge,
.vh-solar-badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.vh-solar-badge .ti{
    font-size: 14px;
}

.vh-solar-badge--warn{
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #d97706;
}

.vh-solar-badge--mid{
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.vh-solar-badge--muted{
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

.vh-solar-body{
    padding: 12px 15px 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vh-solar-group-title{
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin-bottom: 8px;
}

.vh-solar-group-title .ti{
    font-size: 13px;
    color: #d97706;
}

.vh-solar-scale{
    padding: 0 10px;
}

.vh-solar-scale__labels{
    position: relative;
    height: 32px;
    margin-bottom: 2px;
}

.vh-solar-scale__city{
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 9.5px;
    color: #94a3b8;
    white-space: nowrap;
}

.vh-solar-scale__city--low{
    top: 16px;
}

.vh-solar-scale__bar{
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #fffbeb 0%, #fde68a 30%, #fcd34d 55%, #f59e0b 80%, #d97706 100%);
}

.vh-solar-scale__tick{
    position: absolute;
    top: -2px;
    width: 1px;
    height: 12px;
    background: #94a3b8;
    transform: translateX(-50%);
}

.vh-solar-scale__marker{
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f59e0b;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.18), 0 2px 6px rgba(17, 24, 39, 0.35);
    pointer-events: none;
}

.vh-solar-scale__range{
    position: relative;
    height: 14px;
    margin-top: 2px;
    font-size: 9px;
    color: #94a3b8;
}

.vh-solar-scale__range span:first-child{
    position: absolute;
    left: 0;
}

.vh-solar-scale__range span:last-child{
    position: absolute;
    right: 0;
}

.vh-solar-panel-callout{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background:
        radial-gradient(120% 100% at 0% 100%, rgba(245, 158, 11, 0.14), transparent 60%),
        linear-gradient(135deg, #fffbeb 0%, var(--vh-surface, #f8fafc) 100%);
    border: 1px solid #fde68a;
}

.vh-solar-panel-callout__icon{
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 4px 12px -3px rgba(245, 158, 11, 0.5);
}

.vh-solar-panel-callout__icon .ti{
    font-size: 20px;
}

.vh-solar-panel-callout__text{
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: #b45309;
}

.vh-solar-chart{
    position: relative;
}

.vh-solar-chart__svg{
    display: block;
}

.vh-ds-progress.vh-solar-bar,
.vh-solar-bar{
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.vh-solar-bar__rect{
    transition: opacity 0.15s ease;
}

.vh-solar-bar__label{
    transition: fill 0.15s ease, font-weight 0.15s ease;
    pointer-events: none;
}

.vh-solar-bar.is-active .vh-solar-bar__rect{
    opacity: 1;
}

.vh-solar-bar.is-active .vh-solar-bar__label{
    fill: #0f172a;
    font-weight: 700;
}

.vh-solar-bar.is-dimmed .vh-solar-bar__rect{
    opacity: 0.2;
}

.vh-solar-bar.is-dimmed .vh-solar-bar__label{
    fill: #d1d5db;
    font-weight: 400;
}

.vh-solar-seasons{
    display: flex;
    gap: 6px;
}

.vh-solar-season{
    flex: 1 1 0;
    padding: 7px 4px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    background-clip: padding-box;
    transform: scale(1);
    opacity: 1;
    transition: transform 0.15s ease, opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.vh-solar-season.is-active{
    transform: scale(1.04);
    z-index: 1;
}

.vh-solar-season.is-dimmed{
    opacity: 0.35;
}

.vh-solar-season--winter.is-active{
    border-color: #60a5fa;
    box-shadow: 0 2px 8px #60a5fa55;
}

.vh-solar-season--spring.is-active{
    border-color: #34d399;
    box-shadow: 0 2px 8px #34d39955;
}

.vh-solar-season--summer.is-active{
    border-color: #f59e0b;
    box-shadow: 0 2px 8px #f59e0b55;
}

.vh-solar-season--autumn.is-active{
    border-color: #f97316;
    box-shadow: 0 2px 8px #f9731655;
}

@media (prefers-reduced-motion: reduce) {
    .vh-solar-season,
.vh-ds-progress.vh-solar-bar,
.vh-solar-bar,
.vh-solar-bar__rect,
.vh-solar-bar__label{
        transition: none;
    }
}

.vh-solar-season .ti{
    font-size: 15px;
}

.vh-solar-season__value{
    font-size: 16px;
    font-weight: 800;
    color: var(--vh-report-text, #0f172a);
    line-height: 1;
}

.vh-solar-season__value span{
    font-size: 9px;
    font-weight: 500;
    color: #94a3b8;
}

.vh-solar-season__label{
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
    text-align: center;
    line-height: 1.2;
}

.vh-solar-season__label span{
    font-weight: 400;
}

.vh-solar-season--winter{
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.vh-solar-season--spring{
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
}

.vh-solar-season--summer{
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.vh-solar-season--autumn{
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

.vh-solar-meta{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.vh-solar-meta li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
}

.vh-solar-meta__label{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
}

.vh-solar-meta__label .ti{
    font-size: 14px;
    color: #d97706;
}

.vh-solar-meta__value{
    font-weight: 700;
    color: var(--vh-report-text, #0f172a);
    text-align: right;
}

.vh-solar-disclaimer,
.vh-solar-score-note{
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: #94a3b8;
}

@media (max-width: 420px) {
    .vh-solar-seasons{
        flex-wrap: wrap;
    }

    .vh-solar-season{
        flex: 1 1 calc(50% - 6px);
    }
}

/* F7 Ruido â€” paridad estructural con referente; tokens vh-ds */
.vh-ds-hero.vh-ruido-hero,
.vh-ruido-hero{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(52, 84, 180, 0.12), transparent 60%),
        linear-gradient(135deg, var(--vh-ds-primary-bg) 0%, var(--vh-ds-surface) 100%);
    border-bottom: 1px solid var(--vh-ds-hairline);
    flex-wrap: wrap;
}

.vh-ruido-hero__avatar{
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--vh-ds-primary-strong), var(--vh-ds-primary-soft));
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: var(--vh-ds-shadow-primary);
}

.vh-ruido-hero__avatar .ti{
    font-size: 22px;
}

.vh-ruido-hero__main{
    flex: 1;
    min-width: 0;
}

.vh-ruido-hero__value{
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 24px;
    font-weight: 800;
    color: var(--vh-ds-text);
    letter-spacing: -0.4px;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.vh-ruido-hero__unit{
    font-size: 12px;
    font-weight: 600;
    color: var(--vh-ds-text-3);
}

.vh-ruido-hero__hint{
    font-size: 11.5px;
    color: var(--vh-ds-text-3);
    margin-top: 4px;
    line-height: 1.4;
}

.vh-ruido-hero__ref{
    font-size: 11.5px;
    color: var(--vh-ds-text-2);
    font-style: italic;
    margin-top: 2px;
    line-height: 1.4;
}

.vh-ruido-hero__badge{
    flex-shrink: 0;
}

.vh-ds-badge.vh-ruido-badge,
.vh-ruido-badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.vh-ruido-badge--ok{
    background: var(--vh-ds-success-bg);
    border: 1px solid var(--vh-ds-success-border);
    color: var(--vh-ds-success-fg);
}

.vh-ruido-badge--mid{
    background: var(--vh-ds-warn-bg);
    border: 1px solid var(--vh-ds-warn-border);
    color: var(--vh-ds-warn-fg);
}

.vh-ruido-badge--danger{
    background: var(--vh-ds-danger-bg);
    border: 1px solid var(--vh-ds-danger-border);
    color: var(--vh-ds-danger-fg);
}

.vh-ruido-badge--muted{
    background: var(--vh-ds-surface-2);
    border: 1px solid var(--vh-ds-border);
    color: var(--vh-ds-text-3);
}

.vh-ruido-cta{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 16px 0;
    padding: 10px 12px;
    background: var(--vh-ds-primary-bg);
    border: 1px solid var(--vh-ds-primary-border);
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--vh-ds-text-2);
}

.vh-ruido-cta > .ti{
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 15px;
    color: var(--vh-ds-primary);
}

.vh-ruido-body{
    padding: 12px 15px 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vh-ruido-group-title{
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vh-ds-text-3);
    margin-bottom: 8px;
}

.vh-ruido-group-title .ti{
    font-size: 13px;
    color: var(--vh-ds-primary);
}

.vh-ruido-scale{
    padding-left: 10px;
    padding-right: 10px;
}

.vh-ruido-scale__bar{
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(
        to right,
        #86EFAC 0%,
        #86EFAC 22%,
        #FDE68A 30%,
        #FDBA74 38%,
        #FCA5A5 45%,
        #DC2626 78%,
        #7F1D1D 100%
    );
}

.vh-ruido-scale__tick{
    position: absolute;
    top: -2px;
    width: 1px;
    height: 12px;
    background: var(--vh-ds-text-muted);
    transform: translateX(-50%);
    pointer-events: none;
}

.vh-ruido-scale__marker{
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.18), 0 2px 6px rgba(17, 24, 39, 0.35);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.vh-ruido-scale__ends{
    position: relative;
    height: 14px;
    margin-top: 2px;
    font-size: 9px;
    color: var(--vh-ds-text-muted);
}

.vh-ruido-scale__ends span:first-child{
    position: absolute;
    left: 0;
}

.vh-ruido-scale__ends span:last-child{
    position: absolute;
    right: 0;
}

.vh-ruido-scale__anchors{
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 4px 10px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--vh-ds-text-2);
}

.vh-ruido-scale__anchor{
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.vh-ruido-scale__anchor span{
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 28px;
}

.vh-ruido-hourly{
    display: block;
    width: 100%;
    overflow: visible;
    touch-action: pan-y;
}

.vh-ruido-daynight{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.vh-ruido-daynight__card{
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vh-ruido-daynight__card--day{
    background: linear-gradient(135deg, var(--vh-ds-warn-bg) 0%, var(--vh-ds-surface) 110%);
    border-color: var(--vh-ds-warn-border);
}

.vh-ruido-daynight__card--night{
    background: linear-gradient(135deg, var(--vh-ds-primary-bg) 0%, var(--vh-ds-surface) 110%);
    border-color: var(--vh-ds-primary-border);
}

.vh-ruido-daynight__head{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vh-ruido-daynight__head .ti{
    font-size: 13px;
}

.vh-ruido-daynight__card--day .vh-ruido-daynight__head{
    color: var(--vh-ds-warn-fg);
}

.vh-ruido-daynight__card--day .vh-ruido-daynight__head .ti{
    color: #f59e0b;
}

.vh-ruido-daynight__card--night .vh-ruido-daynight__head{
    color: var(--vh-ds-primary);
}

.vh-ruido-daynight__card--night .vh-ruido-daynight__head .ti{
    color: #3b82f6;
}

.vh-ruido-daynight__value{
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}

.vh-ruido-daynight__card--day .vh-ruido-daynight__value{
    color: var(--vh-ds-warn-fg);
}

.vh-ruido-daynight__card--night .vh-ruido-daynight__value{
    color: var(--vh-ds-primary);
}

.vh-ruido-daynight__unit{
    font-size: 11px;
    font-weight: 600;
    opacity: 0.75;
}

.vh-ruido-sources{
    padding-top: 4px;
    border-top: 1px solid var(--vh-ds-hairline);
}

.vh-ruido-source-list{
    display: flex;
    flex-direction: column;
}

.vh-ruido-source{
    padding: 8px 0;
    border-bottom: 1px solid var(--vh-ds-hairline);
}

.vh-ruido-source:last-child{
    border-bottom: none;
}

.vh-ruido-source__main{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
}

.vh-ruido-source__icon{
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--vh-ds-surface-2);
    border: 1px solid var(--vh-ds-border);
}

.vh-ruido-source__icon .ti{
    font-size: 14px;
}

.vh-ruido-source__text{
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    overflow: hidden;
    flex-wrap: wrap;
}

.vh-ruido-source__name{
    color: var(--vh-ds-text);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.vh-ruido-source__suffix{
    color: var(--vh-ds-text-muted);
    font-weight: 500;
    font-size: 11.5px;
    flex-shrink: 0;
}

.vh-ruido-source__dist{
    color: var(--vh-ds-text-3);
    font-size: 11.5px;
    font-weight: 500;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.vh-ruido-source__db{
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    font-size: 13px;
}

.vh-ruido-source__db-unit{
    font-size: 11px;
    font-weight: 600;
    opacity: 0.75;
}

.vh-ruido-sources__expand{
    margin-top: 10px;
    width: 100%;
    padding: 9px 12px;
    background: var(--vh-ds-surface);
    border: 1px dashed var(--vh-ds-border);
    border-radius: 10px;
    color: var(--vh-ds-text-2);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition:
        background var(--vh-ds-dur-fast) var(--vh-ds-ease-out),
        border-color var(--vh-ds-dur-fast) var(--vh-ds-ease-out),
        color var(--vh-ds-dur-fast) var(--vh-ds-ease-out),
        transform var(--vh-ds-dur-tap) var(--vh-ds-ease-out-soft);
}

.vh-ruido-sources__expand:hover{
    background: var(--vh-ds-primary-bg);
    border-color: var(--vh-ds-primary-soft);
    border-style: solid;
    color: var(--vh-ds-primary);
}

.vh-ruido-sources__expand:active{
    transform: scale(0.985);
}

.vh-ruido-sources__expand .ti{
    font-size: 14px;
}

.vh-ruido-sources__expand.is-open .ti{
    transform: rotate(180deg);
}

.vh-ruido-disclaimer{
    margin: 0;
    padding: 7px 15px 10px;
    font-size: 11px;
    color: var(--vh-ds-text-muted);
    text-align: right;
    border-top: 1px solid var(--vh-ds-hairline);
    line-height: 1.45;
}

@media (max-width: 480px) {
    .vh-ruido-hero__main{
        flex: 1 1 calc(100% - 56px);
        min-width: 0;
    }

    .vh-ruido-hero__badge{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        padding-left: 56px;
    }
}

/* ===== F8 ? Vista 3D e imÃ¯Â¿Â½genes (LOD1 + croquis + comunidad) ===== */

.vh-fotos-body{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.vh-fotos-3d-showcase{
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--vh-border);
    border-radius: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    background: #dbe4f0;
    text-align: left;
    color: inherit;
    min-height: 180px;
}

.vh-fotos-3d-showcase__canvas-wrap{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    position: relative;
}

.vh-fotos-3d-showcase__canvas{
    display: block;
    width: 100%;
    height: 100%;
}

.vh-fotos-3d-showcase__scrim{
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(15, 23, 42, 0.55) 100%);
    pointer-events: none;
}

.vh-fotos-3d-showcase__badges{
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    z-index: 2;
}

.vh-fotos-3d-showcase__badge{
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--vh-primary);
}

.vh-fotos-3d-showcase__play{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.95);
    color: var(--vh-text);
    font-size: 1.25rem;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18);
}

.vh-fotos-tile__media--map{
    cursor: default;
    aspect-ratio: 4 / 3;
    padding: 0;
}

.vh-fotos-ubic-map{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 160px;
    background: #e2e8f0;
}

.vh-fotos-ubic-map__canvas{
    width: 100%;
    height: 100%;
    min-height: 160px;
}

.vh-fotos-ubic-map__layers{
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 2;
    display: inline-flex;
    border-radius: 0.4rem;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

.vh-fotos-ubic-map__layer{
    border: 0;
    background: transparent;
    padding: 0.28rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 650;
    color: var(--vh-text-2);
    cursor: pointer;
}

.vh-fotos-ubic-map__layer + .vh-fotos-ubic-map__layer{
    border-left: 1px solid rgba(15, 23, 42, 0.1);
}

.vh-fotos-ubic-map__layer.is-active{
    background: var(--vh-primary);
    color: #fff;
}

.vh-fotos-ubic-map__fs{
    position: absolute;
    right: 0.45rem;
    bottom: 0.45rem;
    z-index: 2;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--vh-text);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

/* Créditos impresos (paridad PA Leaflet attribution; sin maplibregl-compact) */
.vh-map-credit,
.vh-locator-map-credit,
.vh-mis-informes__map-credit {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    max-width: min(78%, 320px);
    padding: 0 5px;
    font-size: 8px;
    line-height: 1.5;
    font-weight: 500;
    color: #6b7280;
    background: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vh-map-credit a,
.vh-locator-map-credit a,
.vh-mis-informes__map-credit a {
    color: #4b5563;
    text-decoration: underline;
    text-underline-offset: 1px;
}
.vh-map-credit a:hover,
.vh-locator-map-credit a:hover,
.vh-mis-informes__map-credit a:hover {
    color: #1f2937;
}

.vh-poi-map,
.vh-salud-map,
.vh-fotos-ubic-map {
    position: relative;
}

.vh-report-card .maplibregl-ctrl-attrib,
.vh-fotos-ubic-map .maplibregl-ctrl-attrib,
.vh-poi-map .maplibregl-ctrl-attrib,
.vh-salud-map .maplibregl-ctrl-attrib {
    display: none !important;
}

.vh-fotos-ubic-marker{
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #0f172a;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
}

.vh-fotos-ubic-map.is-fullscreen{
    position: fixed;
    inset: 0;
    z-index: 1250;
    min-height: 100vh;
    border-radius: 0;
}

.vh-fotos-ubic-map.is-fullscreen .vh-fotos-ubic-map__canvas{
    min-height: 100vh;
}

body.vh-fotos-ubic-fs-open{
    overflow: hidden;
}

.vh-fotos-links{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vh-fotos-link{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--vh-border);
    background: var(--vh-surface);
    color: var(--vh-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
}

.vh-fotos-link:hover{
    border-color: var(--vh-primary-border);
    background: var(--vh-primary-bg);
}

.vh-fotos-link__icon{
    display: inline-grid;
    place-items: center;
    font-size: 0.95rem;
}

.vh-fotos-section-title{
    text-transform: none;
}

.vh-fotos-3d-showcase__content{
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.75rem;
    z-index: 2;
    color: #fff;
}

.vh-fotos-3d-showcase__title{
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
}

.vh-fotos-3d-showcase__sub{
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    opacity: 0.92;
}

.vh-fotos-3d-showcase__source,
.vh-fotos-meta{
    margin: 0;
    font-size: 0.72rem;
    color: var(--vh-text-3);
}

.vh-fotos-section-title{
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    font-weight: 650;
    color: var(--vh-text-2);
}

.vh-fotos-grid{
    display: grid;
    gap: 0.65rem;
}

.vh-fotos-grid--dual{
    grid-template-columns: 1fr 1fr;
}

.vh-fotos-tile{
    border: 1px solid var(--vh-border);
    border-radius: 0.65rem;
    overflow: hidden;
    background: var(--vh-surface);
}

.vh-fotos-tile__head{
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.55rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--vh-text-2);
    border-bottom: 1px solid var(--vh-hairline);
    background: var(--vh-surface-2);
}

.vh-fotos-tile__media{
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--vh-surface-2);
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.vh-fotos-tile__media img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vh-fotos-tile__zoom{
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.92);
    color: var(--vh-text);
    font-size: 0.85rem;
}

.vh-fotos-tile__fallback{
    display: none;
    margin: 0;
    padding: 0.55rem;
    font-size: 0.75rem;
    color: var(--vh-text-3);
}

.vh-fotos-tile.is-unavailable .vh-fotos-tile__media{
    display: none;
}

.vh-fotos-tile.is-unavailable .vh-fotos-tile__fallback{
    display: block;
}

body.vh-fotos-modal-open{
    overflow: hidden;
}

/* Visor 3D a pantalla completa: ocultar nav del shell (tabbar móvil / sidebar). */
body.vh-fotos-modal-open .vh-app-sidebar{
    display: none !important;
}

.vh-fotos-modal[hidden],
.vh-fotos-lightbox[hidden]{
    display: none !important;
}

.vh-fotos-modal{
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: block;
    padding: 0;
}

.vh-fotos-modal__backdrop,
.vh-fotos-lightbox__backdrop{
    position: absolute;
    inset: 0;
    background: #0b1220;
}

.vh-fotos-modal__panel{
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    display: flex;
    flex-direction: column;
    background: #0b1220;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    overflow: hidden;
}

.vh-fotos-modal__header{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 0;
    background: transparent;
    pointer-events: none;
}

.vh-fotos-modal__header h2{
    display: none;
}

.vh-fotos-modal__chrome{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(28rem, calc(100vw - 2rem));
    max-width: 28rem;
    pointer-events: none;
}

.vh-fotos-modal__chrome > *{
    pointer-events: auto;
}

.vh-fotos-modal__controls-slot{
    width: 100%;
    min-width: 0;
}

.vh-fotos-modal__controls-slot .vh-s3d-time{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
}

/* Móvil/tablet: panel pegado a bordes (debe ir DESPUÉS de header/chrome base). */
@media (max-width: 1023px){
    body.vh-fotos-modal-open .vh-s3d-addr{
        display: none !important;
    }

    .vh-fotos-modal__header{
        justify-content: stretch;
        align-items: stretch;
        padding: 0 !important;
        margin: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        gap: 0 !important;
    }

    .vh-fotos-modal__chrome{
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        gap: 0 !important;
    }

    .vh-fotos-modal__controls-slot{
        width: 100% !important;
        max-width: none !important;
    }

    .vh-fotos-modal__controls-slot .vh-s3d-time{
        border-radius: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .vh-fotos-modal__controls-slot .vh-s3d-time__tabs{
        border-radius: 0 !important;
    }

    .vh-fotos-modal__controls-slot .vh-s3d-time__tab:first-child,
    .vh-fotos-modal__controls-slot .vh-s3d-time__tab:last-child{
        border-radius: 0 !important;
    }
}

.vh-fotos-modal__close,
.vh-fotos-lightbox__close{
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 999px;
    background: rgba(13, 18, 28, 0.78);
    color: #e8ecf2;
    display: grid;
    place-items: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.vh-fotos-modal__close:hover{
    background: rgba(13, 18, 28, 0.95);
}

.vh-fotos-modal__layout{
    display: block;
    min-height: 0;
    flex: 1;
    height: 100%;
}

.vh-fotos-modal__viewer{
    position: absolute;
    inset: 0;
    background: #0b1220;
    min-height: 100%;
    width: 100%;
    height: 100%;
}

.vh-fotos-modal__canvas,
.vh-fotos-modal__viewer .vh-scene3d-canvas{
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-height: 100%;
}

.vh-fotos-modal__hint,
.vh-fotos-modal__side{
    display: none !important;
}

.vh-fotos-modal__side-title{
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 650;
}

.vh-fotos-modal__sketch{
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--vh-border);
    background: var(--vh-surface-2);
}

.vh-fotos-community{
    margin-top: 0.85rem;
    padding: 0.7rem 0.75rem;
    border-radius: 0.55rem;
    border: 1px solid var(--vh-primary-border);
    background: var(--vh-primary-bg);
}

.vh-fotos-community__title{
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--vh-primary-strong);
}

.vh-fotos-community__text,
.vh-fotos-community__coef,
.vh-fotos-community__limit{
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--vh-text-2);
}

.vh-fotos-community__limit{
    margin-bottom: 0;
    color: var(--vh-text-3);
}

.vh-fotos-lightbox{
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.vh-fotos-lightbox__img{
    position: relative;
    z-index: 1;
    max-width: min(920px, 100%);
    max-height: 90vh;
    border-radius: 0.5rem;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.35);
    background: #fff;
}

.vh-fotos-lightbox__close{
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

@media (max-width: 860px) {
    /* Visor 3D fullscreen: sin layout de dos columnas. */
}

@media (max-width: 560px) {
    .vh-fotos-grid--dual{
        grid-template-columns: 1fr;
    }
}


/* ?? F9 Econom?a (R6) ?? */
.vh-report-card--econo{ overflow: hidden; }
.vh-ds-hero.vh-econo-hero,
.vh-econo-hero{
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem 1rem;
    align-items: start;
    padding: 1rem 1.1rem 0.75rem;
}
.vh-econo-hero__avatar{
    width: 2.75rem; height: 2.75rem; border-radius: 0.75rem;
    display: grid; place-items: center;
    background: linear-gradient(145deg, #ecfdf5, #d1fae5);
    color: #047857;
}
.vh-econo-hero__avatar .ti{ font-size: 1.35rem; }
.vh-econo-hero__label{
    font-size: 0.78rem; font-weight: 600; color: var(--vh-muted, #64748b);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.vh-econo-hero__price{
    font-size: 1.85rem; font-weight: 750; line-height: 1.1; color: var(--vh-ink, #0f172a);
}
.vh-econo-hero__unit{
    font-size: 0.95rem; font-weight: 600; color: var(--vh-muted, #64748b); margin-left: 0.2rem;
}
.vh-econo-hero__chips{ margin-top: 0.45rem; }
.vh-ds-chip.vh-econo-chip,
.vh-econo-chip{
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.78rem; font-weight: 600; padding: 0.2rem 0.55rem;
    border-radius: 999px; background: #f1f5f9; color: #334155;
}
.vh-econo-chip__dot{
    width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor;
}
.vh-econo-chip--conf-alta{ background: #ecfdf5; color: #047857; }
.vh-econo-chip--conf-media{ background: #fffbeb; color: #b45309; }
.vh-econo-chip--conf-baja{ background: #fef2f2; color: #b91c1c; }
.vh-econo-hero__source{
    grid-column: 1 / -1;
    font-size: 0.78rem; color: var(--vh-muted, #64748b);
    padding-top: 0.15rem;
}
.vh-econo-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    padding: 0.35rem 1.1rem 0.85rem;
}
.vh-econo-box{
    display: flex; gap: 0.55rem; align-items: flex-start;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--vh-border, #e2e8f0);
    border-radius: 0.65rem;
    background: #fff;
}
.vh-econo-box--primary{
    grid-column: 1 / -1;
    background: linear-gradient(180deg, #f8fafc, #fff);
}
.vh-econo-box__icon{
    width: 1.85rem; height: 1.85rem; border-radius: 0.5rem;
    display: grid; place-items: center; flex: 0 0 auto;
    background: #f1f5f9; color: #0f766e;
}
.vh-econo-lbl{
    font-size: 0.72rem; font-weight: 650; color: var(--vh-muted, #64748b);
    text-transform: uppercase; letter-spacing: 0.02em;
}
.vh-econo-val{
    font-size: 1.15rem; font-weight: 700; color: var(--vh-ink, #0f172a); line-height: 1.2;
}
.vh-econo-val--muted{ font-size: 0.85rem; font-weight: 500; color: var(--vh-muted, #64748b); }
.vh-econo-unit{ font-size: 0.85rem; font-weight: 600; color: var(--vh-muted, #64748b); }
.vh-econo-box__range{
    margin-top: 0.2rem; font-size: 0.78rem; color: var(--vh-muted, #64748b);
}
.vh-econo-box__warn{
    margin-top: 0.35rem; font-size: 0.75rem; font-weight: 600; color: #b45309;
}
.vh-econo-reforma{
    display: flex; gap: 0.65rem; align-items: flex-start;
    margin: 0 1.1rem 0.85rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.65rem;
    background: #f8fafc;
    border: 1px solid var(--vh-border, #e2e8f0);
}
.vh-econo-reforma__icon{
    width: 2rem; height: 2rem; border-radius: 0.5rem;
    display: grid; place-items: center; background: #ecfdf5; color: #047857;
}
.vh-econo-reforma__label{
    font-size: 0.75rem; font-weight: 650; color: var(--vh-muted, #64748b);
}
.vh-econo-reforma__amount{
    font-size: 0.95rem; font-weight: 700; color: var(--vh-ink, #0f172a);
}
.vh-econo-score-note,
.vh-econo-disclaimer{
    margin: 0 1.1rem 0.85rem;
    font-size: 0.78rem;
    color: var(--vh-muted, #64748b);
    line-height: 1.45;
}
.vh-econo-disclaimer{ margin-bottom: 1rem; }
@media (max-width: 560px) {
    .vh-econo-grid{ grid-template-columns: 1fr; }
    .vh-econo-box--primary{ grid-column: auto; }
}

/* F10 — Conectividad SETELECO (paridad visual PA internet-block fixed / tokens vh-ds) */
.vh-ds-card--internet,
.vh-report-card--internet{
    overflow: hidden;
}
.vh-ds-hero.vh-internet-hero,
.vh-internet-hero{
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px 12px;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--vh-ds-hairline);
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(59, 130, 246, 0.10), transparent 60%),
        linear-gradient(135deg, var(--vh-ds-primary-bg, #eff6ff) 0%, var(--vh-ds-surface, #fff) 100%);
}
.vh-internet-hero--very_high{
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(37, 99, 235, 0.14), transparent 60%),
        linear-gradient(135deg, var(--vh-ds-primary-bg, #eff6ff) 0%, var(--vh-ds-surface, #fff) 100%);
}
.vh-internet-hero--high{
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(59, 130, 246, 0.12), transparent 60%),
        linear-gradient(135deg, var(--vh-ds-primary-bg, #eff6ff) 0%, var(--vh-ds-surface, #fff) 100%);
}
.vh-internet-hero--medium{
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(245, 158, 11, 0.12), transparent 60%),
        linear-gradient(135deg, var(--vh-ds-warn-bg, #fffbeb) 0%, var(--vh-ds-surface, #fff) 100%);
}
.vh-internet-hero--low{
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(220, 38, 38, 0.10), transparent 60%),
        linear-gradient(135deg, var(--vh-ds-danger-bg, #fef2f2) 0%, var(--vh-ds-surface, #fff) 100%);
}
.vh-internet-hero__avatar{
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 6px 16px -4px rgba(37, 99, 235, 0.45);
}
.vh-internet-hero--medium .vh-internet-hero__avatar{
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 6px 16px -4px rgba(245, 158, 11, 0.45);
}
.vh-internet-hero--low .vh-internet-hero__avatar{
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 6px 16px -4px rgba(220, 38, 38, 0.45);
}
.vh-internet-hero__avatar .ti{
    font-size: 22px;
    line-height: 1;
}
.vh-internet-hero__main{
    flex: 1;
    min-width: 0;
}
.vh-internet-hero__label{
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vh-ds-text-3, #64748b);
    letter-spacing: -0.1px;
}
.vh-internet-hero__value{
    margin-top: 2px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    color: var(--vh-ds-text, #0f172a);
}
.vh-internet-hero__trend{
    margin-left: auto;
    max-width: 12rem;
    align-self: flex-start;
    margin-top: 0;
}
.vh-internet-body{
    padding: 12px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vh-internet-techs{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.vh-internet-tech{
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--vh-ds-surface-2, #f1f5f9);
    color: var(--vh-ds-text-2, #334155);
    border: 1px solid var(--vh-ds-border, #e2e8f0);
}
.vh-internet-score-note{
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--vh-ds-text-2, #475569);
    line-height: 1.45;
}
.vh-internet-disclaimer{
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--vh-ds-warn-bg, #fffbeb);
    border: 1px solid var(--vh-ds-warn-border, #fde68a);
    font-size: 11.5px;
    color: var(--vh-ds-warn-fg, #92400e);
    line-height: 1.5;
}
.vh-energia-disclaimer{
    margin: 0 1.1rem 0.55rem;
    font-size: 0.78rem;
    color: var(--vh-muted, #64748b);
    line-height: 1.45;
}
.vh-internet-link-wrap{
    margin: 2px 0 0;
}
.vh-energia-link-wrap,
.vh-fisico-ite__link-wrap{
    margin: 0 1.1rem 0.95rem;
}
.vh-internet-link{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vh-ds-primary, #2563eb);
    text-decoration: none;
    width: fit-content;
}
.vh-internet-link .ti{
    font-size: 13px;
}
.vh-internet-link:hover{
    text-decoration: underline;
}
.vh-energia-link,
.vh-fisico-ite__link{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--vh-primary, #0ea5e9);
    text-decoration: none;
}
.vh-energia-link:hover,
.vh-fisico-ite__link:hover{
    text-decoration: underline;
}
@media (max-width: 480px){
    .vh-internet-hero{
        flex-wrap: wrap;
    }
    .vh-internet-hero__trend{
        width: auto;
        margin-left: 60px;
    }
    .vh-internet-hero__value{ font-size: 24px; }
    .vh-internet-hero__avatar{ width: 44px; height: 44px; border-radius: 12px; }
}

/* F10 â€” CÃ©dula de habitabilidad (paridad referente; tokens vh-ds) */
.vh-habita-notice{
    margin: 0.75rem 1rem;
}
.vh-habita-divider{
    height: 1px;
    background: var(--vh-ds-border, #e2e6ee);
    margin: 0.75rem 1rem;
}
.vh-habita-card,
.vh-habita-real{
    padding: 14px 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.vh-habita-card__hero,
.vh-habita-real__hero{
    display: flex;
    gap: 12px;
    align-items: center;
}
.vh-habita-card__avatar,
.vh-habita-real__avatar{
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
}
.vh-habita-card__avatar .ti,
.vh-habita-real__avatar .ti{
    font-size: 22px;
}
.vh-habita-card--required .vh-habita-card__avatar{
    background: linear-gradient(135deg, var(--vh-ds-success-fg, #16a34a), #15803d);
    box-shadow: 0 6px 16px -4px rgba(22, 163, 74, 0.5);
}
.vh-habita-card--optional .vh-habita-card__avatar,
.vh-habita-real__avatar{
    background: linear-gradient(135deg, var(--vh-ds-text-3, #6b7280), var(--vh-ds-text-muted, #9ca3af));
    box-shadow: 0 4px 12px -4px rgba(107, 114, 128, 0.35);
}
.vh-habita-real--gold .vh-habita-real__avatar{
    background: linear-gradient(135deg, #fcd34d, #d4920a);
    box-shadow: 0 6px 18px -4px rgba(212, 146, 10, 0.55);
}
.vh-habita-real--bad .vh-habita-real__avatar{
    background: linear-gradient(135deg, var(--vh-ds-danger-fg, #dc2626), #b91c1c);
    box-shadow: 0 6px 16px -4px rgba(220, 38, 38, 0.45);
}
.vh-habita-real--warn .vh-habita-real__avatar{
    background: linear-gradient(135deg, var(--vh-ds-warn-fg, #f59e0b), #d97706);
    box-shadow: 0 6px 16px -4px rgba(245, 158, 11, 0.45);
}
.vh-habita-card__main,
.vh-habita-real__main{
    flex: 1;
    min-width: 0;
}
.vh-habita-card__status,
.vh-habita-real__status{
    font-size: 15px;
    font-weight: 800;
    color: var(--vh-ds-text);
    letter-spacing: -0.2px;
    line-height: 1.3;
}
.vh-habita-card__subtitle,
.vh-habita-real__subtitle{
    font-size: 12.5px;
    color: var(--vh-ds-text-3);
    margin-top: 2px;
    line-height: 1.45;
}
.vh-habita-card__chips,
.vh-habita-real__chips{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.vh-habita-chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px 5px 9px;
    border-radius: 999px;
    background: var(--vh-ds-surface-2);
    border: 1px solid var(--vh-ds-border);
    font-size: 12px;
    color: var(--vh-ds-text-2);
    font-weight: 500;
}
.vh-habita-chip strong{
    color: var(--vh-ds-text);
    font-weight: 700;
}
.vh-habita-chip .ti{
    font-size: 13px;
    color: var(--vh-ds-primary);
}
.vh-habita-card__callout{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 13px;
    background: var(--vh-ds-warn-bg);
    border: 1px solid var(--vh-ds-warn-border);
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--vh-ds-warn-fg);
}
.vh-habita-card__callout .ti{
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--vh-ds-warn-fg);
}
.vh-habita-link-wrap{
    margin: 0 1rem 0.95rem;
}
.vh-habita-link{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--vh-ds-primary, #0ea5e9);
    text-decoration: none;
}
.vh-habita-link:hover{
    text-decoration: underline;
}


/* ?? F13 Comparador (localStorage) ?? */
.vh-compare-stage{
    background: var(--vh-bg, #f8fafc);
}

.vh-compare-res-wrap{
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 16px 100px;
}

.vh-compare-header{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.vh-compare-kicker{
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vh-primary, #3454b4);
}

.vh-compare-header h1{
    margin: 0;
    font-size: 1.55rem;
    color: var(--vh-text, #0f172a);
}

.vh-compare-lead{
    margin: 6px 0 0;
    color: var(--vh-text-2, #64748b);
    font-size: 0.92rem;
    max-width: 42rem;
}

.vh-compare-header__cta,
.vh-compare-empty__cta{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--vh-accent, #5b7cfa), var(--vh-primary, #3454b4));
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}

.vh-compare-empty{
    text-align: center;
    padding: 4rem 1rem;
    color: var(--vh-text, #0f172a);
}

.vh-compare-empty i{
    font-size: 2.4rem;
    color: var(--vh-primary, #3454b4);
}

.vh-compare-empty h1{
    margin: 0.75rem 0 0.4rem;
}

.vh-compare-empty p{
    color: var(--vh-text-2, #64748b);
    max-width: 28rem;
    margin: 0 auto 1.25rem;
}

.vh-compare-table-wrap{
    overflow-x: auto;
    border: 1px solid var(--vh-border, #e2e8f0);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.vh-compare-table{
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

.vh-compare-table th,
.vh-compare-table td{
    padding: 12px 14px;
    border-bottom: 1px solid var(--vh-border, #e2e8f0);
    text-align: left;
    vertical-align: top;
    font-size: 0.9rem;
}

.vh-compare-table thead th{
    background: #f8fafc;
    font-weight: 700;
    color: var(--vh-text, #0f172a);
}

.vh-compare-table tbody th{
    width: 12rem;
    color: var(--vh-text-2, #64748b);
    font-weight: 600;
    background: #fcfcfd;
}

.vh-compare-col__head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.vh-compare-col__link{
    color: var(--vh-primary, #3454b4);
    text-decoration: none;
    font-weight: 700;
}

.vh-compare-col__link:hover{
    text-decoration: underline;
}

.vh-compare-col__remove{
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
}

.vh-compare-col__remove:hover{
    color: #ef4444;
}

.vh-compare-score{
    display: inline-flex;
    min-width: 2.4rem;
    justify-content: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-weight: 800;
    color: #0f172a;
}

.vh-compare-score--good{ background: #bbf7d0; }
.vh-compare-score--mid{ background: #fde68a; }
.vh-compare-score--bad{ background: #fecaca; }
.vh-compare-score--none{ background: #e2e8f0; color: #64748b; }

@media (min-width: 1024px) and (pointer: fine) {
    .vh-compare-res-wrap{
        padding: 28px 32px 40px;
    }
}

@media (max-width: 767px) {
    .vh-report-action-btn span{
        font-size: 11px;
    }

    .vh-ds-btn,
.vh-report-action-btn{
        padding: 8px 8px;
        gap: 4px;
    }
}


/* F10b Parque inmobiliario â€” paridad referente (pisoadvisor parque-*) */
.vh-ds-card--parque.vh-report-card--parque,
.vh-report-card--parque{ overflow: hidden; }



[data-bs-theme="dark"] .vh-parque-hero,
:root[data-theme="dark"] .vh-parque-hero{
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, var(--vh-surface) 100%);
}

@media (prefers-color-scheme: dark) {
    .vh-ds-hero.vh-parque-hero,
.vh-parque-hero{
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, var(--vh-surface) 100%);
    }
}





.vh-parque-hero__main{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vh-parque-hero__top{
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.vh-parque-hero__title{
    font-size: 14.5px;
    font-weight: 800;
    color: var(--vh-text);
    letter-spacing: -0.2px;
    line-height: 1.35;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vh-parque-hero__score{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--vh-border);
    background: var(--vh-surface);
}

.vh-parque-hero__rating{ color: var(--vh-text-2); }
.vh-parque-hero__dot{ color: var(--vh-text-muted); }
.vh-parque-hero__score-value{ color: var(--vh-text); }

.vh-parque-hero__score[data-tone="good"]{
    background: var(--vh-success-bg);
    border-color: var(--vh-success-border);
}
.vh-parque-hero__score[data-tone="good"] .vh-parque-hero__rating,
.vh-parque-hero__score[data-tone="good"] .vh-parque-hero__score-value{ color: var(--vh-success-fg); }
.vh-parque-hero__score[data-tone="good"] .vh-parque-hero__dot{ color: var(--vh-success-fg); opacity: 0.5; }

.vh-parque-hero__score[data-tone="mid"]{
    background: var(--vh-primary-bg);
    border-color: var(--vh-primary-border);
}
.vh-parque-hero__score[data-tone="mid"] .vh-parque-hero__rating,
.vh-parque-hero__score[data-tone="mid"] .vh-parque-hero__score-value{ color: var(--vh-primary); }
.vh-parque-hero__score[data-tone="mid"] .vh-parque-hero__dot{ color: var(--vh-primary); opacity: 0.5; }

.vh-parque-hero__score[data-tone="bad"]{
    background: var(--vh-warn-bg);
    border-color: var(--vh-warn-border);
}
.vh-parque-hero__score[data-tone="bad"] .vh-parque-hero__rating,
.vh-parque-hero__score[data-tone="bad"] .vh-parque-hero__score-value{ color: var(--vh-warn-fg); }
.vh-parque-hero__score[data-tone="bad"] .vh-parque-hero__dot{ color: var(--vh-warn-fg); opacity: 0.5; }

.vh-parque-hero__chips{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vh-parque-hero__status{
    margin: 0;
    font-size: 11.5px;
    color: var(--vh-text-3);
}

.vh-parque-bar-row{
    padding: 10px 15px 12px;
    border-bottom: 1px solid var(--vh-hairline);
}

.vh-parque-bar-row__title{
    font-size: 12px;
    font-weight: 600;
    color: var(--vh-text-3);
    margin-bottom: 8px;
}

.vh-ds-progress.vh-parque-bar,
.vh-parque-bar{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vh-parque-bar__track{
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--vh-surface-2);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.vh-parque-bar__seg{
    height: 100%;
    transform-origin: left center;
}

.vh-parque-bar__seg[data-tone="ok"]{ background: var(--vh-primary-soft); }
.vh-parque-bar__seg[data-tone="warn"]{ background: var(--vh-warn-fg); }
.vh-parque-bar__seg[data-tone="alert"]{ background: var(--vh-danger-fg); }
.vh-parque-bar__seg[data-tone="muted"]{ background: var(--vh-text-muted); }

.vh-parque-bar__legend{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: var(--vh-text-2);
    font-variant-numeric: tabular-nums;
}

.vh-parque-bar__legend-item{
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vh-parque-bar__swatch{
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
}

.vh-parque-bar__swatch[data-tone="ok"]{ background: var(--vh-primary-soft); }
.vh-parque-bar__swatch[data-tone="warn"]{ background: var(--vh-warn-fg); }
.vh-parque-bar__swatch[data-tone="alert"]{ background: var(--vh-danger-fg); }
.vh-parque-bar__swatch[data-tone="muted"]{ background: var(--vh-text-muted); }

.vh-parque-bar__legend-label{ color: var(--vh-text-3); }
.vh-parque-bar__legend-value{ color: var(--vh-text); font-weight: 700; }

/* F10c â€” DemografÃ­a (paridad referente; tokens vh-ds) */
.vh-ds-hero.vh-demo-hero,
.vh-demo-hero{
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--vh-ds-primary-bg) 0%, var(--vh-ds-surface) 100%);
    border-bottom: 1px solid var(--vh-ds-hairline);
    flex-wrap: wrap;
}
.vh-demo-hero__avatar{
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--vh-ds-primary-strong), var(--vh-ds-primary-soft));
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: var(--vh-ds-shadow-primary, 0 6px 16px -4px rgba(37, 99, 235, 0.5));
}
.vh-demo-hero__avatar .ti{
    font-size: 22px;
}
.vh-demo-hero__main{
    flex: 1;
    min-width: 0;
}
.vh-demo-hero__title{
    font-size: 14.5px;
    font-weight: 800;
    color: var(--vh-ds-text);
    letter-spacing: -0.2px;
    line-height: 1.3;
}
.vh-demo-hero__sub{
    font-size: 12px;
    color: var(--vh-ds-text-3);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vh-demo-hero__chip{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    background: var(--vh-ds-surface);
    border: 1px solid var(--vh-ds-border);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--vh-ds-text-2);
    flex-shrink: 0;
}
.vh-demo-hero__chip .ti{
    font-size: 12px;
    color: var(--vh-ds-primary);
}
@media (max-width: 480px){
    .vh-demo-hero__main{ flex: 1 1 calc(100% - 56px); }
    .vh-demo-hero__chip{ margin-left: 56px; }
}
.vh-demo-body{
    padding: 14px 15px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.vh-demo-group-title{
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vh-ds-text-3);
    padding: 2px 0 4px;
}
.vh-demo-group-title .ti{
    font-size: 13px;
    color: var(--vh-ds-primary);
}
.vh-demo-summary-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.vh-demo-stat-chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 10px;
    background: var(--vh-ds-surface-2);
    border: 1px solid var(--vh-ds-border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--vh-ds-text-3);
    font-weight: 600;
}
.vh-demo-stat-chip .ti{
    font-size: 14px;
    color: var(--vh-ds-primary);
}
.vh-demo-stat-chip strong{
    color: var(--vh-ds-text);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.vh-demo-bars{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vh-demo-bar{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.vh-demo-bar__head{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.vh-demo-bar__label{
    font-size: 12px;
    color: var(--vh-ds-text-2);
    font-weight: 600;
}
.vh-demo-bar__value{
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.vh-demo-bar__track{
    height: 8px;
    background: var(--vh-ds-surface-2);
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}
.vh-demo-bar__fill{
    height: 100%;
    border-radius: 999px;
    position: relative;
}
.vh-demo-bar__fill::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 50%);
    border-radius: inherit;
    pointer-events: none;
}
.vh-demo-nat-card{
    background: var(--vh-ds-surface);
    border: 1px solid var(--vh-ds-border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vh-demo-nat-card + .vh-demo-nat-card{
    margin-top: 8px;
}
.vh-demo-nat-card__title{
    font-size: 12.5px;
    font-weight: 800;
    color: var(--vh-ds-text);
    margin-bottom: 2px;
    letter-spacing: -0.1px;
}
.vh-demo-nat-card__row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: var(--vh-ds-text-2);
}
.vh-demo-nat-card__legend{
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.vh-demo-nat-card__swatch{
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
}
.vh-demo-nat-card__swatch--spanish{ background: var(--vh-ds-primary); }
.vh-demo-nat-card__swatch--foreign{ background: var(--vh-ds-warn-fg, #f59e0b); }
.vh-demo-nat-card__value{
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-variant-numeric: tabular-nums;
}
.vh-demo-nat-card__value strong{
    font-weight: 800;
    color: var(--vh-ds-text);
    font-size: 13px;
}
.vh-demo-nat-card__count{
    font-size: 11px;
    color: var(--vh-ds-text-3);
}
.vh-demo-nat-card__stack{
    display: flex;
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--vh-ds-surface-2);
    margin-top: 4px;
}
.vh-demo-nat-card__stack-seg--spanish{ background: var(--vh-ds-primary); }
.vh-demo-nat-card__stack-seg--foreign{ background: var(--vh-ds-warn-fg, #f59e0b); }
.vh-demo-gini{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--vh-ds-surface-2);
    border: 1px solid var(--vh-ds-border);
    border-radius: 12px;
}
.vh-demo-gini[data-band="good"]{
    background: linear-gradient(135deg, var(--vh-ds-success-bg) 0%, var(--vh-ds-surface) 100%);
    border-color: var(--vh-ds-success-border);
}
.vh-demo-gini[data-band="warn"]{
    background: linear-gradient(135deg, var(--vh-ds-warn-bg) 0%, var(--vh-ds-surface) 100%);
    border-color: var(--vh-ds-warn-border);
}
.vh-demo-gini[data-band="danger"]{
    background: linear-gradient(135deg, var(--vh-ds-danger-bg) 0%, var(--vh-ds-surface) 100%);
    border-color: var(--vh-ds-danger-border);
}
.vh-demo-gini__head{
    display: flex;
    gap: 12px;
    align-items: center;
}
.vh-demo-gini__value{
    font-size: 28px;
    font-weight: 800;
    min-width: 56px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.6px;
    line-height: 1;
}
.vh-demo-gini__main{
    flex: 1;
    min-width: 0;
}
.vh-demo-gini__title{
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: -0.1px;
}
.vh-demo-gini__hint{
    font-size: 10.5px;
    color: var(--vh-ds-text-3);
    margin-top: 2px;
    line-height: 1.4;
}
.vh-demo-gini__track{
    position: relative;
    height: 8px;
    background: var(--vh-ds-border);
    border-radius: 999px;
    overflow: hidden;
}
.vh-demo-gini__fill{
    height: 100%;
    border-radius: 999px;
}
.vh-demo-gini__tick{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(0, 0, 0, 0.12);
}
.vh-demo-gini__scale{
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vh-ds-text-muted, #9ca3af);
}
.vh-demo-footer{
    font-size: 11px;
    color: var(--vh-ds-text-3);
    line-height: 1.4;
}

[data-bs-theme="dark"] .vh-demo-hero,
:root[data-theme="dark"] .vh-demo-hero{
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, var(--vh-ds-surface) 100%);
}
[data-bs-theme="dark"] .vh-demo-gini__tick,
:root[data-theme="dark"] .vh-demo-gini__tick{
    background: rgba(255, 255, 255, 0.18);
}


/* ===== SEG-3 Seguridad — paridad estructural PA; tokens --vh-ds-* ===== */
.vh-seguridad-empty{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 15px 8px;
    font-size: 13px;
    color: var(--vh-ds-text-3);
    line-height: 1.55;
}
.vh-seguridad-empty .ti{
    font-size: 1.35rem;
    flex-shrink: 0;
}

.vh-seguridad-hero{
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--vh-ds-hairline);
    flex-wrap: wrap;
}
.vh-seguridad-hero--good{
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(22, 163, 74, 0.12), transparent 60%),
        linear-gradient(135deg, var(--vh-ds-success-bg) 0%, var(--vh-ds-surface) 100%);
}
.vh-seguridad-hero--mid{
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(245, 158, 11, 0.12), transparent 60%),
        linear-gradient(135deg, var(--vh-ds-warn-bg) 0%, var(--vh-ds-surface) 100%);
}
.vh-seguridad-hero--bad{
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(220, 38, 38, 0.12), transparent 60%),
        linear-gradient(135deg, var(--vh-ds-danger-bg) 0%, var(--vh-ds-surface) 100%);
}
.vh-seguridad-hero__avatar{
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
}
.vh-seguridad-hero__avatar .ti{ font-size: 22px; }
.vh-seguridad-hero--good .vh-seguridad-hero__avatar{
    background: linear-gradient(135deg, #16a34a, #15803d);
    box-shadow: 0 6px 16px -4px rgba(22, 163, 74, 0.5);
}
.vh-seguridad-hero--mid .vh-seguridad-hero__avatar{
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 6px 16px -4px rgba(245, 158, 11, 0.5);
}
.vh-seguridad-hero--bad .vh-seguridad-hero__avatar{
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 6px 16px -4px rgba(220, 38, 38, 0.5);
}
.vh-seguridad-hero__main{
    flex: 1;
    min-width: 0;
}
.vh-seguridad-hero__score{
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}
.vh-seguridad-hero__score-value{
    font-size: 26px;
    font-weight: 800;
    color: var(--vh-ds-text);
    line-height: 1;
}
.vh-seguridad-hero__score-max{
    font-size: 13px;
    font-weight: 600;
    color: var(--vh-ds-text-3);
}
.vh-seguridad-hero__label{
    font-size: 12.5px;
    font-weight: 700;
    margin-top: 2px;
}
.vh-seguridad-hero--good .vh-seguridad-hero__label{ color: var(--vh-ds-success-fg); }
.vh-seguridad-hero--mid .vh-seguridad-hero__label{ color: var(--vh-ds-warn-fg); }
.vh-seguridad-hero--bad .vh-seguridad-hero__label{ color: var(--vh-ds-danger-fg); }
.vh-seguridad-hero__breadcrumb{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--vh-ds-text-3);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.vh-seguridad-hero__breadcrumb .ti{
    font-size: 11px;
    flex-shrink: 0;
}

.vh-seguridad-trend{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    border: 1px solid;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.vh-seguridad-trend .ti{ font-size: 12px; }
.vh-seguridad-trend--up{
    background: var(--vh-ds-danger-bg);
    color: var(--vh-ds-danger-fg);
    border-color: var(--vh-ds-danger-border);
}
.vh-seguridad-trend--dn{
    background: var(--vh-ds-success-bg);
    color: var(--vh-ds-success-fg);
    border-color: var(--vh-ds-success-border);
}
.vh-seguridad-trend--flat{
    background: var(--vh-ds-surface-2);
    color: var(--vh-ds-text-3);
    border-color: var(--vh-ds-border);
}
@media (max-width: 480px){
    .vh-seguridad-hero__main{ flex: 1 1 calc(100% - 60px); }
    .vh-seguridad-trend{ margin-left: 60px; }
}

.vh-seguridad-group-title{
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--vh-ds-text-3);
    margin-bottom: 8px;
}
.vh-seguridad-group-title .ti{
    font-size: 13px;
    color: var(--vh-ds-primary);
}
.vh-seguridad-group-title--bordered{
    padding: 12px 15px 6px;
    border-top: 1px solid var(--vh-ds-hairline);
    margin: 0;
}
.vh-seguridad-section{
    padding: 12px 15px 8px;
}

.vh-crime-level-chips{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.vh-crime-level-chip{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 6px 10px;
    border: 1px solid var(--vh-ds-border);
    border-radius: 8px;
    background: var(--vh-ds-surface-2);
    flex: 1;
    min-width: 70px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    cursor: pointer;
    font: inherit;
    text-align: left;
    color: inherit;
}
button.vh-crime-level-chip:hover{
    border-color: var(--vh-ds-primary-border);
    background: var(--vh-ds-surface);
}
button.vh-crime-level-chip:focus-visible{
    outline: 2px solid var(--vh-ds-primary);
    outline-offset: 2px;
}
.vh-crime-level-chip.is-active{
    border-color: var(--vh-ds-primary);
    background: var(--vh-ds-surface);
    box-shadow: 0 0 0 1px var(--vh-ds-primary-border);
}

.vh-seguridad-percentile{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.vh-seguridad-percentile__head{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.vh-seguridad-percentile__val{
    font-size: 13px;
    font-weight: 700;
}
.vh-seguridad-percentile__total{
    font-size: 11px;
    color: var(--vh-ds-text-3);
    font-variant-numeric: tabular-nums;
}
.vh-seguridad-percentile__track{
    height: 6px;
    background: var(--vh-ds-surface-2);
    border-radius: 99px;
    overflow: hidden;
}
.vh-seguridad-percentile__fill{
    height: 100%;
    border-radius: 99px;
    width: 0;
    transition: width 0.55s var(--vh-ds-ease-out);
}
.vh-crime-level-chip-scope{
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vh-ds-text-3);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.vh-crime-level-chip-scope .ti{ font-size: 10px; }
.vh-crime-level-chip-name{
    font-size: 11px;
    color: var(--vh-ds-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.vh-crime-level-chip-score{
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 420px){
    .vh-crime-level-chips{ display: grid; grid-template-columns: 1fr 1fr; }
    .vh-crime-level-chip{ flex: none; min-width: 0; }
}

.vh-crime-metric{
    padding: 9px 15px;
    border-bottom: 1px solid var(--vh-ds-hairline);
}
.vh-crime-metric-hd{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 5px;
}
.vh-crime-metric-lbl{
    font-size: 12px;
    font-weight: 600;
    color: var(--vh-ds-text-2);
    flex-shrink: 0;
}
.vh-crime-metric-val{
    font-size: 12px;
    color: var(--vh-ds-text-3);
    text-align: right;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}
.vh-crime-metric-unit{
    font-size: 10px;
    color: var(--vh-ds-text-muted);
}
.vh-crime-metric-vs{
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
}
.vh-crime-bar-wrap{
    position: relative;
    height: 6px;
    background: var(--vh-ds-surface-2);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 3px;
}
.vh-crime-bar{
    height: 100%;
    border-radius: 99px;
    transition: width 0.5s var(--vh-ds-ease-out);
}
.vh-crime-nat-line{
    position: absolute;
    top: 0;
    height: 100%;
    width: 1px;
    background: rgba(0, 0, 0, 0.2);
}
.vh-crime-nat{
    font-size: 10px;
    color: var(--vh-ds-text-muted);
}
@media (max-width: 420px){
    .vh-crime-metric-hd{ flex-direction: column; align-items: stretch; gap: 2px; }
    .vh-crime-metric-val{ text-align: left; white-space: normal; }
}

.vh-seguridad-disclaimer{
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 15px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--vh-ds-warn-bg);
    border: 1px solid var(--vh-ds-warn-border);
    font-size: 11.5px;
    color: var(--vh-ds-warn-fg);
    line-height: 1.5;
}
.vh-seguridad-disclaimer .ti{
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 14px;
}
.vh-seguridad-warnings__item{
    display: flex;
    gap: 6px;
    align-items: flex-start;
    font-size: 11px;
    color: var(--vh-ds-text-muted);
    line-height: 1.5;
    margin: 0;
}
.vh-seguridad-source{
    padding: 10px 15px 14px;
    border-top: 1px solid var(--vh-ds-hairline);
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}
.vh-seguridad-source__label{
    font-size: 11.5px;
    color: var(--vh-ds-text-3);
    line-height: 1.5;
}
.vh-seguridad-source__link{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--vh-ds-primary);
    text-decoration: none;
    width: fit-content;
}
.vh-seguridad-source__link:hover{ text-decoration: underline; }

[data-bs-theme="dark"] .vh-crime-nat-line,
:root[data-theme="dark"] .vh-crime-nat-line{
    background: rgba(255, 255, 255, 0.35);
}

/* F11 — Calidad del aire (AMB-1) */
.vh-ds-card--aire .vh-aire-hero{
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:14px 16px 12px;
}
.vh-aire-hero__avatar{
    width:44px;height:44px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    background:var(--vh-ds-surface-2,#e2e8f0);
    color:var(--vh-ds-primary,#2563eb);
    font-size:22px;flex-shrink:0;
}
.vh-aire-hero--good .vh-aire-hero__avatar{ background:#dcfce7; color:#15803d; }
.vh-aire-hero--mid .vh-aire-hero__avatar{ background:#fef3c7; color:#b45309; }
.vh-aire-hero--bad .vh-aire-hero__avatar{ background:#fee2e2; color:#b91c1c; }
.vh-aire-hero__main{ flex:1; min-width:0; }
.vh-aire-hero__value{
    font-size:32px;font-weight:800;line-height:1.1;
    color:var(--vh-ds-text,#0f172a);
    letter-spacing:-0.02em;
}
.vh-aire-hero__unit{
    font-size:14px;font-weight:700;margin-left:4px;
    color:var(--vh-ds-text-3,#64748b);
}
.vh-aire-hero__hint{
    margin-top:4px;font-size:12.5px;
    color:var(--vh-ds-text-3,#64748b);
}
.vh-aire-hero__badge{
    display:flex;flex-direction:column;align-items:flex-end;gap:6px;
}
.vh-aire-badge{
    display:inline-flex;align-items:center;
    padding:4px 10px;border-radius:999px;
    font-size:12px;font-weight:700;
}
.vh-aire-badge--good{ background:#dcfce7; color:#15803d; }
.vh-aire-badge--mid{ background:#fef3c7; color:#b45309; }
.vh-aire-badge--bad{ background:#fee2e2; color:#b91c1c; }
.vh-aire-badge--muted{ background:#f1f5f9; color:#475569; }
.vh-aire-hero__score{
    font-size:12px;font-weight:700;
    color:var(--vh-ds-text-3,#64748b);
}
.vh-aire-body{ padding:4px 16px 16px; }
.vh-aire-group-title{
    display:flex;align-items:center;gap:6px;
    margin:8px 0 10px;font-size:13px;font-weight:700;
    color:var(--vh-ds-text-2,#334155);
}
.vh-aire-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}
.vh-aire-pollutant{
    padding:10px 12px;
    border-radius:12px;
    background:var(--vh-ds-surface-2,#f8fafc);
    border:1px solid transparent;
}
.vh-aire-pollutant.is-over{
    background:#fef2f2;
    border-color:#fecaca;
}
.vh-aire-pollutant__name{
    font-size:12px;font-weight:700;
    color:var(--vh-ds-text-3,#64748b);
}
.vh-aire-pollutant__value{
    margin-top:2px;font-size:20px;font-weight:800;
    color:var(--vh-ds-text,#0f172a);
}
.vh-aire-pollutant__unit{
    font-size:11px;font-weight:600;
    color:var(--vh-ds-text-3,#94a3b8);
}
.vh-aire-pollutant__meta{
    margin-top:4px;font-size:11.5px;
    color:var(--vh-ds-text-3,#64748b);
    line-height:1.35;
}
.vh-aire-banner{
    display:flex;align-items:flex-start;gap:8px;
    margin-top:12px;padding:10px 12px;border-radius:12px;
    font-size:13px;font-weight:600;line-height:1.35;
}
.vh-aire-banner--warn{ background:#fef3c7; color:#92400e; }
.vh-aire-banner--ok{ background:#dcfce7; color:#166534; }
.vh-aire-trend{
    display:flex;align-items:center;gap:6px;
    margin-top:10px;font-size:13px;font-weight:600;
    color:var(--vh-ds-text-2,#334155);
}
.vh-aire-trend--improving{ color:#15803d; }
.vh-aire-trend--worsening{ color:#b91c1c; }
.vh-aire-disclaimer,.vh-aire-source{
    margin:10px 0 0;font-size:11.5px;line-height:1.45;
    color:var(--vh-ds-text-3,#94a3b8);
}
@media (max-width:560px){
    .vh-aire-grid{ grid-template-columns:1fr; }
}
