/* ===== PROSPECÇÃO - LAYOUT PRINCIPAL ===== */

.vitrola-prospeccao-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

#vitrola-pros-map {
  flex: 1;
  min-height: 75vh;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background: #e5e3df;
}

.vitrola-prospeccao-sidebar {
  width: 100%;
  max-width: 320px;
  position: relative;
  z-index: 1;
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  box-sizing: border-box;
}

.vitrola-prospeccao-sidebar h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.2em;
  color: #333;
}

.vitrola-prospeccao-sidebar h4 {
  margin: 16px 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #555;
}

/* ===== FORMULÁRIO ===== */

.vitrola-pros-form {
  position: relative;
}

.vitrola-pros-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
  font-size: 16px;
}

.vitrola-pros-form input[type="text"] {
  width: 100%;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 16px;
  background-color: #fff;
  font-family: "Rubik", sans-serif;
  box-sizing: border-box;
  margin-bottom: 12px;
  text-align: center;
}

.vitrola-pros-form input[type="text"]:focus {
  outline: none;
  border-color: #999;
}


.vitrola-pros-form input[type="text"]::placeholder {
  color: #999;
  opacity: 1;
}

/* Centraliza o placeholder quando usando localização */
#vitrola-pros-cidadeuf.using-loc:placeholder-shown,
#vitrola-pros-cidadeuf.using-mark:placeholder-shown {
  text-align: center;
}

.vitrola-pros-form button[type="submit"] {
  padding: 8px 12px;
  background-color: #c21a26;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  transition: background-color 0.2s, border-color 0.2s;
  font-family: "Rubik", sans-serif;
  width: 100%;
}

.vitrola-pros-form button[type="submit"]:hover:not(:disabled) {
  background-color: #a50d17;
}

.vitrola-pros-form button[type="submit"]:focus {
  background-color: #a50d17;
  color: #fff;
  text-decoration: none;
}

.vitrola-pros-form button[type="submit"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Botão secundário: Usar minha localização */
.vitrola-pros-form .btn-secondary {
  padding: 8px 12px;
  border: 1px solid #ccc;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  transition: background-color 0.2s, border-color 0.2s;
  font-family: "Rubik", sans-serif;
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.vitrola-pros-form .btn-secondary:hover:not(:disabled) {
  background-color: #f0f0f0;
  color: #000;
  border-color: #bbb;
}

.vitrola-pros-form .btn-secondary:focus {
  background-color: #f0f0f0;
  color: #000;
  border-color: #bbb;
  text-decoration: none;
}

.vitrola-pros-form .btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Ícone do alvo no botão */
#vitrola-pros-geoloc .icon-target {
  display: inline-block;
  vertical-align: middle;
}

/* Ícone do botão "Marcar no mapa" */
#vitrola-pros-mark-map .icon-crosshair {
  display: inline-block;
  vertical-align: middle;
}

/* Visibilidade: Desktop x Mobile */
@media (min-width: 769px) {

  /* Ocultar geolocalização no Desktop */
  #vitrola-pros-geoloc {
    display: none !important;
  }
}

@media (max-width: 768px) {

  /* Ocultar "Marcar no mapa" no Mobile */
  #vitrola-pros-mark-map {
    display: none !important;
  }
}

/* ===== AUTOCOMPLETE CIDADE - UF ===== */

/* Cursor personalizado ao marcar no mapa */
#vitrola-pros-map.vitrola-pros-marking,
#vitrola-pros-map.vitrola-pros-marking * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path fill='%23c21a26' d='M16 2c-6 0-10 4.5-10 10 0 8 10 18 10 18s10-10 10-18c0-5.5-4-10-10-10z'/><circle cx='16' cy='12' r='4' fill='%23fff' fill-opacity='0.9'/></svg>") 16 30, crosshair !important;
}

.vitrola-pros-sugestoes {
  position: absolute;
  left: 0;
  right: 0;
  top: 62px;
  z-index: 10;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  max-height: 240px;
  overflow-y: auto;
  display: none;
}

.vitrola-pros-sugestoes.visible {
  display: block;
}

.vitrola-pros-sugestoes .sug-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 16px;
  color: #333;
}

.vitrola-pros-sugestoes .sug-item:hover {
  background: #f0f0f0;
}

/* ===== STATS ===== */

.vitrola-pros-stats {
  margin-top: 16px;
  margin-bottom: 16px;
  color: #555;
  font-size: 14px;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
}

/* ===== FILTROS ===== */

.vitrola-pros-filtros {
  margin-top: 12px;
  margin-bottom: 12px;
}

.vitrola-pros-filtros h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #555;
}

/* ===== SELEÇÃO E ROTAS ===== */

#vitrola-pros-sel-count {
  font-weight: 500;
  color: #666;
}

.vitrola-pros-sel-list {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fff;
}

.vitrola-pros-sel-list .sel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-bottom: 1px solid #f1f1f1;
  font-size: 16px;
  cursor: grab;
}

.vitrola-pros-sel-list .sel-item:last-child {
  border-bottom: none;
}

.vitrola-pros-sel-list .sel-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vitrola-pros-sel-list .sel-idx {
  display: inline-block;
  min-width: 22px;
  text-align: right;
  margin-right: 8px;
  color: #888;
}

