/* v317 · Paleta de graficas exclusiva para tema claro.
   Las tintas neon del lienzo oscuro pierden contraste sobre blanco. Esta capa solo cambia
   series, referencias y leyendas analiticas; el resto de la identidad de TrailLab no se toca. */
html[data-theme="light"]{
  --tl-chart-blue:#1759c7;
  --tl-chart-blue-deep:#0f3f9e;
  --tl-chart-orange:#c2410c;
  --tl-chart-orange-deep:#9f2f05;
  --tl-chart-teal:#00796b;
  --tl-chart-teal-deep:#00574f;
  --tl-chart-amber:#7a5200;
  --tl-chart-axis:#49675b;
  --tl-chart-grid:rgba(23,70,53,.22);
  --tl-chart-grid-soft:rgba(23,70,53,.12);
}

/* Las leyendas antiguas expresan el color mediante variables globales. Se reasignan dentro
   de superficies analiticas concretas para que botones, estados y el tema oscuro no cambien. */
html[data-theme="light"] :is(.tl-chart-card,.tl-chart-frame,.fc-wrap,.bc-wrap,.st-formchips,.st-chips){
  --lime:var(--tl-chart-blue);
  --lime2:var(--tl-chart-blue);
  --orange:var(--tl-chart-orange);
  --teal:var(--tl-chart-teal);
  --amber:var(--tl-chart-amber);
}

html[data-theme="light"] .tl-premium-chart .tl-plot-bg{
  fill:#f7faf8!important;
  stroke:rgba(23,70,53,.16)!important;
}
html[data-theme="light"] .tl-premium-chart .tl-grid-line{stroke:var(--tl-chart-grid)!important}
html[data-theme="light"] .tl-premium-chart .tl-month-line{stroke:var(--tl-chart-grid-soft)!important}
html[data-theme="light"] .tl-premium-chart :is(.tl-axis-label,.tl-empty-label){fill:var(--tl-chart-axis)!important}

