/* DGN GROUP · hoja de estilos común de los tableros (mobile-first). Se carga después del <style> de cada página y lo pisa. */
@font-face { font-family: "Inter DGN"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-opsz-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter DGN"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-opsz-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --texto-cuerpo:0.9375rem; --texto-apoyo:0.875rem; --texto-meta:0.7812rem;
  --titulo-seccion:1.4rem; --titulo-tarjeta:1.2rem;
  --espacio-bloque:1.5rem; --espacio-interior:1rem;
  --font: "Inter DGN", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #f8fbf9; --card: #ffffff; --card-2: #f0f5f2;
  --fg: #121d1d; --muted: #546061; --line: #d9e0de;
  --marca: #007e4b; --marca-fg: #fcfcfc; --marca-suave: #d9f7e4;
  --btn-bg: var(--fg); --btn-fg: var(--bg);
  --azul: #0267c7; --verde: #05893e; --rojo: #cc272e;
  --violeta: #864ad2; --naranja: #d07600; --gris: #6d7277; --cian: #008b9e;
  --radio: 0.875rem; --radio-s: 0.5625rem;
  --sombra: 0 1px 2px oklch(20% 0.02 200 / .06), 0 0.25rem 1rem -0.375rem oklch(20% 0.02 200 / .10);
  --foco: 0 0 0 3px oklch(60% 0.14 158 / .45);
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #091012; --card: #11191b; --card-2: #182124;
  --fg: #e7eced; --muted: #9ca7a9; --line: #263033;
  --marca: #40c786; --marca-fg: #0a140f; --marca-suave: #153524;
  --azul: #67b0f9; --verde: #58cd78; --rojo: #f97676;
  --violeta: #bc98f9; --naranja: #f3b94c; --gris: #9a9fa5; --cian: #58d1e5;
  --sombra: 0 1px 2px oklch(0% 0 0 / .3), 0 0.5rem 1.5rem -0.625rem oklch(0% 0 0 / .5);
  color-scheme: dark;
}

