@charset "UTF-8";
portselector {
  display: block;
  margin-bottom: 15px;
  /* Estilos para los botones de puertos */
}
portselector .d_container {
  width: 100%;
  min-height: 46px; /* Altura mínima, puede crecer si los botones hacen wrap */
  height: auto; /* Altura automática */
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea en móviles */
  justify-content: space-between;
  border-radius: 8px;
  background-color: #3E3D40;
  border: 1px solid #444444;
  padding: 10px 15px;
  align-items: center;
  transition: border 0.3s ease;
  gap: 10px; /* Espacio entre el lado izquierdo y derecho si hacen wrap */
}
portselector .d_container.not_valid {
  border: 1px solid #814141;
}
portselector .d_side {
  display: flex;
  gap: 15px;
  align-items: center;
}
portselector .d_side.button-group {
  gap: 5px; /* Espacio menor entre los botones numéricos */
  flex-wrap: wrap; /* Permite que los botones se ajusten */
}
portselector .d_title {
  margin: 0px;
  font-size: 15px;
  transition: color 0.3s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap; /* Evita que el título se parta */
}
portselector .d_title.not_valid {
  color: #A65D5D;
}
portselector .btn-port {
  width: 34px;
  height: 34px;
  padding: 6px 0; /* Ajusta el padding para centrar el número */
  font-size: 14px;
  text-align: center;
  border-radius: 5px;
  background-color: #302F32;
  border: 1px solid #444444;
  color: #FFFFFF;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
portselector .btn-port:hover {
  background-color: #4A494C; /* Un gris un poco más claro al pasar el ratón */
  border-color: #555555;
  color: #FFFFFF;
}
portselector .btn-port.active {
  background-color: #00aaae; /* Color de "seleccionado" */
  border-color: #00aaae;
  color: #FFFFFF;
  font-weight: bold;
}
portselector .btn-port:focus, portselector .btn-port:active:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 170, 174, 0.5); /* Sombra de foco similar al color activo */
}/*# sourceMappingURL=port-selector.css.map */