/* colores de las curvas: paleta por defecto de Plotly */
:root { --is: #1f77b4; --lm: #d62728; --bp: #2ca02c; --accent: #1f77b4; --accent-2: #ff7f0e; --good: #2ca02c; }

body { font-family: sans-serif; padding: 0 16px 40px; }
.tab.active, .seg button.active { font-weight: bold; }

.view { display: none; }
.view.active { display: block; }

.layout { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }
@media (max-width: 980px) { .layout { grid-template-columns: 1fr; } }

.control { margin-bottom: 12px; }
.control label { display: block; }
.control input[type=range] { width: 100%; }
.hint { font-size: small; color: #666; }
.btnrow { margin-top: 12px; }

.readout { display: flex; flex-wrap: wrap; gap: 24px; }
.stat .k { font-size: small; color: #666; }
.stat .v { font-size: large; }

.plot { height: 460px; }
.plot.tall { height: 540px; }