/* Reglas heredadas de los bloques <style> de cada página, movidas aquí; cada una conserva su alcance (:where no suma especificidad). */
[data-theme="dark"] { --btn-bg:#e6edf3; --btn-fg:#0d1117; }
.tema { cursor:pointer; }
:where(body.pagina-construccion, body.pagina-oportunidades) h3 { margin:1.375rem 0 0.5rem; font-size:1rem; }
:where(body.administracion) h3 { margin:1.125rem 0 0.5rem; font-size:0.9375rem; }
.meta { color:var(--muted); }
.btn { cursor:pointer; }
:where(body.pagina-construccion, body.pagina-costos, body.pagina-oportunidades) .btn:disabled { opacity:.6; cursor:wait; }
:where(body.pagina-construccion, body.pagina-costos, body.pagina-oportunidades) .stats { margin-bottom:1.25rem; }
:where(body.pagina-construccion, body.pagina-costos, body.pagina-oportunidades) .stat .lbl { color:var(--muted); }
:where(body.pagina-construccion, body.pagina-oportunidades) .stat .lbl { min-height:2.125rem; }
:where(body.pagina-construccion, body.pagina-costos, body.pagina-oportunidades) .stat .cap { color:var(--muted); font-size:0.75rem; }
:where(body.pagina-construccion, body.pagina-oportunidades) .stat .desc { color:var(--muted); font-size:0.75rem; margin-top:0.375rem; border-top:1px solid var(--line); padding-top:0.375rem; }
:where(body.pagina-construccion, body.pagina-costos, body.pagina-oportunidades) .tabs { display:flex; }
:where(body.pagina-construccion, body.pagina-costos, body.pagina-oportunidades) .tab { cursor:pointer; }
:where(body.pagina-construccion, body.pagina-costos, body.pagina-oportunidades) .tab.on { border-bottom-color:var(--fg); font-weight:600; }
:where(body.pagina-construccion, body.pagina-costos, body.pagina-oportunidades) .panel { display:none; }
:where(body.pagina-construccion, body.pagina-costos, body.pagina-oportunidades) .panel.on { display:block; }
:where(body.pagina-construccion, body.pagina-costos, body.pagina-oportunidades) p.nota { margin:0 0 0.75rem; }
:where(body.pagina-construccion, body.pagina-oportunidades) .claves { margin:0 0 1rem; padding-left:1.25rem; line-height:1.6; font-size:0.875rem; }
td { text-align:left; }
th { color:var(--muted); }
:where(body.administracion, body.pagina-construccion, body.pagina-oportunidades) td.num { text-align:right; }
:where(body.administracion, body.pagina-construccion, body.pagina-oportunidades) th.num { text-align:right; }
:where(body.administracion, body.pagina-construccion, body.pagina-oportunidades) .pos { color:var(--verde); }
:where(body.administracion, body.pagina-construccion, body.pagina-oportunidades) .neg { color:var(--rojo); }
pre { padding:0.75rem; overflow:auto; font-size:0.75rem; }
:where(body.administracion) pre { white-space:pre-wrap; }
:where(body.pagina-construccion, body.pagina-costos, body.pagina-oportunidades) .pie { color:var(--muted); font-size:0.75rem; margin-top:1.5rem; line-height:1.5; }
:where(body.pagina-construccion, body.pagina-oportunidades) .tag { display:inline-block; font-size:0.6875rem; margin-left:0.375rem; }
:where(body.pagina-oportunidades) .idea h4 { margin:0.25rem 0 0.5rem; font-size:0.9375rem; }
:where(body.pagina-oportunidades) .idea .dato { font-size:0.8125rem; line-height:1.5; margin:0 0 0.5rem; }
:where(body.pagina-oportunidades) .idea .lect { font-size:0.8125rem; color:var(--muted); line-height:1.5; margin:0 0 0.5rem; }
:where(body.pagina-oportunidades) .idea .cat { font-size:0.6875rem; text-transform:uppercase; letter-spacing:.04em; color:var(--azul); }
:where(body.pagina-oportunidades) .filtros { display:flex; flex-wrap:wrap; margin-bottom:0.75rem; }
:where(body.pagina-oportunidades) select { background:var(--card); color:var(--fg); border:1px solid var(--line); }
:where(body.pagina-oportunidades) input[type=search] { background:var(--card); color:var(--fg); border:1px solid var(--line); }
:where(body.pagina-oportunidades) th.ord { cursor:pointer; user-select:none; }
:where(body.pagina-oportunidades) th.ord:hover { color:var(--fg); }
:where(body.pagina-oportunidades) .scroll { overflow:auto; }
:where(body.pagina-oportunidades) .chips span { display:inline-block; font-size:0.75rem; border:1px solid var(--line); padding:2px 0.5rem; margin:0 0.25rem 0.25rem 0; cursor:pointer; }
:where(body.pagina-oportunidades) .idea .top { display:flex; justify-content:space-between; align-items:center; gap:0.5rem; }
:where(body.pagina-oportunidades) .kpi { display:flex; align-items:baseline; gap:0.625rem; margin:2px 0 0.5rem; }
:where(body.pagina-oportunidades) .kpi .n { line-height:1.1; white-space:nowrap; }
:where(body.pagina-oportunidades) .kpi .l { font-size:0.75rem; color:var(--muted); line-height:1.35; }
:where(body.pagina-oportunidades) .idea { border-left:0.25rem solid var(--line); }
:where(body.pagina-oportunidades) .idea.b-neu { border-left-color:var(--azul); }
:where(body.pagina-oportunidades) .badge { font-size:0.6875rem; color:var(--muted); border:1px solid var(--line); padding:1px 0.4375rem; white-space:nowrap; }
:where(body.pagina-oportunidades) details { margin:0 0 0.5rem; }
:where(body.pagina-oportunidades) summary { cursor:pointer; font-size:0.8125rem; color:var(--azul); margin-bottom:0.375rem; }
:where(body.pagina-oportunidades) .linkbtn { background:none; border:0; color:var(--azul); cursor:pointer; font-size:0.75rem; padding:0; }
:where(body.pagina-oportunidades) .fcat button { background:var(--card); color:var(--fg); border:1px solid var(--line); padding:0.25rem 0.6875rem; font-size:0.75rem; cursor:pointer; }
:where(body.pagina-oportunidades) .mini { margin-bottom:1rem; }
:where(body.pagina-oportunidades) .mini .val { font-size:1.375rem; font-weight:600; }
:where(body.pagina-oportunidades) .mini .lbl { color:var(--muted); }
:where(body.pagina-costos, body.pagina-oportunidades) .seg button { font-size:0.8125rem; cursor:pointer; }
:where(body.pagina-oportunidades) .seg button.on { font-weight:600; border-color:var(--fg); }
:where(body.pagina-oportunidades) td.desc { max-width:28.75rem; }
:where(body.pagina-oportunidades) #p-inflacion .filtros { align-items:center; margin-bottom:1rem; }
:where(body.pagina-oportunidades) #p-rama .filtros { align-items:center; margin-bottom:1rem; }
:where(body.pagina-oportunidades) #p-inflacion .filtros > * { flex:0 0 auto; }
:where(body.pagina-oportunidades) #p-rama .filtros > * { flex:0 0 auto; }
:where(body.pagina-oportunidades) #p-inflacion .filtros select { min-width:15rem; max-width:100%; }
:where(body.pagina-oportunidades) #p-rama .filtros select { min-width:15rem; max-width:100%; }
:where(body.pagina-costos) .seg { margin-bottom:0.625rem; }
:where(body.administracion) h2 { font-size:1.0625rem; margin:1.75rem 0 0.625rem; }
:where(body.administracion) .card { margin-bottom:0.875rem; overflow-x:auto; }
:where(body.administracion) .warn { color:var(--naranja); }
:where(body.administracion) .muted { color:var(--muted); }
:where(body.administracion) .err { color:var(--rojo); font-size:0.75rem; }
:where(body.administracion) details summary { cursor:pointer; color:var(--azul); font-size:0.875rem; }

/* Base */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { font-family: var(--font); font-size: var(--texto-cuerpo); line-height: 1.55; background: var(--bg); color: var(--fg);
  font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.wrap { max-width: 73.75rem; padding: 1.25rem 1rem 2.5rem; }
h1 { font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem); line-height: 1.12; letter-spacing: -0.015em; font-weight: 700; margin: 0.375rem 0 0.5rem; text-wrap: balance; }
h2 { letter-spacing: -0.015em; font-weight: 700; text-wrap: balance; }
h3, h4 { letter-spacing: -0.01em; font-weight: 650; text-wrap: balance; }
.sub { color:var(--muted); font-size: clamp(.95rem, .9rem + .3vw, 1.08rem); line-height: 1.5; max-width: 70ch; margin: 0 0 1.125rem; }
p.nota { max-width:80ch; font-size:var(--texto-apoyo); line-height:1.55; color:var(--muted); }
.panel > h2 { font-size:var(--titulo-seccion); }
.panel > h3 { font-size:var(--titulo-tarjeta); margin:var(--espacio-bloque) 0 0.75rem; }
.panel > h2:first-child, .panel > h3:first-child { margin-top:0; }
a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
td.num, th.num, #pie-dgn-reloj { font-variant-numeric: tabular-nums; }
::selection { background: var(--marca-suave); color: var(--fg); }

/* Barra superior: meta + acciones */
.bar { gap: 0.625rem 0.875rem; margin-bottom: 1.125rem; align-items: flex-start; }
.bar > div:last-child { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.bar form { display: inline-flex !important; }
.meta { font-size: 0.8125rem; line-height: 1.7; }
.btn, .tema, .btn.sec { font: 600 0.8438rem/1 var(--font); min-height: 2.5rem; padding: 0 1rem; border-radius: 999rem; display: inline-flex; align-items: center; gap: 0.375rem;
  transition: background-color .15s, border-color .15s, transform .1s, box-shadow .15s; margin: 0; }
.btn { background: var(--marca); color: var(--marca-fg); border: 1px solid transparent; text-decoration:none; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn.sec, .tema { background: var(--card); color: var(--fg); border: 1px solid var(--line); }
.btn.sec:hover, .tema:hover { border-color: var(--muted); }
button, input, select, textarea { font-family: inherit; }

/* Tarjetas */
.card { border-radius: var(--radio); border-color: var(--line); box-shadow: var(--sombra); padding: 1rem; }
.card:has(> table), .card:has(> .scroll), .card:has(> div > table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stats, .mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.stat .lbl, .mini .lbl { font-size: 0.7812rem; line-height: 1.35; }
.stat .val { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.1rem); font-weight: 750; letter-spacing: -0.02em; line-height: 1.1; margin: 0.5rem 0 0.25rem; }
.kpi .n { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem); font-weight: 750; letter-spacing: -0.02em; }
.ideas, .grid2 { grid-template-columns: 1fr; gap: 0.75rem; }
.idea { border-left-width: 0.25rem; }

/* Pestañas: fila deslizable, fija arriba */
.tabs { position: sticky; top: 0; z-index: 20; flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  gap: 0.375rem; padding: 0.625rem 1rem; margin: 0 -1rem 1rem; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 85%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(0.75rem); backdrop-filter: saturate(1.4) blur(0.75rem);
  mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; white-space: nowrap; font: 600 0.8438rem/1 var(--font); padding: 0.625rem 0.875rem; border: 1px solid var(--line) !important; border-radius: 999rem; color: var(--muted); background: var(--card); transition: background-color .15s, color .15s; }
.tab:hover { color: var(--fg); }
.tab.on { color: var(--marca-fg); background: var(--fg); border-color: var(--fg) !important; }
[data-theme="dark"] .tab.on { background: var(--marca); border-color: var(--marca) !important; }

/* Selectores segmentados y filtros */
.seg { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; border-radius: 999rem; border: 1px solid var(--line); background: var(--card-2); overflow: visible; max-width: 100%; }
.seg button { border: 0 !important; border-radius: 999rem; padding: 0.4375rem 0.8125rem; font-weight: 600; color: var(--muted); background: transparent; }
.seg button.on { background: var(--card) !important; color: var(--fg) !important; box-shadow: var(--sombra); }
.fcat button, .chips span { border-radius: 999rem; }
.fcat button.on { background: var(--marca); border-color: var(--marca); color: var(--marca-fg); }
select, input[type=search], input[type=password], input[type=text] { min-height: 2.5rem; border-radius: var(--radio-s); padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.filtros { gap: 0.5rem; }
.filtros > * { flex: 1 1 10rem; }

/* Tablas */
table { font-size: 0.875rem; }
th, th.num { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 650; white-space: normal; line-height: 1.35; }
th, td { padding: 0.625rem 0.75rem; border-bottom-color: var(--line); vertical-align: top; }
td.num { white-space: nowrap; }
tbody tr:hover td { background: color-mix(in srgb, var(--card-2) 70%, transparent); }
thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }
.scroll { scrollbar-gutter: stable; }

/* Etiquetas, detalles, código */
.tag { border-radius: 999rem; padding: 2px 0.5rem; background: var(--marca-suave); color: var(--fg); font-weight: 600; }
[data-theme="dark"] .tag { background: var(--marca-suave); color: var(--fg); }
.badge { border-radius: 999rem; }
summary { font-weight:600; }
details > summary { font-size:0.8125rem; color:var(--azul); line-height:1.55; cursor:pointer; margin-bottom:0; }
.lectura details { margin-bottom:0; }
pre { border-radius: var(--radio-s); background: #0c1315; color: #e0e6e6; border: 1px solid var(--line); }

/* Gráficos */
canvas { max-width: 100%; }

/* Pie de página: la firma puede personalizarse por dominio. */

  .pie-dgn { border-top: 1px solid var(--line); margin-top: 1rem; padding: 1.125rem 1.25rem 1.75rem; color: var(--muted); font-size: 0.8125rem; line-height: 1.6; }
  .pie-dgn-in { max-width: 68.75rem; margin: 0 auto; display: flex; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
  .pie-dgn-firma { color: var(--fg); font-weight: 600; font-size: 0.875rem; }
  .pie-dgn-nota { font-size: 0.75rem; margin-top: 0.25rem; max-width: 38.75rem; }
  .pie-dgn-der { text-align: right; }
  #pie-dgn-reloj { color: var(--fg); font-variant-numeric: tabular-nums; }
  .pie-dgn a { color: var(--azul); }
  @media (max-width: 43.75em) { .pie-dgn-der { text-align: left; } }

.pie-dgn { background: var(--card-2); }

/* Scroll fino y tematizado */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
::-webkit-scrollbar { width: 0.625rem; height: 0.625rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 999rem; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--muted) 65%, transparent); }

/* Teclado y accesibilidad */
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 0.375rem; }
.btn:focus-visible, .tab:focus-visible, .tema:focus-visible, .seg button:focus-visible { border-radius: 999rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Tablet */
@media (min-width: 40em) {
  .wrap { padding: 1.75rem 1.5rem 3.5rem; }
  .tabs { margin: 0 -1.5rem 1.125rem; padding: 0.625rem 1.5rem; }
  .card { padding: 1.125rem 1.25rem; }
}
/* Escritorio */
@media (min-width: 56.25em) {
  .wrap { padding: 2.5rem 2rem 4.5rem; }
  .tabs { margin: 0 0 1.25rem; padding: 0.625rem 0; mask-image: none; flex-wrap: wrap !important; }
  .stats, .mini { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.875rem; }
  .ideas, .grid2 { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .card { padding: 1.25rem 1.375rem; }
  .card.stat:hover, .idea:hover { border-color: color-mix(in srgb, var(--marca) 45%, var(--line)); }
}
/* Celular: tablas con menos aire, botones a ancho completo */
@media (max-width: 39.9375em) {
  body { font-size: 0.9375rem; }
  th, td { padding: 0.5625rem 0.5rem; font-size: 0.8438rem; }
  .bar > div:last-child { width: 100%; }
  .bar > div:last-child > * { flex: 1 1 auto; justify-content: center; }
  .bar > div:last-child > form { flex-basis: 100%; gap: 0.5rem; }
  .bar form > .btn, .bar form > button { flex: 1 1 auto; justify-content: center; }
  .bar form input { flex: 0 1 40%; min-width: 0; }
  .kpi { flex-wrap: wrap; }
  .pie-dgn-in { flex-direction: column; }
}

/* Botones de ícono (tema, compartir, descargar) */
.ico { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 999rem; border: 1px solid var(--line);
  background: var(--card); color: var(--fg); cursor: pointer; flex: 0 0 auto !important; transition: border-color .15s, background-color .15s; }
.ico:hover { border-color: var(--muted); }
.ico svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico .i-luna { fill: currentColor; stroke: none; }
[data-theme="dark"] .ico .i-luna, :root:not([data-theme="dark"]) .ico .i-sol { display: none; }
.ico-s { width: 2rem; height: 2rem; } .ico-s svg { width: 0.9375rem; height: 0.9375rem; }
.acciones { display: flex; gap: 0.5rem; align-items: center; }
@media (max-width: 39.9375em) { .bar > div:last-child > .ico { flex: 0 0 2.5rem !important; } }

/* Herramientas de cada gráfico: PNG y enlace */
.con-herr { position: relative; }
.herr { position: absolute; top: 0.625rem; right: 0.625rem; display: flex; gap: 0.375rem; z-index: 2; opacity: .55; transition: opacity .15s; }
.con-herr:hover .herr, .herr:focus-within { opacity: 1; }
.idea.con-herr .herr { position:static; justify-content:flex-end; margin:0.5rem 0; }
.resaltar { animation: resaltar 2.4s ease-out; }
@keyframes resaltar { 0%, 40% { box-shadow: 0 0 0 3px var(--marca), var(--sombra); } 100% { box-shadow: var(--sombra); } }
#dgn-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1.25rem); background: var(--fg); color: var(--bg); padding: 0.625rem 1rem; border-radius: 999rem;
  font: 600 0.875rem/1 var(--font); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; }
#dgn-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Qué cambió */
.cambios { margin-bottom: 1.125rem; }
.cambios-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-bottom: 0.75rem; }
.cambios-top h2 { font-size: 1.1rem; margin: 0; }
.cambios-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.125rem), 1fr)); gap: 0.625rem; }
.cambio { background: var(--card-2); border-radius: var(--radio-s); padding: 0.75rem 0.875rem; }
.cambio-t { font-size: 0.7812rem; color: var(--muted); line-height: 1.35; }
.cambio-v { font-size: 1.45rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 0.25rem 0 2px; }
.cambio-d { font-size: 0.7812rem; color: var(--muted); line-height: 1.4; }
.t-pos { color: var(--verde); } .t-neg { color: var(--rojo); } .t-neu { color: var(--azul); }
.nuevo { display: inline-block; font-size: 0.6562rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 0.375rem; border-radius: 999rem; background: var(--marca-suave); color: var(--fg); }
.small { font-size:var(--texto-meta); color:var(--muted); }

