/* LIFETIMEBESS Solar — solo añade. La base (tokens, nav, footer, .hero-dark, .card, .btn…) viene de /assets/styles.css.
   Acento solar: únicamente sobre fondos oscuros (.hero-dark). En fondos claros se usa --accent-deep. */
:root {
  --sun: #F2B134;          /* acento solar: sobre --navy, contraste > 7:1 */
  --sun-soft: #FCE7B5;     /* tinta suave sobre fondo oscuro */
  --res: #E0A100;          /* residencial (dato) */
  --ci: #2A72B8;           /* comercial e industrial (dato) */
  --util: #123C68;         /* utility-scale (dato) */
  --unk: #8CA0B3;          /* desconocido (dato, sin texto) */
}

.solar-accent { color: var(--sun); }
.hero-dark .hl { color: var(--sun); }

/* Mapa mundial de sistemas FV: reserva el alto antes de dibujar (evita CLS) */
#solar-map { aspect-ratio: 358 / 134; position: relative; width: 100%; }
#solar-map canvas { width: 100%; height: 100%; display: block; }

/* Leyenda de tamaños (clases de la sección 2 de SPEC.md) */
.size-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0; font-size: .85rem; color: var(--muted); }
.size-legend .sw { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.sw-res { background: var(--res); }
.sw-ci { background: var(--ci); }
.sw-util { background: var(--util); }

/* Filtros en chips (botones con aria-pressed) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-size: .85rem; font-weight: 600; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--border, #DFE6EE); background: #fff; color: var(--navy, #123C68); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--accent-deep, #1B5691); border-color: var(--accent-deep, #1B5691); color: #fff; }
.chip:focus-visible { outline: 3px solid var(--accent, #2A72B8); outline-offset: 2px; }

/* KPIs de cobertura (datos de manifest.json) */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 24px; }
.kpi { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 14px 16px; }
.kpi .v { font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; color: #fff; line-height: 1.1; }
.kpi .v small { font-size: .9rem; color: var(--sun-soft); margin-left: 4px; font-weight: 600; }
.kpi .l { font-size: .8rem; color: #C9D9E8; margin-top: 4px; }
.kpi .src { font-size: .72rem; color: #9FB7CC; margin-top: 6px; }

/* Gráficos SVG en línea (serie por país, barras por tamaño) */
.chart-svg { width: 100%; height: auto; display: block; }
.chart-svg text { font-family: var(--font-body); fill: var(--muted); font-size: 12px; }
.chart-svg .axis { stroke: #CBD5E1; }
.chart-svg .grid { stroke: #EDF1F5; }

/* Tabla de registros: columnas numéricas alineadas a la derecha */
.table-wrap td.num, .table-wrap th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-wrap th button { all: unset; cursor: pointer; font-weight: 700; }
.table-wrap th button:focus-visible { outline: 3px solid var(--accent, #2A72B8); outline-offset: 2px; }

/* Marcadores de procedencia (VERIFICADO / ESTIMADO / ILUSTRATIVO) */
.prov { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 99px; vertical-align: 1px; }
.prov-v { background: #E7F5EE; color: var(--good-text, #1B7748); }
.prov-e { background: #FDF3E3; color: var(--warn-text, #A26000); }
.prov-i { background: #EEF2F7; color: var(--muted, #5B6B80); }

/* Aviso de privacidad (residencial agregado) */
.privacy-note { border-left: 3px solid var(--accent, #2A72B8); background: #F3F8FD; padding: 12px 16px; border-radius: 0 10px 10px 0; font-size: .9rem; color: var(--navy, #123C68); }

@media (max-width: 720px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips { gap: 6px; }
}

/* Route Grader: resultado y chips de supuestos (clases que emite solar-route.js) */
.rg-best { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: #E7F5EE; color: var(--navy, #123C68); font-size: .95rem; }
.rg-best b { color: var(--good-text, #1B7748); }
.rg-chip { display: inline-block; margin: 2px 6px 2px 0; padding: 3px 10px; border-radius: 99px; background: #EEF2F7; color: var(--navy, #123C68); font-size: .78rem; font-weight: 600; }
.rg-chip .prov { margin-left: 4px; }