/* Portal 0.7 - Estatísticas de viagem (vehicle-trip-stats.js, 26/10/2026). Carregado depois de portal-ux.css.
   Prefixo .ts-. Cores, espaços e raios só das variáveis de portal-ux.css. */
.trip-stats{min-width:0}
.trip-stats>.ux-page-head{margin-bottom:var(--space-16)}
.ts-bands>.ux-band{margin:0 0 var(--space-8)}
.ts-bands>[hidden]{display:none}

/* ---- período ---- */
.ts-filter{margin:0}
.ts-pickers{display:flex;gap:var(--space-8);margin-top:var(--space-8)}
.ts-pick{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-pick svg{flex:0 0 auto}
.ts-summary{margin:var(--space-8) 0 var(--space-16);font-size:13px;line-height:20px;color:var(--ux-muted)}
.ts-summary:empty{margin-bottom:var(--space-8)}

/* ---- estados ---- */
.ts-loading{display:flex;align-items:center;gap:var(--space-8);margin:0 0 var(--space-16);font-size:14px;line-height:20px;color:var(--ux-muted)}
.ts-spinner{flex:0 0 16px;width:16px;height:16px;border-radius:50%;border:2px solid var(--ux-control-line);border-top-color:var(--ux-blue);animation:ts-spin .8s linear infinite}
@keyframes ts-spin{to{transform:rotate(360deg)}}
.ts-empty{padding:var(--space-24) var(--space-16);border:1px dashed var(--ux-card-line);border-radius:var(--radius-12);text-align:center;font-size:14px;line-height:20px;color:var(--ux-muted)}
.ts-empty p{margin:0}
.ts-empty.is-error{border-style:solid;border-color:var(--ux-control-line);background:var(--ux-card)}
.ts-empty .ux-link{margin-top:var(--space-8)}

/* ---- cartões dos totais ---- */
.ts-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8);margin:0 0 var(--space-24)}
.ts-tile{min-width:0;min-height:96px;padding:var(--space-12);display:flex;flex-direction:column;gap:var(--space-4);border:1px solid var(--ux-card-line);border-radius:var(--radius-12);background:var(--ux-card)}
.ts-tile-label{font:500 11px/16px var(--font-mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--ux-eyebrow)}
.ts-tile-value{font:500 22px/28px var(--font-display);color:var(--ux-text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ts-tile-sub{font-size:13px;line-height:18px;color:var(--ux-muted)}
.ts-tiles.is-skeleton .ts-tile{background:linear-gradient(90deg,var(--ux-card) 0%,var(--ux-control) 50%,var(--ux-card) 100%);background-size:200% 100%;animation:ts-shine 1.4s ease-in-out infinite}
@keyframes ts-shine{from{background-position:100% 0}to{background-position:-100% 0}}

/* ---- gráfico por dia ---- */
.ts-chart-card{display:flex;flex-direction:column;gap:var(--space-12)}
.ts-scale{min-height:16px;font-size:12px;line-height:16px;color:var(--ux-muted);text-align:right;font-variant-numeric:tabular-nums}
.ts-bars{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:2px;align-items:end;height:160px;margin-bottom:var(--space-16);border-bottom:1px solid var(--ux-divider)}
.ts-bar{position:relative;height:100%;min-width:0;padding:0;border:0;background:transparent;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;cursor:pointer}
.ts-bar-fill{display:block;width:100%;max-width:28px;border-radius:4px 4px 0 0;background:var(--ux-blue)}
.ts-bar.is-zero .ts-bar-fill{height:2px!important;border-radius:1px;background:var(--ux-control-line)}
.ts-bar[aria-pressed="true"] .ts-bar-fill{background:var(--ux-blue-soft)}
.ts-bar:focus-visible{outline:2px solid var(--ux-link);outline-offset:2px;border-radius:4px}
.ts-bar-label{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);font-size:11px;line-height:12px;color:var(--ux-muted);white-space:nowrap;pointer-events:none}
.ts-picked{margin:0;font-size:14px;line-height:20px;color:var(--ux-label)}
/* contrato 1.2: energia adicionada empilhada - recuperada nas viagens (céu), tomada (azul), motor parado (âmbar) */
.ts-bar-fill.is-stack{display:flex;flex-direction:column-reverse;overflow:hidden;background:transparent}
.ts-seg{display:block;flex:0 0 auto;width:100%}
.ts-seg.is-recovered,.ts-key.is-recovered{background:var(--ux-sky)}
.ts-seg.is-plug,.ts-key.is-plug{background:var(--ux-blue)}
.ts-seg.is-engine,.ts-key.is-engine{background:var(--ux-amber)}
.ts-bar[aria-pressed="true"] .ts-bar-fill.is-stack{background:transparent}
.ts-bars.has-pick .ts-bar[aria-pressed="false"] .ts-bar-fill.is-stack{opacity:.55}
.ts-legend{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-16);font-size:13px;line-height:18px;color:var(--ux-label)}
.ts-legend[hidden]{display:none}
.ts-legend-item{display:inline-flex;align-items:center;gap:var(--space-8)}
.ts-key{flex:0 0 10px;width:10px;height:10px;border-radius:2px}