/* Portada */
.hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.hero .kicker, .portal .kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--marca); }
.portales { display: grid; grid-template-columns: 1fr; gap: 0.875rem; margin: 0.5rem 0 1.5rem; }
.portal { display: flex; flex-direction: column; gap: 0.625rem; text-decoration: none; color: var(--fg); transition: border-color .15s, transform .15s; }
.portal:hover { border-color: color-mix(in srgb, var(--marca) 55%, var(--line)); transform: translateY(-2px); }
.portal h2 { font-size: 1.25rem; line-height: 1.2; margin: 0; }
.portal p { margin: 0; color: var(--muted); font-size: 0.875rem; }
.portal .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.25rem; }
.portal .kpis b { display: block; font-size: 1.35rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.portal .kpis span { font-size: 0.75rem; color: var(--muted); line-height: 1.3; display: block; }
.portal .ir { margin-top: auto; font-weight: 650; color: var(--marca); font-size: 0.875rem; }
.portal .fecha { font-size: 0.75rem; color: var(--muted); }
.lista-simple { margin: 0; padding-left: 1.125rem; color: var(--muted); font-size: 0.875rem; line-height: 1.6; }
select { max-width: 100%; }
#selRama { width: 100%; }
.hero { flex-wrap: wrap; }
@media (max-width: 39.9375em) { .hero > div:first-child { flex: 1 1 100%; } .hero .acciones { order: -1; width: 100%; justify-content: flex-end; margin-bottom: -2.5rem; } }
.card[id], section[id] { scroll-margin-top: 7.5rem; }
@media (max-width: 39.9375em) { .hero .kicker { padding-right: 6.25rem; } }

/* Dirección del dato, sin juicio de valor. */
:root { --sube: #125db2; --baja: #986000; }
[data-theme="dark"] { --sube: #80bdff; --baja: #edbd68; }
body:not(.administracion) .t-pos, body:not(.administracion) .pos { color: var(--sube); }
body:not(.administracion) .t-neg, body:not(.administracion) .neg { color: var(--baja); }
.idea.b-pos { border-left-color: var(--sube); }
.idea.b-neg { border-left-color: var(--baja); }
.hero-links { display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; margin:1.25rem 0 1.5rem; font-size:0.8125rem; }
.hero > div:first-child { flex:1 1 40rem; }
.section-top { display:flex; align-items:baseline; justify-content:space-between; gap:0.75rem; flex-wrap:wrap; margin-bottom:1.125rem; }
.section-top h2 { font-size:var(--titulo-seccion); margin:0.25rem 0 0; }
.kicker { font-size:0.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--marca); }
.lecturas { margin:2.375rem 0; }
.lecturas-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.lectura { display:flex; flex-direction:column; }
.lectura h3 { margin:0.75rem 0 1rem; font-size:var(--titulo-tarjeta); line-height:1.3; }
.lectura p { font-size:0.875rem; margin:0.5rem 0; }
.lectura p.small { font-size:0.75rem; }
.lectura-valor { font-size:2.6rem; font-weight:750; letter-spacing:-.04em; line-height:1.2; font-variant-numeric:tabular-nums; }
.lectura-valor small { font-size:1.2rem; color:var(--muted); font-weight:500; }
.lectura-par { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.lectura-par b { display:block; font-size:2rem; letter-spacing:-.04em; }
.lectura-par span { display:block; color:var(--muted); font-size:0.75rem; line-height:1.4; }
.lectura .limite { border-top:1px solid var(--line); padding-top:0.75rem; color:var(--muted); }
.lectura > a { margin-top:auto; padding-top:1rem; font-size:0.8125rem; font-weight:650; }
.cambio-base { font-size:0.6875rem; font-weight:650; color:var(--muted); margin-top:0.625rem; }
.cambio-v { font-size:1.7rem; }
.cambio-d { margin-top:0.375rem; }
.explorar { margin:1.75rem 0; }
.temas-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.5rem; }
.temas-grid a { display:flex; justify-content:space-between; align-items:center; gap:0.75rem; padding:0.75rem; color:var(--fg); border:1px solid var(--line); border-radius:0.5rem; text-decoration:none; font-size:0.8125rem; }
.temas-grid a:hover { border-color:var(--marca); background:var(--card-2); }
.temas-grid b { color:var(--muted); font-weight:500; }
.calidad-resumen { display:flex; justify-content:flex-start; flex-wrap:wrap; gap:0.25rem 1rem; padding:0; margin:2px 0 1rem; border:0; font-size:0.75rem; color:var(--muted); }
.leyenda-colores { font-size:0.75rem; color:var(--muted); margin:0 0 0.75rem; }
.fuentes-idea { padding-left:1.125rem; font-size:0.75rem; color:var(--muted); }
.lectura-metricas { display:grid; gap:0.875rem; margin-bottom:0.625rem; }
.lectura-metricas > div { padding-bottom:0.75rem; border-bottom:1px solid var(--line); }
.lectura-metricas b { display:block; font-size:2rem; line-height:1.3; letter-spacing:-.03em; }
.lectura-metricas span { display:block; }
.lectura details { margin-top:auto; }
.lectura details + a { margin-top:0; }
.lecturas-grid.compacta { grid-template-columns:repeat(2,minmax(0,1fr)); }
.idea-contexto { font-size:0.75rem; color:var(--muted); padding:0.5rem 0; border-top:1px solid var(--line); }
.leyenda-series { list-style:none; padding:0; margin:0.625rem 0; display:grid; gap:0.3125rem; }
.leyenda-series li { font-size:0.6875rem; color:var(--muted); display:flex; gap:0.4375rem; align-items:baseline; }
.leyenda-series i { width:0.625rem; height:0.625rem; display:inline-block; flex-shrink:0; }
.lecturas .section-top p { margin:0; }
.chart-range { display:flex; gap:0.5rem; align-items:center; margin:0.75rem 0; font-size:0.75rem; }
.indicadores-resumen { display:flex; gap:0.75rem; flex-wrap:wrap; color:var(--muted); font-size:0.75rem; margin:0.75rem 0 1.25rem; }
.aviso-cobertura { border-left:3px solid var(--baja); padding:0.75rem 1rem; margin:1rem 0; background:var(--card-2); font-size:0.8125rem; }
.salarios-tabla { overflow-x:auto; }


/* Tablas extensas: el texto tiene espacio propio y el scroll queda dentro de la tabla. */
.tabla-scroll { max-width:100%; padding:0; overscroll-behavior-x:contain; }
.tabla-scroll:focus-visible { outline:2px solid var(--marca); outline-offset:3px; }
#tRank { table-layout:fixed; min-width:72.5rem; width:100%; }
#tRank .col-tema { width:8.75rem; }
#tRank .col-serie { width:16.25rem; }
#tRank .col-tipo { width:6.25rem; }
#tRank .col-fecha { width:6.25rem; }
#tRank .col-valor { width:7rem; }
#tRank th, #tRank td { padding:0.75rem; }
#tRank th { vertical-align:bottom; }
#tRank td:nth-child(2) { font-weight:550; overflow-wrap:break-word; }
#tRank td:nth-child(1), #tRank td:nth-child(3) { color:var(--muted); font-size:0.8125rem; }
#tRank td:nth-child(4) { white-space:nowrap; font-variant-numeric:tabular-nums; }
#tRank.tema-filtrado { min-width:63.75rem; }
#tRank.tema-filtrado .col-tema, #tRank.tema-filtrado tr > :first-child { display:none; }
#tRank th.ord[aria-sort="ascending"]::after { content:" ↑"; color:var(--azul); }
#tRank th.ord[aria-sort="descending"]::after { content:" ↓"; color:var(--azul); }
#tX { min-width:56.25rem; }
#tX th:nth-child(2) { width:34%; }
#tPolos { min-width:62.5rem; }
#tPolos th:nth-child(3) { width:25%; }
#tExpo { min-width:45rem; }
.tabla-ayuda { margin:0.5rem 0 0.75rem; }


/* Lectura progresiva y estructura común. */
* { box-sizing:border-box; }
body { margin:0; }
.wrap { margin:0 auto; }
[hidden] { display:none !important; }
.card { background:var(--card); border:1px solid var(--line); }
table { width:100%; border-collapse:collapse; }
th { text-align:left; }
th, td { border-bottom:1px solid var(--line); }
.lectura-metricas { gap:0.5rem; }
.lectura-metricas > div { padding-bottom:0.5rem; }
.lectura-metricas > div:not(:first-child) b { font-size:1.45rem; }
.lectura .limite { font-size:0.75rem; margin:0 0 0.875rem; padding-top:0; border:0; }
.lectura details { font-size:0.8125rem; }
.lectura details[open] { margin-top:0; }
.lecturas-grid { align-items:start; }
.mas-lecturas { margin-top:1.125rem; }
.mas-lecturas > summary { cursor:pointer; color:var(--azul); padding:0.75rem 0; }
.mas-lecturas[open] > summary { margin-bottom:0.75rem; }
.navegacion-datos { position:sticky; top:0; z-index:20; background:var(--bg); padding:0.625rem 0; margin:1.25rem 0; border-bottom:1px solid var(--line); }
.nav-principal, .subnav { display:flex; gap:0.375rem; overflow-x:auto; padding:2px 0; }
.subnav { margin-top:0.375rem; }
.grupo { background:transparent; border:1px solid var(--line); border-radius:0.5rem; color:var(--muted); padding:0.625rem 0.875rem; font-weight:650; white-space:nowrap; cursor:pointer; }
.grupo.on { color:var(--marca-fg); background:var(--marca); border-color:var(--marca); }
.subnav .tab { padding:0.4375rem 0.75rem; font-size:0.75rem; }
.ranking-opciones { display:flex; flex-wrap:wrap; align-items:baseline; gap:0.625rem 1.5rem; margin:1rem 0; font-size:0.8125rem; }
.ranking-opciones details { flex:1 1 16.25rem; }
.ranking-opciones details p { max-width:80ch; }
#tRank { min-width:78.125rem; }
#tRank.tema-filtrado { min-width:69.375rem; }
#tRank.vista-esencial { min-width:55.625rem; }
#tRank.vista-esencial.tema-filtrado { min-width:46.875rem; }
#tRank.vista-esencial .historica { display:none; }
#tRank .col-serie { width:15rem; }
#tRank .col-tema { width:7.5rem; }
#tRank .col-accion { width:6.25rem; }
#tRank thead th { top:var(--cabecera-top, 0px); }
#p-ranking .tabla-scroll { max-height: 72svh; }
.comparar-fila { border:1px solid var(--line); border-radius:0.375rem; background:var(--card); color:var(--azul); font-size:0.75rem; padding:0.375rem 0.5rem; cursor:pointer; }
.comparar-fila:hover { border-color:var(--azul); }
.pagina-calidad .hero { margin-bottom:1.75rem; }
.estado-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.estado-tarjeta { display:flex; flex-direction:column; gap:0.5rem; text-decoration:none; color:var(--fg); }
.estado-tarjeta h2 { font-size:1.1rem; margin:0 0 0.5rem; }
.estado-tarjeta strong { font-size:0.875rem; }
.estado-tarjeta span { font-size:0.75rem; color:var(--muted); }
.estado-tarjeta span:last-child { color:var(--azul); margin-top:auto; padding-top:0.625rem; }
.pagina-calidad .nota, .metodo-detalle p, .calidad-detalle > p { max-width:75ch; }
.pagina-calidad summary { cursor:pointer; }
.metodo-detalle > summary { font-size:1.1rem; }
.calidad-detalle[open] > summary { margin-bottom:1.25rem; }
.pagina-calidad .scroll { overflow:auto; margin-top:1rem; }
.pagina-calidad table { min-width:37.5rem; }

/* Primer pantallazo de escritorio: datos visibles sin reducir su tipografía. */
details.cambios:not([open]) { padding:0.625rem 1.125rem; box-shadow:none; }
details.cambios > summary { cursor:pointer; }
details.cambios[open] > summary { margin-bottom:1rem; }
#ranking-count { margin:0.5rem 0; }
@media (min-width:56.25em) {
  
  .sub { margin-bottom:0.75rem; }
  .bar { align-items:center; margin-bottom:0.75rem; }
  .calidad-resumen { padding:0; margin:2px 0 0.75rem; }
  .cambios { margin-bottom:0.75rem; }
  .indicadores-resumen { margin:0.625rem 0 0.75rem; gap:0.375rem 0.75rem; }
  .navegacion-datos { padding:0.375rem 0; margin:0.75rem 0; }
  .grupo { padding:0.5625rem 0.875rem; }
  .subnav { margin-top:3px; }
  .ranking-opciones { margin:0.625rem 0; }
  .hero-links { margin:0.875rem 0 1rem; }
  .lecturas { margin:var(--espacio-bloque) 0; }
  .section-top { margin-bottom:0.875rem; }
  .lecturas-grid { align-items:stretch; }
  .lectura > a { padding-top:0.75rem; }
  .mas-lecturas { margin-top:0.5rem; }
  .stats { margin-bottom:0.75rem; }
  .stats .card { padding:1rem 1.25rem; }
  .stats .stat .lbl { min-height:2.7em; }
  .tabs { padding:0.5rem 0; margin-bottom:0.75rem; }
}

/* Recursos de conteo: tono neutro, escala explícita y cifra siempre disponible. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.barra-conteo { display:block; width:100%; height:0.25rem; margin-top:0.375rem; border-radius:2px; background:var(--line); overflow:hidden; }
.barra-conteo > i { display:block; height:100%; background:var(--muted); border-radius:inherit; }
.temas-grid a { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0.375rem 0.75rem; }
.temas-grid .barra-conteo { grid-column:1 / -1; margin-top:0; height:3px; }
.leyenda-grafica { margin:0 0 0.75rem; max-width:80ch; }
.cobertura-grafica { margin:var(--espacio-bloque) 0; max-width:42.5rem; }
.cobertura-grafica figcaption { font-size:var(--texto-apoyo); font-weight:650; margin-bottom:0.75rem; }
.cobertura-fila { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0.25rem 0.75rem; margin:var(--espacio-interior) 0; font-size:var(--texto-apoyo); }
.cobertura-fila .barra-conteo, .cobertura-fila small { grid-column:1 / -1; }
.cobertura-fila small { font-size:var(--texto-meta); color:var(--muted); }
.cobertura-fila strong { font-variant-numeric:tabular-nums; }
.recorrido-publicacion { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--espacio-interior); padding:0; margin:var(--espacio-bloque) 0; list-style:none; counter-reset:paso; }
.recorrido-publicacion li { position:relative; padding:0.75rem; border-top:2px solid var(--line); background:var(--card-2); font-size:var(--texto-apoyo); }
.recorrido-publicacion li::before { counter-increment:paso; content:counter(paso, decimal-leading-zero); display:block; color:var(--muted); font-size:var(--texto-meta); margin-bottom:0.5rem; font-variant-numeric:tabular-nums; }
.recorrido-publicacion b, .recorrido-publicacion span { display:block; }
.recorrido-publicacion span { color:var(--muted); font-size:var(--texto-meta); margin-top:0.25rem; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .portal, .btn, .tab { transition:none; } }
/* Pantallas angostas: cada fila del ranking pasa a ser una tarjeta (sin desplazamiento horizontal ni vertical anidado); las cabeceras ordenables quedan como botones. */
@container (max-width: 64rem) {
  #p-ranking .tabla-scroll { max-height:none; overflow:visible; background:none; border:0; box-shadow:none; padding:0; }
  #ranking-scroll-ayuda { display:none !important; }
  #tRank, #tRank.vista-esencial, #tRank.vista-esencial.tema-filtrado { display:block; min-width:0; }
  #tRank colgroup, #tRank th:not(.ord), #tRank.vista-esencial th.historica { display:none; }
  #tRank thead, #tRank thead tr { display:flex; flex-wrap:wrap; gap:0.375rem; margin-bottom:0.625rem; }
  #tRank thead tr { margin-bottom:0; }
  #tRank th { border:1px solid var(--line); border-radius:999rem; padding:0.375rem 0.75rem; background:var(--card); font-size:0.7812rem; white-space:nowrap; }
  #tRank th br { display:none; }
  #tRank tbody { display:block; }
  #tRank tbody tr { display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--radio); padding:0.75rem 0.875rem; margin-bottom:0.625rem; }
  #tRank tbody td { display:flex; justify-content:space-between; align-items:baseline; gap:0.75rem; border:0; padding:3px 0; text-align:right; }
  #tRank tbody td::before { content:attr(data-label); color:var(--muted); font-size:0.7812rem; text-align:left; flex:none; }
  #tRank tbody td:not([data-label])::before, #tRank tbody td:nth-child(1)::before, #tRank tbody td:nth-child(2)::before { display:none; }
  #tRank tbody td:nth-child(2) { order:-2; justify-content:flex-start; font-size:0.9375rem; font-weight:600; }
  #tRank tbody td:nth-child(1) { order:-1; justify-content:flex-start; color:var(--muted); font-size:0.7812rem; padding-bottom:0.375rem; }
  #tRank tbody td:last-child { justify-content:flex-start; padding-top:0.5rem; }
  #p-inflacion .grid2 { grid-template-columns:1fr; }
}
/* Calculadora de inflación: en teléfono cada rubro es un bloque con sus tres cifras. */
@container (max-width: 40rem) {
  #tInfl thead { display:none; }
  #tInfl, #tInfl tbody { display:block; }
  #tInfl tbody tr { display:block; padding:0.625rem 0; border-bottom:1px solid var(--line); }
  #tInfl td { display:flex; justify-content:space-between; align-items:center; gap:0.75rem; border:0; padding:3px 0.25rem; }
  #tInfl td:first-child { font-weight:600; }
  #tInfl td::before { content:attr(data-label); color:var(--muted); font-size:0.7812rem; }
  #tInfl td:not([data-label])::before { display:none; }
}
/* Portada y lecturas en ancho medio: las dos cifras de cada lectura van lado a lado y el texto de apoyo de la sección baja a su propia línea. */
@media (max-width:56.1875em) { .section-top > p { flex-basis:100%; } }
@media (min-width:35em) and (max-width:56.1875em) {
  .lectura-metricas { grid-template-columns:1fr 1fr; gap:1rem; }
  .lectura-metricas > div { border-bottom:0; padding-bottom:0; }
  .lectura-metricas > div:not(:first-child) b { font-size:2rem; }
  .lectura h3 { margin:0.5rem 0 0.875rem; }
}
/* Tablas con class="apilar": en teléfono cada fila es un bloque con sus rótulos (los rótulos los pone pie() desde la cabecera). */
@container (max-width: 45rem) {
  table.apilar, table.apilar tbody { display:block; }
  table.apilar thead { display:none; }
  table.apilar tbody tr { display:block; padding:0.625rem 0; border-bottom:1px solid var(--line); }
  table.apilar tbody tr:last-child { border-bottom:0; }
  table.apilar td { display:flex; justify-content:space-between; align-items:baseline; gap:0.75rem; border:0; padding:3px 0; text-align:right; }
  table.apilar td::before { content:attr(data-label); color:var(--muted); font-size:0.7812rem; text-align:left; flex:none; max-width:55%; }
  table.apilar td:first-child { justify-content:flex-start; text-align:left; font-weight:600; }
  table.apilar td:first-child::before, table.apilar td:not([data-label])::before { display:none; }
  .scroll:has(table.apilar) { max-height:none !important; overflow:visible !important; }
}
/* Inter con tamaño óptico (opsz 14–32): el navegador lo ajusta solo al tamaño de cada texto; las cifras grandes se alinean en columnas. */
body { font-optical-sizing: auto; }

/* ===== Capa fluida =====
   Sin píxeles de diseño ni alturas fijas: medidas en rem/%/svh, rejillas que se acomodan solas y consultas por contenedor
   (cada componente responde al espacio que tiene, no al tamaño de la pantalla). Sólo quedan en px los filetes de 1 a 3 px. */
:root { --pad-x: clamp(1rem, .5rem + 2.2vw, 2rem); --gap: clamp(.6rem, .4rem + .8vw, 1.1rem); }
.wrap { container-type: inline-size; container-name: pagina; padding-inline: var(--pad-x); padding-block: clamp(1.25rem, 1rem + 1.4vw, 2.5rem) clamp(1rem, .6rem + 1vw, 1.75rem); }
.card { padding: clamp(1rem, .8rem + .7vw, 1.4rem); }
.card.stat:hover, .idea:hover { border-color: color-mix(in srgb, var(--marca) 45%, var(--line)); }

/* Cabecera: la línea de metadatos ocupa lo que le sobra y los botones se quedan en su fila mientras entren */
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.bar > .meta { flex: 1 1 22rem; min-inline-size: 0; }
.bar > div:last-child { flex: 0 1 auto; }

/* Pestañas: una fila deslizable en espacios angostos y, con sitio, varias filas */
.tabs { margin-inline: calc(-1 * var(--pad-x)); padding-inline: var(--pad-x); }
@container pagina (min-width: 56rem) { .tabs { flex-wrap: wrap !important; margin-inline: 0; padding-inline: 0; mask-image: none; } }

/* Rejillas */
.stats, .mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
@container pagina (max-width: 52rem) { .stats, .mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container pagina (max-width: 24rem) { .stats, .mini { grid-template-columns: minmax(0, 1fr); } }
.ideas, .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--gap); }
.lecturas-grid, .lecturas-grid.compacta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@container pagina (max-width: 60rem) { .lecturas-grid, .lecturas-grid.compacta { grid-template-columns: minmax(0, 1fr); } }
.lectura { container-type: inline-size; }
@container (min-width: 30rem) { .lectura-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .lectura-metricas > div { border-bottom: 0; } .lectura-metricas > div:not(:first-child) b { font-size: 2rem; } }
.temas-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.portales { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--gap); }
.estado-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.recorrido-publicacion { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.cobertura-fila { grid-template-columns: minmax(0, 1fr) auto; }
@container pagina (max-width: 40rem) { .cobertura-fila { grid-template-columns: minmax(0, 1fr); } th, td { padding: .56rem .5rem; font-size: .84rem; } .hero-links .btn { inline-size: 100%; justify-content: center; } }
@media (max-width: 40em) { .pie-dgn-in { flex-direction: column; } .pie-dgn-der { text-align: left; } }

/* Gráficos: la altura sale de la pantalla (svh) con un piso legible en rem; el primero llena lo que queda de la primera pantalla */
.grafico, .grafico-bajo, .grafico-alto, .grafico-llena, .grafico-datos { position: relative; min-inline-size: 0; }
.grafico { block-size: max(22rem, 54svh); }
.grafico-bajo { block-size: max(16rem, 36svh); }
.grafico-alto { block-size: max(26rem, 72svh); }
.scroll { max-block-size: 70svh; }
pre { max-block-size: 30svh; }

/* Utilidades (sustituyen a los atributos style de las páginas; llevan !important porque antes ganaba el estilo en línea). Las medidas que dependen de un dato siguen en línea. */
.u-mt0 { margin-block-start: 0 !important; } .u-mb0 { margin-block-end: 0 !important; }
.u-mt-xs { margin-block-start: .5rem !important; } .u-mt-s { margin-block-start: .625rem !important; } .u-mt-m { margin-block-start: .75rem !important; }
.u-mt-l { margin-block-start: 1rem !important; } .u-mt-xl { margin-block-start: 1.5rem !important; }
.u-mb-xs { margin-block-end: .5rem !important; } .u-mb-s { margin-block-end: .625rem !important; } .u-mb-l { margin-block-end: 1rem !important; }
.u-p0 { padding: 0 !important; } .u-pt0 { padding-block-start: 0 !important; } .u-pb0 { padding-block-end: 0 !important; }
.u-grid { display: grid !important; } .u-flex { display: flex !important; }
.u-fila { display: flex; gap: .625rem; flex-wrap: wrap; align-items: center; }
.u-crece { flex: 1 1 12.5rem; } .u-w-full { inline-size: 100%; } .u-medida { max-inline-size: 28.75rem; }
.u-titulo-bloque { font-size: 1.1rem; margin: 0 0 .5rem; }
.u-ancho-select { inline-size: 13.75rem; } .u-minw-m { min-inline-size: 17.5rem; } .u-minw-l { min-inline-size: 22.5rem; }
.u-campo-monto { inline-size: 6.875rem; text-align: right; }

/* Compatibilidad: sólo se declaran donde el navegador las entiende (evita avisos en la consola de Firefox). */
@supports (-webkit-text-size-adjust: 100%) { html { -webkit-text-size-adjust: 100%; } }
@supports (text-size-adjust: 100%) { html { text-size-adjust: 100%; } }
@supports (-moz-osx-font-smoothing: grayscale) { body { -moz-osx-font-smoothing: grayscale; } }
@supports (text-wrap: pretty) { p, li, .sub { text-wrap: pretty; } }
.nb { white-space: nowrap; }

/* Lecturas: sin huecos reservados; la tarjeta mide lo que muestra */
.lectura { gap: .6rem; }
.lectura > * { margin-block: 0; }
.lectura h3 { margin-block: .5rem .25rem; min-block-size: 0; }
.lectura-metricas { margin: 0; gap: .75rem; }
.lectura-metricas > div { padding-bottom: .5rem; }
.lectura > a, .lectura details { padding-block: 0; }
.resumen-lecturas { margin: 0 0 .75rem; }

/* Gráfico principal: ocupa lo que queda de la primera pantalla (medido en vivo) y nunca baja de un piso legible. */
.grafico-llena { block-size: max(20rem, calc(100svh - var(--alto-previo, 30rem) - 1rem)); }
/* Selector del gráfico y nota de lectura en la misma fila, la nota plegada */
.fila-controles { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-block-end: .75rem; }
.fila-controles .seg { margin: 0; }
.como-leer { flex: 1 1 16rem; margin: 0; }
.como-leer > p { margin: .5rem 0 0; }
/* Cifras principales más bajas: el dato manda y el aire sobra */
.stats .card { padding-block: .7rem; }
.stat .val { margin-block: .25rem .15rem; }

/* Cabecera de metadatos sin separadores colgantes; desplegable de variaciones con aire; resultado de la calculadora siempre a la vista */
.meta-linea { display: flex; flex-wrap: wrap; gap: .15rem 1.1rem; }
details.cambios { margin-block-start: 1rem; }
@container pagina (min-width: 56rem) { #inflRes { position: sticky; top: calc(var(--cabecera-top, 7rem) + .75rem); align-self: start; } }
/* Metodología en grupos plegables */
.metodo-grupo { margin: 0 0 .75rem; padding-block: .75rem; }
.metodo-grupo > summary { font-size: 1rem; font-weight: 650; }
.metodo-grupo .claves { margin-block: .75rem 0; }