/* Controles y gráficos comunes a los widgets. Cada widget arma su propio SVG. */
.widget{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:20px 0;box-shadow:var(--shadow)}
.widget-controles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));margin-bottom:16px}
.control label{display:block;font-weight:600;font-size:16px;margin-bottom:4px}
.control output{font-family:var(--mono);font-weight:600;color:var(--accent)}
.control select,.control input[type=range]{width:100%;min-height:44px;font:inherit;font-size:16px}
.control select{padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
input[type=range]{accent-color:var(--accent)}
.grafico{width:100%;overflow-x:auto}
.grafico svg{display:block;width:100%;min-width:300px}
.grafico text{fill:var(--ink);font:13px var(--body)}
.grafico .eje{stroke:var(--muted);stroke-width:1}
.grafico .rotulo-eje{fill:var(--muted);font-size:12px}
.lectura{background:var(--accent-soft);border-radius:10px;padding:14px 16px;margin-top:14px;font-size:17px;min-height:3em}

/* w01 · barras de masa en escala logarítmica. Son HTML y no SVG para que los
   rótulos conserven su tamaño a 390 px. El elegido se marca con color, borde y texto. */
.eje-log,.barra{display:grid;grid-template-columns:minmax(0,200px) 1fr;gap:4px 14px;align-items:center}
.eje-log{margin:6px 0 2px}
.eje-marcas{position:relative;height:20px;border-bottom:1px solid var(--muted)}
.eje-marcas span{position:absolute;bottom:3px;transform:translateX(-50%);font:12px var(--mono);color:var(--muted);white-space:nowrap}
.eje-marcas span:first-child{transform:none}
.eje-marcas span:last-child{transform:translateX(-100%)}
.barras{list-style:none;margin:0;padding:0}
.barra{padding:5px 0}
.barra-nombre{font-size:15px;line-height:1.3}
.barra-nombre b{font-family:var(--mono);font-weight:600}
.barra-pista{position:relative;height:24px;background:var(--bg);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.barra-relleno{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb, var(--muted) 45%, var(--surface))}
.barra.elegida .barra-pista{border:2px solid var(--ink)}
.barra.elegida .barra-relleno{background:var(--accent)}
.barra.elegida .barra-nombre{font-weight:700}
.nota-escala{font-size:14px;color:var(--muted);margin:8px 0 0}
.w01-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:10px;margin:14px 0 0}
.w01-datos div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:15px}
.w01-datos b{display:block;font:600 18px var(--mono);color:var(--ink)}
@media (max-width:560px){.eje-log,.barra{grid-template-columns:1fr}.eje-log>span{display:none}}

/* w01p · curvas por reservorio: se distinguen por trazo y marca, no solo por color. */
.grafico svg{color:var(--ink)}
.grafico .rotulo-serie{font:600 13px var(--mono)}
.leyenda-w{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:8px 0 0;padding:0;font-size:15px}

/* w02 · barra del espectro. Las zonas con límite no especificado van rayadas (no solo con color). */
.esp-barra{position:relative;height:46px;margin:14px 0 4px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg)}
.esp-seg{position:absolute;top:0;bottom:0;border-right:1px solid var(--surface);background:color-mix(in srgb, var(--f) 22%, var(--surface));display:flex;align-items:center;justify-content:center}
.esp-seg:nth-child(even){background:color-mix(in srgb, var(--f) 38%, var(--surface))}
.esp-seg.difusa{background:repeating-linear-gradient(135deg,var(--surface) 0 6px,color-mix(in srgb, var(--muted) 30%, var(--surface)) 6px 12px)}
.esp-seg span{font:600 12px var(--mono);color:var(--ink)}
.esp-marca{position:absolute;top:-2px;bottom:-2px;width:4px;margin-left:-2px;background:var(--ink);border-radius:2px}
.esp-eje{display:flex;justify-content:space-between;font:12px var(--mono);color:var(--muted)}

/* w03 · balance. Visible con trazo continuo y color --f; IR con color --e (la forma de la flecha y el rótulo también lo dicen). */
.w03-suelo{fill:color-mix(in srgb, var(--m) 35%, var(--surface))}
.w03-gas{fill:var(--muted);opacity:.55}
.w03-vis{color:var(--f)}
.w03-ir{color:var(--e)}
.w03-termo{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:14px;color:var(--muted);margin-top:10px}
.w03-barra{position:relative;height:16px;border-radius:8px;background:linear-gradient(90deg,color-mix(in srgb, var(--f) 45%, var(--surface)),var(--surface),color-mix(in srgb, var(--e) 45%, var(--surface)));border:1px solid var(--line)}
.w03-ref{position:absolute;left:50%;top:-4px;bottom:-4px;border-left:2px dashed var(--muted)}
/* w05 · comparador. Casillas de 44 px de alto; el dato faltante va rayado y con texto, nunca como barra en cero. */
.w05-opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:2px 14px;border:0;margin:0 0 6px;padding:0}
.w05-opciones legend{font-weight:650;margin-bottom:6px}
.w05-opciones label{display:flex;gap:8px;align-items:center;min-height:44px;font-size:16px}
.w05-opciones input{width:20px;height:20px;accent-color:var(--accent)}
.w05-magnitud{margin:18px 0 6px;font-size:16px}
.w05-falta{display:flex;align-items:center;height:100%;padding:0 8px;font:600 13px var(--mono);color:var(--muted);background:repeating-linear-gradient(135deg,var(--surface) 0 6px,color-mix(in srgb, var(--muted) 20%, var(--surface)) 6px 12px)}
.w05-tabla table{min-width:0}

/* w06 · matriz. La suma incompleta se marca con color y con texto. */
.w06-suma{font:600 16px var(--mono);margin:6px 0}
.w06-suma.incompleta{color:var(--m)}
.w06-suma.incompleta::before{content:"⚠ "}

/* w04 · series. CO₂ con trazo continuo y círculos; temperatura con guiones y cuadrados (no solo color). */
.grafico .w04-co2,.w04-co2{color:var(--q);fill:currentColor}
.grafico .w04-temp,.w04-temp{color:var(--e);fill:currentColor}
.grafico .w04-co2 polyline,.grafico .w04-temp polyline{fill:none}
.w04-cero{stroke:var(--muted);stroke-dasharray:2 4}
/* En pantallas angostas el gráfico no se achica por debajo de 560 px: scrollea dentro de .grafico y los rótulos de los ejes siguen legibles. */
#w04 .grafico svg{min-width:560px}
.w03-marca{position:absolute;top:-6px;width:6px;height:28px;margin-left:-3px;border-radius:3px;background:var(--ink)}