/* Theme tokens. Status colors (good/warning/critical) come from the
   validated dataviz status palette -- fixed, never themed -- so semaphore
   meaning stays consistent wherever it appears. Navy/gold is cosmetic UI
   chrome only, free to pick. */
:root {
    --navy-900: #101b2d;
    --navy-800: #17233a;
    --gold-500: #c9a227;
    --gold-400: #ddc06a;
    --surface: #f7f7f5;
    --text-primary: #14181f;
    --text-secondary: #5b6472;
    --border-soft: rgba(11, 11, 11, 0.08);

    --status-good: #0ca30c;
    --status-good-bg: rgba(12, 163, 12, 0.12);
    --status-warning: #8a5a00;
    --status-warning-fill: #fab219;
    --status-warning-bg: rgba(250, 178, 25, 0.20);
    --status-critical: #d03b3b;
    --status-critical-bg: rgba(208, 59, 59, 0.12);
}

body {
    background: var(--surface);
    color: var(--text-primary);
}

/* --- navbar --- */
.navbar-parcela {
    background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
}

.navbar-parcela .navbar-brand {
    font-weight: 700;
    letter-spacing: .02em;
}

.navbar-parcela .navbar-brand .bi {
    color: var(--gold-500);
}

/* --- hero (search page) --- */
.hero-panel {
    background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
    color: #fff;
    padding: 3rem 0 5.5rem;
}

.hero-title {
    font-weight: 800;
}

.hero-subtitle {
    color: rgba(255, 255, 255, .75);
    max-width: 40rem;
}

.search-card {
    margin-top: -3.5rem;
    position: relative;
    z-index: 2;
}

/* --- gold CTA button (brand accent, not a status color) --- */
.btn-gold {
    background-color: var(--gold-500);
    border-color: var(--gold-500);
    color: #1a1400;
}

.btn-gold:hover,
.btn-gold:focus {
    background-color: var(--gold-400);
    border-color: var(--gold-400);
    color: #1a1400;
}

/* --- cards --- */
.card-soft {
    border: none;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 27, 45, .08), 0 8px 24px rgba(16, 27, 45, .05);
}

.section-title {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.section-title .bi {
    color: var(--gold-500);
}

.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(201, 162, 39, .12);
    color: var(--gold-500);
    margin-right: .6rem;
}

/* --- status pills: color always paired with an icon + text label,
   never carries meaning alone --- */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .8rem;
    white-space: nowrap;
}

.status-pill.status-good {
    background: var(--status-good-bg);
    color: var(--status-good);
}

.status-pill.status-warning {
    background: var(--status-warning-bg);
    color: var(--status-warning);
}

.status-pill.status-critical {
    background: var(--status-critical-bg);
    color: var(--status-critical);
}

/* --- hero figure (overall score) --- */
.hero-score-wrap {
    display: flex;
    align-items: baseline;
    gap: .25rem;
}

.hero-score {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.hero-score-max {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* --- meter: segmented bar, unfilled track a lighter step of the same
   surface so state still reads across the whole bar --- */
.meter {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: #e9ecef;
}

.meter > span {
    height: 100%;
}

.meter .seg-good {
    background: var(--status-good);
}

.meter .seg-warning {
    background: var(--status-warning-fill);
}

.meter .seg-critical {
    background: var(--status-critical);
}

.meter-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .85rem;
    color: var(--text-secondary);
}

.meter-legend .bi {
    margin-right: .3rem;
}

.legend-good .bi {
    color: var(--status-good);
}

.legend-warning .bi {
    color: #8a5a00;
}

.legend-critical .bi {
    color: var(--status-critical);
}

/* --- risk list (critical rules) --- */
.risk-item {
    display: flex;
    gap: .6rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--border-soft);
}

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

.risk-item .bi {
    color: var(--status-critical);
    margin-top: .2rem;
}

.risk-empty {
    display: flex;
    gap: .6rem;
    align-items: center;
    color: var(--status-good);
    font-weight: 600;
}

/* --- map layer panel --- */
#map {
    width: 100%;
    height: 560px;
    border-radius: 10px;
    overflow: hidden;
}

.layer-panel {
    max-height: 560px;
    overflow-y: auto;
}

.layer-category-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.status-dot {
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-block;
}

.status-dot.dot-good {
    background: var(--status-good);
}

.status-dot.dot-warning {
    background: var(--status-warning-fill);
}

.status-dot.dot-critical {
    background: var(--status-critical);
}

.status-dot.dot-unknown {
    background: #adb5bd;
}

/* --- intersects accordion --- */
.accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
    box-shadow: none;
}

.accordion-button .badge {
    font-weight: 600;
}