/* ---- listas de carregamentos e abastecimentos ---- */
.ts-events{margin-top:var(--space-16)}
.ts-event{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-12);padding:var(--space-12) 0;border-top:1px solid var(--ux-divider)}
.ts-event:first-child{border-top:0}
.ts-event-name{flex:1 1 auto;min-width:0;font-size:15px;line-height:22px;color:var(--ux-text)}
.ts-event-tail{flex:0 0 auto;display:flex;align-items:center;gap:var(--space-8)}
.ts-event-value{font:500 15px/22px var(--font-display);white-space:nowrap;font-variant-numeric:tabular-nums}
.ts-more{width:100%;justify-content:center;border-top:1px solid var(--ux-divider)}
.ts-foot{margin:var(--space-8) 0 0}
.ts-body>.ts-foot{margin-bottom:var(--space-24)}

/* ---- calendário (painel "Escolher data" / "Intervalo") ---- */
.ts-cal-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);margin:0 0 var(--space-8)}
.ts-cal-step{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ux-text);display:grid;place-items:center;cursor:pointer}
.ts-cal-step:disabled{opacity:.3;cursor:default}
.ts-cal-title{display:inline-block;font:500 16px/22px var(--font-display)}
.ts-cal-title::first-letter{text-transform:uppercase}
.ts-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-4)}
.ts-cal-wd{padding:var(--space-4) 0;text-align:center;font:500 11px/16px var(--font-mono);text-transform:uppercase;color:var(--ux-eyebrow)}
.ts-cal-day{position:relative;min-height:44px;padding:0;border:0;border-radius:var(--radius-10);background:transparent;color:var(--ux-placeholder);font:400 14px/20px var(--font-display);font-variant-numeric:tabular-nums;cursor:default}
.ts-cal-day.has-history{background:var(--ux-control);color:var(--ux-text);cursor:pointer}
.ts-cal-day.has-history::after{content:"";position:absolute;left:50%;bottom:6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ux-blue-soft)}
.ts-cal-day.is-between{background:var(--ux-blue-deep);color:var(--ux-blue-soft)}
.ts-cal-day[aria-pressed="true"]{background:var(--ux-blue);color:#fff;font-weight:500}
.ts-cal-day[aria-pressed="true"]::after{background:#fff}
.ts-cal-chosen{min-height:20px;margin:var(--space-12) 0 0;font-size:14px;line-height:20px;color:var(--ux-label)}

@media (prefers-reduced-motion:reduce){.ts-spinner,.ts-tiles.is-skeleton .ts-tile{animation:none}}
@media (min-width:600px){
 .ts-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
 .ts-filter,.ts-summary{max-width:656px}
}
@media (min-width:1024px){
 .ts-tiles{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
 .ts-bars{height:200px}
 .ts-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-24);align-items:start}
 .ts-body>.ts-tiles,.ts-body>.ts-chart-sec,.ts-body>.ts-loading,.ts-body>.ts-empty,.ts-body>.ts-foot{grid-column:1/-1}
}