/* Shared temporal controls: approved compact visual treatment. */
html body .on-period-host .on-period{
  font-family:inherit;font-size:12px;gap:8px;align-items:end;color:#b9cedd;
}
html body .on-period-host .on-period :is(button,input){
  font-family:inherit!important;font-size:12px!important;font-weight:500!important;
  line-height:1.25!important;letter-spacing:0!important;box-sizing:border-box;
  height:32px;min-height:32px!important;padding:6px 10px;
  border:1px solid #2b485d!important;border-radius:5px!important;
  background:#0c2537!important;color:#c5d9e7!important;box-shadow:none!important;
  transition:background-color .15s,border-color .15s;
}
html body .on-period-host .on-period button:hover:not(:disabled){
  background:#17374c!important;border-color:#476a80!important;color:#edf5fa!important;
}
html body .on-period-host .on-period button[aria-pressed=true]{
  background:#1b4056!important;border-color:#49738d!important;color:#e0f1fb!important;
}
html body .on-period-host .on-period :is(button,input):focus-visible{
  outline:2px solid #6bcaff!important;outline-offset:2px;
}
html body .on-period-host .on-period-quick{gap:3px}
html body .on-period-host .on-period-quick button span{margin-left:4px;color:#8ba9bd}
html body .on-period-host .on-date{gap:3px}
html body .on-period-host .on-date>span{font-size:10px;font-weight:400;letter-spacing:0;color:#90acbf}
html body .on-period-host .on-date input{width:126px;font-variant-numeric:tabular-nums;color-scheme:dark}
html body .on-period-host .on-date input::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}
html body .on-period-host .on-shifts{gap:3px}
html body .on-period-host .on-shifts button[data-turno-button]{width:32px;padding:7px}
html body .on-period-host .on-shifts svg{width:16px;height:16px;stroke-width:1.5}
html body .on-period-host .on-period .on-apply{
  background:#1a4057!important;border-color:#3f6982!important;color:#e8f4fc!important;font-weight:600!important;
}
html body .on-period-host .on-calendar{
  background:#0d2537;border:1px solid #36546a;border-radius:7px;padding:12px;min-width:272px;
}
html body .on-period-host .on-calendar header strong{font-size:12px;font-weight:600}
html body .on-period-host .on-calendar-grid{gap:5px}
@media(max-width:700px){
  html body .on-period-host .on-date input{width:100%;min-width:120px}
}
@media(prefers-reduced-motion:reduce){
  html body .on-period-host .on-period :is(button,input){transition:none}
}

/* Date/time fields and the legacy timebars use the same visual tokens. */
html body :is(input[type="date"],input[type="month"],input[type="time"],
 #kpi-fixed-timebar button,.kpi-period-filter button,
 #mapaCarteraApp .mapa-cartera-filters button,.quality-command .kpi-filter-turno select){
 font-family:inherit!important;font-size:12px!important;font-weight:500!important;
 line-height:1.25!important;letter-spacing:0!important;box-sizing:border-box;
 height:32px!important;min-height:32px!important;padding:6px 10px!important;
 border:1px solid #2b485d!important;border-radius:5px!important;
 background:#0c2537!important;color:#c5d9e7!important;box-shadow:none!important;
 font-variant-numeric:tabular-nums;color-scheme:dark;
}
html body :is(input[type="date"],input[type="month"],input[type="time"])::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}
html body :is(#kpi-fixed-timebar,.kpi-period-filter,#mapaCarteraApp .mapa-cartera-filters) button:hover:not(:disabled){background:#17374c!important;border-color:#476a80!important;color:#edf5fa!important}
html body :is(#kpi-fixed-timebar,.kpi-period-filter) button:is(.active,[aria-pressed="true"]){background:#1b4056!important;border-color:#49738d!important;color:#e0f1fb!important}
html body :is(#kpi-apply,#mapApply){background:#1a4057!important;border-color:#3f6982!important;color:#e8f4fc!important;font-weight:600!important}
html body #kpi-fixed-timebar :is(.kpi-date>span,.kpi-turnos-title){font-size:10px!important;font-weight:400;letter-spacing:0;color:#90acbf!important}
html body #kpi-fixed-timebar .kpi-turno{font-size:12px!important;min-height:32px;box-sizing:border-box}
html body #kpi-fixed-timebar .kpi-date input{width:126px}
html body #mapaCarteraApp .mapa-cartera-filters label{font-size:10px!important;font-weight:400;letter-spacing:0;color:#90acbf!important}
html body :is(#kpi-fixed-timebar,.kpi-period-filter,#mapaCarteraApp .mapa-cartera-filters) :is(button,input):focus-visible{outline:2px solid #6bcaff!important;outline-offset:2px}