/* Observatorio de Vivienda — explorador de datos. Aspecto de portal estadístico: fondo blanco, reglas finas,
   números alineados a la derecha y un único color de acento para enlaces y selección. */

:root {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #5c5c5c;
  --rule: #d4d4d4;
  --rule-strong: #8a8a8a;
  --head-bg: #f4f4f4;
  --group-bg: #f7f7f7;
  --row-hover: #f2f6fb;
  --row-selected: #e6effa;
  --accent: #1a5fb4;
  --bar: #e3e3e3;
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #4a3aa7;
  --focus: #1a5fb4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #161616;
    --fg: #e8e8e8;
    --muted: #a6a6a6;
    --rule: #3a3a3a;
    --rule-strong: #6e6e6e;
    --head-bg: #202020;
    --group-bg: #1d1d1d;
    --row-hover: #1f2730;
    --row-selected: #23324a;
    --accent: #78aeed;
    --bar: #303030;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #9085e9;
    --focus: #78aeed;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161616; --fg: #e8e8e8; --muted: #a6a6a6; --rule: #3a3a3a; --rule-strong: #6e6e6e; --head-bg: #202020;
  --group-bg: #1d1d1d; --row-hover: #1f2730; --row-selected: #23324a; --accent: #78aeed; --bar: #303030;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #9085e9; --focus: #78aeed;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}
a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.page { max-width: 1180px; margin: 0 auto; padding: 16px 16px 40px; }

header h1 { font-size: 22px; font-weight: 600; margin: 4px 0 2px; }
header p { margin: 0 0 14px; color: var(--muted); }

/* pestañas: enlaces de texto */
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--rule); margin-bottom: 14px; }
.tabs a { padding: 6px 0; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.tabs a:hover { color: var(--fg); }

/* controles */
.controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin-bottom: 12px; }
.ctl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ctl label, .ctl .lbl { font-size: 13px; color: var(--muted); }
.ctl.wide { flex: 1 1 340px; }
.ctl.wide .pair { display: flex; gap: 6px; }
.ctl.wide .pair input { flex: 0 0 150px; }
.ctl.wide .pair select { flex: 1 1 auto; min-width: 0; }
input[type="search"], select {
  font: inherit;
  font-size: 15px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 4px 6px;
  height: 32px;
  max-width: 100%;
}
.check { display: flex; align-items: center; gap: 6px; height: 32px; }
.check input { margin: 0; width: 16px; height: 16px; }
.check label { color: var(--fg); font-size: 15px; }
.check input:disabled + label { color: var(--muted); }

/* tabla */
.caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; align-items: baseline;
  border-top: 1px solid var(--rule-strong); padding: 8px 0 6px; }
