/* ==========================================================================
   SELEK — visual da caixa de seleção própria
   Usado pelo site e pelo painel. Anda junto com assets/js/selek.js.
   As cores saem de variáveis próprias, então ele se encaixa nos dois.
   ========================================================================== */
:root{
  --selek-borda:#d4d4d4;
  --selek-borda-forte:#b5b5bb;
  --selek-texto:#0d0d0d;
  --selek-apagado:#8a8a8a;
  --selek-realce:#f4f4f5;
  --selek-raio:9px;
  --selek-raio-g:14px;
}

.selek{position:relative;}
.selek__nativo{
  position:absolute;opacity:0;pointer-events:none;width:0;height:0;
  /* Continua no formulário — é ele que guarda o valor de verdade */
}

/* ---- o botão fechado ---- */
.selek__botao{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:13px 15px;border:1.5px solid var(--selek-borda);border-radius:var(--selek-raio);
  background:#fff;font:inherit;font-size:.95rem;font-weight:600;color:var(--selek-texto);
  cursor:pointer;text-align:left;transition:border-color .15s, box-shadow .15s;
}
.selek__botao:hover{border-color:var(--selek-borda-forte);}
.selek__botao:focus-visible{outline:none;border-color:var(--selek-texto);box-shadow:0 0 0 4px rgba(0,0,0,.08);}
.selek.aberto .selek__botao{border-color:var(--selek-texto);box-shadow:0 0 0 4px rgba(0,0,0,.08);}
.selek__valor{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---- a setinha ---- */
.selek__seta{
  width:9px;height:9px;flex:0 0 9px;border-right:2px solid var(--selek-apagado);
  border-bottom:2px solid var(--selek-apagado);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .18s;
}
.selek.aberto .selek__seta{transform:rotate(-135deg) translate(-3px,-3px);}

/* ---- a lista aberta ---- */
.selek__lista{
  position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;
  max-height:264px;overflow-y:auto;padding:6px;
  background:#fff;border:1.5px solid var(--selek-texto);border-radius:var(--selek-raio-g);
  box-shadow:0 18px 44px rgba(0,0,0,.17);
  animation:selekEntra .13s ease-out;
}
@keyframes selekEntra{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

.selek__item{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:9px;cursor:pointer;
  font-size:.93rem;font-weight:600;color:var(--selek-texto);
}
.selek__item > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.selek__item.realce{background:var(--selek-realce);}
.selek__item.marcado{background:var(--selek-texto);color:#fff;}
.selek__item.marcado.realce{background:#2b2b2b;}
.selek__check{opacity:0;font-size:.9rem;}
.selek__item.marcado .selek__check{opacity:1;}
.selek__vazio{padding:14px 12px;font-size:.86rem;color:var(--selek-apagado);line-height:1.5;}

/* ---- a bolinha de cor ---- */
.selek__cor{
  width:17px;height:17px;flex:0 0 17px;border-radius:50%;
  border:1.5px solid rgba(0,0,0,.22);box-shadow:inset 0 -2px 4px rgba(0,0,0,.13);
}
.selek__item.marcado .selek__cor{border-color:rgba(255,255,255,.5);}

/* ---- campo de escrever com sugestões (a Cor) ---- */
.selek--escrita input{width:100%;padding-right:40px;}
.selek--escrita.tem-cor input{padding-left:40px;}
.selek__cor--campo{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  display:none;pointer-events:none;
}
.selek--escrita.tem-cor .selek__cor--campo{display:block;}
.selek__abrir{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;border-radius:8px;
}
.selek__abrir:hover{background:var(--selek-realce);}

/* No celular a lista sobe do rodapé, que é mais fácil de alcançar */
@media(max-width:640px){
  .selek__lista{
    position:fixed;top:auto;bottom:0;left:0;right:0;max-height:58vh;
    border-radius:20px 20px 0 0;border-width:0;padding:10px 10px 22px;
    box-shadow:0 -14px 44px rgba(0,0,0,.25);
    animation:selekSobe .18s ease-out;
  }
  @keyframes selekSobe{from{transform:translateY(100%);}to{transform:none;}}
  .selek__item{padding:15px 14px;font-size:1rem;}
}


/* Etiqueta de "ainda falta preencher" na lista de veículos */
.tg--falta{background:#fef3c7;color:#92400e;font-weight:700;}