.vitrola-pros-sel-list .sel-actions button {
  border: 1px solid #ccc;
  background: #fff;
  color: #333;
  padding: 2px 6px;
  margin-left: 4px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.vitrola-pros-sel-list .sel-actions button:hover:not(:disabled) {
  background: #f4f4f4;
}

.vitrola-pros-sel-list .sel-actions button:focus {
  background: #f4f4f4;
  text-decoration: none;
}

/* Drag & drop (SortableJS) */
.vitrola-pros-sel-list .sortable-ghost {
  opacity: 0.5;
}

.vitrola-pros-sel-list .sortable-chosen {
  background: #fafafa;
}

.vitrola-pros-sel-list .sel-item:active {
  cursor: grabbing;
}

.vitrola-pros-route-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

/* Esticar botões para preencher o espaço */
.vitrola-pros-route-actions #vitrola-pros-route-order,
.vitrola-pros-route-actions #vitrola-pros-route-opt {
  flex: 1 1 calc(50% - 5px);
}

.vitrola-pros-route-actions #vitrola-pros-open-gmaps {
  flex: 1 1 100%;
  justify-content: center;
  /* centraliza conteúdo do botão */
}

.vitrola-pros-route-info {
  width: 100%;
  color: #555;
  font-size: 14px;
  text-align: center;
}

/* Botão dentro do InfoWindow: "Adicionar à rota" */
.vitrola-pros-add-btn {
  padding: 6px 10px;
  background-color: #c21a26;
  color: #fff;
  border: 1px solid #c21a26;
  /* mantém borda coerente com o estado base */
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  font-family: "Rubik", sans-serif;
}

.vitrola-pros-add-btn:hover {
  background-color: #a50d17;
  border-color: #a50d17;
}

.vitrola-pros-add-btn:focus {
  background-color: #a50d17;
  border-color: #a50d17;
  color: #fff;
  text-decoration: none;
}

.vitrola-pros-add-btn.vitrola-pros-btn-success {
  background-color: #2E7D32 !important;
  /* verde de sucesso */
  border-color: #2E7D32 !important;
}

.vitrola-pros-add-btn.vitrola-pros-btn-success:hover,
.vitrola-pros-add-btn.vitrola-pros-btn-success:focus {
  background-color: #256628 !important;
  border-color: #256628 !important;
}

.vitrola-pros-add-btn.vitrola-pros-btn-remove {
  background-color: #616161 !important;
  /* cinza neutro para removido */
  border-color: #616161 !important;
}

.vitrola-pros-add-btn.vitrola-pros-btn-remove:hover,
.vitrola-pros-add-btn.vitrola-pros-btn-remove:focus {
  background-color: #4f4f4f !important;
  border-color: #4f4f4f !important;
}

/* Botões de rota */
.vitrola-pros-route-actions .btn-primary {
  padding: 8px 12px;
  background-color: #c21a26;
  color: #fff;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  transition: background-color 0.2s, border-color 0.2s;
  font-family: "Rubik", sans-serif;
  border: none;
}

.vitrola-pros-route-actions .btn-primary:hover:not(:disabled) {
  background-color: #a50d17;
}

.vitrola-pros-route-actions .btn-primary:focus {
  background-color: #a50d17;
  color: #fff;
  text-decoration: none;
}

.vitrola-pros-route-actions .btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.vitrola-pros-route-actions .btn-secondary {
  padding: 8px 12px;
  border: 1px solid #ccc;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  transition: background-color 0.2s, border-color 0.2s;
  font-family: "Rubik", sans-serif;
}

.vitrola-pros-route-actions .btn-secondary:hover:not(:disabled) {
  background-color: #f0f0f0;
  border-color: #bbb;
  color: #000;
}

.vitrola-pros-route-actions .btn-secondary:focus {
  background-color: #f0f0f0;
  border-color: #bbb;
  color: #000;
  text-decoration: none;
}

.vitrola-pros-route-actions .btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Spinner simples para feedback de carregamento em botões */
@keyframes vitrola-pros-spin {
  to {
    transform: rotate(360deg);
  }
}

.vitrola-pros-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: vitrola-pros-spin .8s linear infinite;
  vertical-align: text-bottom;
}

/* Botão "Abrir no Google Maps" em verde com ícone */
#vitrola-pros-open-gmaps {
  background-color: #34A853;
  /* Google Green */
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}

#vitrola-pros-open-gmaps:hover:not(:disabled) {
  background-color: #2c8f45;
}

#vitrola-pros-open-gmaps:focus {
  background-color: #2c8f45;
  color: #fff;
  text-decoration: none;
}

#vitrola-pros-open-gmaps .icon-gmaps {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  fill: currentColor;
}

.vitrola-pros-filtros .filtro-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 16px;
  color: #333;
  cursor: pointer;
  font-weight: 500;
}

.vitrola-pros-filtros .filtro-item .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.vitrola-pros-filtros .filtro-item input[type="checkbox"] {
  margin: 0;
}

/* Botão Gerar Word - Azul Microsoft */
#vitrola-pros-gen-word {
  background-color: #2B579A;
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  flex: 1 1 100%;
  justify-content: center;
}

#vitrola-pros-gen-word:hover:not(:disabled) {
  background-color: #1e3f6f;
}

#vitrola-pros-gen-word:focus {
  background-color: #1e3f6f;
  color: #fff;
  text-decoration: none;
}

#vitrola-pros-gen-word:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#vitrola-pros-gen-word .icon-word {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

/* ===== RESPONSIVO ===== */

@media (max-width: 768px) {
  .vitrola-prospeccao-wrap {
    flex-direction: column;
  }

  .vitrola-prospeccao-sidebar {
    max-width: 100%;
  }

  #vitrola-pros-map {
    height: 500px;
    min-height: 500px;
  }
}

@media (max-width: 480px) {

  #vitrola-pros-map {
    height: 400px;
    min-height: 400px;
  }

  .vitrola-pros-form input[type="text"] {
    font-size: 16px;
  }
}

.gm-style .gm-style-iw {
  font-size: 14px;
}