.caption h2 { font-size: 17px; font-weight: 600; margin: 0; }
.caption .meta { color: var(--muted); font-size: 14px; }
.status { color: var(--muted); padding: 8px 0; min-height: 1em; }
.status:empty { display: none; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--rule); }
table.data { border-collapse: collapse; width: 100%; font-size: 15px; }
table.data th, table.data td { border-bottom: 1px solid var(--rule); padding: 5px 8px; text-align: left; vertical-align: top; white-space: nowrap; }
table.data thead th { background: var(--head-bg); border-bottom: 1px solid var(--rule-strong); font-weight: 600; font-size: 14px; padding: 0; }
table.data thead th .sort, table.data thead th .plain {
  font: inherit; color: var(--fg); background: none; border: 0; padding: 6px 8px; width: 100%; text-align: inherit; cursor: pointer;
  display: block;
}
table.data thead th .plain { cursor: default; }
table.data thead th .sort .arrow { color: var(--muted); font-weight: 400; margin-left: 4px; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data thead th.num { text-align: right; }
table.data td.name { white-space: normal; min-width: 160px; }
table.data td.conf { text-align: center; width: 3.5em; }
table.data thead th.conf { text-align: center; }
table.data td.src { color: var(--muted); }
table.data tbody tr.row { cursor: pointer; }
table.data tbody tr.row:hover { background: var(--row-hover); }
table.data tbody tr.row.selected { background: var(--row-selected); }
table.data a.rowlink { color: var(--fg); text-decoration: none; }
table.data a.rowlink:hover { text-decoration: underline; color: var(--accent); }
table.data tr.group th { background: var(--group-bg); font-weight: 600; text-align: left; }
table.data tr.group th .count { color: var(--muted); font-weight: 400; margin-left: 6px; }
table.data tr.group td { background: var(--group-bg); font-weight: 600; }
table.data tr.child td.name { padding-left: 24px; }
table.data .diff { font-weight: 700; }
table.data .extra { color: var(--muted); margin-left: 4px; }
td.val { position: relative; }
td.val .bar { position: absolute; right: 8px; top: 6px; bottom: 6px; background: var(--bar); z-index: 0; }
td.val span.v { position: relative; z-index: 1; }

.empty { padding: 16px 0; }
.empty p { margin: 0 0 6px; }
.linkbtn { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

.legend { color: var(--muted); font-size: 14px; margin: 8px 0 4px; }
.tablefoot { font-size: 14px; margin: 4px 0; color: var(--fg); }
.tablefoot p { margin: 4px 0; }
.tablefoot .muted { color: var(--muted); }
.pagefoot { margin-top: 28px; border-top: 1px solid var(--rule); padding-top: 8px; color: var(--muted); font-size: 13px; }

/* panel lateral */
#panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw);
  background: var(--bg); border-left: 1px solid var(--rule-strong); overflow-y: auto; z-index: 10;
  padding: 0 16px 24px;
}
#panel[hidden] { display: none; }
#panel .phead { position: sticky; top: 0; background: var(--bg); display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; padding: 12px 0 8px; border-bottom: 1px solid var(--rule); }
#panel h2 { font-size: 18px; margin: 0; font-weight: 600; }
#panel .phead .sub { color: var(--muted); font-size: 14px; margin-top: 2px; }
#panel .close { font: inherit; font-size: 14px; color: var(--accent); background: none; border: 1px solid var(--rule-strong); padding: 3px 10px; cursor: pointer; }
#panel h3 { font-size: 15px; font-weight: 600; margin: 18px 0 6px; border-bottom: 1px solid var(--rule); padding-bottom: 3px; }
#panel p { margin: 4px 0; }
#panel dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 4px 0; font-size: 14px; }
#panel dt { color: var(--muted); }
#panel dd { margin: 0; overflow-wrap: anywhere; }
#panel .notes { margin: 6px 0 0; padding-left: 18px; font-size: 14px; }
#panel .notes li { margin: 2px 0; }
#panel .serieswrap { max-height: 280px; overflow: auto; border-bottom: 1px solid var(--rule); }
#panel table.data { font-size: 14px; }
#panel table.data thead th { position: sticky; top: 0; padding: 5px 8px; }
#panel table.data td.cur { font-weight: 700; }
#panel table.data td.empty-cell { color: var(--muted); }
#panel .chart { margin: 10px 0 4px; }
#panel .chart svg { display: block; width: 100%; height: auto; }
#panel .chart text { fill: var(--muted); font-size: 11px; font-family: inherit; }
#panel .chart .axis { stroke: var(--rule-strong); stroke-width: 1; }
#panel .keys { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--fg); margin: 2px 0; }
#panel .keys .sw { display: inline-block; width: 16px; height: 2px; vertical-align: middle; margin-right: 5px; }
#panel code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

@media (max-width: 640px) {
  .page { padding: 12px 16px 32px; }
  .controls { flex-direction: column; align-items: stretch; }
  .ctl, .ctl.wide { flex: 1 1 auto; width: 100%; }
  .ctl.wide .pair { flex-direction: column; }
  .ctl.wide .pair input { flex: 1 1 auto; }
  .ctl .lbl { display: none; }
  input[type="search"], select { width: 100%; }
  #panel { width: 100vw; border-left: 0; }
}
@media (forced-colors: active) {
  td.val .bar { display: none; }
}