/* ==================== INPUT GROUP TELEFÓNICO UNIFICADO ==================== */
.bf-phone-input-group {
  display: flex;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: #ffffff;
  transition: var(--transition-base);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.bf-phone-input-group:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(98, 37, 126, 0.12), var(--shadow-sm);
}

.bf-phone-code {
  flex: 0 0 200px; /* Reducido de 140px a 100px */
  border: none;
  border-right: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 14px 28px 14px 12px; /* Menos padding a la derecha */
  font-size: 14px; /* Texto un poco más pequeño */
  font-weight: 700;
  color: var(--primary);
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2362257e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center; /* Flecha más cerca del borde */
  background-size: 14px 14px;
  cursor: pointer;
  min-width: 0;
}

/* Opciones más compactas en el dropdown */
.bf-phone-code option {
  font-size: 13px;
  padding: 4px 8px;
}

.bf-phone-number {
  flex: 1;
  border: none;
  padding: 14px 16px;
  font-size: 15px;
  background: transparent;
  outline: none;
  min-width: 0;
}

.bf-phone-number::placeholder {
  color: var(--text-light);
}

/* Estados de validación unificados */
.was-validated .bf-phone-input-group:has(.bf-phone-code:invalid),
.was-validated .bf-phone-input-group:has(.bf-phone-number:invalid) {
  border-color: var(--danger);
}

.was-validated .bf-phone-input-group:has(.bf-phone-code:valid):has(.bf-phone-number:valid) {
  border-color: var(--success);
}

/* Responsive */
@media (max-width: 576px) {
  .bf-phone-code {
    flex: 0 0 90px; /* Aún más compacto en móvil */
    padding: 12px 24px 12px 10px;
    font-size: 13px;
    background-position: right 8px center;
  }
  
  .bf-phone-number {
    padding: 12px 14px;
    font-size: 14px;
  }
}