/* UI v4: selector de patentes con chips, período con presets, reproductor sólo con ruta */
.vehicle-picker{flex:1.6;min-width:300px}
.vehicle-picker>label{display:block;margin-bottom:6px}
#vehicle-count{font-weight:400;color:#2b82d4}
.vp-box{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:38px;max-height:84px;overflow-y:auto;padding:3px 6px;border:1px solid #e3e3e3;background:#f7f7f7;cursor:text}
.vp-box:focus-within{border-color:#2b82d4;background:#fff}
.vp-box>#vehicle-search{flex:1 1 120px;min-width:120px;width:auto;height:30px;min-height:30px;border:0;background:transparent;padding:0 4px;outline:none}
.vp-chips{display:contents}
.vp-chip{display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 2px 0 8px;background:#e3f0fb;color:#1d5f99;border:1px solid #b9d6f0;font-size:11px;font-weight:700;white-space:nowrap}
.vp-chip.missing{background:#fff4d6;color:#8a5a00;border-color:#f0d08a}
.vp-chip button,.vp-row-remove{height:20px!important;min-height:0;width:20px;padding:0!important;background:transparent!important;color:inherit;font-size:15px;line-height:1;border-radius:0;opacity:.65}
.vp-chip button:hover,.vp-row-remove:hover{opacity:1;color:#c0392b}
.vehicle-options{display:none;top:auto!important;margin-top:2px;max-height:min(360px,60vh)!important;min-width:320px}
.vehicle-options.open{display:block}
.vp-actions{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;background:#f4f8fb;border-bottom:1px solid #e1e9ee}
.vp-actions button{height:24px!important;padding:0 8px;font-size:11px;font-weight:600;background:#fff;color:#2b82d4;border:1px solid #b9d6f0}
.vp-hint{margin-left:auto;color:#8aa0aa;font-size:10px}
.vehicle-option.single{grid-template-rows:20px}
.vehicle-option.active{background:#e3f0fb}
.vehicle-option span{font-weight:700}
.vehicle-selected{height:auto;min-height:20px;padding:3px 0 0}
.vp-config-toggle{height:auto!important;padding:2px 0!important;background:none!important;color:#2b82d4;font-size:11px;font-weight:600;border-radius:0}
.vp-config-toggle.warn{color:#b26a00}
.vp-config{display:none;position:absolute;z-index:3000;left:0;top:100%;margin-top:2px;width:max(100%,520px);max-width:calc(100vw - 32px);max-height:min(420px,65vh);overflow:auto;background:#fff;border:1px solid #d7e2e8;box-shadow:0 6px 18px #0002}
.vp-config.open{display:block}
.vp-row{display:grid;grid-template-columns:minmax(110px,auto) 1fr 22px;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid #eef2f4;margin:0}
.vp-row>span:first-child{font-weight:700;font-size:12px}
.vp-row>span:first-child small{display:block;margin-top:2px;color:#607d8b;font-size:10px;font-weight:500}
.vp-bulk{position:sticky;top:0;z-index:1;background:#f4f8fb}
.vp-bulk>span:first-child{font-weight:600;color:#3d5565}
.vp-config-foot{position:sticky;bottom:0;display:flex;justify-content:flex-end;padding:6px 10px;background:#fff;border-top:1px solid #eef2f4}
.vp-config-foot button{height:28px!important;padding:0 14px;font-size:11px}
.period-picker{display:grid;gap:6px;flex:0 1 230px;min-width:190px}
.toolbar .period-picker>label{min-width:0;font-size:11px}
.period-picker small{display:block;height:14px;margin-top:-2px;color:#2b82d4;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toolbar .custom-range{flex:0 1 200px;min-width:170px}
.toolbar .custom-range[hidden]{display:none!important}
#playback:not(.ready){display:none!important}
@media(max-width:900px){.vehicle-picker{min-width:0}.period-picker{grid-column:1 / -1}.vp-config{width:100%}.vp-row{grid-template-columns:1fr 22px}.vp-row .vehicle-settings{grid-column:1 / 2}.vp-row>.vp-row-remove{grid-row:1;grid-column:2}.vp-hint{display:none}}
.vehicle-options .vehicle-option{grid-template-rows:auto!important;gap:0 8px;align-items:center;padding:6px 10px;margin:0}
.vehicle-options .vehicle-option input{width:15px;height:15px!important;min-height:0!important;margin:0;padding:0}
.vehicle-options .vehicle-option small{grid-row:2}
@media(min-width:901px){#app:not([hidden]){display:flex;flex-direction:column;height:100vh;overflow:hidden}#app>header,#app>.toolbar,#app>.warning{flex:0 0 auto}#app>.dashboard{flex:1 1 auto;height:auto!important;min-height:0}#app>footer{display:none}}
.vehicle-options{z-index:3000!important}
/* v4.1: selects sin recorte, alineación estable, móvil */
.toolbar select,.vp-config select{padding:0 28px 0 10px!important;line-height:1.3!important}
.vp-config select{padding:0 24px 0 8px!important}
#logout{margin-left:auto}
.toolbar .period-picker{grid-template-columns:minmax(0,1fr)!important}
.toolbar .period-picker>label{grid-column:auto!important;margin:0}
.period-picker small{margin-top:-3px}
@media(min-width:901px){
  .toolbar{align-items:flex-start!important}
  .toolbar>#generate,.toolbar>#playback{margin-top:19px}
  .toolbar>.custom-range{gap:6px}
}
@media(max-width:900px){
  .toolbar{row-gap:10px!important}
  .toolbar>.custom-range{grid-column:auto!important}
  .vp-row{grid-template-columns:minmax(0,1fr) 24px!important}
  .vp-row>span:first-child{grid-column:1}
  .vp-row>.vehicle-settings{grid-column:1 / -1!important;grid-row:2;display:grid!important;grid-template-columns:1fr 1fr!important}
  .vp-row>.vp-row-remove{grid-row:1;grid-column:2}
  .vp-bulk>span:first-child{grid-column:1 / -1}
  .vp-config select{height:36px!important;min-height:36px!important;font-size:12px!important}
  .vp-chip{height:28px;font-size:12px}
  .vp-chip button{width:24px;height:24px!important;font-size:17px}
  .vehicle-options .vehicle-option{padding:9px 10px}
  .playback{justify-content:center;gap:8px}
  .playback input{flex:1 1 120px;width:auto!important}
  .playback small{flex-basis:100%;text-align:center}
  .dashboard>#map{height:50vh!important;min-height:320px!important}
  #app>footer{display:none}
}
.vp-row .vehicle-settings,.vp-row select{font-weight:400!important}
@media(max-width:600px){.toast-stack{left:12px;right:12px;top:66px}.toast{min-width:0}}