/* Volumen: turquesa oscuro; el periodo activo pasa a azul. */
html[data-theme="light"] .tl-premium-chart [id^="tlBarBase"] stop:first-child,
html[data-theme="light"] .tl-premium-chart [id^="tlLoadBar"] stop:first-child{stop-color:var(--tl-chart-teal)!important}
html[data-theme="light"] .tl-premium-chart [id^="tlBarBase"] stop:nth-child(2){stop-color:#00695c!important}
html[data-theme="light"] .tl-premium-chart [id^="tlBarBase"] stop:last-child,
html[data-theme="light"] .tl-premium-chart [id^="tlLoadBar"] stop:last-child{stop-color:var(--tl-chart-teal-deep)!important}
html[data-theme="light"] .tl-premium-chart [id^="tlBarHot"] stop:first-child{stop-color:var(--tl-chart-blue)!important}
html[data-theme="light"] .tl-premium-chart [id^="tlBarHot"] stop:nth-child(2){stop-color:#164da8!important}
html[data-theme="light"] .tl-premium-chart [id^="tlBarHot"] stop:last-child{stop-color:var(--tl-chart-blue-deep)!important}

/* Fitness abandona el lima en claro y usa azul; Fatiga conserva el significado calido
   con dos naranjas tostados que mantienen contraste sobre blanco. */
html[data-theme="light"] .tl-premium-chart [id^="tlCtlArea"] stop{stop-color:var(--tl-chart-blue)!important}
html[data-theme="light"] .tl-premium-chart [id^="tlCtlLine"] stop:first-child{stop-color:var(--tl-chart-blue)!important}
html[data-theme="light"] .tl-premium-chart [id^="tlCtlLine"] stop:nth-child(2){stop-color:#164da8!important}
html[data-theme="light"] .tl-premium-chart [id^="tlCtlLine"] stop:last-child{stop-color:var(--tl-chart-blue-deep)!important}
html[data-theme="light"] .tl-premium-chart :is([id^="tlAtlLine"],[id^="tlFatigueLine"]) stop:first-child{stop-color:var(--tl-chart-orange)!important}
html[data-theme="light"] .tl-premium-chart :is([id^="tlAtlLine"],[id^="tlFatigueLine"]) stop:last-child{stop-color:var(--tl-chart-orange-deep)!important}
html[data-theme="light"] .tl-line-halo.ctl{stroke:var(--tl-chart-blue)!important}
html[data-theme="light"] .tl-line-halo.atl{stroke:var(--tl-chart-orange)!important}
html[data-theme="light"] .tl-end-ring.ctl{stroke:var(--tl-chart-blue)!important}
html[data-theme="light"] .tl-end-ring.atl{stroke:var(--tl-chart-orange)!important}
html[data-theme="light"] .tl-premium-chart[data-chart-kind="fitness"] .tl-end-ring.ctl+circle{fill:var(--tl-chart-blue)!important}
html[data-theme="light"] .tl-premium-chart :is(.tl-end-ring.atl+circle){fill:var(--tl-chart-orange)!important}

html[data-theme="light"] .tl-average-line{stroke:var(--tl-chart-amber)!important;opacity:1}
html[data-theme="light"] .tl-average-tag{fill:#fff8e6!important;stroke:var(--tl-chart-amber)!important}
html[data-theme="light"] .tl-average-label{fill:var(--tl-chart-amber)!important}
html[data-theme="light"] .tl-bar-value{fill:#355448!important}
html[data-theme="light"] .tl-bar-value.is-hot{fill:var(--tl-chart-blue-deep)!important}

/* Las graficas clasicas escriben las variables del tema oscuro dentro del propio SVG. */
html[data-theme="light"] .st-svg.tl-chart-surface:not(.tl-premium-chart) path[stroke="var(--lime2)"]{
  stroke:var(--tl-chart-blue)!important;
}
html[data-theme="light"] .st-svg.tl-chart-surface:not(.tl-premium-chart) circle[fill="var(--lime)"]{
  fill:var(--tl-chart-blue)!important;
  stroke:#fff!important;
}

/* Reparto por deporte: cada serie recibe una tinta de la paleta clara, tambien cuando el
   generador deja el color oscuro escrito como atributo SVG. */
html[data-theme="light"] .st-donut circle:nth-of-type(4n+1){stroke:var(--tl-chart-orange)!important}
html[data-theme="light"] .st-donut circle:nth-of-type(4n+2){stroke:var(--tl-chart-blue)!important}
html[data-theme="light"] .st-donut circle:nth-of-type(4n+3){stroke:var(--tl-chart-teal)!important}
html[data-theme="light"] .st-donut circle:nth-of-type(4n){stroke:var(--tl-chart-amber)!important}

/* Rendimiento: la nota contiene nodos de texto y negritas directos. Como flex, cada fragmento se
   convertia en una columna independiente; en claro quedaba cortada aunque los datos si existieran. */
html[data-theme="light"] #view-garmin .estado-note{
  display:block!important;
  color:#102019!important;
  line-height:1.55!important;
  background:#f7faf8!important;
  border-color:rgba(23,70,53,.19)!important;
}
html[data-theme="light"] #view-garmin .estado-note .ui-line-icon{
  display:inline-block!important;
  margin-right:8px!important;
  vertical-align:-3px!important;
}

/* Estadisticas: los selectores y los ganadores heredaban #eefaf5 del panel oscuro sobre blanco. */
html[data-theme="light"] #view-estadisticas :is(#cmpSelA,#cmpSelB){
  color:#173b2f!important;
  background:#fff!important;
  border-color:rgba(23,70,53,.28)!important;
}
html[data-theme="light"] #view-estadisticas :is(#cmpSelA,#cmpSelB) option{
  color:#173b2f!important;
  background:#fff!important;
}
html[data-theme="light"] #view-estadisticas .cmp-sela{color:var(--tl-chart-blue-deep)!important}
html[data-theme="light"] #view-estadisticas .cmp-selb{color:var(--tl-chart-orange-deep)!important}
html[data-theme="light"] #view-estadisticas .cmp-tbl :is(th,td){
  color:#173b2f!important;
  border-bottom-color:rgba(23,70,53,.14)!important;
}
html[data-theme="light"] #view-estadisticas .cmp-tbl .cmp-l{color:var(--tl-chart-axis)!important}
html[data-theme="light"] #view-estadisticas .cmp-tbl .cmp-a,
html[data-theme="light"] #view-estadisticas .cmp-tbl td:nth-child(2).cmp-win{
  color:var(--tl-chart-blue-deep)!important;
}
html[data-theme="light"] #view-estadisticas .cmp-tbl .cmp-b,
html[data-theme="light"] #view-estadisticas .cmp-tbl td:nth-child(3).cmp-win{
  color:var(--tl-chart-orange-deep)!important;
}

/* Prediccion de carrera vive sobre blanco, a diferencia de las graficas clasicas enmarcadas. */
html[data-theme="light"] #view-estadisticas .rpx-grid + svg.st-svg.tl-chart-surface line[stroke="var(--line)"]{
  stroke:var(--tl-chart-grid)!important;
}
html[data-theme="light"] #view-estadisticas .rpx-grid + svg.st-svg.tl-chart-surface text[fill="var(--ink)"]{
  fill:#173b2f!important;
}
html[data-theme="light"] #view-estadisticas .rpx-grid + svg.st-svg.tl-chart-surface text[fill="var(--muted)"]{
  fill:var(--tl-chart-axis)!important;
}